Ogni settimana Tema elegante offre nuovi pacchetti di layout Divi gratuito che puoi utilizzare per il tuo prossimo progetto. Per uno dei pacchetti di presentazione, condividono anche un caso d'uso che ti aiuterà a prendere il tuo sito web al livello più alto. Questa settimana, nell'ambito dell'iniziativa di design Divi In classe ti mostreremo come utilizzare in modo creativo le opzioni al passaggio del mouse di Divi per evidenziare i CTA sulle tue pagine. Stiamo utilizzando il pacchetto di servizi di lavanderia di Divi e tratteremo tre diversi esempi di evidenziazione del tuo invito all'azione.
Panoramica
Prima di immergerci nel tutorial, esaminiamo rapidamente cosa creeremo per avere un'idea.
Aggiungi una nuova pagina utilizzando il layout Servizio lavanderia o Lavanderia
Inizia aggiungendo una nuova pagina al tuo sito web e scarica la homepage del servizio di lavanderia. I tre esempi che creeremo saranno basati su questo layout. Una volta che hai l'approccio, puoi applicare questi esempi a qualsiasi layout su cui stai lavorando.
Clona il modulo di testo
Cominciamo con il primo esempio! Trasformiamo una mod di testo esistente in un incentivo al passaggio del mouse. Questo approccio apparirà solo sul desktop. Questo è il motivo per cui stiamo clonando il modulo iniziale per consentirne la visualizzazione su schermi più piccoli senza effetti al passaggio del mouse.
visibilità
Modulo di testo # 1
Continua nascondendo il primo modulo su tablet e telefono.
Modulo di testo # 2
E nascondi il secondo modulo sul desktop.
Aggiungi un effetto di rollover al modulo di testo desktop
Aggiungi un titolo 3
Modifichiamo solo il primo modulo di testo, che sarà quello che apparirà sul desktop. Apri il modulo e aggiungi contenuto dalla rubrica 3 alla zona di contenuto.
Passa il mouse sopra le impostazioni del testo
Quindi vai alle impostazioni del testo e "nascondi" il testo del paragrafo del tuo modulo aggiungendo 0px alla dimensione del testo al passaggio del mouse.
- Dimensione del testo: 0px
Passa il mouse sopra le impostazioni del testo 2
Fai lo stesso per le impostazioni del testo per Intestazione 2 al passaggio del mouse.
- Titolo 2 Dimensioni testo: 0px
Titolo del testo predefinito 3
Quindi, accedi ai parametri di testo dell'argomento 3 e apporta le modifiche.
- Titolo 3 Font: Josefin Sans
- Titolo 3 Caratteri: Semi grassetto
- Titolo 3 Dimensioni testo: 0px
Passa il mouse sull'intestazione 3 Impostazioni testo
Cambia la dimensione del testo passando il mouse.
- Titolo 3 Dimensioni testo: 40px
Impostazioni di spaziatura predefinite
Quindi vai alle impostazioni di spaziatura e assicurati che vengano applicati i seguenti valori di riempimento personalizzato:
- Imbottitura superiore: 80px
- Imbottitura inferiore: 50px
- Padding sinistro: 40px
- Tappezzeria a destra: 40px
Impostazioni spaziatura rollover
Aggiungi anche un margine di rollover personalizzato.
- Margine superiore: 50px
- Margine sinistro: -53.5vw
Impostazioni dei bordi predefinite
Aggiungiamo anche un bordo inferiore senza bordo.
- Larghezza del bordo inferiore: 0px
- Colore bordo inferiore: # ff947f
- Stile bordo inferiore: punteggiato
Impostazioni del bordo del cavalcavia
Modifica la larghezza del bordo al passaggio del mouse.
- Larghezza del bordo inferiore: 5px
Impostazioni predefinite dell'ombra della scatola
Quindi aggiungi una tonalità di scatola.
- Posizione verticale casella ombreggiata: 50px
- Box Shadow Blur Force: 54px
- Forza di propagazione dell'ombra del riquadro: -32px
- Colore dell'ombra: rgba (255,255,255,0)
Impostazioni dell'ombra della casella di rollover
E cambia il colore dell'ombra del riquadro sospeso.
- Colore dell'ombra: rgba (0,0,0,0,2)
transizioni
Per creare una transizione graduale, aumentare il tempo di transizione nelle impostazioni di transizione.
- Durata della transizione: 750ms
Riassunto
Infine, in questo tutorial si trattava di creare un'animazione che evidenzia una sezione della nostra pagina Divi. Le possibilità con Divi sono quasi infinite, utilizzando le diverse opzioni (combinazioni di diverse opzioni diverse) sarai in grado di creare interfacce con animazioni dinamiche e attraenti. Non essendo finito, tratteremo più avanti la seconda parte di questo tutorial. Fino ad allora, se hai domande, sentiti libero di farle nella sezione commenti.