Come creare una pagina dei risultati di ricerca personalizzata in Elementor

Una pagina dei risultati di ricerca ben progettata gioca un ruolo cruciale nel migliorare l'esperienza dell'utente. Consente ai visitatori di navigare rapidamente verso il contenuto pertinente che stanno cercando. Non solo fa risparmiare tempo nella navigazione dei contenuti, ma li incoraggia anche a esplorare ulteriormente.

Elementor è un generatore di pagine di riferimento per milioni di siti Web WordPress. Fornisce un generatore di temi e widget utili con cui puoi creare facilmente una pagina di risultati di ricerca. In questo post tutorial ti spiegheremo come creare una pagina di risultati di ricerca personalizzata in Elementor.

Ricorda, la casella di ricerca è l'elemento principale di qualsiasi pagina dei risultati di ricerca. È dove le persone digitano le parole chiave per trovare post e prodotti pertinenti. Quindi, creeremo prima una casella di ricerca dinamica utilizzando Elementor. Quindi, completeremo la pagina aggiungendo un widget di archivio, rendendola una pagina di archivio del blog.

Che cos'è una pagina dei risultati di ricerca personalizzata in Elementor?

Una pagina dei risultati di ricerca è una pagina Web dedicata che consente a utenti e visitatori di navigare rapidamente verso tipi specifici di contenuti, come post di blog, prodotti di eCommerce ed elementi del portfolio. Tali pagine sono obbligatorie per i siti Web basati su contenuti pesanti.

Una pagina di risultati di ricerca personalizzata ti consente di incorporare vari elementi come immagini in primo piano, intestazioni personalizzate, filtri, ecc., come desideri, in modo che la pagina abbia un bell'aspetto. Ciò non solo migliora l'esperienza dell'utente, ma aiuta anche ad aumentare le conversioni.

Casi d'uso delle pagine dei risultati di ricerca personalizzate in WordPress

Prima di passare al tutorial, diamo un'occhiata ad alcuni casi d'uso delle pagine dei risultati di ricerca personalizzate in WordPress. Scorri l'elenco seguente.

• Siti web di e-commerce

Visualizza la pagina dei risultati di ricerca del prodotto con i filtri. I visitatori possono utilizzare la barra di ricerca per trovare il prodotto esatto o i filtri per ordinarli in base a prezzi, valutazioni e categorie.

• Siti di blog

I post e gli articoli del blog vengono visualizzati in base a tag e categorie. Gli utenti possono ordinarli per autore, data e altre query.

• Pagina della base di conoscenza

Le pagine della knowledge base solitamente coprono guide alla documentazione fai-da-te e risorse utili. La funzione di ricerca è un must su queste pagine per esplorare rapidamente i contenuti utili.

• Imprese basate sui servizi

Gli utenti possono ordinare i servizi desiderati in base a valutazioni, fasce di prezzo, offerte e altri dettagli rilevanti prima di prenotare o compilare un modulo di contatto.

• Siti web educativi

Le opzioni avanzate di ricerca e filtro ti consentono di cercare corsi, lezioni e materiali di studio in modo che studenti e studenti possano trovare facilmente i contenuti di cui hanno bisogno.

Come creare una pagina dei risultati di ricerca personalizzata in Elementor

La parte teorica è finita. In questa sezione, tratteremo ora la parte tutorial su come creare una pagina di risultati di ricerca personalizzata in Elementor. Assicurati di avere i seguenti plugin disponibili sul tuo sito.

• Elementor
• Elementor Pro

Una volta che li hai sul tuo sito, segui il tutorial spiegato di seguito.

Passaggio 01: vai a Elementor Theme Builder

Accedi alla dashboard di WordPress. Quindi, vai a Modelli > Theme Builder .

Seleziona l'opzione Risultati della ricerca in Parti del sito. Quindi, fai clic sul pulsante + Aggiungi nuovo .

Questo aprirà il canvas di Elementor, dove potrai aggiungere qualsiasi widget desideri per creare la pagina dei risultati di ricerca personalizzata.

Passaggio 02: crea una nuova sezione per aggiungere il widget di ricerca

Fai clic sull'icona più (+) nell'area di disegno. Quindi, seleziona la struttura di colonne che desideri.

È necessario scrivere un titolo per la sezione. Questo è utile per la SEO.

Quindi, trascina e rilascia il widget Intestazione nella sezione. Ciò ti consentirà di scrivere un titolo per la sezione.

Vieni alla scheda Stili . Avrai opzioni per modificare il colore, la tipografia, la dimensione del carattere, l'allineamento e altro del testo dell'intestazione. Fallo da solo.

Allo stesso modo, trascina e rilascia il widget Editor di testo nella sezione sotto l'intestazione testo. Quindi, scrivi il testo desiderato e personalizzalo come mostrato sopra.

Passaggio 03: aggiungi il widget di ricerca nella sezione

Trova il widget di ricerca . Trascinalo e rilascialo nella sezione sotto il widget Editor di testo nello stesso modo mostrato sopra.

Passaggio 04: personalizza il widget di ricerca

