[Ad_1]

Fără un câmp de căutare, navigarea site-ului dvs. va avea de suferit. Este posibil să aveți cea mai robustă experiență de navigare pe Internet, dar dacă utilizatorii dvs. nu pot căuta exact ceea ce caută, riscați (și probabil că veți pierde afacerea). Acest tutorial vă va ghida în adăugarea unei casete de căutare în meniul secundar Divi, astfel încât, indiferent de caz, utilizatorii dvs. vor fi întotdeauna la câteva clicuri distanță de tot ceea ce au nevoie.

Prezentare generală a casetei de căutare Divi

Birou

versiunea desktop a casetei de căutare divi

Mobil

versiunea mobilă a casetei de căutare a lui divi

Descărcați și / sau modificați antetul global

Pentru acest articol, vom folosi antetul / subsolul gratuit care vine împreună cu pachetul nostru de distribuire a produselor alimentare. Puteți descărca pur și simplu fișierul .Zip *: franceză arhivați și extrageți cele necesare .json fișier pe computer.

fișier json

După aceea, accesați tabloul de bord WordPress și navigați la Divi - Generator de teme. De acolo trebuie să faceți clic pe pictograma săgeți în sus și în jos pentru a deschide opțiunile de portabilitate.

generator de teme pentru caseta de căutare divi

În noul mod, faceți clic pe import filă și găsiți fișierul .json fișierul pe care l-ați descărcat. Când sunteți gata, selectați Importați modele de constructor din Divi tema pentru a începe descărcarea.

import fișiere

În acest moment sunteți gata să intrați în Antet global parte a Șablon de site în mod implicit. Importat din .json fișierul ar fi trebuit să aplice automat freebie-ul ca antet general al site-ului.

antet global

Adăugați un câmp de căutare în bara de meniu secundară

Folosind Divi Visual Builder, ar trebui să vedeți ceva similar cu acest titlu Global Header.

editor de antet global

Primul lucru pe care vrem să-l facem este să creăm spațiu pentru caseta de căutare. Dorim să ne asigurăm că câmpul de căutare este ușor accesibil pentru toată lumea. vizitatori, așa că îl vom adăuga în meniul secundar (mai sus Acasă / Contact linia).

Pentru început, vom adăuga caseta de căutare folosind Modul de căutare Divi în a treia coloană a primului rând.

modul de căutare din a treia coloană

Textul substituent este important pentru câmpurile de căutare, așa că, atunci când modulul dvs. este la locul său, accesați Parametrii și setează-ți Zona rezervată trimite text către ceva care să-i amintească utilizatorului ce trebuie să caute. am pus Găsiți articole! ca substituent, astfel încât utilizatorul să știe că acesta poate căuta, deoarece utilizăm pachetul de aspect pentru livrarea produselor alimentare.

text substituent în caseta de căutare divi

Caseta de căutare aflată în a treia coloană nu este bună. Deci vrem să intrăm în Modul de cercetare setări și accesați Proiecta limbă. Gaseste-l Transformator opțiuni, apoi accesați Traduceți fila (a doua). Apoi puteți trage modulul de căutare în poziție, iar Divi va gestiona toate CSS-urile și spațiul pentru acesta.

De asemenea, folosim% pentru această valoare, astfel încât să rămână relativă, indiferent de fereastra de pe desktop. Folosind pixeli poate distorsiona unele rezoluții diferite.

opțiuni de transformare

Divi Traducerea Transformatorului opțiunile trebuie, de asemenea, ajustate pentru mobil. Dacă nu, este la fel. Deci, asigurați-vă că mergeți la reactivitate setări și setați locația modulului de căutare în opțiunile din meniul secundar. Tocmai am ajustat locația verticală a mobilului deoarece plasarea acestuia în a treia coloană a rândului îl afișează automat în partea de jos a elementelor rândului.

transformă pentru mobil

Stilul modulului de căutare Divi

Deși nu aveți multe opțiuni de stil pentru o casetă de căutare, aveți însă câteva. Adică culoarea textului și a câmpului în sine, atât când este inactiv, cât și când un utilizator a dat clic pe el. (Și spațierea și dimensionarea și alte opțiuni standard de proiectare Divi, desigur.)

Pentru a găsi opțiunile de culoare, accesați Campion meniul din Proiecta limbă. Odată extins, aveți posibilitatea de a modifica culoarea textului substituentului, culoarea de fundal a câmpului și culoarea textului câmpului (text introdus de utilizator, adică să spun). In plus a se concentra variațiile sunt atunci când utilizatorul interacționează în mod specific cu caseta de căutare.

stil casetă de căutare

Când acesta este stilat după dorința dvs., faceți clic pe butonul Salvare.

Verificați setările de vizibilitate

Unele dintre pachetele noastre gratuite de layout și antet vin cu diferite opțiuni de afișare pentru desktop și dispozitive mobile. Dacă vedeți moduri estompate / gri în constructorul vizual, aceasta indică faptul că modul este dezactivat pe unele dispozitive.

Pentru antetul de livrare a alimentelor, ultimele două coloane sunt dezactivate pe mobil. Vrem să intrăm în Setări de linie și faceți clic pe setările coloanelor pe care doriți să le afișați pe mobil. În acest caz, este al treilea.

opțiuni de linie

Apoi du-te la progres limbă și navigați la vizibilitate opțiune. Aici, asigurați-vă că toate opțiunile de sub dezactivați despre necontrolat pentru coloana care conține câmpul dvs. de căutare. Faceți clic pe butonul Salvare (căpușă verde), iar modulele ar trebui să apară în culori și să nu mai fie decolorate.

câmp de căutare

După ce v-ați asigurat că totul este vizibil, sunteți gata să puneți acest lucru online!

Salvați-vă munca

Asigurați-vă că dați clic pe butonul verde de salvare în partea dreaptă jos a ecranului.

salvați modificările

Acum sunteți gata să închideți generatorul vizual folosind X în colțul din dreapta sus. În ecranul următor, veți dori să vă asigurați că Divi Theme Builder a salvat toate opțiunile dvs. Dacă spune Salvați modificările, Faceți clic pe buton. Dacă spune Toate modificările au fost salvate, atunci câmpul dvs. de căutare este deja activ în meniul secundar Divi.

caseta de căutare divi salvează modificările

Rezultate finale

Tot ce mai rămâne de făcut este să admiri munca ta pe site-ul tău!

Birou

versiunea desktop

Mobil

versiune mobila

Concluzie cu câmpul de căutare Divi

Casetele de căutare sunt o parte fundamentală a unei bune experiențe de utilizator pentru site-ul dvs. Dacă doriți să oferiți cele mai bune servicii posibile vizitatori, asigurați-vă că conținutul dvs. poate fi căutat ar trebui să fie una dintre prioritățile dvs. Sper că puteți folosi această metodă rapidă și ușoară și să o aplicați pe site-ul dvs. Divi în curând!



[Ad_2]

Linkul sursă