Come creare un CTA accattivante in Divi con pochi semplici effetti al passaggio del mouse
Pubblicato: 2019-07-19Interazioni sottili ed effetti al passaggio del mouse possono essere utili per creare un CTA (Call to Action) accattivante. Il trucco sta nell'usare effetti che rendano il tuo CTA più attraente e intuitivo in modo che gli utenti abbiano maggiori probabilità di agire. E poiché l'obiettivo finale della maggior parte dei CTA è fare clic su un collegamento o un pulsante, è importante ottimizzare il tuo CTA in modo che metta in primo piano quegli elementi cliccabili.
In questo tutorial, ti mostrerò come utilizzare Divi per ottimizzare la visibilità dei CTA utilizzando più effetti al passaggio del mouse. Ti mostrerò come aggiungere sfondi divisori di sezione al passaggio del mouse per mettere in scena i tuoi CTA per un migliore contrasto e leggibilità. E ti mostrerò come ingrandire e spostare il CTA al centro della pagina al passaggio del mouse in modo che diventi l'obiettivo principale. Questi effetti al passaggio del mouse saranno utili per far risaltare qualsiasi invito all'azione e, si spera, migliorare l'esperienza dell'utente.
Iniziamo.
Sbirciata
Ecco uno sguardo agli accattivanti effetti al passaggio del mouse CTA che creeremo in questo tutorial.
Scarica GRATUITAMENTE l'accattivante layout di effetti al passaggio del mouse CTA
Per mettere le mani sui disegni di questo tutorial, 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!
Iscriviti al nostro canale Youtube
Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file json nel Divi Builder.
Andiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, avrai bisogno di quanto segue:
- Il tema Divi installato e attivo
- Una nuova pagina creata per costruire da zero sul front-end (visual builder)
- Un'immagine di sfondo da utilizzare nella build del progetto. Ne userò uno dal pacchetto di layout veterinario per questo tutorial.
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Implementazione degli accattivanti effetti al passaggio del mouse CTA in Divi
Per questo esempio di progettazione, inizieremo con un modulo di invito all'azione allineato a sinistra oa destra. Quindi porteremo il modulo al centro della pagina e lo scaleremo (o ingrandiremo) passando il mouse sopra la riga. Per far risaltare ancora di più l'invito all'azione nello stato di passaggio del mouse, lo metteremo in scena aggiungendo divisori di sezione che si chiuderanno dietro il modulo per un migliore contrasto.
Ecco come farlo.
Creazione della sezione e della riga
Innanzitutto, crea una sezione regolare con una riga a una colonna.
Prima di aggiungere un modulo, apri le impostazioni della sezione e aggiorna quanto segue:
Aggiungi un'immagine di sfondo con il punto focale dell'immagine sul lato destro in modo che rimanga visibile quando aggiungi il nostro modulo a sinistra.
- Larghezza massima: 1080px
- Allineamento della sezione: centro
Quello si occupa della sezione per ora. Torneremo alle impostazioni della sezione in seguito per aggiungere gli effetti al passaggio del mouse del divisore di sezione.
Quindi, apri le impostazioni della riga e aggiorna quanto segue:
- larghezza: 100%
- larghezza massima: 100%
- Imbottitura: 5% in alto, 5% in basso, 35% a destra
L'imbottitura giusta è la chiave di questo design perché spinge il contenuto a sinistra. Torneremo più tardi per aggiungere le nostre opzioni al passaggio del mouse per riportare il contenuto della riga al centro in seguito.
Aggiunta del modulo Call to Action
Ora siamo pronti per costruire il modulo Call to Action che sarà l'obiettivo principale del nostro accattivante CTA.
Vai avanti e aggiungi un modulo di invito all'azione alla riga di una colonna.
Quindi aggiorna le impostazioni del modulo di invito all'azione come segue:
Contenuto
- Titolo: Sconto per la prima visita
- Pulsante: fissa un appuntamento
- URL collegamento pulsante: #
Design
- Colore di sfondo: #ffffff
- Colore del testo: scuro
- Carattere del titolo: Nunito
- Peso del carattere del titolo: grassetto
- Dimensione del testo del titolo: 36px
- Colore del testo del pulsante: #ffffff
- Colore di sfondo del pulsante: #154c87
- Larghezza bordo pulsante: 0px
- Larghezza massima: 500 px
- Allineamento del modulo: centro
- Angoli arrotondati: 10px
Una caratteristica chiave di questo design è la larghezza massima di 500 px. Ciò assicurerà che il modulo non cambi in larghezza ogni volta che regoliamo l'imbottitura destra della riga al passaggio del mouse in seguito.
- Box Shadow: vedi screenshot
- Posizione verticale dell'ombra del riquadro: 30 px
- Forza sfocatura dell'ombra della scatola: 100 px
- Forza di diffusione dell'ombra della scatola: -30px
Ridimensionamento e centratura dell'invito all'azione quando si passa con il mouse sopra la riga
Ora siamo pronti per iniziare ad aggiungere i nostri accattivanti effetti al passaggio del mouse CTA. A questo punto vogliamo realizzare due cose quando passiamo con il mouse sopra la riga. Innanzitutto, vogliamo spostare il CTA al centro. E poi vogliamo aumentare la scala del modulo (ingrandirlo) per renderlo ancora più visibile.
Per fare ciò, apri le impostazioni della riga e aggiorna quanto segue:
- Imbottitura (hover): 0% a destra
Quindi regola il riempimento per il display mobile:
- Imbottitura (tablet): 0% a destra
- Imbottitura (telefono): 5% sinistra, 5% destra
Per ingrandire l'invito all'azione, aggiungi la seguente proprietà di trasformazione alla riga al passaggio del mouse:
- Scala di trasformazione (hover): 110%
Anche se la proprietà transform scale viene applicata alla riga, questa si applica indirettamente anche a tutti gli elementi figlio all'interno della riga, incluso il modulo. Pertanto, il modulo verrà ridimensionato al 110% quando si passa con il mouse sulla riga.
Mettere in scena il CTA al passaggio del mouse con i divisori di sezione
Infine, siamo pronti per aggiungere divisori di sezione per mettere in scena il cta quando si passa con il mouse sulla sezione/riga. La chiave qui è assicurarsi che la sezione e la riga abbiano la stessa altezza e larghezza in modo che l'utente passi contemporaneamente sopra la sezione e la riga senza spazi vuoti. Quindi, dobbiamo eliminare qualsiasi imbottitura di sezione. Quindi dobbiamo creare un divisore della sezione superiore e inferiore che aumenta in altezza quando si passa con il mouse sopra la sezione.
Ecco cosa fare.
Apri le impostazioni della sezione e aggiorna quanto segue:
Imbottitura: 0px in alto, 0px in basso
- Stile divisore superiore (desktop): vedi screenshot
- Stile divisore superiore (tablet e telefono): nessuno
- Colore divisorio superiore: rgba (21,76,135,0.61)
- Altezza divisore superiore (predefinito): 0%
- Altezza divisore superiore (hover): 120%
- Capovolgimento divisore superiore: orizzontale
- Stile divisore inferiore (desktop): vedi screenshot
- Stile divisore inferiore (tablet e telefono): nessuno
- Colore divisorio inferiore: rgba (21,76,135,0.61)
- Altezza divisore inferiore (predefinito): 0%
- Altezza divisore inferiore (hover): 120%
- Capovolgimento divisore inferiore: orizzontale
Per assicurarti che i divisori non vengano visualizzati al di fuori della sezione, aggiorna l'opzione di overflow verticale e orizzontale su nascosta.
- Overflow orizzontale: nascosto
- Overflow verticale: nascosto
Ora diamo un'occhiata al risultato finale.
Risultato finale
Ed ecco il design su tablet e telefono.
Modifica della posizione del CTA
Se desideri modificare la posizione iniziale del modulo di invito all'azione prima dello stato al passaggio del mouse, puoi aggiornare facilmente la spaziatura delle righe.
Dal lato destro
Supponiamo che tu voglia che il modulo inizi a destra prima del passaggio del mouse. Aggiorna semplicemente le impostazioni della riga come segue:
- Imbottitura: 35% sinistra
- Imbottitura (hover): 0% a sinistra
Dovrai aggiornare l'immagine per avere un punto focale sinistro. Dopo di che, ecco il risultato.
Dal fondo
Oppure, se lo desideri, puoi avere il popup CTA dalla parte inferiore della riga. Per fare ciò, dovrai aggiungere un'altezza fissa alla sezione e quindi abbassare il modulo con un'imbottitura superiore.
Apri le impostazioni della sezione e assegna alla sezione un'altezza massima e imposta l'overflow su nascosto.
- Altezza massima (desktop): 415 px
- Overflow orizzontale: nascosto
- Overflow verticale: nascosto
Quindi apri le impostazioni della riga e aggiorna il padding per spingere il modulo parzialmente fuori dalla vista sotto la sezione. Quindi rimuovi l'imbottitura superiore al passaggio del mouse per riportarla su.
- Imbottitura (desktop): 25% in alto, 5% in basso
- Imbottitura (hover): 5% in alto
Ecco il risultato...
Pensieri finali
Divi rende divertente e facile aggiungere tutti i tipi di effetti al passaggio del mouse ai progetti delle tue pagine web. I migliori effetti al passaggio del mouse sono quelli che hanno uno scopo e migliorano effettivamente l'esperienza dell'utente. I pochi semplici effetti al passaggio del mouse trattati in questo post dovrebbero aiutare a creare alcuni CTA accattivanti che sembrano fantastici, migliorano l'esperienza dell'utente e, si spera, portano a più conversioni.
Per ulteriori idee, consulta il nostro post su 3 modi in cui puoi utilizzare le opzioni al passaggio del mouse per enfatizzare i CTA in Divi e il nostro post sulla creazione di CTA slide-in.
Non vedo l'ora di sentirti nei commenti.
Saluti!