Gå till innehållet

Så här lägger du till ett sökfält i den sekundära menyn Divi

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]

Utan ett sökfält kommer din webbplatsnavigering att lida. Du kan ha den mest robusta surfupplevelsen på Internet, men om dina användare inte kan söka efter exakt vad de letar efter riskerar du (och förmodligen) att tappa affärer. Denna handledning hjälper dig att lägga till en sökruta i Divi -sekundärmenyn så att dina användare alltid kommer att vara några klick bort från allt de behöver.

Översikt över Divi -sökrutan

office

Mobil

mobilversion av divis sökruta

Ladda ner och / eller ändra den globala rubriken

I den här artikeln kommer vi att använda det kostnadsfria sidhuvudet / sidfoten som följer med vårt paket för leverans av matvaruleveranser. Du kan helt enkelt ladda ner .Zip *: franska arkivera och extrahera det nödvändiga .json filen på din dator.

json -fil

Gå sedan till din WordPress -instrumentpanel och navigera till Divi - Temagenerator. Därifrån måste du klicka på upp och ner pilar ikon för att öppna portabilitetsalternativen.

temagenerator för divis sökruta

I den nya modalen klickar du på import fliken och hitta .json fil du laddade ner. När du är klar väljer du Importera Divi temagenerator modeller för att starta nedladdningen.

importera filer

Vid denna tidpunkt är du redo att gå in i Global rubrik del av Standardwebbplatsmall. Importera från .json filen borde ha använt freebie automatiskt som den övergripande webbplatsrubriken.

globalt sidhuvud

Lägg till ett sökfält i den sekundära menyraden

Med Divi Visual Builder bör du se något liknande detta som det globala huvudet.

global huvudredigerare

Det första vi vill göra är att skapa ett utrymme för sökrutan. Vi vill se till att sökrutan är lättillgänglig för alla besökare, så vi lägger till den i den sekundära menyn (ovanför Hem / Kontakt linje).

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]

För att börja lägger vi till sökrutan med Divi -sökmodul i den tredje kolumnen i den första raden.

sökmodul i den tredje kolumnen

Platshållartext är viktigt för sökfält, så när din modul är på plats, gå till Parametrar och ställ in din Reserverat område text till något som påminner användaren om vad han ska leta efter. Vi lägger Hitta föremål! som en platshållare så att användaren vet att det här är vad de kan söka efter eftersom vi använder layoutpaketet för leverans av livsmedel.

platshållartext i divis sökruta

Sökrutan i den tredje kolumnen är inte bra. Så vi vill gå in i Forskningsmodul inställningar och gå till Design tunga. Hitta det Transformator alternativ, gå sedan till översätta fliken (den andra). Du kan sedan dra sökmodulen på plats, och Divi hanterar all CSS och avstånd för den.

Vi använder också% för detta värde så att det förblir relativt oavsett visningsporten på skrivbordet. Använder sig av pixlar kan snedvrida vissa olika upplösningar.

transformationsalternativ

Divi Transformator Översätt alternativen måste också justeras för mobilen. Om du inte gör det är det samma sak. Så se till att gå till Reaktivitet parametrar och definiera sökmodulens placering i alternativen i den sekundära menyn. Vi justerade precis mobilens vertikala plats eftersom den placeras i den tredje kolumnen i raden automatiskt visar den längst ner på radobjekten.

transformera för mobilen

Styling av Divi -sökmodul

Även om du inte har många stylingsalternativ för en sökruta, har du några. Nämligen texten och själva fältets färg, både när den är inaktiv och när en användare har klickat på den. (Och avstånd och storlek och andra vanliga Divi -designalternativ, förstås.)

För att hitta färgalternativen, gå till Champ -menyn i Design tunga. Efter utvidgningen har du möjlighet att ändra färgen på platshållarens text, fältets bakgrundsfärg och färgen på text i fältet (text som skrivs in av användaren, det vill säga säga). Dessutom har att koncentrera variationer är när användaren specifikt interagerar med sökrutan.

sökrutans stil

Klicka på Spara -knappen när detta är utformat efter eget tycke.

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]

Kontrollera synlighetsinställningarna

Några av våra gratis layout- och rubrikpaket har olika visningsalternativ för stationära och mobila enheter. Om du ser nedtonade / nedtonade mods i den visuella generatorn, indikerar det att modet är inaktiverat på vissa enheter.

För livsmedelsleveransrubriken inaktiveras de två sista kolumnerna på mobilen. Vi vill gå in i Linjeinställningar och klicka på inställningarna för de kolumner du vill visa på mobilen. I det här fallet är det den tredje.

radalternativ

Gå sedan till framsteg tunga och navigera till synlighet alternativ. Se till att alla alternativ under deaktivera sommes okontrollerad för kolumnen som innehåller ditt sökfält. Klicka på knappen Spara (grön fästing), och modulerna ska visas i färg och inte längre missfärgas.

sökfält

När du har säkerställt att allt är synligt är du redo att lägga det här online!

Spara ditt arbete

Se till att klicka på grön spara -knapp längst ned till höger på skärmen.

spara dina ändringar

Du är nu redo att stänga den visuella generatorn med hjälp av X i det övre högra hörnet. På nästa skärm vill du se till att Divi Theme Builder har sparat alla dina alternativ. Om han säger Spara ändringar, Klicka på knappen. Om han säger Alla ändringar sparade, då finns ditt sökfält redan i din sekundära Divi -meny.

divi sökruta spara ändringar

Slutresultat

Allt som återstår att göra är att beundra ditt arbete på din webbplats!

office

skrivbordsversion

Mobil

mobilversion

Slutsats med Divi -sökfältet

Sökrutor är en grundläggande del av en bra användarupplevelse för din webbplats. Om du vill ge dina besökare bästa möjliga service bör en av dina högsta prioriteringar vara att se till att ditt innehåll är sökbart. Jag hoppas att du kan använda den här snabba och enkla metoden och tillämpa den på din Divi -webbplats snart!



Källlänk

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