[Ad_1]

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

skrivbordsversionen av divi-sökrutan

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 byggmodeller från Divi-tema för att starta nedladdningen.

importera filer

Vid denna tidpunkt är du redo att gå in i Global rubrik del av Webbplats mall som standard. 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 utrymme för sökfältet. Vi vill se till att sökfältet är lättillgängligt för alla. besökare, så vi lägger till den i den sekundära menyn (ovanför Hem / Kontakt linje).

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 inställningar och ställ in sökmodulens plats i de sekundära menyalternativen. Vi justerade just mobilens vertikala placering eftersom om du placerar den i den tredje kolumnen i raden visas den automatiskt längst ned 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.

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 bästa möjliga service till din besökare, att se till att ditt innehåll är sökbart bör vara en av dina högsta prioriteringar. Jag hoppas att du kan använda denna snabba och enkla metod och tillämpa den på din Divi-webbplats snart!



[Ad_2]

Källlänk