Come aggiungere frecce di pulsanti angolari animate al passaggio del mouse al tuo design con Divi

Il modo in cui presenti il ​​tuo CTA all'interno di una pagina che progetti può avere un grande impatto sul modo in cui i tuoi visitatori agiscono. Puoi farlo nel modo più utilizzato, utilizzando il formato del pulsante con la copia al centro, ma puoi anche essere creativo con esso. Nel tutorial di oggi, ti mostreremo un modo creativo per includere un invito all'azione nel tuo design Divi. Includeremo le frecce dei pulsanti d'angolo animate al passaggio del mouse per l'esattezza. Una volta posizionata una freccia, la direzione della freccia cambierà insieme allo stile. Potrai anche scaricare gratuitamente il file JSON di questo design!

Andiamo ad esso.

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Scarica il layout GRATUITAMENTE

Per mettere le mani sul layout gratuito, 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 i file

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.

SCARICA

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 una nuova sezione di specialità

Aggiungi una nuova sezione specialistica alla pagina su cui stai lavorando. Seleziona la seguente struttura di colonne per esso:

Sfondo sfumato

Apri le impostazioni della sezione e applica il seguente sfondo sfumato:

• Colore 1: #fff8f5
• Colore 2: #f9f3ef
• Tipo di gradiente: radiale
• Direzione radiale: in basso a sinistra
• Posizione di partenza: 40%
• Posizione finale: 40%

Dimensionamento

Passa alla scheda Design della sezione e modifica le impostazioni di dimensionamento come segue:

• Equalizza le altezze delle colonne: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza interna: 90%
• Larghezza massima interna: 1580 px

Spaziatura

Quindi, vai alle impostazioni di spaziatura e aggiungi un'imbottitura corretta alla colonna 1.

• Colonna 1 Imbottitura destra: 6%

Aggiungi il modulo di testo n. 1 alla colonna 1

Aggiungi contenuto H2

È ora di aggiungere moduli, iniziando con un modulo di testo nella colonna 1. Aggiungi del contenuto H2 a tua scelta.

Impostazioni testo H2

Disegna le impostazioni del testo H2 del modulo come segue:

• Carattere dell'intestazione 2: Kumbh Sans
• Intestazione 2 Peso del carattere: grassetto
• Colore testo titolo 2: #08665c
• Intestazione 2 Dimensione del testo:
  • Desktop: 75 px
  • Tablet: 60px
  • Telefono: 45px

Spaziatura

Aggiungi un margine superiore e inferiore successivo.

• Margine superiore: 50 px
• Margine inferiore: 50 px

Aggiungi il modulo di testo n. 2 alla colonna 1

Aggiungi descrizione contenuto

Aggiungi un altro modulo di testo sotto il precedente con un contenuto descrittivo a tua scelta.

Impostazioni testo

Modificare le impostazioni del testo del modulo come segue:

• Carattere del testo: Kumbh Sans
• Colore del testo: #08665c
• Dimensione del testo: 16px
• Altezza riga di testo: 1,8 em

Spaziatura

Aggiungi un margine inferiore anche su schermi di dimensioni più piccole.

• Margine inferiore:
  • Scrivania: /
  • Tablet e telefono: 50px

Aggiungi la riga n. 1 alla colonna 2

Struttura della colonna

Alla seconda colonna della sezione. Lì, aggiungi una prima riga usando la seguente struttura a colonne

Dimensionamento

Senza ancora aggiungere moduli, apri le impostazioni di riga e modifica le impostazioni di dimensionamento come segue:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 2

Spaziatura

Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Impostazioni colonna 1

Colore di sfondo

Quindi, apri le impostazioni della colonna 1 e applica un colore di sfondo a tua scelta.

• Colore di sfondo: #cccccc

Spaziatura

Passa alle impostazioni di spaziatura della colonna e utilizza i seguenti valori reattivi:

• Imbottitura superiore:
  • Desktop: 100 px
  • Tablet e telefono: 70px
• Imbottitura sinistra:
  • Desktop e tablet: 8%
  • Telefono: 10%
• Imbottitura destra:
  • Desktop e tablet: 8%
  • Telefono: 10%

Frontiera

Aggiungi anche alcuni angoli arrotondati alle impostazioni del bordo.

• Tutti gli angoli: 10px

Visibilità

Completa le impostazioni della colonna impostando gli overflow su visibili nella scheda Avanzate.

• Overflow orizzontale: visibile
• Overflow verticale: visibile

Aggiungi il modulo di testo n. 1 alla colonna 1

Aggiungi contenuto

È ora di aggiungere moduli, iniziando con un primo modulo di testo nella colonna 1. Aggiungi alcuni contenuti a tua scelta.

Impostazioni testo

Modifica le impostazioni del testo del modulo:

• Carattere del testo: Kumbh Sans
• Peso del carattere del testo: leggero
• Colore del testo: #08665c
• Dimensione del testo: 30px
• Altezza riga di testo: 1em

Spaziatura

Applicare anche un margine inferiore.

• Margine inferiore: 15 px

Aggiungi modulo divisore alla colonna 1

Visibilità

Quindi, aggiungi un modulo divisore. Assicurati che l'opzione "Mostra divisore" sia abilitata.

• Mostra divisore: Sì

Linea

Passa alla scheda di progettazione del modulo e cambia il colore della linea.

• Colore linea: #fff8f5

Dimensionamento

Modifica anche le impostazioni di dimensionamento.

• Peso del divisore: 2px
• Altezza: 2px

Spaziatura

Aggiungi anche un margine inferiore.

