Divi: come creare un dispositivo di scorrimento testimonial compatto per un'intestazione

Desideri inserire uno slider testimonial compatto per un'intestazione Divi?

L'aggiunta di testimonianze al tuo sito è un modo efficace per creare credibilità per la tua attività (o il tuo marchio) e creare fiducia con gli utenti. Visitatori. 

Un dispositivo di scorrimento delle testimonianze è uno strumento utile per mostrare le testimonianze in un unico posto. Con questo in mente, ha senso aggiungere un dispositivo di scorrimento delle testimonianze compatto all'intestazione in modo che queste testimonianze siano una delle prime cose che l'utente vede quando visita il tuo sito web.

In questo tutorial, ti mostreremo come creare un dispositivo di scorrimento delle testimonianze compatto per mostrare brevi testimonianze nell'intestazione del tuo sito web. 

Per fare ciò, modificheremo il modulo Divi Slider in un modo divertente e unico.

Cominciamo!

Ma prima puoi scoprire la nostra guida su Divi, il miglior tema WordPress al mondo e il più facile da usare

Panoramica

Ecco lo slider testimonial compatto che costruiremo usando il modulo Slider di Divi.

Ed ecco lo stesso cursore testimonial aggiunto a un'intestazione globale.

Ed ecco come appare sul cellulare.

Crea una nuova pagina con Divi Builder

Per iniziare, dovrai fare quanto segue:

Dalla dashboard di WordPress, vai a Pagine> Aggiungi nuovo per creare una nuova pagina.

Dagli un titolo che abbia senso per te e fai clic Usa Divi Builder

quindi fare clic su Inizia a costruire (Costruisci da zero)

Successivamente, avrai una tela bianca per iniziare a progettare in Divi.

Come creare uno slider di testimonianze compatto in Divi

Aggiungi una nuova riga e un modulo di scorrimento

Per iniziare, aggiungi una riga di una colonna alla sezione.

Quindi aggiungi un modulo Slider alla linea.

Modifica diapositiva

Sotto le impostazioni del dispositivo di scorrimento, rimuovi la seconda diapositiva predefinita sotto la scheda Contenuti, quindi fai clic per modificare le impostazioni per la diapositiva rimanente.

Contenuto della diapositiva

Sotto la scheda Contenuti dalle impostazioni della diapositiva, aggiorna quanto segue:

• Titolo: “Donec solicitudin molestie malesuada. Vivamus suscipit torturatore eget.
• Pulsante: Leggi tutto
• Corpo: — Tatiana Gagelman

Al termine, salva le impostazioni della diapositiva.

Leggi anche: Divi: come utilizzare le impostazioni della maschera di sfondo e le opzioni di trasformazione del modello

Aggiorna le impostazioni del dispositivo di scorrimento

Duplica i controlli diapositiva e nascondi

Dopo aver aggiornato la prima diapositiva con contenuto, duplica questa diapositiva per creare una o più diapositive aggiuntive.

Quindi sotto il gruppo di opzioni Elementi, nascondi i controlli del dispositivo di scorrimento aggiornando quanto segue:

• Mostra controllo: NO

Aggiorna lo sfondo di tutte le diapositive

Successivamente, aggiungeremo uno sfondo che verrà utilizzato per tutte le diapositive.

Per aggiungere lo sfondo, aggiorna quanto segue:

• Gradiente di sfondo:
  • Gradiente si ferma 0%: #000000
  • Gradiente si ferma 100%: #000000

• Immagine di sfondo :
  • Taglia: Vestibilità
  • Posizione: centro sinistra
  • Miscela: Luminosità

Impostazioni del dispositivo di scorrimento

Sotto la scheda Design, aggiorna quanto segue:

copertura

• Usa sovrapposizione di sfondo: SÌ
• Colore sovrapposizione sfondo: rgba(0,0,0,0.7)

Titolo del testo

• Titolo:
  • Livello di intestazione: H4
  • Fonte: Josefin Sans
  • Peso del carattere: medio
  • Allineamento del testo: a sinistra
  • Dimensione del testo: 16px (desktop e tablet), 14px (telefono)
  • Altezza della linea: 1,5 em

Il corpo del testo

• Corpo:
  • Fonte: Josefin Sans
  • Allineamento del testo: a sinistra
  • Colore del testo: #aaaaaa
  • Spaziatura lettere: 0,05 em

Pulsante

