Come creare un modello di pagina dei risultati di ricerca in Divi

Siamo tutti abituati a utilizzare i moduli di ricerca per trovare ciò di cui abbiamo bisogno su un sito web. Quindi, quando creiamo un sito Web in Divi, dobbiamo davvero considerare il design del modello dei risultati della pagina che guiderà l'aspetto di quei risultati di ricerca.

In questo tutorial, illustreremo come creare un modello di pagina dei risultati di ricerca semplice ed elegante utilizzando Divi Theme Builder. Ti mostreremo come includere gli elementi cruciali di un modello di pagina dei risultati di ricerca, incluso un titolo dinamico dei risultati della pagina e il contenuto di ricerca pertinente generato da un modulo blog.

Iniziamo.

Sbirciata

Ecco una rapida occhiata al modello di pagina dei risultati di ricerca che creeremo.

Scarica i modelli GRATUITAMENTE

Per mettere le mani sul modello di pagina dei risultati di ricerca di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Per importare il layout nella tua pagina, estrai semplicemente il file zip e aggiungi uno dei file json nel Divi Theme Builder utilizzando l'opzione Theme Builder Portability.

Andiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai installare e attivare il tema Divi. Assicurati di avere l'ultima versione di Divi.

Avrai anche bisogno di alcuni post/pagine creati a scopo di test affinché la pagina dei risultati di ricerca mostri effettivamente i risultati.

Dopodiché, sei pronto per partire.

Informazioni sulla pagina dei risultati di ricerca

In Divi, la pagina dei risultati di ricerca è la pagina a cui un utente viene reindirizzato una volta che inserisce una query di ricerca in uno dei moduli di ricerca di Divi. Le possibili query di ricerca che portano alla pagina dei risultati di ricerca includono il modulo di ricerca nell'intestazione Divi predefinita, la ricerca generata dal modulo di ricerca in Divi Builder e il widget di ricerca integrato in WordPress.

Per impostazione predefinita, la pagina dei risultati di ricerca visualizzerà semplicemente le pagine o i post cercati in un feed in modo molto simile a una tipica pagina di blog. Ma con Divi, puoi progettare il modello come preferisci utilizzando Divi Theme Builder.

Come creare un modello di pagina dei risultati di ricerca in Divi

Crea nuovo modello

Per iniziare, vai alla dashboard di WordPress e vai a Divi > Theme Builder. Quindi fare clic sull'area "Aggiungi nuovo modello".

Sotto le impostazioni del modello, assegna il modello Risultati della ricerca.

Quindi fare clic sull'area Aggiungi corpo personalizzato del nuovo modello e selezionare "Crea corpo personalizzato".

Selezionare per creare il layout da zero.

Progettare il modello della pagina dei risultati di ricerca utilizzando l'editor del layout del modello

La sezione dell'intestazione per il modello dei risultati della pagina

All'interno dell'editor di layout del modello, avvia il design del modello aggiungendo una riga di una colonna alla sezione predefinita. Qui è dove costruiremo la nostra intestazione di pagina per il modello.

Accento del design del modulo divisore

Quindi inserire un modulo divisore. Questo servirà come accento di design per l'intestazione della nostra pagina.

Aggiorna lo stile del divisore come segue:

• Colore linea: #3a405a
• Posizione della linea: In basso
• Peso del divisore: 5px
• Indice Z: -1

Modulo di testo con intestazione

Sotto il modulo divisore, aggiungi un nuovo modulo di testo con il seguente contenuto:

<h1>Search Results</h1>

L'aggiornamento del design del testo come segue:

• Colore di sfondo: #ffffff
• Allineamento del testo: centro
• Carattere dell'intestazione: Muli
• Peso del carattere dell'intestazione: pesante
• Colore del testo dell'intestazione: #3a405a
• Dimensione del testo dell'intestazione: 70 px (desktop), 40 px (tablet), 22 px (telefono)
• Altezza della linea di intestazione: 80 px
• Larghezza massima: 60%
• Allineamento del modulo: Centro
• Altezza minima: 80px

Ora possiamo spostare il modulo di testo verso l'alto per sovrapporlo al divisore aggiungendo un margine personalizzato.

• Margine: -75px

Modulo di ricerca

Sotto il modulo di testo con l'intestazione, aggiungi un modulo di ricerca. Questo sarà utile per gli utenti che vogliono continuare a cercare nel tuo blog/sito una volta che arrivano nella pagina dei risultati di ricerca.

Aggiungi testo segnaposto di input per il modulo.

Hai anche la possibilità di escludere determinate pagine, post e/o categorie dai risultati della ricerca selezionando le opzioni nel gruppo di opzioni delle eccezioni. Ad esempio, se stai creando un modulo di ricerca principalmente per il tuo blog, potresti voler escludere le pagine dai risultati della ricerca in modo che vengano visualizzati solo i post del blog.

Quindi aggiorna le impostazioni di ricerca come segue:

