Come personalizzare la pagina di ricerca risultati con Extra? Il box per il search result è di sicuro uno dei tool più utili che possiamo offrire ai nostri utenti, uno strumento SEO che può fare la differenza sia per i blog sia per i negozi online. Il nostro tutorial oggi si concentra sul secondo tema più gettonato di Elegant Themes, forse oscurato dalla sua controparte DIVI ma in grado di dare parecchie soddisfazioni. La guida su come modificare la pagina di ricerca risultati con Extra è una rivisitazione del tutorial originale in inglese scritto da Jason Champagne: diamo il merito all’autore, come sempre.

Strumenti necessari:

  • Divi Theme Builder

Anteprima

Puoi guardare velocemente il risultato grazie al video che trovi qui di seguito! Il layout rispecchia lo stile usato in questo tutorial e corrisponde al layout che abbiamo usato per il nostro sito.

 

Scarica il Layout della pagina di ricerca risultati di Extra

Tutti gli step da seguire: inizia da qui

Il Divi Theme Builder (Generatore di Temi) è una delle novità più recenti introdotte dalla casa madre per rendere ancora più semplice la creazione di uno stile unico per ogni pagina o post del nostro sito. Non ci soffermeremo troppo sulla sua funzionalità e analizzeremo il suo funzionamento solo per ciò che ci interessa: creare una pagina per la ricerca risultati di Extra. In questo modo ogni volta che i nostri navigatori useranno il box di ricerca, potranno atterrare in un contenuto elegante e ad alto impatto visivo. Oltre che utile, certo.

Per iniziare, clicca su Extra nel menu del tuo backend e poi su Generatore di temi. Si aprirà la pagina dedicata ai modelli dell’intero sito. Clicca su Aggiungi nuovo modello e scorri fino in basso su Altro, mettendo una spunta a Risultati di ricerca. Poi premi il pulsante Crea modello e prosegui. In questo caso useremo solo il corpo personalizzato, perchè vogliamo lasciare l’header e il footer intatti. Clicca quindi su Aggiungi corpo personalizzato e poi su Crea.

Ti si aprirà la finestra del frontend, dove dovrai scegliere Build from scratch visto che si tratta di un contenuto da realizzare da zero. Creiamo subito una sezione e una riga da un box. Nelle impostazioni della riga modifichiamo Design/Dimensionamento portando a 90% la Larghezza Massima e a 1080px quella massima (in italiano hanno lo stesso significato, ma funzioni diverse). Lascia il resto così com’è.

Modulo separatore

A questo punto dobbiamo inserire una linea di separazione, per dare uno stile preciso al titolo della nostra paginetta. Lo spessore del modulo dovrà essere di 5px, scegli il colore che vuoi tu. Nel nostro caso abbiamo optato per una variante del blu scuro che usiamo nella maggior parte del sito di Wp Win, ovvero #3a405a. La posizione dovrà essere In fondo.

Modulo testo

