Avere un titolo che si distingue significa assicurarsi di avere la possibilità di catturare l'attenzione del tuo Visitatori. I titoli di solito non passano inosservati a causa delle loro dimensioni e della posizione centrale, ma se vuoi fare un ulteriore passo avanti e far risaltare letteralmente il titolo, sei nel posto giusto.
In questo tutorial, combineremo le impostazioni di animazione di Divi per creare un titolo che si distingua e catturi l'attenzione del tuo Visitatori.
Risultato finale
Prima parte: design
Configurazione della sezione
Colore di sfondo
Cominciamo a progettare! Crea una nuova pagina e aggiungi una sezione normale. Apri le impostazioni della sezione e cambia il colore di sfondo.
- Colore di sfondo: #EEE
spaziatura
Quindi, vai alla sezione impostazioni di spaziatura e aggiungi margini di riempimento personalizzati.
- Imbottitura inferiore: 10vw
Aggiungi riga 1
Struttura a colonne
Continua ad aggiungere una nuova riga usando la seguente struttura di colonne:
Colore di sfondo
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e cambia il colore di sfondo della riga.
- Colore di sfondo: #DDD
dimensionamento
Quindi vai alle impostazioni di ridimensionamento e lascia che la riga riempia l'intera larghezza dello schermo.
- Rendi questa linea a tutta larghezza: sì
- Usa una larghezza della grondaia personalizzata: Sì
- Larghezza della grondaia: 1
spaziatura
Inoltre, rimuovere l'imbottitura interna superiore e inferiore predefinita per la linea.
- Riempimento nella parte superiore: 0px
- Fondo tappezzeria: 0px
Aggiungi un modulo di testo
È ora di iniziare ad aggiungere moduli! Il primo modulo di cui abbiamo bisogno è un modulo di testo. Inserisci la prima parte del titolo nella casella contenuto utilizzando lo stile di testo del paragrafo.
Colore di sfondo
Quindi vai alle impostazioni di sfondo del modulo e aggiungi un colore di sfondo.
- Colore di sfondo: #ccc
Impostazioni del testo
Modificare anche le impostazioni del testo nella scheda Progettazione.
- Testo carattere: Didact Gothic
- Carattere del testo: grassetto
- Colore del testo: #000000
- Dimensione del testo: 10vw
- Altezza della riga di testo: 0.9em
- Orientamento del testo: centro
spaziatura
Quindi crea la forma desiderata utilizzando un'imbottitura personalizzata in alto e in basso.
- Imbottitura nella parte superiore: 10vw
- Imbottitura inferiore: 3vw
Animazione
Ultimo ma non meno importante, aggiungeremo qualche animazione. È importante assicurarsi che la durata dell'animazione e l'opacità iniziale siano zero. Ciò consentirà al modulo di testo di essere visualizzato con un effetto flash.
- Stile di animazione: dissolvenza
- Ripeti animazione: una volta
- Durata animazione: 0ms
- Ritardo dell'animazione: 1000 ms
Clona il modulo di testo x4
Una volta che hai finito di modificare il primo modulo di testo, puoi andare avanti e clonarlo tutte le volte che vuoi, a seconda della lunghezza del tuo titolo. Per ogni parte del titolo che desideri visualizzare con un effetto flash, avrai bisogno di un modulo di testo separato. Per questo esempio, avremo bisogno di moduli 4 aggiuntivi.
Colore di sfondo
Con il colore di sfondo.
- Copia 1 = Colore di sfondo: # 5900ff, colore del testo: #FFF
- Copia 2 = lascia così com'è, modifica la durata dell'animazione (Ritardo animazione): 1500 ms
- Copia 3 = Colore di sfondo: # ffb200, colore del testo: #FFF, modifica la durata dell'animazione: 2000 ms
- Copia 4 = Colore di sfondo: # 000, colore del testo #FFF, modifica la durata dell'animazione: 2500 ms
Aggiungi un margine negativo a ciascun modulo di testo tranne il primo
Una volta che hai finito di personalizzare tutti i moduli di testo, puoi andare avanti e creare una sovrapposizione. Per creare questa sovrapposizione, aggiungeremo un margine superiore negativo a ciascuno dei moduli di testo duplicati. In altre parole, ci assicuriamo che tutti i moduli che seguono il primo modulo appaiano sopra quel primo modulo di testo.
- Margine superiore: -31.98vw
Linea di trasformazione
Trasforma Traduci
Continua trasformando l'intera linea, iniziando con i parametri di trasformazione.
- In basso: -35vw
Trasforma la rotazione
Modifica anche i valori di rotazione della trasformazione.
- A sinistra: 320deg
Aggiungi la linea 2
Struttura a colonne
Al secondo posto! Ora che l'effetto del titolo è attivo, possiamo iniziare ad aggiungere i moduli rimanenti. Aggiungi una nuova riga usando la seguente struttura di colonne:
dimensionamento
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e lascia che la riga occupi l'intera larghezza dello schermo nelle impostazioni di dimensionamento:
- Rendi questa linea a tutta larghezza: sì
- Usa una larghezza della grondaia personalizzata: Sì
- Larghezza della grondaia: 1
spaziatura
Rimuove il riempimento superiore predefinito dalla riga successiva.
- Imbottitura superiore: 0px
Aggiungi un modulo di descrizione del testo alla colonna 2
Aggiungi contenuto H1
È ora di aggiungere moduli. Il primo modulo sarà un modulo di testo. Puoi aggiungere il contenuto che desideri.
Impostazioni di testo H1
Quindi vai alla scheda Design e modifica le impostazioni H1.
- Carattere del titolo: Didact Gothic
- Peso del titolo: grassetto
- Dimensione carattere: 1.8vw (Computer), 3.8vw (Tablet), 4vw (Telefono)
spaziatura
Aggiungi margini personalizzati nella sezione spaziatura.
- Margine superiore: -4vw
- Margine inferiore: 2vw
- Margine sinistro: 30vw
- Margine destro: 30vw (computer), 15vw (tablet e telefono)
Aggiungi un modulo separatore alla colonna 2
visibilità
Il modulo successivo è il modulo separatore. Assicurati che l'opzione "Mostra divisore" sia abilitata.
- Mostra separatore: Sì
Colore
Quindi vai alla scheda "Design" e cambia il colore del separatore.
- Colore: #000000
Dimentionnement
Modifica anche le opzioni di spaziatura.
- Spaziatura: 8 px
- Larghezza: 7%
spaziatura
Sempre con le opzioni di dimensionamento.
- Margine basso: 1vw
- Margine sinistro: 30vw
Aggiungi un modulo di testo alla colonna 2
Aggiungi contenuto
Il modulo successivo sarà un altro modulo di testo. È necessario fornire il file contenuto de votre choix.
Impostazione del testo
Successivamente, è necessario modificare le impostazioni del testo nella scheda "Design".
- Dimensione testo: 0.8vw (Computer), 1.3vw (Tablet), 1.6vw (Telefono)
- Altezza della linea: 2.2em
spaziatura
Aggiungi anche dei margini nella sezione della spaziatura.
- Margine basso: 3vw
- Margine sinistro: 30vw
- Margine destro: 30vw (computer), 15vw (tablet e telefoni)
Aggiungi un modulo pulsanti alla colonna 2
Impostazioni del modulo pulsanti
Per l'ultimo modulo, che sarà un modulo pulsanti. Aggiungerai il contenuto di tua scelta e cambierai le impostazioni come segue:
- Usa stile personalizzato: Sì
- Dimensione carattere: 1vw (computer), 1.5vw (tablet), 2vw (telefono)
- Larghezza del bordo del pulsante: 0px
- Tipo di carattere pulsante: Poppins
- Peso del testo: grassetto
- Stile del carattere: maiuscolo
spaziatura
Vai alle impostazioni di spaziatura e aggiungi un margine esterno personalizzato, oltre a un margine interno e il gioco è fatto.
- Margine esterno sinistro: 30vw
- Margine interno elevato: 1vw
- Margine interno basso: 1vw
- Margine interno sinistro: 3vw
- margine interno destro: 3vw
to Finish
In questo tutorial abbiamo visto come progettare un titolo con testo animato, utilizzando solo le opzioni interne di Divi. Questa è una tecnica eccellente che ti permetterà di attirare l'attenzione dei tuoi Visitatori in un modo molto originale.
Buongiorno. Ottimo il tuo tutorial, grazie. Sì, ma ho un piccolo problema. L'animazione avviene solo una volta e poi non si ripete.