Vai al contenuto principale

Come aggiungere un'animazione a blocchi di testo ai titoli su Divi

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

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

Il tuo titolo è una delle parti più importanti della tua home page. Questo di solito è ciò che vedi per primo e quindi ciò che determina la prima impressione. Come ogni altra prima impressione, vuoi che sia buona. Ora, se stai cercando un modo creativo per presentare il tuo titolo, apprezzerai questo tutorial poiché ti mostreremo come aggiungere animazioni di blocchi di testo CSS al tuo titolo e puoi anche scaricare gratuitamente il file JSON del layout!

Panoramica

Prima di immergerci nel tutorial, diamo un'occhiata al risultato su schermi di dimensioni diverse.

Anteprima animata del titolo divi tutorial

Iniziamo il design

Aggiungi la sezione # 1

Sfondo sfumato

Inizia aggiungendo una sezione normale a una nuova pagina o alla pagina su cui stai lavorando. Apri le impostazioni della sezione e applica il seguente sfondo sfumato:

  • Colore 1: # f0f2b
  • Colore 2: # c10b1a
  • Tipo di gradiente: lineare
  • Direzione gradiente: 63 gradi
Configurazione delle sezioni divi

spaziatura

Passa alla scheda Design sezione e applica i seguenti valori di riempimento superiore e inferiore personalizzati su schermi di dimensioni diverse:

  • Imbottitura superiore: 7vw (desktop), 20vw (tablet), 25vw (telefono)
  • Imbottitura inferiore: 7vw (scrivania), 20vw (tablet), 25vw (telefono)
Configurazione della spaziatura delle sezioni Divi

confine

Aggiungi anche un bordo alla sezione.

  • Larghezza del bordo: 2vw (in alto, a sinistra, a destra)
  • Larghezza bordo inferiore: 0vw
  • Colore bordo: #ffffff
Configurazione bordo sezione Divi

Aggiungi una nuova linea

Struttura a colonne

Continua ad aggiungere una nuova riga alla sezione utilizzando la seguente struttura di colonne:

Configurazione del layout della colonna Divi

dimensionamento

Aprire i parametri di linea e modificare i parametri di quotatura di conseguenza:

  • Larghezza: 100%
  • Larghezza massima: 100%
Configurazione della larghezza della colonna Divi

Aggiungi un modulo di testo alla colonna

Aggiungi contenuto H1

Quindi aggiungi un modulo di testo con un titolo H1 a tua scelta.

Aggiungi un modulo di testo alla colonna 1 divi

Aggiungi tag Div a ogni parola nel titolo H1

Passa alla scheda del testo della copia del titolo e aggiungi un div diverso a ciascuna parola del titolo. L'ID CSS deve essere diverso per ogni parola.

Pronto
a
Costruire
Bello
Siti web?

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Aggiungi tag del modulo di testo divi

Impostazioni di testo H1

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H1 di conseguenza:

  • Carattere del titolo: Work Sans
  • Peso carattere titolo: medio
  • Colore testo intestazione: #ffffff
  • Dimensioni del testo dell'intestazione: 4vw (desktop), 5vw (tablet), 6vw (telefono)
  • Altezza della linea di testa: 1,4 em
Titolo parametro 1 divi

spaziatura

Quindi modificare i valori dei margini su diverse dimensioni dello schermo.

  • Margine sinistro: 20vw (scrivania e tablet), 15vw (telefono)
  • Margine destro: 35vw (desktop), 20vw (tablet), 15vw (telefono)
Configurazione della spaziatura del modulo di testo Divi

Aggiungi un modulo di codice alla colonna

Inserisci il codice CSS

Affinché l'animazione del blocco di testo si applichi al nostro titolo, avremo bisogno del codice CSS. Aggiungeremo questo codice CSS a un nuovo modulo di codice.

<style> .display-state {display: inline !important;} #word-1 {-webkit-animation: slide-right 0.5s linear 0.3s both;animation: slide-right 0.5s linear 0.3s both;} #word-2 {-webkit-animation: slide-right 0.5s linear 0.6s both;animation: slide-right 0.5s linear 0.6s both;} #word-3 {-webkit-animation: slide-right 0.5s linear 0.9s both;animation: slide-right 0.5s linear 0.9s both;} #word-4 {-webkit-animation: slide-right 0.5s linear 1.2s both;animation: slide-right 0.5s linear 1.2s both;}#word-5 {-webkit-animation: slide-right 0.5s linear 1.5s both;animation: slide-right 0.5s linear 1.5s both;} @-webkit-keyframes slide-right {0% {background-color: #000;opacity: 0.5;color: transparent;} 1% {opacity: 1;}} </style>

Incolla il codice divi css

spaziatura

Passa alla scheda di progettazione del modulo e rimuovi tutto il riempimento inferiore predefinito.

  • Margine inferiore: 0px
Personalizza i maghi del modulo divi

Aggiungi un modulo pulsanti alla colonna

Aggiungi una copia

Il prossimo modulo di cui abbiamo bisogno è un modulo pulsanti. Inserisci una copia a tua scelta.