Per impostazione predefinita, il widget di ricerca verrà visualizzato su tutta la larghezza della tela. Vieni alla scheda Avanzate per ridurne la larghezza.

Vedrai la sezione Margine . Inserisci i valori desiderati nelle caselle di sezione a destra e a sinistra. Vedrai che la larghezza del widget di ricerca è stata ridotta.

Successivamente, vai alla scheda Stile . Avrai opzioni per modificare la tipografia del testo segnaposto, il colore di sfondo della casella di ricerca, il tipo di bordo e altro ancora. Fallo tu stesso in base ai requisiti del design del tuo sito web.

Ciò che abbiamo fatto qui è stato aggiungere un valore di raggio alla casella di ricerca. Abbiamo inserito il valore nelle caselle in alto e a sinistra sotto il raggio del bordo.

Allo stesso modo, abbiamo aggiunto un raggio al pulsante di ricerca. Per fare ciò, espandi la sezione Pulsante Invia nella scheda Stile. Inserisci i valori nelle caselle Destra e In basso sotto Raggio.

Vedrai le modifiche immediatamente. Se vuoi aggiungere un effetto al passaggio del mouse, un colore di sfondo, un'ombra della scatola, ecc., esplora le opzioni lì.

Scopri come creare un modello di post sul blog con Elementor.

Passaggio 05: configurare l'opzione Risultati

Ci auguriamo che tu abbia un'idea della funzione di ricerca Ajax. Ogni volta che un utente inizia a digitare qualcosa, diversi risultati vengono immediatamente visualizzati direttamente sotto la casella di ricerca.

L' opzione Risultati del widget di ricerca ti consente di abilitare questa funzione e configurare il numero totale di risultati istantanei che desideri visualizzare nella casella di ricerca.

Vai alla scheda Contenuto . Quindi, espandi la sezione Risultati .

Attiva l' opzione Risultati in tempo reale . La funzione è ora abilitata.

Passaggio 06: crea un modello per i risultati in tempo reale

Elementor ti consente di creare un modello di risultati in tempo reale attraverso il quale puoi specificare come verrà visualizzato il contenuto ogni volta che l'utente digita nella casella di ricerca.

Fai clic sul pulsante Crea modello nella sezione Risultati.

Questo ti porterà su una nuova tela. Qui devi creare un layout per i risultati della ricerca in tempo reale e salvarlo come modello.

Seleziona la struttura delle colonne che desideri. Abbiamo selezionato la riga direzionale . Continuerà a essere visualizzato sul lato destro man mano che aggiungi elementi a questa sezione.

Vogliamo utilizzare questa casella di ricerca per mostrare i post del blog. Pertanto, ogni volta che qualcuno digita un argomento del blog, la casella di ricerca deve mostrare un elenco di post del blog pertinenti. Per fare ciò, dobbiamo aggiungere i widget dei post consigliati.

Trascina e rilascia il widget Immagine in evidenza nella sezione.

Per impostazione predefinita, l'immagine in primo piano sarà di grandi dimensioni. Innanzitutto, dall'opzione Risoluzione immagine , seleziona la dimensione Media .

Quindi, vai alla scheda Stile . Utilizza opzioni come allineamento, larghezza e raggio per ridurre ulteriormente le dimensioni dell'immagine in primo piano, come mostrato nello screenshot allegato di seguito.

Allo stesso modo, posiziona il widget Titolo del post accanto all'immagine in primo piano.

Puoi vedere che abbiamo ridotto la dimensione del carattere e cambiato il suo colore.

Nota: in questa fase, salva il modello . Se lo desideri, puoi aggiungere più elementi.

Scopri come creare un sito Web per curriculum con Elementor.

Passaggio 07: aggiungi il modello al risultato

Vieni alla pagina principale di ciò che stavamo progettando. Facendo clic sull'icona a discesa nella sezione Risultati, scegli un modello che hai progettato poco fa.

Una volta selezionato un modello, sotto di esso verranno visualizzate diverse nuove opzioni. Usandoli, puoi configurare il numero totale di elementi che verranno visualizzati nella casella di ricerca.

Passaggio 08: stilizzazione del layout dei risultati in tempo reale

Torna di nuovo alla scheda Stile ed espandi la sezione Risultati. Puoi stilizzare il tipo di sfondo, il tipo di bordo, il raggio, il riempimento, la distanza dal campo di ricerca, l'altezza della colonna, la larghezza e lo spazio tra righe e colonne.

Anteprima dei risultati in tempo reale

Ora digita qualcosa nella casella di ricerca. Vedrai un elenco di tre elementi rilevanti per l'argomento digitato che apparirà di seguito.

Ciò garantisce che il widget di ricerca funzioni perfettamente.

Nota: il tuo widget di ricerca è pronto e perfettamente funzionante. Puoi creare caselle di ricerca ovunque sul tuo sito web, ad esempio nell'intestazione, nel piè di pagina e nelle pagine, allo stesso modo. Tali caselle di ricerca vengono solitamente posizionate nelle pagine di intestazione e di archivio dei post.

Passaggio 09: aggiungi il widget Archivio post

Crea una nuova sezione sotto la sezione della casella di ricerca. Quindi, trascina e rilascia il widget Archivia post nella nuova sezione.

