Ti piacerebbe sapere come rivelarlo contenuto quando si passa sopra il separatore di sezioni Divi ?
I divisori di sezione continuano ad essere un elemento di design Divi popolare. Esistono 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 divisore. Ciò ci consente di posizionare i separatori sopra determinate aree o il contenuto della sezione.
Utilizzando l'opzione al passaggio del mouse per l'altezza del separatore, possiamo aggiungere effetti al passaggio del mouse unici che rivelano a contenuto parzialmente nascosto. Funziona benissimo per attirare l'attenzione su un particolare invito all'azione o su un pulsante su cui desideri che le persone facciano clic. Visitatori clic.
Panoramica
Scarica DIVI ora!!!
Crea una nuova pagina con Divi Builder
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.
Progettazione dell'effetto al passaggio del divisore di sezione in Divi
Creazione della sezione e della linea
Crea una sezione regolare con una riga a due colonne.
Prima di aggiungere un modulo, apri le impostazioni della sezione e aggiorna quanto segue:
Gradiente di sfondo (a sinistra): #73ba57
Gradiente di sfondo (a destra): #2a4c23
Larghezza: 80%
Larghezza massima: 1 px
Allineamento sezione: Centro
Aggiungi il titolo della sezione
Per aggiungere il titolo della sezione, crea un modulo Testo e inserisci il seguente testo:
<h2>The Juice</h2>
Quindi, aggiorna il design come segue:
Carattere: Lato
Dimensione del testo: 80px
Spaziatura lettere: -5px
Margine: -50px (in alto), -40px (in basso)
Indice Z: -1
Il margine personalizzato e l'indice z consentiranno al testo di rimanere dietro l'immagine che aggiungeremo nel passaggio successivo.
Aggiungi immagine
Sotto il modulo Testo con il titolo nella colonna 1, aggiungi un modulo Immagine. Quindi carica un'immagine con uno sfondo trasparente. Usiamo un'immagine dal pacchetto di layout Juice Shop 240 pixel per 300 pixel.
La regolazione dell'allineamento dell'immagine al centro.
Aggiungi un modulo "Call To Action" nella colonna 2
Nella colonna 2, aggiungi un modulo Call To Action.
Aggiungi un URL di collegamento al pulsante per assicurarti che il pulsante venga visualizzato.
Sfondo CTA e stile del testo del titolo
Quindi, aggiorna le seguenti impostazioni di progettazione:
Sfondo: #ffffff
Colore del testo: scuro
Carattere del titolo: Lato
Peso del carattere del titolo: pesante
Stile carattere: TT
Dimensione del testo del titolo: 18px
Personalizza il pulsante CTA
Aggiorna il design del pulsante come segue:
- Usa stili personalizzati per pulsante: SÌ
- Colore testo pulsante: #ffffff
- Colore sfondo pulsante: #73ba57
- Larghezza bordo: 0px
Personalizza il bordo del modulo CTA
Quindi aggiungi un bordo per incorniciare il modulo come segue:
Larghezza bordo: 10px
Colore bordo: rgba(115,186,87,0.15)
Aggiunto l'effetto al passaggio del mouse allo splitter per rivelare il modulo "Call To Action".
Ora è il momento di aggiungere l'effetto al passaggio del mouse al divisore di sezione per rivelare il modulo "Call To Action". Per fare ciò, dobbiamo prima creare i nostri divisori di sezione.
Leggi anche: Divi: come rivelare il contenuto quando si passa il mouse sopra le schede
Aggiunta del separatore superiore
Aprire i parametri della sezione e il separatore superiore con i seguenti parametri.
Stile del divisore superiore: vedi screenshot
Colore divisorio superiore: #73ba57
Altezza divisore: 70% (impostazione predefinita), 0% (al passaggio del mouse)
Capovolgi divisorio superiore: orizzontale
Si noti che l'altezza del separatore inizia con un'altezza predefinita del 70%, quindi cambia a un'altezza dello 0% al passaggio del mouse.
Aggiunto divisorio inferiore
Quindi aggiungere un separatore inferiore simile alla sezione con i seguenti parametri.
- Stile del divisore inferiore: vedi screenshot
- Colore del divisorio inferiore: #73ba57
- Altezza divisore: 70% (impostazione predefinita), 0% (al passaggio del mouse)
- Capovolgi divisorio: orizzontale
- Disposizione: in cima al contenuto della sezione
Questo divisore inferiore inizia anche con un'altezza del 70% che scende allo 0% al passaggio del mouse. Tuttavia, poiché l'opzione di disposizione dello splitter è impostata sopra il contenuto, lo splitter di sezione nasconde la parte inferiore del modulo "Call To Action" nella colonna 1. Quindi, al passaggio del mouse, viene mostrato il resto del modulo.
Controlla il risultato finora.
Scarica DIVI ora!!!
Aggiunto l'effetto al passaggio del mouse dell'ombra della scatola per una transizione e un design unici
Per una transizione e un design unici al passaggio del mouse, possiamo aggiungere un effetto al passaggio del mouse dell'ombra del riquadro che si verificherà contemporaneamente all'effetto al passaggio del mouse dello splitter. Per fare ciò, aggiungi la seguente casella shadow alla sezione.
- Box Shadow: vedi screenshot
- Posizione orizzontale: 0px
- Posizione verticale: 0px
- Box Shadow Spread Strength: 0px (predefinito), 150px (al passaggio del mouse)
- Colore ombra: #73ba57
Rallenta la durata della transizione
Per un ultimo passo, rallentiamo la durata della transizione.
Durata della transizione: 700 ms
Risultato finale
Ora che abbiamo eseguito tutti i passaggi, vediamo il risultato finale.
Scarica DIVI ora!!!
Conclusione
Ci auguriamo che questo articolo ti abbia dato ispirazione per creare effetti al passaggio del mouse del divisore di sezione unici per rivelare il contenuto.
In effetti, la regolazione dell'hover splitter può essere di per sé un'ottima caratteristica di design. Inoltre, i progetti di esempio dovrebbero aiutarti a iniziare la tua esplorazione e i tuoi progetti.
Speriamo che questo tutorial ti ispiri per i 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, consultando la nostra guida su 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.
...
