Come utilizzare gli effetti al passaggio del mouse dell'altezza del divisore di sezione per rivelare il contenuto in Divi
Pubblicato: 2019-06-24I divisori di sezione continuano ad essere un popolare elemento di design Divi. Ci sono molti stili di divisori tra cui scegliere con opzioni utili che semplificano l'aggiunta di transizioni e sfondi unici alla tua pagina.
In questo tutorial, useremo i divisori di sezione in modo leggermente diverso. Divi consente di regolare l'altezza e la disposizione di ciascun divisorio. Questo ci consente di posizionare i divisori sopra determinate aree o contenuti all'interno della sezione. Utilizzando l'opzione al passaggio del mouse per l'altezza del divisore, possiamo aggiungere effetti al passaggio del mouse unici che rivelano il contenuto parzialmente nascosto. Funziona alla grande per attirare l'attenzione su un particolare invito all'azione o pulsante su cui desideri che i visitatori facciano clic.
Iniziamo.
Sbirciata
Scarica GRATUITAMENTE gli effetti al passaggio del mouse sull'altezza del divisore di sezione
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!
Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file json nel Divi Builder.
Andiamo al tutorial, vero?
Iscriviti al nostro canale Youtube
Cosa ti serve per iniziare
Per iniziare, dovrai avere quanto segue:
- Il tema Divi installato e attivo
- Una nuova pagina creata per costruire da zero sul front-end (visual builder)
- Alcune immagini fittizie da utilizzare nel design. Userò alcune immagini con sfondi trasparenti dal nostro Juice Shop Layout Pack.
Dopodiché, sei pronto per iniziare!
Implementazione del design dell'effetto al passaggio del mouse dell'altezza del divisore di sezione in Divi
Creazione della sezione e della riga
Innanzitutto, creiamo una sezione regolare con una riga di due colonne.
Prima di aggiungere un modulo, apri le impostazioni della sezione e aggiorna quanto segue:
Colore sfondo sfumato sinistro: #73ba57
Colore di sfondo sfumato a destra: # 2a4c23
Larghezza: 80%
Larghezza massima: 1080px
Allineamento della sezione: Centro
Aggiunta del 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:
<h2>The Juice</h2>
Quindi aggiorna il design come segue:
Intestazione 2 Carattere: Lato
Intestazione 2 Dimensioni del testo: 80 px
Intestazione 2 Spaziatura lettere: -5px
Margine: -50px in alto, -40px in basso
Indice Z: -1
Il margine personalizzato e l'indice z consentiranno al testo di sedersi dietro l'immagine che aggiungeremo nel passaggio successivo.
Aggiunta dell'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 dal Juice Shop Layout Pack che è 240px per 300px.
Regola l'allineamento dell'immagine al centro.
Aggiunta di un invito all'azione nella colonna 2
Nella colonna 2, aggiungi un modulo di invito all'azione.
Aggiungi un URL di collegamento al pulsante per assicurarti che il pulsante venga visualizzato.
Disegnare lo sfondo dell'invito all'azione e il testo del titolo
Quindi aggiorna le seguenti impostazioni di progettazione:
Colore di sfondo: #ffffff
Colore del testo: scuro
Carattere del titolo: Lato
Peso del carattere del titolo: pesante
Stile carattere titolo: TT
titolo Dimensione testo: 18px
Disegnare il pulsante CTA
Aggiorna il design del pulsante come segue:
Colore del testo del pulsante: #ffffff
Colore di sfondo del pulsante: #73ba57
Larghezza bordo pulsante: 0px
Disegnare il bordo CTA
Quindi aggiungi un bordo per inquadrare il modulo come segue:
Larghezza bordo: 10px
Colore del bordo: rgba (115,186,87,0,15)
Aggiunta dell'effetto hover altezza divisore per rivelare l'invito all'azione
Ora è il momento di aggiungere l'effetto hover altezza divisore di sezione per rivelare l'invito all'azione. Per fare ciò, dobbiamo prima creare i nostri divisori di sezione.
Aggiunta del divisore superiore
Apri le impostazioni della sezione e il divisore superiore con le seguenti impostazioni.
Stile divisore superiore: vedi screenshot
Colore divisore superiore: # 73ba57
Altezza divisore superiore: 70% (predefinito), 0% (al passaggio del mouse)
Capovolgimento divisore superiore: orizzontale
Notare che l'altezza del divisore inizia con un'altezza predefinita del 70% e poi passa a un'altezza dello 0% al passaggio del mouse.
Aggiunta del divisore inferiore
Quindi aggiungi un divisore inferiore simile alla sezione con le seguenti impostazioni.
Stile divisore superiore: vedi screenshot
Colore divisore superiore: # 73ba57
Altezza divisore superiore: 70% (predefinito), 0% (al passaggio del mouse)
Capovolgimento divisore superiore: orizzontale
Disposizione dei divisori: in cima al contenuto della sezione
Anche questo divisore inferiore inizia con un'altezza del 70% che passa allo 0% al passaggio del mouse. Tuttavia, poiché l'opzione di disposizione del divisore è impostata sopra il contenuto, il divisore di sezione nasconde la parte inferiore dell'invito all'azione nella colonna 1. Quindi, al passaggio del mouse, viene rivelato il resto dell'invito all'azione.
Controlla il risultato finora.
Aggiunta di un effetto Hover Box Shadow per una transizione e un design unici
Per una transizione e un design unici al passaggio del mouse, possiamo aggiungere un effetto di passaggio del mouse dell'ombra della scatola che avrà luogo contemporaneamente all'effetto del passaggio del mouse dell'altezza del divisore. Per fare ciò, aggiungi la seguente ombra di casella alla sezione.
Box Shadow: vedi screenshot
Posizione orizzontale dell'ombra del riquadro: 0px
Posizione verticale dell'ombra del riquadro: 0px
Forza di diffusione dell'ombra del riquadro: 0 px (predefinito), 150 px (al passaggio del mouse)
Colore scatola ombra: # 73ba57
Rallentare la durata della transizione
Per un ultimo passaggio, rallentiamo un po' la durata della transizione.
Durata della transizione: 700 ms
Risultato finale
Ecco il risultato finale sul desktop.
Se non vuoi che il contenuto venga nascosto sul display del tablet e del telefono, puoi facilmente modificare la disposizione dei divisori in "sotto il contenuto della sezione" per quei dispositivi.
Ecco il progetto definitivo su tablet e telefono.
Sperimentare con altri stili di divisori di sezione per progetti completamente unici in pochi secondi
Con questa configurazione in atto, puoi facilmente sperimentare diversi stili e combinazioni di divisori!
Eccone altri che ho incluso nel download gratuito.
Pensieri finali
Si spera che questo post ti abbia dato una piccola ispirazione su come creare alcuni effetti al passaggio del mouse dell'altezza del divisore di sezione unici per rivelare il contenuto. In effetti, la regolazione dell'altezza del divisore al passaggio del mouse può essere di per sé un ottimo elemento di design. E gli esempi di design dovrebbero aiutarti a dare il via alla tua esplorazione e ai tuoi progetti.
Non vedo l'ora di sentirti nei commenti.
Saluti!