Cum să adăugați căutare Ajax în timp real pe site-ul dvs. Divi

Ajax este o modalitate excelentă de a adăuga căutări live la Divi. Cu Ajax, pagina nu trebuie să se reîncarce pentru a le arăta utilizatorilor rezultatele căutării. Acest lucru le permite vizitatorilor să vadă rezultatele mult mai repede, ceea ce ajută la menținerea lor pe paginile dvs. mai mult timp. Rezultatul este un site web care arată mai curat și funcționează mai ușor.

Căutarea Ajax nu este integrată în Divi, dar poate fi ușor adăugată folosind un plugin terță parte. În acest tutorial, vom vedea cum să adăugați căutarea Ajax la Divi și vom vedea cum să stilizați căutarea pentru a se potrivi cu designul site-ului dvs. web.

La tutorial.

Trage cu ochiul

Înainte de a începe, iată cum va arăta căutarea noastră Ajax când vom termina. Aceasta este vizualizarea Desktop. Voi adăuga o căutare Ajax într-un magazin WooCommerce. Folosesc pagina de afișare din pachetul de aspect al magazinului online. De asemenea, vom stiliza căutarea pentru a se potrivi cu aspectul. Desigur, deoarece acesta este un site de testare, eu înșel și folosesc produsele de testare WooCommerce. Rezultatele vor funcționa la fel cu orice produs.

Iată cum arată același design pe un telefon.

Cum să adăugați căutare Ajax în timp real pe site-ul dvs. Divi

Abonați-vă la canalul nostru Youtube

1. Instalarea Divi Ajax Search

Mai întâi, cumpărați Divi Ajax Search de pe Divi Marketplace. În mod normal, este de 29 USD și include utilizare nelimitată și un an de asistență și actualizări. Divi Ajax Search vă permite să căutați pagini, postări, proiecte și produse WooCommerce. Funcționează la fel cu fiecare dintre aceste tipuri de postări. Poate căuta titlul, extrasul și imaginea prezentată și le poate afișa în funcție de setările dvs.

Pentru a instala pluginul, accesați Plugins > Add New și selectați Upload Plugin .

Selectați Alegeți fișier și navigați la locația fișierului pe computer și selectați-l. Faceți clic pe Instalare acum .

După instalarea pluginului, selectați Activare plugin .

2. Adăugați Ajax Search pe site-ul dvs. Divi

Iată o privire asupra aspectului original. include antetul, categoriile care se suprapun peste imaginea antetului și modulul WooCommerce pentru a afișa produsele. Voi adăuga funcția de căutare Ajax deasupra modulului magazin. Îl voi stiliza și pentru a se potrivi cu elementele aspectului.

Adăugați Căutare Divi Ajax la aspect

Faceți clic pe pictograma de sub modulul magazin pentru a deschide modulul modulului. Derulați sau căutați Divi Ajax Search și adăugați-l la aspect. Afișez vizualizarea wireframe, dar oricare dintre vizualizări funcționează la fel.

Trageți și fixați modulul deasupra modulului magazin.

Configurarea casetei de căutare

Faceți clic pe roată pentru a deschide opțiunile. Am trecut la vizualizarea desktop pentru a putea vedea modificările mele live.

În primul rând, vom ajusta textul substituent. Textul substituent implicit folosește cuvântul Căutare. Este bine, dar îl schimb în Căutarea produselor noastre, astfel încât utilizatorul să știe că caută în magazin, nu în postări de blog sau în alt conținut. Voi lăsa textul Comandă după , Comandă și Fără rezultate la valorile implicite.

• Text substituent - Căutați produsele noastre
• Rezultatul căutării - 10
• Comandați până la - data
• Comandă - desc
• Fără text de rezultat - Nu s-au găsit rezultate

Decideți ce să afișați în rezultatele căutării

Sub secțiunea numită Zona de căutare, selectați în ce doriți să căutați. O las la setările implicite, care includ Titlu, Conținut și Extras.

Apoi, alegeți tipurile de postări. Îl puteți avea pentru a căuta Postări, Pagini, Proiecte, Produse sau toate cele de mai sus. Selectez Produse.

Cauta in:

• Titlu
• Conţinut
• Extras

Tipuri de postări:

• Produse

Selectați Ce să afișați

Derulați în jos până la zona de afișare pentru a alege modul în care vor fi afișate rezultatele. Păstrez setările implicite pentru pictograma de căutare, titlu, extras și imagine prezentată. De asemenea, am activat prețul produsului, am schimbat numărul de coloane la 4 și am selectat să folosesc zidăria. Acest lucru îmi va oferi aspectul dorit.

Afișați pictograma de căutare:

• da

Câmpuri de afișare:

• Titlu
• Extras
• Imagine prezentată
• Prețul produsului

Numar de coloane:

• 4

Utilizați zidărie:

• da

Afișați bara de derulare

