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.