Come creare un dispositivo di scorrimento per testimonianze compatto per un'intestazione in Divi
Pubblicato: 2021-07-16L'aggiunta di testimonianze al tuo sito è un modo efficace per aumentare la credibilità della tua attività (o marchio) e creare fiducia con i visitatori. Un dispositivo di scorrimento delle testimonianze è uno strumento utile per mostrare le testimonianze tutte in un unico posto. Con questo in mente, ha senso aggiungere un dispositivo di scorrimento delle testimonianze compatto alla tua intestazione in modo che quelle testimonianze siano una delle prime cose che l'utente vede quando visita il tuo sito.
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 Slider di Divi in un modo divertente e unico.
Iniziamo!
Sbirciata
Ecco lo slider compatto per testimonianze che costruiremo utilizzando il Divi Slider Module.
Ed ecco lo stesso dispositivo di scorrimento delle testimonianze aggiunto a un'intestazione globale.
Ed ecco come appare sul cellulare.
Scarica il layout e il modello GRATUITAMENTE
Per mettere le mani sui disegni 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 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.
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!
Importa il layout nella libreria Divi
Per importare il layout della sezione nella tua libreria Divi, vai alla libreria Divi.
Fare clic sul pulsante Importa.
Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer. Sarà il file JSON denominato "divi-short-testimonial-slider-module-layout.json".
Quindi fare clic sul pulsante di importazione.
Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.
Importa il modello di intestazione in Divi Theme Builder
Se desideri importare il modello di intestazione con il dispositivo di scorrimento della testimonianza compatto aggiunto all'intestazione, dovrai navigare in Divi > Generatore di temi.
Quindi usa l'icona della portabilità in alto a destra della pagina per importare il file JSON. Sarà il file denominato "divi-short-testimonial-slider-header-template.json".
Passiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai fare quanto segue:
- Se non l'hai ancora fatto, installa e attiva il tema Divi.
- Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
- Scegli l'opzione "Crea da zero".
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Come creare uno slider compatto per testimonianze in Divi
Aggiungi nuovo modulo riga e dispositivo di scorrimento
Per iniziare, aggiungi una riga a una colonna alla sezione.
Quindi aggiungi un modulo di scorrimento alla riga.
Modifica diapositiva
Sotto le impostazioni del dispositivo di scorrimento, elimina la seconda diapositiva predefinita nella scheda contenuto e quindi fai clic per modificare le impostazioni della diapositiva rimanente.
Contenuto della diapositiva
Nella scheda contenuto delle impostazioni della diapositiva, aggiorna quanto segue:
- Titolo: “Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget.”
- Testo del pulsante: Leggi tutto
- Corpo: — Tatiana Gagelman
Una volta fatto, salva le impostazioni della diapositiva.
Aggiorna le impostazioni del dispositivo di scorrimento
Duplica diapositiva e nascondi controlli
Dopo aver aggiornato la prima diapositiva con il contenuto, duplica quella diapositiva per creare una o più diapositive aggiuntive.
Quindi, nel gruppo di opzioni Elementi, nascondi i controlli del dispositivo di scorrimento aggiornando quanto segue:
- Mostra controlli: NO
Aggiorna sfondo per tutte le diapositive
Successivamente, aggiungeremo uno sfondo che verrà utilizzato per tutte le diapositive. Questo sfondo includerà un gradiente di sfondo e uno stile di immagine di sfondo (per quando/se aggiungi un'immagine di sfondo dell'autore a una singola diapositiva).
Per aggiungere lo sfondo, aggiorna quanto segue:
- Colore sfondo sfumato sinistro: #000000
- Colore di sfondo sfumato a destra: #000000
- Dimensione immagine di sfondo: adatta
- Posizione immagine di sfondo: centro sinistra
- Miscela immagine di sfondo: luminosità
È importante notare che non stiamo aggiungendo un'immagine di sfondo qui. Stiamo solo aggiungendo la dimensione, la posizione e la modalità di fusione per l'immagine che verrà utilizzata da una singola diapositiva. È più facile aggiungerlo qui piuttosto che dover aggiungere lo stesso stile a ciascuna diapositiva separatamente. Successivamente, ti mostreremo come aggiungere immagini alle singole diapositive.
Impostazioni di progettazione del dispositivo di scorrimento
Nella scheda Progettazione, aggiorna quanto segue:
Sovrapposizione
- Usa sovrapposizione sfondo: S
- Colore sfondo sovrapposizione: rgba(0,0,0,0.7)
Testo del titolo
- Livello titolo titolo: H4
- Carattere del titolo: Josefin Sans
- Peso del carattere del titolo: medio
- Allineamento del testo del titolo: a sinistra
- Dimensione del testo del titolo: 16 px (desktop e tablet), 14 px (telefono)
- Altezza della riga del titolo: 1,5 em
Corpo del testo
- Carattere del corpo: Josefin Sans
- Allineamento del corpo del testo: a sinistra
- Colore del corpo del testo: #aaaaaa
- Spaziatura delle lettere del corpo: 0,05 em
Pulsante
- Usa stili personalizzati per pulsante: S
- Dimensione del testo del pulsante: 1 em
- Colore del testo del pulsante: predefinito (desktop), #000 (passa il mouse)
- Colore di sfondo del pulsante (desktop): rgba (255,255,255,0.19)
- Colore di sfondo del pulsante (passa il mouse): #ffffff
- Larghezza bordo pulsante: 0px
- Spaziatura delle lettere dei pulsanti: 0,05 em
- Carattere pulsante: Josefin Sans
- Margine pulsante: 0px in alto, 0px in basso
- Imbottitura pulsanti: 0px in alto, 0px in basso, 0.6em a sinistra, 0.6em a destra
Imbottitura e animazione automatica
Quindi aggiorna la spaziatura del cursore in modo che sia compatto e imposta la velocità di animazione automatica che desideri per il cursore.
- Margine: 0px in alto, 0px in basso
- Imbottitura: 1em in alto, 1em in basso, 5% a sinistra, 5% a destra
- Animazione automatica: ON
- Velocità di animazione automatica: 3500
CSS personalizzato
Nella scheda Avanzate, aggiungi il seguente CSS personalizzato per aggiornare lo stile di ciascun elemento del dispositivo di scorrimento (Titolo, Pulsante e Frecce)
Titolo della diapositiva
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
Ciò assicurerà 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 bene sotto il titolo e a destra della diapositiva, rendendo lo slider ancora più compatto.
Frecce di scorrimento
font-size: 30px; margin-top: -15px;
Ciò rende semplicemente le frecce di navigazione del dispositivo di scorrimento più piccole per adattarsi alle dimensioni compatte del dispositivo di scorrimento.
Suggerimento: aggiungi lo stesso colore di sfondo alla colonna per transizioni di diapositiva più fluide
Attualmente, l'animazione di ogni diapositiva avrà animato il colore di sfondo insieme al contenuto della diapositiva, per evitare che lo sfondo mostri questa animazione, possiamo dare lo stesso colore di sfondo alla colonna in modo che la transizione sia più fluida.
Per fare ciò, apri le impostazioni per la colonna principale del dispositivo di scorrimento e aggiungi il seguente colore di sfondo:
- Colore di 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.
Una volta aggiunta l'immagine di sfondo alla diapositiva, l'immagine di sfondo erediterà gli stili già presenti nelle impostazioni del dispositivo di scorrimento (non diapositiva).
Risultato
Controlla il risultato finale.
Aggiunta del dispositivo di scorrimento compatto per testimonianze a un modello di intestazione
Salvataggio del modulo nella libreria Divi
Prima di poter aggiungere lo slider compatto della testimonianza a un'intestazione globale, dobbiamo prima salvare il modulo nella libreria Divi. Puoi farlo passando il mouse sopra il modulo di scorrimento e facendo clic sull'icona "Salva nella libreria". Quindi dai un nome al layout e fai clic sul pulsante "Salva nella libreria".
Aggiunta del layout del modulo di testimonianza compatto a un modello di intestazione
Modifica l'intestazione personalizzata
Una volta che il nuovo modulo di scorrimento delle testimonianze è stato salvato nella libreria, siamo pronti per aggiungerlo a un'intestazione personalizzata.
Passa a Divi > Generatore di temi, quindi fai clic per modificare l'intestazione personalizzata per il modello.
Inserisci il layout del modulo di scorrimento della testimonianza salvato dalla libreria
Nell'editor del layout dell'intestazione, fai clic per aggiungere il modulo di scorrimento delle testimonianze compatto dove desideri che venga visualizzato.
Nella modale Inserisci modulo, seleziona la scheda Aggiungi da libreria. Trova lo slider compatto delle testimonianze che hai precedentemente salvato nella libreria e selezionalo.
Una volta caricato, salva le modifiche.
Risultato finale
Ed ecco lo stesso dispositivo di scorrimento delle testimonianze aggiunto a un'intestazione globale.
Ed ecco lo stesso dispositivo di scorrimento delle testimonianze senza le immagini di sfondo dell'autore.
Ed ecco come appare sul cellulare.
Pensieri finali
Il dispositivo di scorrimento delle testimonianze compatto può essere una nuova aggiunta all'intestazione di qualsiasi sito Web che cerca di aumentare la credibilità dei propri servizi nella posizione più visibile del proprio sito Web. Puoi anche usarlo per reindirizzare i visitatori a una pagina di testimonianze o a una pagina di vendita per aumentare le conversioni. Speriamo che ti torni utile.
Non vedo l'ora di sentirti nei commenti.
Saluti!