Cum se creează un șablon de pagină cu rezultate ale căutării în Divi

Cu toții ne-am obișnuit să folosim formulare de căutare pentru a găsi ceea ce avem nevoie pe un site web. Așadar, atunci când creăm un site web în Divi, trebuie să luăm în considerare proiectarea șablonului de rezultate ale paginii care va conduce la aspectul și rezultatele acelor rezultate ale căutării.

În acest tutorial, vom prezenta cum să construim un șablon de pagină de rezultate de căutare simplu și elegant, folosind Divi Theme Builder. Vă vom arăta cum să includeți elementele cruciale ale unui șablon de pagină cu rezultate ale căutării, inclusiv un titlu dinamic al rezultatelor paginii și conținutul de căutare relevant generat de un modul de blog.

Să începem.

Trage cu ochiul

Iată o scurtă privire asupra șablonului de pagină cu rezultatele căutării pe care îl vom crea.

Descărcați GRATUIT șablonul (modelele)

Pentru a pune mâna pe șablonul paginii cu rezultatele căutării din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja în listă, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Pentru a importa aspectul în pagina dvs., pur și simplu extrageți fișierul zip și adăugați unul dintre fișierele json în Divi Theme Builder folosind opțiunea Theme Builder Portability.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să instalați și să activați tema Divi. Asigurați-vă că aveți cea mai recentă versiune de Divi.

De asemenea, veți avea nevoie de câteva postări / pagini create în scopul testării pentru ca pagina cu rezultatele căutării să afișeze efectiv rezultatele.

După aceea, sunteți gata să plecați.

Despre pagina cu rezultatele căutării

În Divi, pagina cu rezultatele căutării este pagina către care un utilizator este redirecționat odată ce a introdus o interogare de căutare într-unul din formularele de căutare ale Divi. Posibilele interogări de căutare care duc la pagina cu rezultatele căutării includ formularul de căutare în antetul Divi implicit, căutarea generată din modulul de căutare din Generatorul Divi și widgetul de căutare încorporat în WordPress.

În mod implicit, pagina cu rezultatele căutării va afișa pur și simplu pagini sau postări căutate într-un feed la fel ca o pagină tipică de blog. Dar cu Divi, puteți proiecta șablonul oricum doriți folosind Divi Theme Builder.

Cum se creează un șablon de pagină cu rezultate ale căutării în Divi

Creați un șablon nou

Pentru a începe, accesați tabloul de bord WordPress și navigați la Divi> Theme Builder. Apoi faceți clic pe zona „Adăugați un șablon nou”.

Sub setările șablonului, atribuiți rezultatele căutării șablonului.

Apoi faceți clic pe zona Adăugați corp personalizat din noul șablon și selectați „Construiți corp personalizat”.

Selectați pentru a construi aspectul de la zero.

Proiectarea șablonului paginii cu rezultatele căutării utilizând Editorul de aspect șablon

Secțiunea de titlu pentru șablonul de rezultate ale paginii

În editorul de aspect al șabloanelor, începeți proiectarea șablonului adăugând un rând cu o coloană la secțiunea implicită. Aici vom construi titlul paginii noastre pentru șablon.

Accent de proiectare a modulului divizor

Apoi introduceți un modul divizor. Acest lucru va servi drept accent de design pentru titlul paginii noastre.

Actualizați stilul divizorului după cum urmează:

• Culoare linie: # 3a405a
• Poziția liniei: jos
• Greutatea divizorului: 5 px
• Z-Index: -1

Modul text cu antet

Sub Modulul divizor, adăugați un nou modul de text cu următorul conținut:

<h1>Search Results</h1>

Actualizați designul textului după cum urmează:

• Culoare fundal: #ffffff
• Alinierea textului: centru
• Font de titlu: Muli
• Greutatea fontului antet: greu
• Culoare text antet: # 3a405a
• Dimensiune text antet: 70 px (desktop), 40 px (tabletă), 22 px (telefon)
• Înălțimea liniei de direcție: 80 px
• Lățime maximă: 60%
• Alinierea modulului: centru
• Înălțime minimă: 80 px

Acum putem muta modulul text în sus pentru a suprapune divizorul adăugând o marjă personalizată.

• Marja: -75px

Modul de căutare

Sub modulul text cu titlul, adăugați un modul de căutare. Acest lucru va fi util pentru utilizatorii care doresc să caute în continuare blogul / site-ul dvs. după ce ajung pe pagina cu rezultatele căutării.

Adăugați text de substituent de intrare pentru formular.

De asemenea, aveți opțiunea de a exclude anumite pagini, postări și / sau categorii din rezultatele căutării, selectând opțiuni din grupul de opțiuni excepții. De exemplu, dacă creați un formular de căutare în principal pentru blogul dvs., vă recomandăm să excludeți paginile din rezultatele căutării, astfel încât să se afișeze numai postările de pe blog.

Apoi actualizați setările de căutare după cum urmează:

