Vill du lära dig hur man bygger en sökresultatsida med Elementor?
Oavsett om du har en personlig blogg, en e-handelswebbplats eller en stor webbplats med flera användare, är det viktigt att lägga till en sökfunktion. Det gör det lättare för dina besökare att hitta innehållet de letar efter, snarare än att klicka här och där i navigeringsmenyn.
I WordPress styrs utseendet (layouten) på sökresultatsidan av en mall på temat du använder (filen search.php i de flesta fall). Om standardlayouten inte passar dig kan du skapa en anpassad mall för att ersätta den.
Om du inte har PHP-färdigheter kan du använda Elementor (eller andra plugin-program för sidbyggare som har temabyggare som Divi Builder et WPBakery) för att skapa en anpassad sidmall för sökresultat i WordPress.
För att kunna skapa en mall för sökresultatsidan med Elementor måste du använda proversionen av Elementor eftersom Theme Builder-funktionen endast är tillgänglig i Elementor Pro.
Hur man skapar en sökresultatsida med Elementor
När du skapar en anpassad sökresultatsida med Elementor kan du lägga till valfritt element när du skapar en sida. Det finns över 90 objekt (kallade widgets) som du kan lägga till.
Läs också: Hur man hanterar formulärinlämningar i Elementor
Elementor själv erbjuder förbyggda sidmallar för sökresultat för att effektivisera ditt arbetsflöde. Eller om du har ditt eget designkoncept kan du också skapa sökresultatsidan själv.
I den här artikeln visar vi dig hur du bygger en mall för sökresultatsidan från grunden. Här är skärmdumpen av sökresultatsidan som vi vill skapa.
Vi kommer att använda två avsnitt för att skapa ovanstående sökresultatsida:
- Avsnitt 1: Att placera rubriken (beskrivningen av sökresultaten)
- Sektion 2: Att placera sökformuläret och sökresultaten
Innan du börjar, se till att du har uppgraderat din version av Elementor till pro-versionen om du inte har gjort det. När du är redo, gå till Mallar -> Temabyggare på din WordPress dashboard.
Se även: Hur man använder Elementor: den kompletta guiden
Klicka på knappen Add On för att skapa en ny mall (eller så kan du klicka på knappen Prova det nu för att prova Elementors temabygare).
Ställ in modelltyp på Sökresultat, ge din modell ett namn och klicka på knappen SKAPA EN MODELL för att börja skapa det senare.
Eftersom vi vill skapa sökresultatsidan från grunden kan du bara stänga mallbiblioteksfönstret som visas.
Läs också: Hur man lägger till punkteffekt i en kolumn i Elementor
Innan du börjar lägga till en widget kan du först ställa in sidlayouten. För att göra det, klicka på kugghjulsikonen på nedre sidan av inställningspanelen (panel på vänster sida). Du kan ställa in layouten i alternativet Sidlayout från blocket Allmänna inställningar under fliken Inställningar.
Avsnitt 1
Som visas ovan kommer vi att använda detta avsnitt för att placera rubriken för att visa beskrivningen av sökresultatsidan. Klicka bara på plusknappen i Elementors redigeringsruta för att lägga till ett nytt avsnitt. Du kan välja enstaka kolumnstruktur. När avsnittet har lagts till drar du widgeten Titel till den.
Gå till vänster panel. I blocket Titel under fliken Innehåll, klicka på databasikonen i fältet Titel och välj Arkiv titel.
Du kan sedan komma åt fliken Stil för att anpassa rubriken. Du kan definiera element som textfärg, typografi (teckensnittsfamilj, teckensnittsstorlek, typsnitt etc.). Du kan också använda blandningsläge och textskugga om du vill.
Om du vill ställa in bakgrunden för avsnittet, lägga till en separator eller ställa in marginalen kan du klicka på sektionshandtaget för att växla till redigeringsläge.
Avsnitt 2
Klicka på knappen Plus för att lägga till ett nytt avsnitt som du gjorde i avsnitt 1 ovan. Du kan också välja enstaka kolumnstruktur. När avsnittet har lagts till drar du widgeten Sökformulär.
Du kan sedan komma åt inställningspanelen för att göra inställningarna. I blocket Sökformulär sous fliken Innehåll, du kan definiera Skin, platshållaren, ikonen, ikonens storlek, etc ...
För att anpassa formuläret kan du öppna fliken Stil. Det finns två parameterblock som du kan öppna: Ingång et Knappen. Från blocket Inmatning, Du kan ställa in typografi, textfärg, bakgrundsfärg, kantfärg, kantstorlek och kantradie.
Från blocket Knapp, Du kan ställa in knapptextfärg, bakgrundsfärg, typografi, ikonstorlek och knappbredd.
När utformningen av widgeten Sökformulär är på plats kan du lägga till widgeten Arkiveringsinlägg. Du kan placera den direkt under widgeten Sökformulär.
När den här widgeten är på plats navigerar du till vänster panel. Under blocket Layout, flik Innehåll, du kan definiera skalet, antalet kolumner, bildens position, extraktets längd, metadata osv ...
I kvarteret personsökning, Du kan ställa in sidtyp, sidgräns och justering.
I kvarteret Avancerad, Du kan ställa in att meddelandet ska visas när WordPress inte hittar sökfrågan.
En gång grundinställningarna för fliken Innehåll klar kan du växla till fliken Stil för att anpassa utseendet på widgeten Arkiveringsinlägg. Det finns 6 block som du kan öppna på den här fliken.
- Layout
Du kan öppna detta block för att definiera inriktningen av inläggens textinnehåll (inläggstitel och meta). Du kan också definiera klyftan mellan kolumner och rader.
- Bild
Du kan öppna detta block för att ställa in kantradien för inläggsminiatyrerna. Du kan också ställa in avståndet och tillämpa CSS-filter.
- Innehåll
Du kan öppna detta block för att ställa in typografi, textfärg och avstånd för textinnehåll för inlägg.
- Paginering
Om du aktiverar pagination kan du öppna detta block för att anpassa pagination. Du kan ställa in saker som typografi, textfärg och mellanrum mellan siffror.
- Ingenting hittades meddelande
Du kan öppna detta block för att anpassa felmeddelandet när WordPress inte kan hitta innehållet baserat på den angivna sökfrågan. Du kan definiera typografi och färg på texten i detta block.
Du kan lägga till fler widgets om du behöver dem. När du är klar med att redigera sidan kan du klicka på knappen PUBLICERA ELLER UPPDATERA längst ner på inställningspanelen.
Om du uppmanas att lägga till ett visningsvillkor, lägg bara till ett genom att klicka på knappen LÄGG TILL I VILLKOR. Eftersom du skapar en sökresultatsida, ställ in visningsvillkoret på sökresultat. Klicka på knappen SPARA & STÄNG för att tillämpa ändringen.
Et voila !
Varje WordPress-baserad webbplats har en unik sökresultatsida, beroende på vilket tema som används av webbplatsen. Om layouten på sökresultatsidan som erbjuds av temat du använder inte ser tilltalande ut för dig kan du anpassa den.
Om du inte har PHP-kunskaper kan du använda Elementor för att skapa en anpassad sökresultatsida på din WordPress-webbplats. Allt är dra och släpp. Inget behov av att manipulera PHP-kod.
Dessutom kan du också använda Elementor för att skapa anpassad sidhuvud, anpassad sidfot, anpassad 404-sida och andra delar av din Wordpress tema.
Skaffa Elementor Pro nu!
Upptäck också några premium WordPress-plugins
Du kan använda andra Wordpress plugins för att ge ett modernt utseende och för att optimera hanteringen av din blogg eller hemsida.
Vi erbjuder dig här några premium WordPress-plugins som hjälper dig att göra det.
1. WooCommerce Autosvarare
WooCommerce Autoresponder är en Wordpress plugin som gör att du kan prenumerera dina kunder på ditt autosvar. Detta Wordpress plugin visar också en prenumerationsruta för nyhetsbrev för att enkelt integrera WooCommerce till autosvararen.
Som funktioner hittar du bland annat: fullständig integration med WooCommerce, stöd för 9 autosvar, ingen kodkunskap krävs, enkel att installera och mycket mer.
Läs också: MailChimp handledning på franska: den kompletta guiden för att skapa ett nyhetsbrev
Ladda ner | demo | webbhotell
2. WordPress Kommentar Rating Plugin
Det handlar om ett utvärderingssystem för kommentarer. Det låter dig låta användare betygsätta de olika kommentarerna. De behöver bara klicka på förhandsgranskningsknappen och rulla ner till kommentarsektionen för att se Wordpress plugin premie i aktion.
I dess funktioner hittar vi främst: användarvänlighet, stöd för canpassade ikonverktyg, ranking kommentarer enligt anmärkningarna, anpassningen av tgå ikoner, anpassat CSS-stöd, cIP-kryptering (för europeiska användare), möjligheten att översätta detta plugin och mer.
Ladda ner | demo | webbhotell
3. Progress Karta
Progress Map är ett WordPress-plugin utformat för geolokalisering. Syftet är att hjälpa användare med webbplatser när det gäller hotellförteckningar, fastighetsannonser, listor över restauranger, jobberbjudanden, lagra meddelanden och mer ... för att organisera sina platser på Google Map och navigera enkelt genom kartan med en karusell.
Med andra ord, med detta plugin kommer dina platser att publiceras både på Google Map (markörer) och på en karusell. Karusellen är kopplad till kartan, vilket innebär att objektet som är valt i karusellen kommer att rikta in sig på kartan och vice versa.
Ta en titt på Hur du visar platsen för en medlem av din WP-community på en Google Map
För att lägga till dina platser har Progress Map ett formulärutrymme på sidan "Lägg till nytt objekt" så att du enkelt kan lägga till dina positionskoordinater.
Ladda ner | demo | webbhotell
Andra rekommenderade resurser
Vi inbjuder dig också att konsultera resurserna nedan för att gå vidare i greppet och kontrollen av din webbplats och blogg.
- 9 WordPress-plugins för att skicka e-post via SMTP
- 7 WordPress-plugins för att bädda in Google Maps på din webbplats
- Hur man sätter upp ett nätverk med flera platser på WordPress
- Hur man lägger till metasektioner på inlägg och sidor
Slutsats
Här är ! Det är det för denna handledning. Vi hoppas att det visar hur du skapar en sökresultatsida med Elementor. Vi skulle vilja höra dina tankar om ämnet i kommentaravsnittet.
Du kommer dock också att kunna konsultera vår medel, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
