Ti piacerebbe imparare come creare una pagina dei risultati di ricerca con Elementor?

Che tu abbia un blog personale, un sito Web di e-commerce o un sito Web di grandi dimensioni con più utenti, l'aggiunta di una funzione di ricerca è abbastanza cruciale. Rende più facile per i tuoi visitatori trovare il contenuto che stanno cercando, piuttosto che fare clic qua e là nel menu di navigazione.

In WordPress, l'aspetto (layout) della pagina dei risultati di ricerca è controllato da un modello sul tema che stai utilizzando (il file search.php nella maggior parte dei casi). Se il layout predefinito non ti soddisfa, puoi creare un modello personalizzato per sostituirlo.

Se non hai competenze PHP, puoi usare Elementor (o altri plugin per la creazione di pagine con funzionalità di creazione di temi come theme Divi Builder et WPBakery) per creare un modello di pagina dei risultati di ricerca personalizzato in WordPress.

Per poter creare un modello di pagina dei risultati di ricerca utilizzando Elementor, devi utilizzare la versione pro di Elementor poiché la funzione Theme Builder è disponibile solo in Elementor Pro.

Come creare una pagina dei risultati di ricerca con Elementor

Quando crei una pagina dei risultati di ricerca personalizzata utilizzando Elementor, puoi aggiungere qualsiasi elemento che ti piace quando crei una pagina. Ci sono oltre 90 elementi (chiamati widget) che puoi aggiungere.

Leggi anche: Come gestire l'invio di moduli in Elementor

Elementor stesso offre modelli di pagina dei risultati di ricerca predefiniti per semplificare il flusso di lavoro. Oppure, se hai il tuo concetto di design, puoi anche creare tu stesso la pagina dei risultati di ricerca.

In questo articolo, ti mostreremo come creare da zero un modello di pagina dei risultati di ricerca. Ecco lo screenshot della pagina dei risultati di ricerca che vogliamo creare.

Useremo due sezioni per creare la pagina dei risultati di ricerca sopra:

  • Unità 1: Per posizionare l'intestazione (la descrizione dei risultati della ricerca)
  • Sezione 2: Per posizionare il modulo di ricerca e i risultati della ricerca

Prima di iniziare, assicurati di aver aggiornato la tua versione di Elementor alla versione pro in caso contrario. Quando sei pronto, vai su Modelli -> Generatore di temi sul tuo cruscotto WordPress.

Vedi anche: Come usare Elementor: la guida completa

Fare clic sul pulsante aggiungere per creare un nuovo modello (oppure puoi fare clic sul pulsante Provalo ora per provare il Generatore di temi di Elementor).

Imposta il tipo di modello su Risultati della ricerca, dai un nome al tuo modello e clicca sul pulsante CREA UN MODELLO per iniziare a creare quest'ultimo.

Poiché vogliamo creare la pagina dei risultati di ricerca da zero, puoi semplicemente chiudere la finestra della libreria di modelli che appare.

Leggi anche: Come aggiungere l'effetto punto a una colonna in Elementor

Prima di iniziare ad aggiungere un widget, puoi impostare il layout della pagina. Per farlo, fai clic sull'icona a forma di ingranaggio nella parte inferiore del pannello delle impostazioni (pannello a sinistra). Puoi impostare il layout in l'opzione Layout di pagina dal blocco impostazioni generali sotto la scheda Impostazioni.

Unità 1

Come mostrato sopra, utilizzeremo questa sezione per posizionare l'intestazione per visualizzare la descrizione della pagina dei risultati di ricerca. Basta fare clic sul pulsante più nella casella di modifica di Elementor per aggiungere una nuova sezione. È possibile selezionare la struttura a colonna singola. Una volta aggiunta la sezione, trascina su di essa il widget Titolo.

Vai al pannello di sinistra. Nel blocco titolo sotto la scheda Soddisfare, fare clic sull'icona del database nel campo titolo e selezionare Titolo archivio.

creare una pagina dei risultati di ricerca

