[Ad_1]

Uten et søkefelt vil navigasjonen på nettstedet ditt lide. Du har kanskje den mest robuste nettleseropplevelsen på Internett, men hvis brukerne dine ikke kan søke etter akkurat det de leter etter, risikerer du (og sannsynligvis) å miste forretninger. Denne opplæringen vil veilede deg i å legge til en søkeboks i Divi -sekundærmenyen, slik at brukerne dine uansett tilfelle alltid vil være noen få klikk unna alt de trenger.

Oversikt over Divi -søkeboksen

kontor

skrivebordsversjon av divi-søkeboksen

Mobil

mobilversjon av divis søkeboks

Last ned og / eller endre den globale overskriften

I denne artikkelen kommer vi til å bruke gratis topptekst / bunntekst som følger med pakken vår for levering av dagligvarer. Du kan ganske enkelt laste ned .Zip *: fransk arkiver og trekk ut det nødvendige .json filen på datamaskinen din.

json -filen

Deretter går du til WordPress -dashbordet og navigerer til Divi - Tema generator. Derfra må du klikke på pil opp og ned for å åpne portabilitetsalternativene.

tema generator for divi søkeboks

I den nye modalen klikker du på import kategorien og finn .json filen du lastet ned. Velg når du er klar Importer generatormodeller fra Divi-tema for å starte nedlastingen.

importere filer

På dette tidspunktet er du klar til å gå inn på Global topptekst del av Nettsidemal som standard. Import fra .json filen burde automatisk ha brukt freebien som overordnet nettstedhodet.

global overskrift

Legg til et søkefelt i den sekundære menylinjen

Ved å bruke Divi Visual Builder, bør du se noe lignende som dette som Global Header.

global header editor

Det første vi vil gjøre er å lage plass til søkeboksen. Vi vil sørge for at søkefeltet er lett tilgjengelig for alle. Besøkende, så vi legger den til i sekundærmenyen (over Hjem / Kontakt linje).

Til å begynne med legger vi til søkeboksen ved hjelp av Divi søkemodul i den tredje kolonnen i den første raden.

søkemodul i den tredje kolonnen

Plassholdertekst er viktig for søkefelt, så når modulen er på plass, gå til Parametere og sett din Reservert område tekst til noe som minner brukeren om hva han skal se etter. vi putter Finn varer! som en plassholder, slik at brukeren vet at dette er det de kan søke etter siden vi bruker layoutpakken for levering av dagligvarer.

plassholdertekst i divi -søkefeltet

Søkefeltet i den tredje kolonnen er ikke bra. Så vi ønsker å gå inn på Forskningsmodul innstillinger og gå til Design tunge. Finn det Transformator alternativer, og gå til Oversette kategorien (den andre). Du kan deretter dra søkemodulen på plass, og Divi håndterer all CSS og avstanden for den.

Vi bruker også% for denne verdien slik at den forblir relativ uavhengig av visningsporten på skrivebordet. Ved hjelp av piksler kan forvride noen forskjellige oppløsninger.

transformasjonsalternativer

Divi Transformer Oversett alternativene må også justeres for mobilen. Hvis du ikke gjør det, er det det samme. Så sørg for å gå til reaktivitet innstillinger og angi plasseringen av søkemodulen i de sekundære menyalternativene. Vi justerte nettopp den vertikale plasseringen av mobilen fordi plassering i den tredje kolonnen i raden automatisk viser den nederst i radelementene.

transformere for mobil

Styling av Divi -søkemodulen

Selv om du ikke har mange stylingsalternativer for et søkefelt, har du noen få. Det vil si fargen på teksten og på selve feltet, både når den er inaktiv og når en bruker har klikket på den. (Og mellomrom og dimensjonering og andre standard Divi -designalternativer, selvfølgelig.)

For å finne fargevalgene, gå til Champ -menyen i Design tunge. Når den er utvidet, har du muligheten til å endre fargen på teksten til plassholderen, bakgrunnsfargen på feltet og fargen på teksten i feltet (tekst som er angitt av brukeren, dvs. å si). I tillegg å konsentrere varianter er når brukeren spesifikt interagerer med søkeboksen.

søkefeltstil

Klikk på Lagre -knappen når du liker dette.

Sjekk synlighetsinnstillingene

Noen av våre gratis layout- og topptekster har forskjellige visningsmuligheter for stasjonære og mobile enheter. Hvis du ser nedtonede / nedtonede mods i den visuelle byggherren, indikerer det at modet er deaktivert på noen enheter.

I overskriften for levering av dagligvarer er de to siste kolonnene deaktivert på mobil. Vi ønsker å gå inn på Linjeinnstillinger og klikk på innstillingene for kolonnene du vil vise på mobilen. I dette tilfellet er det den tredje.

linjealternativer

Gå deretter til fremgang tunge og naviger til synlighet alternativ. Sørg for at alle alternativene under deaktivere omtrent ukontrollert for kolonnen som inneholder søkefeltet. Klikk på Lagre -knappen (grønn flått), og modulene skal vises i farger og ikke lenger misfarges.

søkefelt

Når du har sørget for at alt er synlig, er du klar til å sette denne tingen online!

Lagre arbeidet ditt

Sørg for at du klikker på grønn lagringsknapp nederst til høyre på skjermen.

lagre endringene

Du er nå klar til å lukke den visuelle generatoren med X i øvre høyre hjørne. På den neste skjermen vil du sørge for at Divi Theme Builder har lagret alle alternativene dine. Hvis han sier Lagre endringer, Klikk på knappen. Hvis han sier Alle endringer lagret, så er søkefeltet ditt allerede tilgjengelig i Divi -sekundærmenyen.

divi søkeboks lagre endringer

Endelige resultater

Alt som gjenstår er å beundre arbeidet ditt på nettstedet ditt!

kontor

stasjonær versjon

Mobil

mobilversjon

Konklusjon med Divi -søkefeltet

Søkebokser er en grunnleggende del av en god brukeropplevelse for nettstedet ditt. Hvis du ønsker å yte best mulig service til din Besøkende, å sørge for at innholdet ditt er søkbart bør være en av dine toppprioriteringer. Jeg håper du kan bruke denne raske og enkle metoden og bruke den på Divi-siden din snart!



[Ad_2]

Kilde lenke