Questo mostrerà tutti i post del blog nel formato griglia che hai pubblicato sul tuo sito web.

Passaggio 10: configura le impostazioni del widget Archivio post

Ora è il momento di personalizzare il widget Archivia post e crearne il layout come desideri. Il widget ha numerose opzioni di personalizzazione. Innanzitutto, configura le impostazioni di base. Accedi alla scheda Contenuto ed espandi la sezione Layout .

Scegli il numero di colonne, la posizione dell'immagine e la risoluzione dell'immagine . Abbiamo selezionato 2 colonne, impostato la posizione dell'immagine in alto e la risoluzione massima.

Successivamente, attiva le opzioni Titolo, Estratto, Metadati e Leggi altro . Ma se non vuoi alcuna opzione, tienila disattivata.

Per definire la lunghezza dell'estratto, imposta il numero di caratteri accanto ad esso. Inoltre, specifica il tipo di metadati che desideri visualizzare. Abbiamo selezionato le opzioni di metadati Dati e Commenti per il widget.

L'impaginazione divide i tuoi post in più pagine. L'espansione della sezione di impaginazione consente di configurare il tipo di impaginazione, l'allineamento, il limite di pagina e abbreviare i file .

Scopri come creare un modulo di contatto con Elementor.

Passaggio 11: stilizza il widget Archivio post

Vieni alla scheda Stili . Qui troverai diverse opzioni. Innanzitutto, espandi la sezione Layout .

È possibile personalizzare la distanza tra le colonne, la distanza tra le righe e l'allineamento .

L'espansione della sezione Immagine ti consentirà di impostare il raggio del bordo e la spaziatura tra le immagini e altri elementi.

Allo stesso modo, espandendo la sezione Contenuto , puoi stilizzare la tipografia, il colore e la spaziatura per i testi Titolo, Meta, Estratto e Leggi di più.

Infine, espandi la sezione Impaginazione . Ciò ti consentirà di personalizzare la tipografia, i colori, gli effetti al passaggio del mouse e gli spazi per gli elementi di impaginazione.

Nota: in effetti, ci sono molte più opzioni per ciascun widget Elementor, incluso il widget Archivia post. Nel tutorial sopra, abbiamo cercato di darti un'idea di base delle personalizzazioni che puoi effettuare per il widget Archivia post. Spero che tu possa esplorare e utilizzare opzioni diverse da queste.

Passaggio 12: salva e visualizza l'anteprima della pagina dei risultati della ricerca

Ora vieni alla modalità di anteprima della pagina. Digita qualcosa nella casella e premi il pulsante Cerca . Vedrai i post del blog correlati visualizzati di seguito nel formato griglia.

Qualche errore? La pagina dei risultati di ricerca sembra rotta!

Dopo aver premuto il pulsante di ricerca, potresti spaventarti se vedi i post del blog correlati apparire come nell'immagine qui sotto. Potresti avere la sensazione che la pagina sia rotta.

Non preoccuparti! È molto facile risolvere il problema.

Devi solo creare una pagina Archivio nel generatore di temi Elementor. Il modo in cui progetti la pagina di archivio influenzerà il modo in cui verranno visualizzati i post del blog correlati dopo aver fatto clic sul pulsante Cerca.

Se desideri che creiamo un post tutorial separato su come creare una pagina di archivio con Elementor, faccelo sapere attraverso la sezione commenti. Prenderemo in considerazione la progettazione di una pagina di questo tipo in base alle tue aspettative.

Quindi, questa è la fine della parte tutorial del post. Pertanto, puoi creare una pagina dei risultati di ricerca utilizzando Elementor su WordPress.

Punto bonus: usa HappyAddons per ottenere più widget per Elementor

HappyAddons è un componente aggiuntivo di spicco con una vasta raccolta di potenti widget per Elementor. Se ritieni che i widget Elementor disponibili non siano sufficienti e ne cerchi di più, puoi provare il plug-in HappyAddons.

HappyAddons viene fornito con oltre 120 widget e dozzine di funzionalità che possono portare il tuo sito Elementor a un nuovo livello. Il plugin ha sia una versione gratuita che una premium. Puoi prima provare con la versione gratuita. Se sei soddisfatto, puoi passare alla versione premium in qualsiasi momento e fare qualcosa di eccezionale.

Ottieni il plugin facendo clic sui pulsanti allegati di seguito.

Conclusione

Creare una pagina dei risultati di ricerca non è un lusso oggi ma è obbligatorio per migliorare l'esperienza dell'utente. Ti aiuta a mantenere l'attrattiva e il valore del marchio del tuo sito web. Se il tuo sito è dedicato principalmente a prodotti di e-commerce, marketing di affiliazione e blog, non è mai sufficiente senza una pagina dei risultati di ricerca.

Se tutto va bene, seguendo il tutorial spiegato sopra, puoi creare straordinarie pagine di risultati di ricerca sul tuo sito Elementor. Tuttavia, non dimenticare di ottimizzare il widget di ricerca per tablet e dispositivi mobili in modo che tutti i tipi di persone possano utilizzare questo elemento.