È quindi possibile accedere alla scheda Style per personalizzare l'intestazione. Puoi definire elementi come il colore del testo, la tipografia (famiglia di caratteri, dimensione del carattere, stile del carattere, ecc.). Se lo desideri, puoi anche applicare la modalità di fusione e l'ombra del testo.

Come creare una pagina dei risultati di ricerca con Elementor

Se desideri impostare lo sfondo della sezione, aggiungere un separatore o impostare il margine, puoi fare clic sulla maniglia della sezione per passare alla modalità di modifica.

creare una pagina dei risultati di ricerca

Unità 2

Fare clic sul pulsante Plus per aggiungere una nuova sezione come hai fatto nella sezione 1 sopra. È inoltre possibile selezionare la struttura a colonna singola. Una volta aggiunta la sezione, trascina il widget Modulo di ricerca.

È quindi possibile accedere al pannello delle impostazioni per effettuare le impostazioni. Nel blocco Formula di recherche sous la scheda Contenuto, puoi definire la Skin, il segnaposto, l'icona, la dimensione dell'icona, ecc...

Per personalizzare il modulo, puoi aprire la scheda Stile. Ci sono due blocchi di parametri che puoi aprire: Ingresso et Pulsante. Dal blocco Ingresso, puoi impostare tipografia, colore del testo, colore di sfondo, colore del bordo, dimensione del bordo e raggio del bordo.

Dal blocco Pulsante, puoi impostare il colore del testo del pulsante, il colore dello sfondo, la tipografia, la dimensione dell'icona e la larghezza del pulsante.

Una volta che lo stile del widget Modulo di ricerca è a posto, puoi aggiungere il widget Post di archivio. Puoi posizionarlo proprio sotto il widget Modulo di ricerca.

Una volta che questo widget è a posto, vai al pannello di sinistra. Sotto il blocco il layout, tab Soddisfare, puoi definire la skin, il numero di colonne, la posizione dell'immagine, la lunghezza dell'estratto, i metadati, ecc...

Nei paraggi paging, puoi impostare il tipo di paginazione, il limite di pagina e l'allineamento.

Nei paraggi Avanzate, puoi impostare il messaggio da visualizzare quando WordPress non riesce a trovare la query di ricerca fornita.

Una volta che le impostazioni di base della scheda Contenuto completato, puoi passare alla scheda Style per personalizzare l'aspetto del widget Archivio post. Ci sono 6 blocchi che puoi aprire in questa scheda.

  • disposizione

Puoi aprire questo blocco per definire l'allineamento del contenuto testuale dei post (titolo del post e meta). Puoi anche definire lo spazio tra colonne e righe.

  • Immagine

Puoi aprire questo blocco per impostare il raggio del bordo delle miniature dei post. Puoi anche impostare la spaziatura e applicare i filtri CSS.

  • Contenuti

Puoi aprire questo blocco per impostare la tipografia, il colore del testo e la spaziatura del contenuto del testo per i post.

  • Impaginazione

Se abiliti l'impaginazione, puoi aprire questo blocco per personalizzare l'impaginazione. Puoi impostare cose come tipografia, colore del testo e spazio tra i numeri.

  • Messaggio niente trovato

Puoi aprire questo blocco per personalizzare il messaggio di errore quando WordPress non riesce a trovare il contenuto in base alla query di ricerca fornita. Puoi definire la tipografia e il colore del testo su questo blocco.

Puoi aggiungere più widget se ne hai bisogno. Una volta terminata la modifica della pagina, puoi fare clic sul pulsante PUBBLICARE O AGGIORNARE nella parte inferiore del pannello delle impostazioni.

Se ti viene chiesto di aggiungere una condizione di visualizzazione, aggiungine una semplicemente facendo clic sul pulsante AGGIUNGI UNA CONDIZIONE. Poiché stai creando una pagina dei risultati di ricerca, imposta la condizione di visualizzazione su risultati di ricerca. Fare clic sul pulsante SALVA E CHIUDI per applicare la modifica.

creare una pagina dei risultati di ricerca

Ed ecco qua!