• Culoare substituent: # 3a405a
• Culoarea fundalului câmpului: #ffffff
• Font de câmp: Montserrat
• Dimensiune text câmp: 20 px
• Culoare buton și chenar: # 3a405a
• Buton Font: Muli
• Buton Font Greutate: Bold
• Culoarea textului butonului: #ffffff
• Dimensiune text buton: 18 px
• Lățime: 100%
• Lățime maximă: 300 px
• Alinierea modulului: centru
• Colțuri rotunjite: 8 px

Aceasta se ocupă în cea mai mare parte de secțiunea noastră de rubrici.

Căptușeala rândurilor

Înainte de a începe următoarea secțiune, să scoatem umplutura inferioară a rândului.

• Căptușeală: 0px jos

Crearea secțiunii Corp a șablonului cu rezultatele căutării

Acum suntem gata să adăugăm a doua secțiune a șablonului care va conține titlul arhivei rezultatelor căutării și conținutul rezultatelor căutării.

Crearea noii secțiuni și rânduri

Sub secțiunea de sus, adăugați o nouă secțiune obișnuită la aspect.

Apoi adăugați un rând cu o coloană la secțiune.

Adăugarea titlului postării / arhivării ca conținut dinamic

Pagina cu rezultatele căutării va beneficia de un titlu care afișează interogarea de căutare introdusă de utilizator. Putem adăuga acest lucru la pagină folosind un modul text și introducând elementul de conținut dinamic al titlului postării / arhivei.

Mai întâi, adăugați un modul text.

Ștergeți textul fals din caseta de conținut a corpului și selectați pictograma Conținut dinamic care apare atunci când treceți cu mouse-ul peste caseta de conținut a corpului. Apoi selectați din listă Titlul postării / arhivării.

Elementul Titlul postării / arhivării începe cu expresia „Rezultate pentru” urmată de conținutul / interogarea de căutare între paranteze. Mai jos este un exemplu de ceea ce s-ar arăta dacă un utilizator caută termenul „afacere”.

Apoi, actualizați setările de proiectare pentru modulul text după cum urmează:

• Font text: Muli
• Greutate font text: greu
• Culoarea textului textului: # d30c7b
• Dimensiune text text: 22 px
• Aliniere text: centru
• Stil de animație: Slide
• Direcția animației: jos
• Intensitatea animației: 250%

Animația adăugată va dezvălui titlul rezultatului căutării din stilul divizor „cloud” (vom adăuga acest lucru puțin mai târziu). Așadar, de fiecare dată când un utilizator introduce o nouă interogare de căutare, titlul va cădea în jos pentru un efect rece.

Adăugați un rând nou

Sub modulul Text care conține elementul titlu post / arhivă, creați un nou rând cu o coloană.

Adăugați un modul de blog pe rând. Aceasta va afișa postările / conținutul real al paginii cu rezultatele căutării.

Actualizați setările de conținut pentru modulul blog după cum urmează:

• Postări pentru pagina curentă: DA
• Numărul de postări: 9
• Lungime extras: 120
• Arată autorul: NU

Cea mai importantă opțiune aici este Postările pentru pagina curentă. Acest lucru trebuie să fie activ pentru ca pagina cu rezultatele căutării să afișeze conținutul dinamic al căutării.

Apoi actualizați designul modulului blog după cum urmează:

• Aspect: grilă
• Titlu Font: Muli
• Titlu Greutate font: Ultra Bold
• Culoarea textului titlului: # 3a405a
• Dimensiune text titlu: 24 px
• Înălțimea liniei de titlu: 1.3em
• Font corp: Montserrat
• Culoarea textului corpului: # 3a405a
• Aspectul grilei Colțuri rotunjite: 10 px
• Lățimea marginii aspectului grilei: 0 px
• Box Shadow: arată captura de ecran
• Box Shadow Vertical Position: 0px
• Box Shadow Blur Forța 15 px
• Puterea răspândirii umbrei cutiei: -5 px

Apoi, actualizați stilul de paginare după cum urmează:

Secțiunea Fundal și divizor

Ca ultimă atingere a designului, actualizați setările secțiunii după cum urmează:

• Culoare fundal: #eeeeee
• Stilul divizorului superior: vezi captura de ecran
• Culoare divizor: #ffffff
• Flip divizor: vertical
• Aranjament divizor: Conținutul din partea de sus a secțiunii
• Căptușeală: partea superioară de 100 px

Rezultat final

Iată rezultatul final al șablonului de pagină atunci când căutați termenul „afacere” pe site-ul live.

Iată designul de pe tabletă și telefon.

Iată un exemplu de animație a titlului rezultatului căutării atunci când utilizați formularul de căutare pentru interogări de adăugare în pagina cu rezultatele căutării.

Gânduri finale

O pagină cu rezultatele căutării poate fi un instrument util pentru utilizatori, deci este o idee minunată să îi acordați atenția pe care o merită. Cu Divi, puteți crea un șablon de rezultate ale căutării cu toate elementele dinamice necesare folosind Divi Visual Builder atunci când proiectați șablonul. Nu sunt necesare cunoștințe de cod. Sper că acest lucru vă va oferi puțină inspirație pentru a crea un șablon de pagină cu rezultate de căutare personalizate pentru propriul blog sau site.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!