Come personalizzare il tuo Divi Slider per modificare elementi specifici con ogni diapositiva

Sappiamo tutti che i cursori sono meravigliosi per massimizzare quella sezione principale above the fold del tuo sito web. Sono grandi! Gli utenti sono accolti con più CTA e importanti funzionalità che scorrono in vista senza mai dover scorrere la pagina. Ma a volte troppi cambiamenti nel design e nel contenuto da una diapositiva all'altra possono distrarre o sopraffare i visitatori. Ecco perché in questo tutorial ti mostrerò come personalizzare il tuo slider Divi per cambiare solo elementi specifici con ogni transizione della diapositiva. Ciò ti consente di mantenere coerenti i contenuti principali e i componenti di progettazione del tuo dispositivo di scorrimento mentre cambi solo un elemento specifico (come una singola parola o pulsante) con ogni diapositiva. I visitatori saranno in grado di elaborare facilmente la modifica e comprendere chiaramente il tuo invito all'azione.

Immergiamoci!

Divi Slider Sneak Peek

Hear è un'anteprima del design e della funzionalità dello slider Divi che costruiremo nel tutorial di oggi.

Nota come questo cambia solo una parola nel corpo del testo su ogni diapositiva.

Nota come con questo esempio, sia la parola del testo del corpo che i colori dei pulsanti e del punto cambiano con ogni diapositiva.

Il concetto di base spiegato

Per impostazione predefinita, il cursore Divi animerà il testo della descrizione con ogni transizione a una nuova diapositiva che si dissolve e sposta leggermente il contenuto verso l'alto in posizione.

