Cum se creează o pagină personalizată cu rezultatele căutării în Elementor

O pagină cu rezultate de căutare bine concepută joacă un rol crucial în îmbunătățirea experienței utilizatorului. Le permite vizitatorilor să navigheze rapid la conținutul relevant pe care îl caută. Nu numai că economisește timp în navigarea conținutului, dar îi încurajează și să exploreze mai departe.

Elementor este un generator de pagini de acces pentru milioane de site-uri WordPress. Oferă un generator de teme și widget-uri utile prin care puteți crea cu ușurință o pagină cu rezultatele căutării. În această postare tutorial, vă vom explica cum să creați o pagină personalizată cu rezultatele căutării în Elementor.

Rețineți că caseta de căutare este elementul principal al oricărei pagini cu rezultatele căutării. Este locul în care oamenii își tastează cuvintele cheie pentru a găsi postări și produse relevante. Deci, mai întâi vom crea o casetă de căutare dinamică folosind Elementor. Apoi, vom termina pagina prin adăugarea unui widget de arhivă, transformând-o într-o pagină de arhivă de blog.

Ce este o pagină cu rezultate personalizate de căutare în Elementor?

O pagină cu rezultatele căutării este o pagină web dedicată care permite utilizatorilor și vizitatorilor să navigheze rapid la anumite tipuri de conținut, cum ar fi articole de blog, produse de comerț electronic și articole din portofoliu. Astfel de pagini sunt obligatorii pentru site-urile web bazate pe conținut intens.

O pagină personalizată cu rezultatele căutării vă permite să încorporați diverse elemente, cum ar fi imagini prezentate, titluri personalizate, filtre etc., după cum doriți, astfel încât pagina să arate bine. Acest lucru nu numai că îmbunătățește experiența utilizatorului, dar ajută și la creșterea conversiilor.

Cazuri de utilizare ale paginilor cu rezultate personalizate ale căutării din WordPress

Înainte de a trece la tutorial, să aruncăm o privire la câteva cazuri de utilizare ale paginilor personalizate cu rezultatele căutării din WordPress. Parcurgeți lista de mai jos.

• Site-uri de comerț electronic

Afișați pagina cu rezultatele căutării de produse cu filtre. Vizitatorii pot folosi bara de căutare pentru a găsi produsul exact sau filtre pentru a le sorta după prețuri, evaluări și categorii.

• Site-uri de blog

Postările de blog și articolele sunt afișate pe baza etichetelor și categoriilor. Utilizatorii le pot sorta după autor, dată și alte interogări.

• Pagina de bază de cunoștințe

Paginile bazei de cunoștințe acoperă de obicei ghiduri de documentare DIY și resurse utile. Funcția de căutare este o necesitate pe aceste pagini pentru a explora rapid conținutul util.

• Afaceri bazate pe servicii

Utilizatorii își pot sorta serviciile dorite în funcție de evaluări, intervale de preț, oferte și alte detalii relevante înainte de a rezerva sau de a completa un formular de contact.

• Site-uri web educaționale

Opțiunile avansate de căutare și filtrare vă permit să căutați cursuri, lecții și materiale de studiu, astfel încât studenții și cursanții să poată găsi cu ușurință conținutul de care au nevoie.

Cum se creează o pagină personalizată cu rezultatele căutării în Elementor

Partea teoretică s-a terminat. În această secțiune, vom acoperi acum partea tutorial despre cum să creați o pagină personalizată cu rezultatele căutării în Elementor. Asigurați-vă că aveți următoarele pluginuri disponibile pe site-ul dvs.

• Elementor
• Elementor Pro

Odată ce le aveți pe site-ul dvs., urmați tutorialul explicat mai jos.

Pasul 01: Accesați Elementor Theme Builder

Conectați-vă la tabloul de bord WordPress. Apoi, navigați la Templates > Theme Builder .

Selectați opțiunea Rezultatele căutării sub Părți site. Apoi, faceți clic pe butonul + Adăugați nou .

Aceasta va deschide pânza Elementor, unde veți putea adăuga orice widget pe care doriți să creați pagina personalizată cu rezultatele căutării.

Pasul 02: Creați o nouă secțiune pentru adăugarea widgetului de căutare

Faceți clic pe pictograma plus (+) de pe pânză. Apoi, selectați o structură de coloane dorită.

Trebuie să scrieți un titlu pentru secțiune. Acest lucru este util pentru SEO.

Așadar, trageți și plasați widgetul Titlu în secțiune. Acest lucru vă va permite să scrieți un titlu pentru secțiune.

Accesați fila Stiluri . Veți avea opțiuni pentru a schimba culoarea, tipografia, dimensiunea fontului, alinierea și multe altele din textul titlului. Fă-o singur.

În mod similar, trageți și plasați widgetul Editor de text în secțiunea de sub textul titlului. Apoi, scrieți textul dorit și personalizați-l așa cum se arată mai sus.

Pasul 03: Adăugați widgetul de căutare în secțiune

Găsiți widgetul Căutare . Trageți și plasați-l în secțiunea de sub widgetul Editor de text, în același mod ca cel afișat mai sus.