Crea una copia del modulo boton divi

Impostazioni dei pulsanti

Passa alla scheda di progettazione del modulo e modifica le impostazioni del pulsante di conseguenza:

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]

  • Usa stili personalizzati per il pulsante: Sì
  • Dimensione testo pulsante: 1vw (desktop), 2vw (tablet), 3vw (telefono)
  • Colore testo pulsante: #ffffff
  • Colore sfondo pulsante: # 000000
  • Larghezza bordo pulsante: 0px
Parametro modulo pulsante Divi
  • Carattere pulsante: Work Sans
Cambia il carattere del pulsante divi

spaziatura

Quindi vai alle impostazioni di spaziatura e applica i valori di margine e riempimento personalizzati su diverse dimensioni dello schermo.

  • Margine superiore: 3vw (ufficio),
  • Margine sinistro: 20vw (scrivania e tablet), 15vw (telefono)
  • Imbottitura superiore: 1.2vw (desktop), 2vw (tablet), 4vw (telefono)
  • Imbottitura inferiore: 1.2vw (scrivania), 2vw (tablet), 4vw (telefono)
  • Imbottitura sinistra: 1.8vw (desktop), 3vw (tablet), 6vw (telefono)
  • Imbottitura destra: 1.8vw (scrivania), 3vw (tablet), 6vw (telefono)
Configurazione della spaziatura dei pulsanti Divi

Animazione

Personalizza anche le impostazioni di animazione.

  • Stile animazione: capovolgi
  • Direzione dell'animazione: in basso
  • Ritardo dell'animazione: 2000 ms
  • Intensità dell'animazione: 100%
  • Opacità inizio animazione: 100%
  • Curva della velocità di animazione: facilità in entrata
  • Ripetizione dell'animazione: una volta
Personalizzazione dell'animazione del modulo di testo Divi

Aggiungi la sezione # 2

Continua aggiungendo una nuova sezione regolare appena sotto quella precedente.

Aggiungi una nuova sezione divi

spaziatura

Apri le impostazioni della sezione e rimuovi l'imbottitura superiore predefinita.

  • Imbottitura superiore: 0px
Configurare la spaziatura delle sezioni Div

Aggiungi una nuova linea

Struttura a colonne

Continua ad aggiungere una nuova riga utilizzando la seguente struttura di colonne:

Aggiungi una nuova colonna divi di sezione

dimensionamento

Senza aggiungere altri moduli, aprire i parametri della linea e lasciare che la linea occupi l'intera larghezza del contenitore della sezione.

  • Larghezza: 100%
  • Larghezza massima: 100%
Sezione dimensionamento divi

Aggiungi un modulo di testo alla colonna

Aggiungi contenuto

Quindi aggiungi un modulo di testo con il contenuto della descrizione che preferisci.

Impostazioni del testo del modulo Divi

Colore di sfondo

Aggiungi un colore di sfondo bianco.

  • Colore di sfondo: #ffffff
Conifgurazione del colore del carattere Divi

Impostazioni del testo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:

  • Carattere testo: Work Sans
  • Colore del testo: # 9b9b9b
  • Dimensioni del testo: 1vw (desktop), 2vw (tablet), 3vw (telefono)
  • Altezza della riga di testo: 2.6em
Configurazione del carattere del titolo Divi

spaziatura

Aggiungi anche valori di spaziatura personalizzati su schermi di dimensioni diverse.

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

  • Margine superiore: -5vw (desktop), -20vw (tablet), -27vw (telefono)
  • Margine sinistro: 20vw (scrivania), 13vw (tablet), 8vw (telefono)
  • Margine destro: 20vw (desktop), 13vw (tablet), 8vw (telefono)
  • Imbottitura superiore: 5vw (desktop), 7vw (tablet e telefono)
  • Imbottitura inferiore: 5vw (scrivania), 7vw (tablet e telefono)
  • Imbottitura sinistra: 3vw (desktop), 5vw (tablet), 6vw (telefono)
  • Imbottitura destra: 3vw (scrivania), 5vw (tablet), 6vw (telefono)
Configurazione della spaziatura delle sezioni del modulo Divi

Scatola delle ombre

E completa le impostazioni del modulo applicando un'ombra sottile della scatola. Questo è tutto!

  • Resistenza della sfocatura dell'ombra della scatola: 50px
  • Colore dell'ombra: rgba (0,0,0,0,1)
Modulo di testo divi di configurazione shadow

Panoramica

Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.

Tutorial sui risultati finali

Considerazioni finali

In questo articolo, ti abbiamo mostrato come aggiungere animazioni di blocchi di testo CSS al tuo titolo. È importante assicurarsi che il titolo sia visibile e letto dall'inizio, l'aggiunta di un'animazione al titolo può sicuramente aiutare! Sei stato anche in grado di scaricare gratuitamente il file JSON di layout. Se hai domande o suggerimenti, sentiti libero di lasciare un commento nella sezione commenti qui sotto.

Tradotto da: ElegantThemes

Questo articolo contiene i commenti 0

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.

Torna in alto
2 azioni
quota2
Tweet
Enregistrer