Come aggiungere animazioni di blocchi di testo CSS al titolo con Divi
Pubblicato: 2020-01-25Il titolo è una delle parti più importanti della tua home page. Di solito è il primo pezzo di copia che le persone leggono a creare la loro prima impressione. Come ogni altra prima impressione, vuoi che sia buona. Ora, se stai cercando un modo creativo per mostrare il tuo titolo, ti piacerà questo post. In questo tutorial, ti mostreremo come aggiungere animazioni di blocchi di testo CSS al tuo titolo e potrai anche scaricare gratuitamente il file JSON del layout!
Andiamo ad esso.
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Scarica GRATUITAMENTE il layout dell'animazione del blocco di testo
Per mettere le mani sul layout di animazione del blocco di testo libero, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
Iniziamo a ricreare!
Aggiungi la sezione n. 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: #ff0f2b
- Colore 2: #c10b1a
- Tipo di gradiente: lineare
- Direzione del gradiente: 63 gradi
Spaziatura
Passa alla scheda Design della sezione e applica i seguenti valori di riempimento superiore e inferiore personalizzati su diverse dimensioni dello schermo:
- Imbottitura superiore: 7vw (desktop), 20vw (tablet), 25vw (telefono)
- Imbottitura inferiore: 7vw (desktop), 20vw (tablet), 25vw (telefono)
Frontiera
Aggiungi anche un bordo alla sezione.
- Larghezza bordo: 2vw (in alto, a sinistra, a destra)
- Larghezza bordo inferiore: 0vw
- Colore bordo: #ffffff
Aggiungi nuova riga
Struttura della colonna
Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:
Dimensionamento
Apri le impostazioni della riga e modifica le impostazioni di dimensionamento di conseguenza:
- Larghezza: 100%
- Larghezza massima: 100%
Aggiungi modulo di testo alla colonna
Aggiungi contenuto H1
Quindi, aggiungi un modulo di testo con un titolo H1 a tua scelta.
Aggiungi tag Div a ogni parola nel titolo H1
Passa alla scheda di testo della tua copia del titolo e aggiungi un div diverso a ogni parola del tuo titolo. L'ID CSS deve essere diverso per ogni parola.
<h1><div id="word-1" class="display-state">Ready</div> <div id="word-2" class="display-state">to</div> <div id="word-3" class="display-state">Build</div> <div id="word-4" class="display-state">Beautiful</div> <div id="word-5" class="display-state">Websites?</div></h1>
Impostazioni testo H1
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H1 di conseguenza:
- Carattere dell'intestazione: Work Sans
- Peso del carattere dell'intestazione: medio
- Colore del testo dell'intestazione: #ffffff
- Dimensione del testo dell'intestazione: 4vw (desktop), 5vw (tablet), 6vw (telefono)
- Altezza della linea di prua: 1,4 em
Spaziatura
Quindi, modifica i valori dei margini su diverse dimensioni dello schermo.
- Margine sinistro: 20vw (desktop e tablet), 15vw (telefono)
- Margine destro: 35vw (desktop), 20vw (tablet), 15vw (telefono)
Aggiungi modulo codice alla colonna
Inserisci codice CSS
Per applicare l'animazione del blocco di testo al nostro titolo, avremo bisogno di un codice CSS. Aggiungeremo quel 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>
Spaziatura
Passa alla scheda Design del modulo e rimuovi tutte le imbottiture inferiori predefinite.
- Margine inferiore: 0px
Aggiungi modulo pulsante alla colonna
Aggiungi copia
Il modulo successivo di cui abbiamo bisogno è un modulo pulsante. Inserisci una copia a tua scelta.
Impostazioni dei pulsanti
Passa alla scheda di progettazione del modulo e modifica le impostazioni del pulsante di conseguenza:
- Usa stili personalizzati per pulsante: Sì
- Dimensione del testo del pulsante: 1vw (desktop), 2vw (tablet), 3vw (telefono)
- Colore del testo del pulsante: #ffffff
- Colore di sfondo del pulsante: #000000
- Larghezza bordo pulsante: 0px
- Carattere pulsante: Work Sans
Spaziatura
Quindi, vai alle impostazioni di spaziatura e applica alcuni margini personalizzati e valori di riempimento su diverse dimensioni dello schermo.
- Margine superiore: 3vw (desktop),
- Margine sinistro: 20vw (desktop e tablet), 15vw (telefono)
- Imbottitura superiore: 1.2vw (desktop), 2vw (tablet), 4vw (telefono)
- Imbottitura inferiore: 1.2vw (desktop), 2vw (tablet), 4vw (telefono)
- Imbottitura sinistra: 1.8vw (desktop), 3vw (tablet), 6vw (telefono)
- Imbottitura destra: 1.8vw (desktop), 3vw (tablet), 6vw (telefono)
Animazione
Personalizza anche le impostazioni dell'animazione.
- Stile di animazione: Flip
- Direzione animazione: Giù
- Ritardo animazione: 2000 ms
- Intensità animazione: 100%
- Opacità iniziale dell'animazione: 100%
- Curva di velocità dell'animazione: facilità di entrata e uscita
- Ripetizione animazione: una volta
Aggiungi sezione #2
Continua aggiungendo una nuova sezione regolare proprio sotto la precedente.
Spaziatura
Apri le impostazioni della sezione e rimuovi il riempimento superiore predefinito.
- Imbottitura superiore: 0px
Aggiungi nuova riga
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
Dimensionamento
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e consenti alla riga di occupare l'intera larghezza del contenitore della sezione.
- Larghezza: 100%
- Larghezza massima: 100%
Aggiungi modulo di testo alla colonna
Aggiungi contenuto
Quindi, aggiungi un modulo di testo con un contenuto descrittivo a tua scelta.
Colore di sfondo
Aggiungi un colore di sfondo bianco.
- Colore di sfondo: #ffffff
Impostazioni testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:
- Carattere del testo: Work Sans
- Colore del testo: #9b9b9b
- Dimensione del testo: 1vw (desktop), 2vw (tablet), 3vw (telefono)
- Altezza riga di testo: 2,6 em
Spaziatura
Aggiungi anche alcuni valori di spaziatura personalizzati tra le diverse dimensioni dello schermo.
- Margine superiore: -5vw (desktop), -20vw (tablet), -27vw (telefono)
- Margine sinistro: 20vw (desktop), 13vw (tablet), 8vw (telefono)
- Margine destro: 20vw (desktop), 13vw (tablet), 8vw (telefono)
- Imbottitura superiore: 5vw (desktop), 7vw (tablet e telefono)
- Imbottitura inferiore: 5vw (desktop), 7vw (tablet e telefono)
- Imbottitura sinistra: 3vw (Desktop), 5vw (Tablet), 6vw (Telefono)
- Imbottitura destra: 3vw (Desktop), 5vw (Tablet), 6vw (Telefono)
Scatola ombra
E completa le impostazioni del modulo applicando un'ombra sottile. Questo è tutto!
- Forza sfocatura ombra scatola: 50 px
- Colore ombra: rgba(0,0,0,0.1)
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Pensieri finali
In questo post, 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 in questo! Sei stato anche in grado di scaricare gratuitamente il file JSON del layout. Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto.
Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.