Pasul 04: Personalizați widgetul de căutare

În mod implicit, widgetul de căutare va fi afișat pe toată lățimea pânzei. Accesați fila Avansat pentru a-i reduce lățimea.

Veți vedea secțiunea Marjă . Plasați valorile dorite în casetele secțiunilor din dreapta și din stânga. Veți vedea că lățimea widgetului de căutare a fost redusă.

Apoi, accesați fila Stil . Veți avea opțiuni pentru a schimba tipografia textului substituent, culoarea de fundal a casetei de căutare, tipul de chenar și multe altele. Faceți acest lucru singur în funcție de cerințele designului site-ului dvs.

Ceea ce am făcut aici este adăugarea unei valori de rază în caseta de căutare. Am plasat valoare în casetele de sus și din stânga de sub raza chenarului.

În mod similar, am adăugat o rază la butonul de căutare. Pentru a face acest lucru, extindeți secțiunea Butonul de trimitere din fila Stil. Plasați valorile în casetele Dreapta și Inferioară sub Rază.

Veți vedea modificările instantaneu. Dacă doriți să adăugați un efect de hover, culoare de fundal, casetă-umbră etc., explorați opțiunile de acolo.

Explorați cum să creați un șablon de postare de blog cu Elementor.

Pasul 05: Configurați opțiunea Rezultate

Sperăm că aveți o idee despre funcția de căutare Ajax. Ori de câte ori un utilizator începe să introducă ceva în el, mai multe rezultate se afișează instantaneu chiar sub caseta de căutare.

Opțiunea Rezultate a widget-ului de căutare vă permite să activați această funcție și să configurați numărul total de rezultate instantanee pe care doriți să le afișați sub caseta de căutare.

Accesați fila Conținut . Apoi, extindeți secțiunea Rezultate .

Activați opțiunea Rezultate live . Funcția este acum activată.

Pasul 06: Creați un șablon pentru rezultate live

Elementor vă permite să creați un șablon de rezultate live prin care puteți specifica modul în care va fi afișat conținutul ori de câte ori utilizatorul scrie în caseta de căutare.

Faceți clic pe butonul Creare șablon din secțiunea Rezultate.

Acest lucru vă va duce la o pânză nouă. Aici, trebuie să creați un aspect pentru rezultatele căutării live și să îl salvați ca șablon.

Selectați o structură de coloane după cum doriți. Am selectat rândul direcțional . Va continua să apară în partea dreaptă pe măsură ce adăugați la această secțiune.

Dorim să folosim această casetă de căutare pentru a prezenta postările de blog. Deci, ori de câte ori cineva scrie un subiect de blog, caseta de căutare trebuie să arate o listă de postări relevante pe blog. Pentru a face acest lucru, trebuie să adăugăm widget-uri pentru postări recomandate.

Trageți și plasați widgetul Imagine prezentată în secțiune.

În mod implicit, imaginea prezentată va avea dimensiuni mari. Mai întâi, din opțiunea Rezoluție imagine , selectați Dimensiune medie .

Apoi, accesați fila Stil . Utilizați opțiuni precum alinierea, lățimea și raza, puteți reduce și mai mult dimensiunea imaginii prezentate, așa cum se vede în captura de ecran atașată mai jos.

În același mod, plasați widgetul Post Title lângă imaginea prezentată.

Puteți vedea că am redus dimensiunea fontului și i-am schimbat culoarea.

Notă: În această etapă, salvați șablonul . Puteți adăuga mai multe elemente, dacă doriți.

Aflați cum să creați un site web de CV cu Elementor.

Pasul 07: Adăugați șablonul la rezultat

Vino la pagina principală a ceea ce proiectam. Făcând clic pe pictograma drop-down din secțiunea Rezultate, alegeți un șablon pe care l-ați creat cu puțin timp în urmă.

Odată ce un șablon este selectat, mai multe opțiuni noi vor apărea sub acesta. Folosindu-le, puteți configura numărul total de articole care vor fi afișate sub caseta de căutare.

Pasul 08: stilizați aspectul rezultatelor live

Vino din nou la fila Stil și extinde secțiunea Rezultate. Puteți stiliza tipul de fundal, tipul de chenar, raza, umplutura, distanța față de câmpul de căutare, înălțimea coloanei, lățimea și distanța dintre rânduri și coloane.

Previzualizează rezultatele live

Acum, tastați ceva în caseta de căutare. Veți vedea mai jos o listă cu trei elemente relevante pentru subiectul introdus.

Acest lucru asigură că widgetul de căutare funcționează perfect.

Notă: widgetul dvs. de căutare este gata și complet funcțional. Puteți crea casete de căutare oriunde pe site-ul dvs., cum ar fi în antet, subsol și pagini, în același mod. Astfel de casete de căutare sunt de obicei plasate în antet și în paginile postării arhive.

Pasul 09: Adăugați widgetul Arhiva Postări

Creați o nouă secțiune sub secțiunea caseta de căutare. Apoi, trageți și plasați widgetul Arhivă Postări în noua secțiune.