• Margine inferiore: 50 px

Aggiungi il modulo di testo n. 2 alla colonna 1

Aggiungi contenuto H3

Aggiungi un altro modulo di testo alla colonna 1. Usa alcuni contenuti H3 a tua scelta.

Impostazioni testo H3

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H3 come segue:

• Intestazione 3 Carattere: Kumbh Sans
• Intestazione 3 Peso del carattere: grassetto
• Colore testo titolo 3: #08665c
• Intestazione 3 Dimensione del testo:
  • Desktop: 48 pixel
  • Tablet: 38px
  • Telefono: 32px

Spaziatura

Usa anche un margine inferiore.

• Margine inferiore: 15 px

Aggiungi il modulo di testo n. 3 alla colonna 1

Aggiungi contenuto

Aggiungi l'ultimo modulo di testo alla colonna 1 con un contenuto descrittivo a tua scelta.

Impostazioni testo

Modificare le impostazioni del testo di conseguenza:

• Carattere del testo: Kumbh Sans
• Colore del testo: #08665c
• Dimensione del testo: 16px
• Altezza riga di testo: 1,8 em

Spaziatura

Includi anche un margine inferiore.

• Margine inferiore:
  • Desktop: 200 px
  • Tablet e telefono: 150 px

Aggiungi modulo Blurb alla colonna 1

Lascia le caselle dei contenuti vuote

All'ultimo modulo di cui abbiamo bisogno in questa colonna, che è un modulo Blurb. Lascia vuote le caselle del contenuto.

Icona predefinita

Seleziona l'icona della freccia successiva.

Icona al passaggio del mouse

Cambia l'icona al passaggio del mouse.

Aggiungi collegamento

Usa un link anche per questo modulo.

Colore di sfondo al passaggio del mouse

Quindi, aggiungi un colore di sfondo al passaggio del mouse.

• Colore di sfondo al passaggio del mouse: #08665c

Impostazioni predefinite dell'icona

Passare alla scheda Progettazione e modificare le impostazioni dell'icona come segue:

• Colore icona: #ffffff
• Posizionamento immagine/icona: in alto
• Allineamento immagine/icona: a destra
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 80px

Impostazioni dell'icona al passaggio del mouse

Modifica la dimensione del carattere dell'icona al passaggio del mouse.

• Dimensione carattere icona al passaggio del mouse: 40 px

Dimensionamento

Quindi, aggiungi un po 'di larghezza alle impostazioni di dimensionamento.

• Larghezza: 80px

Spaziatura al passaggio del mouse

Modifica l'imbottitura superiore e destra al passaggio del mouse.

• Imbottitura superiore al passaggio del mouse: 25 px
• Imbottitura destra al passaggio del mouse: 10px

Frontiera

Includi anche alcuni angoli arrotondati nelle impostazioni del bordo.

• Tutti gli angoli: 5px

Scala al passaggio del mouse

Quindi, usa l'opzione di scala di trasformazione al passaggio del mouse.

• Passa il mouse su entrambi: 130%

Elemento principale e immagine sfocata CSS

Quindi, vai alla scheda Avanzate e usa la seguente riga di codice CSS per l'elemento principale:

cursor: pointer;

Usa questa riga per la casella CSS Blurb Image:

margin-bottom: 0px;

Posizione

Completare le impostazioni del modulo riposizionandolo nelle impostazioni di posizione:

• Posizione: Assoluta
• Posizione: in basso a destra

Riutilizza colonna 1

Rimuovi colonna 2

Una volta completata la prima colonna, puoi riutilizzarla per la seconda. Per farlo, rimuovi prima la seconda colonna.

Clona colonna 1

Quindi, clona il primo.

Cambia il colore di sfondo della colonna 2

Ovviamente, dovrai apportare alcune modifiche alla colonna duplicata, a partire dal colore di sfondo.

• Colore di sfondo della colonna 2: #f0c7b1

Aggiungi Trasforma Traduci in Colonna 2

Stiamo aggiungendo un valore di traduzione di trasformazione anche su schermi di dimensioni più piccole.

• Destra:
  • Scrivania: /
  • Tablet e telefono: 50px

Modifica contenuto duplicato

Assicurati di modificare tutti i contenuti duplicati.

Cambia collegamento modulo Blurb

Completa la colonna duplicata modificando il collegamento all'interno del modulo Blurb.

Riutilizza riga

Una volta completata la prima riga e le sue colonne, puoi clonare l'intera riga.

Rimuovi colonna 2

Elimina la seconda colonna all'interno delle impostazioni di riga.

Cambia colore di sfondo della colonna

Quindi, cambia il colore di sfondo della colonna rimanente.

• Colore di sfondo della colonna: #dfe7f2

Aggiungi margine superiore alla riga

Torna alle impostazioni generali della riga e aggiungi un margine superiore reattivo.

• Margine superiore:
  • Desktop: 50 pixel
  • Tablet e telefono: 100 pixel

Modifica contenuto duplicato

Quindi, modifica tutti i contenuti duplicati nella colonna.

Cambia collegamento modulo Blurb

Completa il tutorial modificando il collegamento all'interno del modulo Blurb. Questo è tutto!

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 essere creativo con i tuoi CTA. Più specificamente, ti abbiamo mostrato come aggiungere le frecce dei pulsanti d'angolo animate al passaggio del mouse. Questo approccio ti aiuta a mantenere un aspetto pulito durante la progettazione di una sezione con più CTA. Aggiunge anche un ulteriore livello di interazione. Sei stato in grado di scaricare il file JSON gratuitamente. 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.