Ma, con una semplice riga di CSS personalizzato, possiamo disabilitare quell'animazione verso l'alto del testo. E, se duplichiamo la diapositiva, eliminiamo lo sfondo e cambiamo solo uno degli elementi (come l'unica parola nel corpo del testo), vedrai solo una parola che cambia con ogni diapositiva.

Puoi utilizzare questo concetto per modificare solo testo, pulsanti o colori specifici, mantenendo il resto degli elementi di design in gioco con ogni diapositiva.

Iniziare

Iscriviti al nostro canale Youtube

Per questo tutorial, tutto ciò di cui hai bisogno è il tema Divi installato e attivo. Costruiremo il nostro slider Divi da zero utilizzando il Divi builder sul front-end.

Per iniziare, crea una nuova pagina e assegna un titolo alla tua pagina. Quindi fare clic per utilizzare Divi Builder e selezionare l'opzione "Costruisci da zero". Quindi fare clic sul pulsante per "Crea sul front-end".

Ora sei pronto per iniziare con il design.

Configurazione del contenuto Divi Slider

Per questo esempio, userò un modulo slider a tutta larghezza, ma questo tutorial si applica anche ai normali moduli slider. Iniziamo aggiungendo alla tua pagina una sezione a tutta larghezza con un modulo di scorrimento a tutta larghezza.

Per poter vedere le modifiche al contenuto del nostro dispositivo di scorrimento, aggiungiamo prima un colore di sfondo scuro alla sezione a larghezza intera. Apri le impostazioni della sezione e assegnagli un colore di sfondo nero (#222222).

Non sarai ancora in grado di vederlo perché il colore di sfondo del dispositivo di scorrimento predefinito lo sta coprendo. Torneremo indietro per completare il design dello sfondo della sezione più avanti nel tutorial.

Ora passiamo alle impostazioni di Fullwidth Slider ed eliminiamo una delle diapositive predefinite, lasciandone solo una. Quindi apri le impostazioni della diapositiva.

Aggiorna le impostazioni della diapositiva come segue:

Titolo: "Siti web che ti danno di più..."
Testo del pulsante: "Inizia"

Sotto Contenuto aggiungi il seguente html:

Business<span style="color: #EE164D;">.</span>

(Questo aggiunge un colore personalizzato al punto (o punto) dopo la parola.)

Colore di sfondo: rgba (255,255,255,0)

Salva le impostazioni.

Ora duplica la diapositiva due volte in modo da avere un totale di tre diapositive.

Apri le impostazioni della seconda diapositiva. In Contenuto, sostituisci solo la parola "Business" con "Denaro" mantenendo invariato il resto dell'html, dell'intestazione e del testo del pulsante. Vogliamo solo cambiare questa parola su ogni diapositiva. Quindi salvare le impostazioni.

Quindi apri le impostazioni della terza diapositiva. In Contenuto, sostituisci la parola "Business" con "Success" e salva le impostazioni.

Tutto fatto! Questo si prende cura del nostro contenuto del dispositivo di scorrimento.

Ottimizzazione dell'animazione del testo descrittivo

Dopo che il nostro contenuto del cursore è a posto, dobbiamo disabilitare la nostra animazione in modo che il nostro testo non salti ad ogni diapositiva. Per fare ciò, vai alle impostazioni del cursore a larghezza intera e aggiungi il seguente CSS personalizzato sotto Descrizione diapositiva:

animation-name: none;

Per questo esempio, ha senso rendere automatica la nostra animazione del cursore e aumentare la velocità dell'animazione in modo che gli utenti possano vedere più rapidamente la modifica della parola in ogni diapositiva. Per fare ciò, vai alla scheda Progettazione e aggiorna quanto segue:

Animazione automatica: ON
Velocità di animazione automatica (in ms): 3000

Ora controlla il risultato finora. Dovresti vedere solo una parola nel contenuto di ogni modifica del cursore senza l'animazione verso l'alto.

Progettare lo Slider

Con i nostri contenuti e funzionalità in atto, possiamo iniziare a modellare il nostro dispositivo di scorrimento con un bellissimo design elegante.

Apri le impostazioni del cursore a larghezza intera e aggiorna quanto segue:

Orientamento del testo: sinistra
Carattere del titolo: Lato
Peso del carattere del titolo: leggero
Dimensione del testo del titolo: 32px
Titolo Testo Ombra: vedi screenshot
Title Text Shadow Blur Strength: 0em (in pratica elimina l'ombra di testo predefinita)

Carattere del corpo: Lato
Dimensioni del corpo del testo: 5vw (desktop), 50px (tablet), 40px (smartphone)
Altezza della linea del corpo: 1,6 em
Ombra del corpo del testo: vedi screenshot
Forza sfocatura dell'ombra del testo del corpo: 0em (in pratica elimina l'ombra del testo predefinita)

Dimensione del testo del pulsante: 16 px
Colore di sfondo del pulsante: #ee164d
Larghezza bordo pulsante: 8px
Colore bordo pulsante: #ee164d
Raggio bordo pulsante: 0px
Spaziatura tra le lettere dei pulsanti: 1px
Carattere pulsante: Lato
Allineamento dei pulsanti: a destra

Larghezza: 70% (desktop), 100% (tablet), 100% (smartphone)
Allineamento del modulo: centro

Imbottitura personalizzata (desktop): 19vw in alto, 8vw in basso
Imbottitura personalizzata (tablet): 19vw in alto, 4vw in basso. 0px a sinistra, 0px a destra
Imbottitura personalizzata (smartphone): 30vw in alto, 4vw in basso, 0px a sinistra, 0px a destra

Box Shadow: vedi screenshot
Posizione orizzontale dell'ombra del riquadro: -190 px
Posizione verticale dell'ombra del riquadro: 60 px
Colore scatola ombra: rgba (0,16,17,0.7)

E per un ultimo passaggio, disabilitiamo i nostri elementi di scorrimento in modo da non vedere le frecce oi controlli del dispositivo di scorrimento.

Questo si prende cura del nostro design del cursore Divi!

Personalizzazione degli stili di sezione

Il resto del design verrà aggiunto alla nostra sezione, inclusa la nostra immagine di sfondo che fungerà da sfondo statico per tutte le nostre diapositive. L'aggiunta di un'immagine di sfondo alla sezione è migliore per questo utilizzo perché non vedrai alcuna leggera transizione da un'immagine all'altra come faresti se aggiungessi l'immagine di sfondo al tuo modulo di scorrimento.

Apri le impostazioni della sezione e aggiorna quanto segue:

Immagine di sfondo: [inserisci un'immagine intorno a 1920px per 800px]
Colore sfondo sfumato sinistro: rgba (0,16,17,0.45)
Colore di sfondo sfumato a destra: rgba (0,16,17,0.92)
Posizione di partenza: 34%
Posizione finale: 0%
Posiziona il gradiente sopra l'immagine di sfondo: S

Quindi, dai alla tua sezione un bordo destro come segue:

Larghezza bordo destro: 5vw
Colore bordo destro: #001011

E infine, dai alla sezione un'ombra di scatola per aiutare a bilanciare la struttura del design.

Box Shadow: vedi screenshot
Posizione orizzontale dell'ombra del riquadro: -200 px
Posizione verticale dell'ombra del riquadro: -150 px
Colore scatola ombra: rgba (0,16,17,0.74)

Questo è tutto!

Progetto finale del Divi Slider

Ecco il design finale dello slider Divi personalizzato.

Ed ecco la funzionalità delle diapositive. Nota come cambia solo una parola con ogni diapositiva.

Progetto finale su dispositivi mobili

Tavoletta

Smartphone

Sperimenta con la modifica di altri elementi

Puoi sperimentare la modifica di altri elementi con ogni diapositiva per design e funzionalità più creativi. Ad esempio, puoi assegnare a ciascuno dei pulsanti delle diapositive un colore diverso con ciascuna diapositiva e abbinare il colore del periodo con il nuovo colore del pulsante su ciascuna diapositiva.

Ecco come sarebbe.

Potresti anche esplorare la modifica del colore dell'ombra della casella diapositiva o di qualche altro elemento di design. Ci sono innumerevoli possibilità!

Pensieri finali

Questo design e funzionalità del cursore Divi personalizzato offre una buona alternativa ai tradizionali cursori là fuori. Il nucleo del design non cambia, il che evidenzia ulteriormente l'aspetto importante del tuo CTA che cambia con ogni diapositiva. Sembra che questo potrebbe essere qualcosa che potresti testare per vedere se può aumentare le conversioni!

Fatemi sapere cosa ne pensate nei commenti qui sotto.

Saluti!