Vai al contenuto principale

Come usare gli effetti di rollover per rivelare il contenuto in Divi

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 701.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

I divisori di sezione continuano ad essere un elemento di design popolare su Divi. Esistono molti stili di separatori tra cui alcune utili opzioni che semplificano l'aggiunta di transizioni e sfondi unici alla tua pagina.

In questo tutorial, utilizzeremo i divisori di sezione in modo leggermente diverso. Divi ti permette di regolare l'altezza e la disposizione di ogni divisorio. Questo ci permette di posizionare i separatori sopra determinate aree o determinati contenuti della sezione. Utilizzando l'opzione hover per l'altezza del divisore, possiamo aggiungere effetti hover unici che rivelano contenuti parzialmente nascosti. Funziona benissimo per attirare l'attenzione su un invito all'azione o un pulsante particolare su cui desideri che i visitatori facciano clic.

Cominciamo.

Risultato del campione

Divi ha rivelato l'animazione dei contenutiCosa ti serve per iniziare

Per iniziare, è necessario quanto segue:

  1. Tema Divi installato e attivo
  2. Una nuova pagina creata per costruire da zero sul front-end (costruttore visivo)
  3. Alcune immagini fittizie da utilizzare nel design. Userò alcune immagini con sfondi trasparenti dal file Juice Shop Layout Pack .

Dopodiché, sei pronto per iniziare!

Implementazione del design dell'effetto hover dell'altezza del divisore di sezione in Divi

Creazione della sezione e della linea

Iniziamo creando una sezione regolare con una riga di due colonne.

Scegli un layout diviPrima di aggiungere un modulo, apri le impostazioni della sezione e aggiorna quanto segue:

Sfumatura dello sfondo a sinistra: #73ba57
Gradiente di sfondo destro: #2a4c23
Larghezza: 80%
Larghezza massima: 1080px
Allineamento di sezione: centro

Ma puoi anche scegliere la combinazione di colori che ti piace in base alla tua immagine. il mio schema di colori è: # fff200 - # e09900 in gradiente.

Aggiungi uno sfondo divi degradato

Aggiungi il titolo della sezione

Per aggiungere il titolo della sezione, crea un modulo di testo e aggiorna il contenuto del corpo con la seguente intestazione h2:

Il succo

Quindi aggiornare il disegno come segue:

Intestazione carattere 2: Lato
Intestazione 2 Dimensioni testo: 80px
Intestazione 2 Letter spaziatura: -5px
Margine: -50px in alto, -40px in basso
Z-Index: -1

Il margine personalizzato e l'indice z consentiranno al testo di stare dietro l'immagine che aggiungeremo nel passaggio successivo.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Aggiungi immagine

Sotto il modulo di testo con il titolo nella colonna 1, aggiungi un modulo immagine. Quindi carica un'immagine con uno sfondo trasparente. Sto usando un'immagine del pacchetto layout Juice Shop di 240 pixel per 300 pixel.

Divi succo di fruttaRegola l'allineamento dell'immagine al centro.

Allineamento del centro Divi

Aggiunta di un invito all'azione nella colonna 2

Nella colonna 2, aggiungi una chiamata al modulo azione.

Invito all'azione sulla colonna 2

Aggiungi un URL di collegamento pulsante per assicurarti che il pulsante sia visualizzato.

Aggiungi un link alla chiamata all'azione divi

Sfondo CTA e stile titolo

Quindi aggiornare i seguenti parametri di progettazione:

Colore di sfondo: #ffffff
Colore del testo:
titolo Carattere: Lato
Politica del peso del titolo: pesante
Stile del carattere del titolo: TT
titolo Dimensioni del testo: 18px

Personalizza la call to action divi

Stilizzare il pulsante CTA

Aggiorna il design del pulsante come segue:

Colore testo pulsante: #ffffff
Colore sfondo pulsante: # e09900
Larghezza del bordo del pulsante: 0 px

Personalizza lo sfondo di iamge divi

Disegnare il bordo della CTA

Quindi aggiungi un bordo per incorniciare il modulo come segue:

Larghezza del bordo: 10px
Colore del bordo: rgba (224,145,0,0.25)

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Bordo personalizzato divi

Aggiunto effetto hover dell'altezza del divisore per rivelare la chiamata all'azione

Ora è il momento di aggiungere l'effetto hover dell'altezza della divisione della sezione per rivelare l'invito all'azione. Per fare ciò, dobbiamo prima creare i nostri divisori di sezione.

Aggiunta del separatore superiore

Aprire i parametri della sezione e il separatore superiore con i seguenti parametri.

Stile divisore superiore: vedi screenshot Colore divisore superiore: # 73ba57 Altezza divisore superiore: 70% (predefinito), 0% (al passaggio del mouse)
Divisorio ribaltabile: orizzontale

Si noti che l'altezza del separatore inizia con un'altezza predefinita di 70%, quindi si sposta su un'altezza di 0% al passaggio del mouse.

Aggiunta del divisore inferiore

Quindi aggiungere un separatore inferiore simile alla sezione con i seguenti parametri.

Stile divisore superiore: vedi screenshot Colore divisore superiore: # 73ba57 Altezza divisore superiore: 70% (predefinito), 0% (al passaggio del mouse)
Divisorio ribaltabile: orizzontale
Disposizione divisore: nella parte superiore della sezione contenuto

Anche questo separatore di sfondo inizia con un'altezza del 70% che cambia allo 0% al passaggio del mouse. Tuttavia, poiché l'opzione di layout del separatore è impostata nella parte superiore del contenuto, il separatore di sezione nasconde la parte inferiore dell'invito all'azione nella colonna 1. Quindi, al passaggio del mouse, il resto della l la chiamata all'azione viene rivelata.

Controlla il risultato finora.

Personalizza i bordi dei divi

Aggiunto un effetto al passaggio dell'ombra del riquadro per una transizione e un design unici

Per una transizione e un design unici al passaggio del mouse, possiamo aggiungere un effetto al passaggio dell'ombra del riquadro che avrà luogo contemporaneamente all'effetto al passaggio dell'altezza del divisore. Per fare ciò, aggiungi l'ombra della seguente casella alla sezione.

Box Shadow: vedi screenshot
Posizione orizzontale ombra casella: 0px
Posizione verticale casella ombreggiata: 0px
Box Shadow Spread Force: 0px (impostazione predefinita), 150px (passaggio del mouse)
Colore ombra casella: #73ba57

Animazione del bordo Divi

Rallenta la durata della transizione

Per un ultimo passo, rallentiamo la durata della transizione.

Durata della transizione: 700ms

Configura transizioni diviRisultato finale

Ecco il risultato finale sul desktop.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Risultato finale Divi

Sulla base di quanto abbiamo fatto sopra, potrai personalizzare la visualizzazione su mobile e tablet.

Considerazioni finali

Spero che questo tutorial ti abbia dato l'ispirazione per creare effetti al passaggio del mouse dell'altezza del divisore di sezione unici per rivelare il contenuto. In effetti, la regolazione dell'altezza del divisorio sospeso può essere un elemento di design notevole. E gli esempi di progettazione dovrebbero aiutarti a iniziare la tua esplorazione e i tuoi progetti.

Spero di sentirti nei commenti.

Alla tua salute!

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
6 azioni
quota6
Tweet
Enregistrer