Sådan tilføjes et søgefelt til Divi -sekundærmenuen

Uden et søgefelt vil din webstedsnavigation lide. Du har muligvis den mest robuste browseroplevelse på Internettet, men hvis dine brugere ikke kan søge efter præcis det, de leder efter, risikerer du (og sandsynligvis) at miste forretninger. Denne vejledning guider dig til at tilføje et søgefelt til den sekundære Divi -menu, så dine brugere altid vil være et par klik væk fra alt, hvad de har brug for.

Oversigt over Divi -søgefeltet

kontor

Mobil

Download og / eller rediger det globale overskrift

Til denne artikel vil vi bruge det gratis sidehoved / sidefod, der følger med vores layoutpakke til levering af dagligvarer. Du kan simpelthen downloade .Zip *: fransk arkivere og udtrække det nødvendige .json fil på din computer.

Derefter går du til dit WordPress dashboard og navigerer til Divi - Tema generator. Derfra skal du klikke på pil op og ned for at åbne transportmulighederne.

I det nye modal skal du klikke på import fane og find .json fil, du downloadede. Når du er klar, skal du vælge Importer byggemodeller fra Divi-tema for at starte overførslen.

På dette tidspunkt er du klar til at indtaste Global header en del af Hjemmeside skabelon som standard. Import fra .json filen skulle automatisk have anvendt freebie som det overordnede webstedets overskrift.

Tilføj et søgefelt til den sekundære menulinje

Ved hjælp af Divi Visual Builder bør du se noget lignende dette som det globale overskrift.

Det første, vi vil gøre, er at skabe plads til søgefeltet. Vi vil gerne sikre os, at søgefeltet er let tilgængeligt for alle. besøgende, så vi tilføjer den til den sekundære menu (over Hjem / Kontakt linje).

For at starte tilføjer vi søgefeltet ved hjælp af Divi -søgemodul i tredje kolonne i den første række.

Pladsholdertekst er vigtig for søgefelter, så når dit modul er på plads, skal du gå til Parametre og indstil din Reserveret område tekst til noget, der minder brugeren om, hvad han skal kigge efter. vi putter Find varer! som en pladsholder, så brugeren ved, at det er det, de kan søge efter, da vi bruger layoutpakken til indkøb af dagligvarer.

Søgefeltet i den tredje kolonne er ikke godt. Så vi vil ind i Søg Modul indstillinger og gå til Design tunge. Find det Transformer muligheder, og gå derefter til oversætte fanen (den anden). Du kan derefter trække søgemodulet på plads, og Divi håndterer al CSS og afstand til det.

Vi bruger også% til denne værdi, så den forbliver relativ uanset visningsporten på skrivebordet. Ved brug af pixel kan forvrænge nogle forskellige opløsninger.

Divi Transformer Oversæt mulighederne skal også justeres til mobilen. Hvis du ikke gør det, er det det samme. Så sørg for at gå til Reaktivitet indstillinger og indstil placeringen af ​​søgemodulet i de sekundære menuindstillinger. Vi har lige justeret den lodrette placering af mobilen, fordi placeringen af ​​den i den tredje kolonne i rækken automatisk viser den nederst i rækkeelementerne.

Styling af Divi -søgemodulet

Selvom du ikke har mange stylingsmuligheder til et søgefelt, har du dog et par stykker. Det vil sige farven på teksten og selve feltet, både når den er inaktiv, og når en bruger har klikket på den. (Og afstand og størrelse og andre standard Divi -designmuligheder, selvfølgelig.)

For at finde farveindstillingerne skal du gå til Champ menu i Design tunge. Når den er udvidet, har du mulighed for at ændre farven på pladsholderteksten, feltets baggrundsfarve og farven på feltteksten (tekst indtastet af brugeren, dvs. at sige). Derudover den at koncentrere variationer er, når brugeren specifikt interagerer med søgefeltet.

Når dette er stylet efter din smag, skal du klikke på knappen Gem.

Kontroller synlighedsindstillingerne

Nogle af vores gratis layout- og headerpakker har forskellige visningsmuligheder til stationære og mobile enheder. Hvis du ser nedtonede / nedtonede mods i den visuelle generator, angiver det, at modet er deaktiveret på nogle enheder.

For overskriften til levering af dagligvarer er de to sidste kolonner deaktiveret på mobilen. Vi vil ind i Linieindstillinger og klik på indstillingerne for de kolonner, du vil vise på mobilen. I dette tilfælde er det den tredje.

Gå derefter til fremskridt tunge og naviger til synlighed mulighed. Her skal du sørge for, at alle mulighederne under deaktivere cirka ukontrolleret for den kolonne, der indeholder dit søgefelt. Klik på knappen Gem (grønt kryds), og modulerne skal vises i farver og ikke længere misfarves.

Når du har sørget for, at alt er synligt, er du klar til at sætte denne ting online!

Gem dit arbejde

Sørg for at klikke på grøn gem -knap nederst til højre på skærmen.

Du er nu klar til at lukke den visuelle generator ved hjælp af X i øverste højre hjørne. På den næste skærm vil du sikre dig, at Divi Theme Builder har gemt alle dine muligheder. Hvis han siger Gem ændringer, Klik på knappen. Hvis han siger Alle ændringer blev gemt, så er dit søgefelt allerede live i din Divi sekundære menu.

Endelige resultater

Det eneste, der er tilbage at gøre, er at beundre dit arbejde på dit websted!

kontor

Mobil

Afslutning med Divi -søgefeltet

Søgefelter er en grundlæggende del af en god brugeroplevelse for dit websted. Hvis du ønsker at yde den bedst mulige service til din besøgende, at sikre, at dit indhold er søgbart, bør være en af ​​dine topprioriteter. Jeg håber, du kan bruge denne hurtige og nemme metode og anvende den på din Divi-side snart!