Acest lucru va afișa toate postările de blog în formatul de grilă pe care l-ați publicat pe site-ul dvs. web.

Pasul 10: Configurați setările widget-ului Arhiva Postări

Acum este momentul să personalizați widgetul Arhivă Postări și să-i faceți aspectul așa cum doriți. Widgetul are numeroase opțiuni de personalizare. Mai întâi, configurați setările de bază. Accesați fila Conținut și extindeți secțiunea Aspect .

Alegeți numărul de coloane, poziția imaginii și rezoluția imaginii . Am selectat 2 coloane, am stabilit poziția de sus a imaginii și rezoluția completă.

După aceea, comutați la opțiunile Titlu, Extras, Metadate și Citiți mai multe . Dar dacă nu doriți nicio opțiune, păstrați-o dezactivată.

Pentru a defini lungimea fragmentului, setați numărul de caractere de lângă acesta. În plus, specificați tipul de metadate pe care doriți să le afișați. Am selectat opțiunile de metadate Date și Comentarii pentru widget.

Paginarea vă împarte postările în mai multe pagini. Extinderea secțiunii de paginare vă permite să configurați tipul de paginare, alinierea, limita de pagină și scurtarea .

Aflați cum să creați un formular de contact cu Elementor.

Pasul 11: stilizați widgetul Arhiva Postări

Accesați fila Stiluri . Aici veți găsi mai multe opțiuni. Mai întâi, extindeți secțiunea Aspect .

Puteți personaliza decalajul coloanelor, decalajul rândurilor și alinierea .

Extinderea secțiunii Imagine vă va permite să setați raza marginii și distanța dintre imagini și alte elemente.

În același mod, extinzând secțiunea Conținut , puteți stiliza tipografia, culoarea și spațierea pentru textele Titlu, Meta, Extras și Citiți mai multe.

În cele din urmă, extindeți secțiunea Paginare . Acest lucru vă va permite să personalizați tipografia, culorile, efectele de hover și spațiile pentru elementele de paginare.

Notă: într-adevăr, există multe mai multe opțiuni pentru fiecare widget Elementor, inclusiv widgetul Arhivă Postări. În tutorialul de mai sus, am încercat să vă oferim o idee de bază despre personalizările pe care le puteți face pentru widget-ul Arhivă Postări. Sper că puteți explora și utiliza alte opțiuni decât acestea.

Pasul 12: Salvați și previzualizați pagina cu rezultatele căutării

Acum, veniți la modul de previzualizare a paginii. Tastați ceva în casetă și apăsați butonul Căutare . Veți vedea postările de blog asociate care apar mai jos în format grilă.

Vreo eroare? Pagina cu rezultatele căutării pare spartă!

După ce apăsați butonul de căutare, s-ar putea să vă speriați dacă vedeți postările de blog asociate care apar ca imaginea de mai jos. S-ar putea să simți că pagina este spartă.

Nu vă faceți griji! Este foarte ușor să rezolvi problema.

Trebuie doar să creați o pagină de arhivă în generatorul de teme Elementor. Modul în care proiectați Pagina de Arhivă va afecta modul în care sunt afișate postările de blog asociate după ce faceți clic pe butonul Căutare.

Dacă doriți să creăm un tutorial separat despre cum să creați o pagină de arhivă cu Elementor, anunțați-ne prin secțiunea de comentarii. Vom lua în considerare proiectarea unei astfel de pagini în funcție de așteptările dumneavoastră.

Deci, acesta este sfârșitul părții tutorial a postării. Astfel, puteți crea o pagină cu rezultatele căutării folosind Elementor pe WordPress.

Punct bonus: Folosiți HappyAddons pentru a obține mai multe widget-uri pentru Elementor

HappyAddons este un supliment proeminent cu o colecție grozavă de widget-uri puternice pentru Elementor. Dacă simțiți vreodată că widget-urile Elementor disponibile nu sunt suficiente și sunteți în căutarea altora, puteți încerca pluginul HappyAddons.

HappyAddons vine cu peste 120 de widget-uri și zeci de funcții care vă pot duce site-ul Elementor la un nou nivel. Pluginul are atât o versiune gratuită, cât și o versiune premium. Puteți încerca mai întâi cu versiunea gratuită. Dacă sunteți mulțumit, puteți face oricând upgrade la versiunea premium și puteți face ceva grozav.

Obțineți pluginul făcând clic pe butoanele atașate mai jos.

Concluzie

Crearea unei pagini cu rezultatele căutării nu este un lux astăzi, dar este obligatorie pentru a îmbunătăți experiența utilizatorului. Vă ajută să susțineți atractivitatea și valoarea mărcii site-ului dvs. Dacă site-ul dvs. este destinat în principal produse de comerț electronic, marketing afiliat și blogging, nu este niciodată suficient fără o pagină cu rezultatele căutării.

Sperăm că, urmând tutorialul explicat mai sus, puteți crea pagini uimitoare cu rezultatele căutării pe site-ul dvs. Elementor. Cu toate acestea, nu uitați să optimizați widgetul de căutare pentru tablete și dispozitive mobile, astfel încât toate tipurile de persoane să poată folosi acest element.