• Colore segnaposto: #3a405a
• Colore di sfondo del campo: #ffffff
• Carattere del campo: Montserrat
• Dimensione del testo del campo: 20px
• Colore pulsante e bordo: #3a405a
• Carattere pulsante: Muli
• Peso del carattere del pulsante: grassetto
• Colore del testo del pulsante: #ffffff
• Dimensione del testo del pulsante: 18px
• Larghezza: 100%
• Larghezza massima: 300 px
• Allineamento del modulo: Centro
• Angoli arrotondati: 8px

Questo si occupa per la maggior parte della nostra sezione di intestazione.

Imbottitura riga

Prima di iniziare la sezione successiva, eliminiamo l'imbottitura inferiore della riga.

• Imbottitura: 0px in basso

Creazione della sezione del corpo del modello dei risultati di ricerca

Ora siamo pronti per aggiungere la nostra seconda sezione del modello che conterrà il titolo dell'archivio dei risultati di ricerca e il contenuto dei risultati di ricerca.

Creazione della nuova sezione e riga

Sotto la sezione superiore, aggiungi una nuova sezione normale al layout.

Quindi aggiungi una riga di una colonna alla sezione.

Aggiunta del titolo del post/archivio come contenuto dinamico

La pagina dei risultati della ricerca beneficerà di un titolo che mostra la query di ricerca inserita dall'utente. Possiamo aggiungerlo alla pagina utilizzando un modulo di testo e inserendo l'elemento di contenuto dinamico del titolo post/archivio.

Innanzitutto, aggiungi un modulo di testo.

Elimina il testo fittizio all'interno della casella del contenuto del corpo e seleziona l'icona Contenuto dinamico che viene visualizzata quando passi con il mouse sulla casella del contenuto del corpo. Quindi seleziona il titolo del post/archivio dall'elenco.

L'elemento Titolo post/archivio inizia con la frase "Risultati per" seguita dal contenuto/query di ricerca tra parentesi. Di seguito è riportato un esempio di cosa mostrerebbe se un utente cerca il termine "attività commerciale".

Successivamente, aggiorna le impostazioni di progettazione per il modulo di testo come segue:

• Carattere del testo: Muli
• Peso del carattere del testo: pesante
• Colore del testo del testo: #d30c7b
• Dimensione del testo del testo: 22px
• Allineamento del testo: Centro
• Stile di animazione: diapositiva
• Direzione animazione: giù
• Intensità animazione: 250%

L'animazione aggiunta rivelerà il titolo del risultato della ricerca da sotto lo stile del divisore "nuvola" (lo aggiungeremo un po' più tardi). Quindi, ogni volta che un utente inserisce una nuova query di ricerca, il titolo scenderà per un effetto interessante.

Aggiungi nuova riga

Sotto il modulo Testo contenente l'elemento titolo post/archivio, crea una nuova riga a una colonna.

Aggiungi un modulo blog alla riga. Questo mostrerà i post/contenuti effettivi della pagina dei risultati di ricerca.

Aggiorna le impostazioni del contenuto per il modulo blog come segue:

• Post per la pagina corrente: SI
• Conteggio post: 9
• Lunghezza dell'estratto: 120
• Mostra Autore: NO

L'opzione più importante qui è Post per la pagina corrente. Deve essere attivo affinché la pagina dei risultati di ricerca visualizzi il contenuto dinamico della ricerca.

Quindi aggiorna il design del modulo blog come segue:

• Layout: Griglia
• Carattere del titolo: Muli
• Peso del carattere del titolo: Ultra grassetto
• Colore del testo del titolo: #3a405a
• Dimensione del testo del titolo: 24px
• Altezza della riga del titolo: 1,3 em
• Carattere del corpo: Montserrat
• Colore del corpo del testo: #3a405a
• Angoli arrotondati del layout della griglia: 10 px
• Larghezza bordo layout griglia: 0px
• Box Shadow: mostra screenshot
• Posizione verticale dell'ombra del riquadro: 0px
• Box Shadow Blur Forza 15px
• Forza di diffusione dell'ombra della scatola: -5px

Quindi, aggiorna lo stile di impaginazione come segue:

Sfondo della sezione e divisore

Come tocco finale al design, aggiorna le impostazioni della sezione come segue:

• Colore di sfondo: #eeeeee
• Stile divisore superiore: vedi screenshot
• Colore divisore: #ffffff
• Flip divisore: verticale
• Disposizione dei divisori: in cima al contenuto della sezione
• Imbottitura: 100px in alto

Risultato finale

Ecco il risultato finale del modello di pagina durante la ricerca del termine "business" sul sito live.

Ecco il design su tablet e telefono.

Ed ecco un esempio dell'animazione del titolo dei risultati di ricerca quando si utilizza il modulo di ricerca per le query aggiuntive nella pagina dei risultati di ricerca.

Pensieri finali

Una pagina dei risultati di ricerca può essere uno strumento utile per gli utenti, quindi è un'ottima idea darle l'attenzione che merita. Con Divi, puoi creare un modello di risultati di ricerca con tutti gli elementi dinamici necessari utilizzando Divi Visual Builder durante la progettazione del modello. Nessuna conoscenza del codice richiesta. Spero che questo ti dia un po' di ispirazione per creare un modello di pagina dei risultati di ricerca personalizzato per il tuo blog o sito.

Non vedo l'ora di sentirti nei commenti.

Saluti!