Come modificare il contenuto su Hover per creare CTA unici in Divi (3 modi)
Pubblicato: 2019-09-04Le opzioni di passaggio del mouse integrate di Divi semplificano la modifica del contenuto di qualsiasi modulo al passaggio del mouse. Possiamo cambiare le immagini di sfondo, i colori e persino il testo al passaggio del mouse. Questo apre le porte a modi creativi per attirare l'attenzione degli utenti e aumentare gli inviti all'azione per conversioni migliori.
Oggi ti mostreremo come modificare i contenuti al passaggio del mouse in Divi per alcuni inviti all'azione unici. Mostreremo modi intelligenti per modificare il testo del pulsante (e le icone) al passaggio del mouse. Mostreremo come modificare elegantemente il titolo e il testo del pulsante all'interno di un modulo di invito all'azione al passaggio del mouse. Inoltre, aggiungeremo anche alcuni CSS personalizzati per aggiungere anche alcuni effetti di transizione unici (come cambiare e capovolgere l'icona di un pulsante).
Controlla!
Sbirciata
Ecco una rapida occhiata ai tre design che creeremo oggi.
#1 Come modificare il contenuto al passaggio del mouse per i pulsanti
#2 Come modificare gli sfondi e il contenuto del corpo sui moduli di testo
#3 Come modificare il contenuto al passaggio del mouse per più elementi con il modulo Call to Action
Scarica il layout GRATUITAMENTE
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!
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, dovrai fare quanto segue:
- Se non lo hai ancora fatto, installa e attiva il tema Divi installato (o il plug-in Divi Builder se non utilizzi il tema Divi).
- Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
- Carica il layout predefinito della pagina di destinazione di Cake Maker nella pagina. Useremo questo layout per i nostri progetti. È possibile caricare il layout selezionando "Scegli un layout predefinito" quando richiesto durante la distribuzione di Divi Builder. Oppure puoi selezionare l'icona più "Carica dalla libreria" dal menu delle impostazioni all'interno di Divi Builder. Per maggiori informazioni su come caricare il layout predefinito sulla tua pagina, guarda il nostro video.
Dopodiché, sei pronto per iniziare a progettare in Divi.
#1 Come modificare il contenuto al passaggio del mouse per i pulsanti
Una volta caricato il layout predefinito della pagina di destinazione di Cake Maker sulla tua pagina, trova il pulsante principale CTA nell'intestazione superiore della pagina e apri le impostazioni di progettazione del modulo del pulsante.
Modifica del testo del pulsante al passaggio del mouse
Nella scheda contenuto, aggiorna il testo del pulsante come segue:
Testo del pulsante: "Acquista ora"
Quindi distribuisci l'opzione al passaggio del mouse per il testo del pulsante e inserisci il testo del pulsante di sostituzione sotto la scheda al passaggio del mouse come segue:
Testo del pulsante (passa il mouse): "Andiamo"
Il testo sotto il testo del pulsante al passaggio del mouse sostituirà il testo del pulsante predefinito quando si passa sopra il pulsante.
Larghezza pulsante
Tuttavia, il pulsante è inline-block quindi la larghezza del pulsante/collegamento cambierà in base alla quantità di contenuto (lettere o spazi) che contiene il pulsante. Questo non funziona bene per questo effetto al passaggio del mouse perché con un testo sostitutivo più piccolo, il pulsante si ridurrà in larghezza e creerà salti o glitch quando si passa con il mouse sul bordo del pulsante. Per risolvere questo problema, dobbiamo applicare una larghezza impostata al pulsante. Questo è facile con un singolo frammento di CSS. Aggiungi il seguente CSS all'elemento principale del modulo pulsante.
width: 200px;
Ecco il risultato.
Ulteriori modifiche ed effetti al passaggio del mouse
Oltre a modificare il contenuto al passaggio del mouse, possiamo anche ravvivare il nostro pulsante con diverse combinazioni di effetti al passaggio del mouse.
In questo momento l'icona del pulsante è una freccia a destra che viene distribuita al passaggio del mouse. Funziona molto bene con il testo del pulsante al passaggio del mouse "Let's Go".
Capovolgere l'icona del pulsante al passaggio del mouse
Ma puoi anche aggiungere un bel effetto flip hover per l'icona del pulsante. Per fare ciò, prima fai in modo che l'icona appaia sempre (non solo al passaggio del mouse) aggiornando quanto segue:
Mostra solo l'icona al passaggio del mouse per il pulsante: NO
Quindi aggiungi una classe CSS al modulo pulsante come segue:
Classe CSS: flip-button-icon
Quindi apri le impostazioni della pagina e aggiungi il seguente CSS personalizzato.
.flip-button-icon:after {
transition: transform 500ms;
}
.flip-button-icon:hover:after {
transform: rotateX(360deg);
}
Ecco il risultato.
Modifica dell'icona del pulsante al passaggio del mouse
Puoi anche cambiare completamente l'icona del pulsante al passaggio del mouse. Tutto ciò di cui hai veramente bisogno è un piccolo frammento di CSS per sostituire il contenuto di :after pseudo elemento in cui risiede l'icona.
Prima di aggiungere il css, scegliamo prima un'icona del pulsante diversa da mostrare inizialmente, quindi possiamo cambiarla nella freccia destra con CSS.
Aggiorna l'icona del pulsante con l'icona del carrello poiché il nostro CTA è "Mostra ora".
Quindi vai alla scheda Avanzate e aggiorna la proprietà di trasformazione CSS corrente con una rotazione di 180 gradi invece di 360 gradi. E aggiungi un nuovo unicode per il contenuto che mostra la freccia sinistra ("\23").
Il nuovo frammento sarà simile a questo:
.flip-button-icon:hover:after {
transform: rotateY(180deg);
content: "\23";
}
Poiché ruoteremo anche l'icona di 180 gradi, questa mostrerà una freccia destra in sostituzione dell'icona del carrello quando si passa con il mouse sul pulsante.
Risultato finale
Questo è il risultato finale.
#2 Come modificare gli sfondi e il contenuto del corpo sui moduli di testo
Per questo prossimo design, scendi nel layout di pagina fino alla sezione "I miei servizi". Lì apri le impostazioni della riga per la riga superiore con i due moduli di testo.
Aggiorna le impostazioni della colonna
Sotto le impostazioni della riga, apri le impostazioni per la colonna 1 e aggiungi un'immagine di sfondo al passaggio del mouse sulla colonna.
Questo sostituirà lo sfondo bianco che è presente per impostazione predefinita.
Inoltre, aggiungi anche un gradiente sopra l'immagine di sfondo al passaggio del mouse.
Colore sfondo sfumato sinistro: rgba (255,255,255,0)
Colore di sfondo sfumato a destra: rgba (46,41,142,0.75)
Posizione di partenza: 30%
Posiziona il gradiente sopra l'immagine di sfondo: S
Ciò fornirà una bella sovrapposizione che renderà più leggibile il testo sostitutivo al passaggio del mouse.
Successivamente, elimina l'imbottitura personalizzata per la colonna ripristinandola all'impostazione predefinita.
Personalizza il modulo di testo nella colonna 1
Una volta aggiornata la colonna, salva le impostazioni e apri le impostazioni del modulo di testo per il modulo di testo nella colonna 1. Quindi aggiorna il contenuto del corpo del modulo di testo al passaggio del mouse con quanto segue:
<h3>Custom Cakes</h3> <a href="#">Order Now</a>
Questo è un bel modo per aggiungere un invito all'azione con un collegamento al passaggio del mouse.
Quindi, aggiorna lo sfondo come segue:
Colore di sfondo: #ffffff;
Colore di sfondo (al passaggio del mouse): rgba(255,255,255,0);
Questo aggiunge un bel elemento di transizione per rivelare gradualmente l'immagine di sfondo nella colonna.
Successivamente aggiorna le seguenti impostazioni di progettazione:
Altezza: 260 px
Imbottitura: 30px in alto, 30px a sinistra, 30px a destra
Padding (hover): 90px in alto
Ciò creerà un piacevole effetto di transizione che abbassa gradualmente il testo quando si passa con il mouse sul modulo di testo.
Quindi, aggiorna i colori del testo al bianco come segue:
Colore del testo del collegamento: #ffffff
Colore testo titolo 3 (passa il mouse): #ffffff
Per rallentare la transizione degli effetti al passaggio del mouse, aggiorna la durata della transizione come segue:
Durata della transizione: 500 ms
Risultato finale
Ora controlla il risultato finale.
#3 Come modificare il contenuto al passaggio del mouse per più elementi con il modulo Call to Action
Per questo prossimo progetto, utilizzeremo un modulo di invito all'azione che modifica più elementi di contenuto al passaggio del mouse. Per fare ciò, scendi nella pagina fino alla sezione Raccolte popolari.
Aggiungi nuovo modulo di invito all'azione
Quindi aggiungi un nuovo modulo di invito all'azione sotto il pulsante "acquista ora" nella riga superiore della sezione delle specialità.
Aggiorna CTA con la modifica del contenuto al passaggio del mouse
Successivamente, aggiorna il contenuto dell'invito all'azione come segue:
Titolo: “Offerta Speciale”
Titolo (al passaggio del mouse): "10% di sconto"
Testo del pulsante: "Acquista ora"
Testo del pulsante (passa il mouse): "Ottieni un affare"
Corpo: "Cupcake personalizzati"
URL collegamento pulsante: #
Salva l'impostazione per ora.
Copia e incolla gli stili dei pulsanti di layout
Faremo un salto nella progettazione del pulsante per il nostro CTA. Per fare ciò, apri le impostazioni dei pulsanti per il modulo pulsanti sopra il modulo CTA fornito con il layout predefinito. Quindi fare clic sull'icona del punto triplo nel gruppo di opzioni del pulsante e selezionare "copia stili pulsante".
Quindi apri il menu delle altre opzioni nel modulo di invito all'azione che stiamo progettando e seleziona "Incolla stili pulsante".
Quindi apri le impostazioni del modulo di invito all'azione e aggiorna il riempimento dei pulsanti:
Imbottitura pulsanti: 15px in alto, 15px in basso, 40px a sinistra, 40px a destra 
Aggiorna stili di testo
Successivamente, aggiorna il titolo e il design del testo del corpo.
Livello titolo titolo: H4
Carattere del titolo: Pacifico
Dimensione del testo del titolo: 9vw
Altezza della riga del titolo: 1,3 em
Carattere del corpo: Open Sans
Peso del carattere del corpo: grassetto
Dimensione del testo del corpo: 18px
Spaziatura delle lettere del corpo: 1px
Impostazioni finali
Quindi, aggiorna il riempimento.
Imbottitura: 0px a sinistra, 0px a destra
Quindi dai al modulo una classe CSS personalizzata.
Classe CSS: fade-cta-title
Rendi il pulsante cta a tutta larghezza aggiungendo il seguente CSS personalizzato alla casella di input CSS del pulsante promozionale.
E aggiorna la durata della transizione.
Durata della transizione: 800 ms
Infine, aggiorna il colore di sfondo in modo che sia trasparente per impostazione predefinita e cambi colore al passaggio del mouse.
Colore di sfondo: nessuno (elimina)
Colore di sfondo (al passaggio del mouse): rgba (247,78,72,0.86)
Quindi, elimina i due moduli nella riga sopra il nostro modulo Call to Action in modo che sostituisca il cta originale dal layout.
Risultato finora
Ecco il risultato finora. Nota come cambia il testo del titolo e il testo del pulsante quando passi con il mouse sul modulo di invito all'azione.
Ammorbidire la modifica del contenuto con l'animazione
Se vogliamo ammorbidire la transizione del grande titolo nel CTA, possiamo aggiungere una semplice animazione con CSS. Poiché abbiamo già aggiunto la classe CSS al modulo, tutto ciò che dobbiamo fare è aprire il modal delle impostazioni della pagina e aggiungere il seguente CSS personalizzato:
.fade-cta-title:hover .et_pb_module_header {
animation-name: fadeinout;
animation-duration: 800ms;
}
@keyframes fadeinout {
from {opacity: 0;}
to {opacity: 1;}
}
Risultato finale
Ora diamo un'occhiata al risultato finale.
Ed eccolo sul cellulare.
Pensieri finali
In questo tutorial, abbiamo mostrato 3 esempi di come modificare efficacemente il contenuto al passaggio del mouse in Divi. Le opzioni di passaggio del mouse integrate per i contenuti rendono davvero questo processo semplice. E con alcuni frammenti di CSS puoi aggiungere alcune transizioni uniche per distinguere il design. Si spera che ciò ti consentirà di aumentare gli inviti all'azione sul tuo sito per maggiori conversioni e coinvolgimento.
Voglio di più? Abbiamo un sacco di fantastici post che ti aiuteranno a portare i tuoi CTA al livello successivo.
Non vedo l'ora di sentirti nei commenti.
Saluti!