Gå till innehållet

Hur man skapar en sökresultatsida med Elementor

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

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.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

skapa en sökresultatsida

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.

Hur man skapar en sökresultatsida med Elementor

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.

skapa en sökresultatsida

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.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

  • 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.

skapa en sökresultatsida

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 en anpassad sidhuvud, anpassad sidfot, anpassad 404-sida och andra delar av ditt 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 optimera greppet på din blogg eller webbplats.

Vi erbjuder dig här några premium WordPress-plugins som hjälper dig att göra det.

1. WooCommerce Autosvarare

WooCommerce Autoresponder är ett WordPress-plugin som låter dig prenumerera dina kunder på din autosvarare. Detta WordPress-plugin visar också en prenumerationsruta för nyhetsbrev som enkelt kan integreras WooCommerce till autosvararen.

Woocommerce autosvarare

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 | demowebbhotell

2. WordPress Kommentar Rating Plugin

Det handlar om ett utvärderingssystem för kommentarer. Det låter dig låta användare betygsätta olika kommentarer. De måste bara klicka på förhandsgranskningsknappen och rulla ner till kommentarsavsnittet för att se premium WordPress-plugin i aktion.Hur Wordpress Plugin Rating

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.

Framstegskarta wordpress plugin wordpress

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.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

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 nerdemo | 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.

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

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
0 aktier
del
tweet
Enregistrer