Ogni sito Web basato su WordPress ha una pagina dei risultati di ricerca univoca, a seconda del tema utilizzato dal sito Web. Se il layout della pagina dei risultati di ricerca offerto dal tema che stai utilizzando non ti sembra interessante, puoi personalizzarlo.

A meno che tu non abbia competenze PHP, puoi utilizzare Elementor per creare una pagina dei risultati di ricerca personalizzata sul tuo sito Web WordPress. Tutto è trascina e rilascia. Non c'è bisogno di manipolare il codice PHP.

Inoltre, puoi anche utilizzare Elementor per creare intestazione personalizzata, piè di pagina personalizzato, pagina 404 personalizzata e altre parti del tuo tema WordPress.

Ottieni Elementor Pro ora!

Scopri anche alcuni plugin WordPress premium  

Puoi usare altro plugin di WordPress per dare un aspetto moderno e per ottimizzare la gestione del tuo blog o sito web.

Ti offriamo qui alcuni plugin WordPress premium che ti aiuteranno a farlo.

1. WooCommerce Autoresponder

WooCommerce Autoresponder è un WordPress Plugin che ti consente di iscrivere i tuoi clienti al tuo autorisponditore. Questo WordPress Plugin visualizza anche una casella di iscrizione alla newsletter per integrarsi facilmente WooCommerce al risponditore automatico.

Risposta automatica Woocommerce

Come funzionalità troverai tra le altre: piena integrazione con WooCommerce, supporto per 9 auto-responder, nessuna conoscenza di codifica richiesta, facile da installare e molto altro.

Leggi anche: MailChimp Tutorial in francese: la guida completa per creare una newsletter

Download | DemoWeb hosting

2. Plugin di valutazione dei commenti di WordPress

Riguarda un sistema di valutazione dei commenti. Ti consente di consentire agli utenti di valutare i diversi commenti. Dovranno solo fare clic sul pulsante di anteprima e scorrere verso il basso fino alla sezione dei commenti per vedere il WordPress Plugin premio in azione.Come WordPress Plugin Valutazione

Nelle sue funzionalità troviamo principalmente: facilità d'uso, supporto per cstrumenti icona personalizzati, commenti in classifica secondo le note, la personalizzazione della tvai icone, supporto CSS personalizzato, il cCrittografia IP (per utenti europei), la possibilità di tradurre questo plugin e più.

Download | Demo | Web hosting

3. corso Mappa

Progress Map è un plugin per WordPress progettato per la geolocalizzazione. L'obiettivo è aiutare gli utenti con siti web riguardanti elenchi di hotel, annunci immobiliari, elenchi di ristoranti, offerte di lavoro, annunci di negozi e altro ... per organizzare le loro posizioni su Google Map e navigare facilmente nella mappa utilizzando un carosello.

Mappa dei progressi wordpress plugin wordpress

In altre parole, con questo plug-in, le tue posizioni verranno pubblicate su entrambi Google Map (pennarelli) e su una giostra. Il carosello è connesso alla mappa, il che significa che l'elemento selezionato nel carosello sarà indirizzato alla sua posizione sulla mappa e viceversa.

Dai un'occhiata Come visualizzare la posizione di un membro della tua comunità WP su una mappa di Google

Per aggiungere le tue posizioni, Progress Map fornisce uno spazio modulo nella pagina "Aggiungi nuovo elemento" che ti consente di aggiungere facilmente le coordinate della tua posizione.

DownloadDemo | Web hosting

Altre risorse consigliate

Ti invitiamo inoltre a consultare le risorse seguenti per approfondire la presa e il controllo del tuo sito Web e blog.

Conclusione

Ecco ! Questo è tutto per questo tutorial. Speriamo che ti mostrerà come creare una pagina dei risultati di ricerca con Elementor. Ci piacerebbe sentire i tuoi pensieri sull'argomento in la sezione commenti.

Tuttavia, sarai anche in grado di consultare il nostro risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.

Ma nel frattempo, condividi questo articolo sui tuoi diversi social network

...