Mergeți la setările barei de derulare și decideți să afișați sau să ascundeți bara de derulare. Includ bara de derulare, astfel încât utilizatorul să fie mai conștient de faptul că poate derula.

Bara de derulare:

• Spectacol

Rezultatul căutării Divi Ajax

Introducerea unui termen de căutare afișează rezultatele în câmpul de căutare. Arată grozav, dar nu iese în evidență din conținutul site-ului web. Îl vom stiliza astfel încât să se potrivească cu designul site-ului și să nu se amestece cu imaginile produsului.

3. Stilați modulul pentru a se potrivi site-ului dvs. web

Pentru a stiliza caseta de căutare, voi folosi elemente de design din aspectul pe care îl folosesc. În partea de jos a paginii magazinului aspectului magazinului online sunt câteva elemente de design. Unul este un modul interesant de optinizare prin e-mail. Voi folosi acest lucru ca inspirație pentru fundal și câmp. De asemenea, voi folosi culoarea de fundal a Shop Now CTA pentru rezultatele căutării. Sunt în special atenție la trei elemente de design:

• Culoare fundal buletin informativ - # 757d79
• Cumpărați culoarea de fundal CTA - # dcae83
• Căptușeală pentru ambele - 50 px (sus, jos), 60 px (dreapta, stânga)

Stilizarea câmpului de căutare

Deschideți setările de fundal în fila conținut. Această secțiune are trei zone de fundal diferite. Mergeți la ultima. Se numește doar Background. Introduceți culoarea aici.

• Culoarea fundalului - # 757d79

În fila Proiectare, accesați setările Spațiu și introduceți umplutura. Acest lucru ne va permite să vedem zona din jurul terenului, astfel încât să putem vedea rezultatele mai bine pe măsură ce mergem. Acest lucru oferă, de asemenea, căsuței de căutare multă culoare în jurul său, care se va potrivi cu elementele din aspect.

• Căptușire 50 px (sus, jos), 60 px (dreapta, stânga)

În setările Căutare câmp, adăugați culoarea de fundal a câmpului și culoarea textului câmpului. Am făcut câmpul să se potrivească cu fundalul modulului și tocmai am selectat alb pentru text.

• Culoare fundal câmp - # 757d79
• Culoare text câmp - #ffffff

În aceleași setări, derulați în jos până la Culoare margine câmp și alegeți alb. De asemenea, am putea regla grosimea și raza chenarului. O voi lăsa pătrată pentru a se potrivi cu câmpul de text al modulului optin.

• Culoare margine câmp - #ffffff

Deschideți setările pentru pictograma Căutare și selectați alb.

• Caută pictograma Culoare - #ffffff

Deschideți setările pentru încărcător și selectați alb pentru culoarea încărcătorului . Încărcătorul va fi văzut doar momentan, dar va arăta mai bine dacă se potrivește cu restul elementelor.

• Culoare încărcător - #ffffff

Stilizarea câmpului de rezultate

Deschideți setările de fundal în fila Conținut și adăugați culoarea în fundalul casetei de rezultate ale căutării și al elementului rezultatului căutării . Acest lucru nu va fi vizibil în timp ce proiectăm modulul, deoarece se afișează numai atunci când afișează rezultatele căutării.

• Culoarea fundalului - # dcae83

În fila Proiectare, deschideți setările pentru Textul elementului rezultatului căutării . În fila Titlu, selectați stilul de font cu majuscule și alegeți alb pentru culoarea textului. Las toate setările implicite ale celorlalte titluri.

• Titlu Font Style - TT
• Culoare text titlu - #ffffff

Deschideți fila Extrase și selectați alb pentru culoarea textului Extrase .

• Fragment Text Color - #ffffff

Deschideți fila Preț. Selectați Semi Bold pentru greutatea prețului și alb pentru culoarea textului.

• Prețul Greutate Font - Semi Bold
• Fragment Text Color - #ffffff

Rezultate

Iată cum arată Căutarea Ajax pe desktop cu stilul meu. Rezultatele căutării se afișează aproape imediat. Arată elegant și neted.

Iată cum arată pe telefon. Rezultatele se stivuiesc și se ajustează pentru a se potrivi ecranului.

Gânduri de sfârșit

Adăugarea căutării Ajax pe site-ul dvs. Divi este rapidă și ușoară cu ajutorul pluginului Divi Ajax Search. Este ușor de utilizat, ușor de stilat pentru a se potrivi cu site-ul dvs., iar rezultatele sunt rapide și arată fantastic. Aveți o mulțime de opțiuni pentru tipurile de postări pe care le poate căuta și pentru tipurile de conținut pe care le va afișa în rezultate.

Acum site-ul dvs. Divi poate avea o funcție de căutare Ajax proiectată profesional, pe care vizitatorii dvs. o vor aprecia!

Vrem sa auzim de la tine. Ați adăugat o căutare Ajax în timp real pe site-ul dvs. Divi? Spuneți-ne despre experiența dvs. în comentarii.

Imagine prezentată prin Kroster / shutterstock.com