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 consente di regolare l'altezza e la disposizione di ciascun divisore. Ciò ci consente di posizionare i separatori sopra determinate aree o contenuti nella sezione. Utilizzando l'opzione al passaggio del mouse per l'altezza del divisore, possiamo aggiungere effetti al passaggio del mouse unici che rivelano a contenuto parzialmente nascosto. Funziona benissimo per attirare l'attenzione su un invito all'azione o su un particolare pulsante su cui desideri che le persone facciano clic. Visitatori clic.
Cominciamo.
Risultato del campione
Cosa ti serve per iniziare
Per iniziare, è necessario quanto segue:
- Le Tema Divi installato e attivo
- Una nuova pagina creata per costruire da zero sul front-end (costruttore visivo)
- 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.
Prima 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 il titolo della sezione
Per aggiungere il titolo della sezione, crea un modulo di testo e aggiorna il file 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.
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.
Regola l'allineamento dell'immagine al centro.
Aggiunta di un invito all'azione nella colonna 2
Nella colonna 2, aggiungi una chiamata al modulo azione.
Aggiungi un URL di collegamento pulsante per assicurarti che il pulsante sia visualizzato.
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
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
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)
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
Layout 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.
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
Rallenta la durata della transizione
Per un ultimo passo, rallentiamo la durata della transizione.
Durata della transizione: 700ms
Risultato finale
Ecco il risultato finale sul desktop.
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!