• Usa la dimensione personalizzata per il pulsante: SÌ
• Pulsante:
  • Dimensione del testo: 1em
  • Colore del testo: predefinito (desktop), #000 (al passaggio del mouse)
  • Colore di sfondo (desktop): rgba(255,255,255,0.19)
  • Colore di sfondo (al passaggio del mouse): #ffffff
  • Larghezza bordo: 0 pixel
  • Spaziatura lettere: 0,05 em
  • Fonte: Josefin Sans
  • Margine: 0px (in alto e in basso)
  • Imbottitura: 0px (superiore e inferiore), 0,6 em (sinistra e destra)

Riempimento automatico e animazione

Quindi, aggiorna la spaziatura del cursore in modo che sia compatta e imposta la velocità di animazione automatica desiderata.

• Margine: 0px (superiore e inferiore)
• Imbottitura: 1em (in alto e in basso), 5% (sinistra e destra)
• Animazione automatica: ATTIVA
• Velocità di animazione automatica: 3500

CSS personalizzato

Sotto la scheda Tecnologia, aggiungi il seguente CSS personalizzato per aggiornare lo stile di ogni elemento slider (titolo, pulsante e frecce)

Titolo della diapositiva

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Ciò garantirà che il titolo della diapositiva non crei un'interruzione di riga su schermi più piccoli.

Pulsante di scorrimento

position:absolute;
bottom: 1em;
right: 6%;

Ciò conferisce al pulsante una posizione assoluta in modo che si trovi ben al di sotto del titolo ea destra della diapositiva, rendendo lo slider ancora più compatto.

Trascina le frecce

font-size: 30px;
margin-top: -15px;

Riduce semplicemente le frecce di navigazione del dispositivo di scorrimento per adattarsi alle dimensioni compatte del dispositivo di scorrimento.

Suggerimento: aggiungi lo stesso colore di sfondo alla colonna per transizioni diapositive più fluide

Per fare ciò, apri le impostazioni della colonna padre dello slider e aggiungi il seguente colore di sfondo:

• Sfondo: #000000

Aggiunta di immagini di sfondo dell'autore a una diapositiva

Se desideri includere un'immagine di sfondo dell'autore per una diapositiva, puoi farlo aggiungendo un'immagine di sfondo a ciascuna diapositiva.

Dopo aver aggiunto l'immagine di sfondo alla diapositiva, l'immagine di sfondo erediterà gli stili già presenti nelle impostazioni del dispositivo di scorrimento (non della diapositiva).

Risultato

Scopri il risultato finale.

Aggiunta del dispositivo di scorrimento della testimonianza compatta a un modello di intestazione

Salva il modulo nella libreria Divi

Prima di poter aggiungere il dispositivo di scorrimento testimonial compatto a un'intestazione globale, dobbiamo prima registrare il modulo nella libreria Divi. 

Puoi farlo passando con il mouse sopra il modulo Slider e facendo clic su " Aggiungi alla libreria“. Quindi dai un nome al layout e fai clic sul pulsante " Salva nella libreria".

Aggiunto layout del modulo testimonial compatto a un modello di intestazione

Modifica intestazione personalizzata

Una volta che il nuovo modulo slider testimonial è stato salvato nella libreria, siamo pronti per aggiungerlo a un'intestazione personalizzata.

Accesso a Divi > Generatore di temi, quindi clicca sull'icona che ti permette di modificare " Personalizza intestazione".

Inserisci il modulo slider testimonial salvato dalla libreria

Nell'editor del layout dell'intestazione, fai clic per aggiungere il modulo di scorrimento delle testimonianze compatte nel punto in cui desideri che appaia.

Nel mod “Inserisci modulo”, seleziona la scheda "Aggiungi dalla libreria". Trova il dispositivo di scorrimento della testimonianza compatta che hai salvato in precedenza nella libreria e selezionalo.

Una volta caricato, salva le modifiche.

Guarda anche: Divi: come visualizzare il modulo di intestazione a larghezza intera a schermo intero

Risultato finale

Di seguito è riportato il dispositivo di scorrimento della testimonianza aggiunto a un'intestazione globale.

Qui abbiamo lo slider delle testimonianze senza le immagini di sfondo dell'autore.

Ed ecco come appare sul cellulare.

Scarica DIVI ora!!!

Conclusione

Lo slider compatto delle testimonianze può essere una nuova aggiunta all'intestazione di qualsiasi cosa sito web cercando di aumentare la credibilità dei suoi servizi nel posto più visibile sul suo sito web. 

Puoi anche usarlo per reindirizzare Visitatori a una pagina di testimonianze o a una pagina di vendita per aumentare le conversioni. Speriamo che questo ti possa essere utile nei tuoi prossimi progetti Divi.

Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.

Puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet.

Non esitate a consultare anche la nostra guida sul 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.

...