Al di sotto del contenuto appena creato, aggiungiamo un modulo testo e inseriamo il titolo in H1. Per esempio Risultato Ricerca, giusto per essere sintetici. Nella scheda Contenuti scegliamo uno sfondo bianco standard (#ffffff). Nella scheda Design modifichiamo invece la voce Testo del sottotitolo (ricordati di selezionare H1). I parametri dovranno essere:

  • Font – Muli
  • Intestazione Luce Soffusa – Pesante
  • Colore – #3a405a
  • Dimensioni: 70px (Desktop), 40px (Tablet), 22px (Mobile)
  • Interlinea: 80px

Pagina risultati EXTRA titolo h1

In Dimensionamento impostiamo Larghezza massima (‘m’ minuscola) al 60%. Allineamento testo centrale e Altezza minima 80px. In Spaziatura inseriamo un margine di -75px In Cima. Il risultato sarà quello che vedi nell’immagine qui di seguito.

Pagina risultati EXTRA titolo divisore

Box ricerca

Al di sotto del titolo aggiungiamo un modulo di Ricerca. Scriviamo un testo all’interno, per invogliare l’utente a cercare ciò che vuole all’interno del nostro sito. Per esempio noi abbiamo scelto “Che cosa stai cercando?”. Visto che si tratta di una frase lunga, abbiamo pensato di renderla più concisa per chi naviga con il cellulare. Cliccando sulla freccia vicino alla parola Testo è possibile scegliere delle varianti a seconda del dispositivo usato. Noi abbiamo deciso di usare “Cosa cerchi?” per il Mobile, in modo che il testo sia visibile anche su schermi ridotti. Controlla che in Contenuti/Elementi sia attivo il Pulsante Follow. Potresti decidere anche di non visualizzare fra i risultati le pagine, alcuni post oppure intere categorie. In questo caso dovrai spostarti su Eccezioni e scegliere ciò che desideri.

In Design/Testo, l’allineamento sarà a sinistra o quello che preferisci. In Pulsante testo inseriamo alcuni dei parametri già visti nei precedenti paragrafi:

  • Colore – #3a405a
  • Font – Muli
  • Luce Soffusa – Grassetto
  • Colore testo – #ffffff
  • Dimensioni – 18px
  • Interlinea – 1em

In Design/Dimensionamento portiamo al 100% la Larghezza Massima e a 600px quella massima: per fortuna le due voci sono vicine e non è difficile intuire il valore da assegnare a entrambe. Allineamento testo centrale, il resto invariato. Mettiamo anche un po’ di padding per una migliore centratura: 0.715em per tutti e quattro i valori, ovvero In Cima, In Fondo, Sinistra, Destro.

Per rendere il box un po’ più rotondetto, modifichiamo anche il Bordo, portando a 8px tutti e quattro gli angoli. Come Colore Bordo scegliamo invece #dddddd, ovvero grigio.

Seconda sezione

Passiamo ad un’altra sezione: visto che stiamo creando la pagina di ricerca risultati con Extra, vogliamo che l’utente sappia subito che gli articoli e le pagine che troverà di seguito corrispondono ad una specifica parola o frase. Prima di aggiungere altri elementi, modifichiamo le impostazioni della sezione. In Contenuti modifichiamo lo sfondo, colorandolo a seconda dei nostri gusti. Noi abbiamo scelto di rimanere in linea con quel grigio/blu scelto per altri elementi del nostro portale: rgba(12,113,195,0). Puoi scegliere comunque di colorare il background a seconda dei tuoi gusti.

Se conosci già Wp Win sai già che amiamo le nuvole e gli elementi a tema. Anche in questo caso abbiamo deciso di dare un tocco fashion alla nostra paginetta, inserendo un modulo separatore. Puoi trovare la voce nella scheda Design della sezione. Abbiamo scelto inoltre di ripetere l’elemento sia in cima che in fondo, creando così un bell’effetto anche per la zona footer. In Cima abbiamo inserito l’ultima opzione per lo Stile Divisore, ovvero le nuvolette con l’ombra. Il colore è bianco (#ffffff) e lo spessore è 100px. Il Modulo Separatore è inoltre In Verticale e lo spessore è In cima al contenuto della sezione. In fondo abbiamo usato lo stesso Stile, Colore e Spessore, ma abbiamo deciso di non ‘verticalizzare’ il balooon per renderlo più simile all’elemento superiore.

pagina risultati ricerca EXTRA secondo separatore
L’ultima voce da modificare è Spaziatura: aggiungi 100px di padding In Cima.

Nuova riga

Adesso possiamo continuare a costruire il resto, partendo da una nuova riga. Dovrà essere da un box e nelle impostazioni della stessa dovremo portare il Dimensionamento al 90% per la Larghezza Massima e a 1080px per quella massima. In teoria dovresti trovare già tutto impostato con i valori che abbiamo appena detto, ma non si sa mai.

Il testo

Uno degli elementi essenziali per modificare la pagina di ricerca risultati con Extra? Dire ai nostri navigatori che cosa sta succedendo. Come ti abbiamo spiegato nei paragrafi precedenti, vogliamo che ogni navigatore sia sicuro che ciò che sta cercando corrisponda ai contenuti successivi. Come? Inserendo un testo dinamico che possa variare in base alla frase o parola scritta all’interno del box di ricerca.

Aggiungiamo quindi un modulo testo nella riga su cui stiamo lavorando e in Contenuti/Testo cancelliamo la frase di esempio che troviamo all’interno del Body. Spostiamo invece il cursore a destra, subito sotto la parola ‘Testo’ e clicchiamo sui tre dischi che compariranno. Stiamo dicendo al tema di usare un testo dinamico e nello specifico dovremo scegliere Inviare/Titolo archivio.

pagina risultati ricerca EXTRA testo dinamico

In Design/Testo usiamo lo stesso font che abbiamo inserito in precedenza, ovvero Muli. Luce Soffusa Pesante e colore #d30c7b (fucsia), in modo che sia molto diverso dalla nuance usata finora. Dimensioni 22px, Allineamento centrale. Dato che parliamo di un testo dinamico, vogliamo che mantenga queste caratteristiche anche in Animazione. Nella voce, presente sempre in Design, scegliamo Diapositiva con Direzione Gradiente Verso il basso e 250% per Animazione. Dovrà essere di tipo di Facilità-In-Out e che compaia Una volta sola.

Seconda riga: il modulo blog

Abbiamo appena finito di creare l’area superiore: la pagina di ricerca risultati con Extra è quasi pronta! Entriamo infatti nel cuore del contenuto: inserire i moduli blog per mostrare gli articoli collegati alla ricerca effettuata dal visitatore. Inseriamo quindi una linea e un modulo blog al suo interno. Clicchiamo sulla rotella e rimaniamo nella scheda Contenuti. Poi attiviamo la casella Messaggi per la pagina corrente e scegliamo il numero dei post da visualizzare, inserendo un numero nella casella Post Count. Scegliamo il formato data e se visualizzare o meno il nome dell’autore. Se siete alle prime armi e avete appena creato il vostro blog, forse è il caso di disattivare la casella Autore per non creare troppi collegamenti inutili fra le pagine.

In Design/Layout scegliamo invece il formato Griglia grazie al menù a tendina e cambiamo alcuni parametri in Titolo Testo:

  • Font – Muli
  • Luce Soffusa – Pesante
  • Colore – #3a405a
  • Dimensione – 24px
  • Interlinea – 1.3em

Per la voce Body Testo inseriamo invece Montserrat come font e il solito #3a405a per il colore. Se lo desideriamo, possiamo modificare anche il colore del Metadata Testo, ovvero data e categoria, oppure i dettagli della Paginazione. In alternativa possiamo passare subito oltre e spostarci su Bordo. Portiamo a 20px i quattro angoli e lasciamo a 0px lo Spessore. Infine creiamo l’ombra dei diversi box, modificando la voce apposita come vedi nell’immagine qui sotto.

Pagina risultati EXTRA ombra blog

Conclusioni

Abbiamo scoperto finalmente come personalizzare la pagina di ricerca risultati con Extra e modificare i vari contenuti, rendendo più funzionale il nostro portale. Se hai ancora dei dubbi o richieste, lasciaci un commento qui sotto: ti risponderemo entro breve e cercheremo insieme a te la soluzione più adatta alle tue esigenze.

0 0 votes
Article Rating