Vai al contenuto principale

Divi Tutorial: come utilizzare le azioni di rollover - Parte prima

Divi: il tema WordPress più semplice da usare

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]

Ogni settimana, Elegante tema offre nuovi pacchetti di layout Divi gratuiti che puoi utilizzare per il tuo prossimo progetto. Per uno dei pacchetti di presentazione, condividono anche un caso d'uso che ti aiuterà a portare il tuo sito Web al livello successivo. Questa settimana, nell'ambito dell'iniziativa di design Divi in ​​corso, ti mostreremo come utilizzare in modo creativo le opzioni di sorvolo di Divi per evidenziare i CTA nelle tue pagine. Usiamo il servizio di lavanderia Divi e tratteremo tre diversi esempi di evidenziazione del tuo invito all'azione.

sondaggio

Prima di immergerci nel tutorial, esaminiamo rapidamente cosa creeremo per avere un'idea.

realizzazione animazione divi.gif

Aggiungi una nuova pagina utilizzando il layout del servizio di lavanderia o lavanderia

Inizia aggiungendo una nuova pagina al tuo sito Web e scarica l'homepage della lavanderia. I tre esempi che creeremo si baseranno su questa disposizione. Una volta che hai l'approccio, puoi applicare questi esempi a qualsiasi layout su cui stai lavorando.

lavanderia demo.jpg

Clona il modulo di testo

Cominciamo con il primo esempio! Trasformiamo un modulo di testo esistente in un'incitazione al passaggio del mouse. Questo approccio apparirà solo sul desktop. Ecco perché cloniamo il modulo iniziale per consentirgli di apparire su schermi più piccoli senza effetti a bilico.

clonare il modulo text.jpg

visibilità

Modulo di testo # 1

Continua nascondendo il primo modulo su tablet e telefono.

Elemento visibilità divi.jpg

Modulo di testo # 2

E nascondi il secondo modulo sul desktop.

visibilità desktop divi.jpg

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 appare sul desktop. Apri il modulo e aggiungi contenuto dall'argomento 3 nell'area contenuto.

Divi: il miglior tema WordPress di tutti i tempi!

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

modifica del primo modulo texte.jpg

Passa il mouse sopra le impostazioni del testo

Quindi, vai nelle 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

modulo parametri di testo divi.jpg

Passa il mouse sopra le impostazioni del testo 2

Fare lo stesso per i parametri del testo ambientale 2.

  • Titolo 2 Dimensioni testo: 0px

configurazione intestazione 2 divi.jpg

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

configurazione dell'intestazione 3 fonts.jpg

Passa il mouse sopra l'intestazione Parametri di testo 3

Cambia la dimensione del testo passando il mouse.

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. [FREE]

  • Titolo 3 Dimensioni testo: 40px

configurazione intestazione 3 divi.jpg

Impostazioni di spaziatura predefinite

Quindi, accedi alle impostazioni di spaziatura e assicurati che si applichino i seguenti valori di riempimento personalizzati:

  • Imbottitura superiore: 80px
  • Imbottitura inferiore: 50px
  • Padding sinistro: 40px
  • Tappezzeria a destra: 40px

padding options.jpg

Impostazioni di spaziatura del cavalcavia

Aggiungi anche un margine di rollover personalizzato.

  • Margine superiore: 50px
  • Margine sinistro: -53.5vw

hovering overflight configuration.jpg

Impostazioni dei bordi predefinite

Aggiungiamo anche un bordo inferiore senza bordo.

  • Larghezza del bordo inferiore: 0px
  • Colore bordo inferiore: # ff947f
  • Stile bordo inferiore: punteggiato

configurazione del confine divi.jpg

Impostazioni del bordo del cavalcavia

Modifica la larghezza del bordo al passaggio del mouse.

  • Larghezza del bordo inferiore: 5px

concentrarsi su ctas

Impostazioni ombra box predefinite

Quindi aggiungi una tonalità di scatola.

  • Posizione verticale casella ombreggiata: 50px
  • Box Shadow Blur Force: 54px
  • Spread strength of box shadow: -32px
  • Colore sfumato: rgba (255,255,255,0)

opzione dombres divi.jpg

Impostazioni ombra drop box

E cambia il colore dell'ombra della scatola in bilico.

  • Colore sfumato: rgba (0,0,0,0,2)

configurazione del bordo su flyover divi.jpg

transizioni

Per creare una transizione graduale, aumentare il tempo di transizione nelle impostazioni di transizione.

  • Durata della transizione: 750ms

blocco costruttore transizione divi text.jpg

Riassunto

Infine, in questo tutorial stavamo parlando della creazione di un'animazione che evidenzia una sezione della nostra pagina Divi. Le possibilità con Divi sono quasi illimitate, usando le diverse opzioni (combinazioni di diverse opzioni), sarai in grado di creare interfacce con un'animazione dinamica e attraente. Non essendo completato, tratteremo la seconda parte di questo tutorial in seguito. Fino ad allora, se avete domande, non esitate a farle nella sezione commenti.

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.

Fantastici temi WordPress che ho trovato su
E ci sono più temi e modelli 50 000 tra cui scegliere!

Torna in alto
1 azioni
quota1
Tweet
Enregistrer
WhatsApp