Come creare un menu CTA appiccicoso mentre scorri verso il basso nella pagina
Pubblicato: 2020-10-23Tradizionalmente, i menu permanenti sono visibili nella parte superiore (o inferiore) di una pagina nel momento in cui la pagina viene caricata. Tuttavia, la creazione di un menu CTA permanente mentre l'utente scorre verso il basso la pagina può essere un modo creativo ed efficace per mantenere sempre cliccabili quei CTA importanti. In un certo senso, è il meglio dei due mondi. Consente al CTA di mantenere la sua posizione privilegiata nel design originale. E mantiene una versione ridotta del CTA (il pulsante) visibile in una struttura di menu appiccicosa con cui gli utenti hanno familiarità.
In questo tutorial, ti mostreremo come creare un menu CTA permanente mentre scorri la pagina in Divi. Funzionerà alla grande per gli utenti desktop e mobili aggiungendo un modo intuitivo, ma unico, per invogliare i visitatori ad agire.
Iniziamo!
Sbirciata
Ecco una rapida occhiata al design che costruiremo in questo tutorial.
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!
https://youtu.be/kpjbG8frPTQ
Iscriviti al nostro canale Youtube
Per importare il layout della sezione nella tua libreria Divi, vai alla libreria Divi.
Fare clic sul pulsante Importa.
Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.
Quindi fare clic sul pulsante di importazione.
Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.
Passiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai fare quanto segue:
- Se non l'hai ancora fatto, installa e attiva il tema Divi.
- Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
- Scegli l'opzione "Crea da zero".
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Come creare un menu CTA appiccicoso mentre scorri una pagina in Divi
Costruzione CTA #1
Per iniziare a creare il nostro primo CTA, utilizzeremo un modulo blurb con un pulsante CTA personalizzato che si attaccherà nella parte superiore e inferiore della pagina mentre l'utente scorre.
Per iniziare, crea una nuova riga a una colonna all'interno della sezione normale.
Aggiungi Blurb
All'interno della colonna della riga, aggiungi un modulo blurb.
Apri le impostazioni del blurb e aggiungi un'immagine a tua scelta invece dell'icona predefinita. Sto usando un'immagine dal pacchetto di layout di criptovaluta.
Nella scheda Progettazione, aggiorna gli stili di testo come segue:
- Livello titolo titolo: H2
- Carattere del titolo: Titillium Web
- Peso del carattere del titolo: semi grassetto
- Allineamento del testo del titolo: al centro
- Dimensione del testo del titolo: 36px (desktop), 28px (telefono)
- Altezza della riga del titolo: 1,5 em
- Altezza della linea del corpo: 2em
Aggiungi riga per pulsante CTA
Sotto la riga contenente il blurb che abbiamo appena creato, aggiungi una nuova riga a una colonna.
È importante che le impostazioni delle righe siano corrette affinché la funzionalità dei pulsanti permanenti si allinei correttamente.
Apri le impostazioni della riga e aggiorna quanto segue:
- Larghezza grondaia: 1
- Larghezza: 100%
- Larghezza massima: 1400 px (desktop), 100% (tablet)
Aggiungi pulsante di invito all'azione
All'interno della nuova riga, aggiungi un modulo di invito all'azione. L'aggiornamento quanto segue:
- Avremo solo bisogno dell'elemento pulsante all'interno di questo modulo in modo da poter eliminare il titolo e il corpo del testo.
- Assicurati di aggiungere un URL di collegamento del pulsante ('#' va bene per ora) in modo che il pulsante sia visibile durante la progettazione del layout. Puoi sempre aggiornarlo in seguito.
- Disabilita l'opzione "Usa colore di sfondo".
(NOTA: non sarai ancora in grado di vedere il pulsante bianco su uno sfondo bianco, ma questo cambierà nel passaggio successivo)
Nella scheda Design, aggiorna i seguenti stili di pulsanti:
- Dimensione del testo del pulsante: 14 px (desktop), 11 px (telefono)
- Colore del testo del pulsante: #1b1f50
- Colore di sfondo del pulsante: #09d5fe
- Larghezza bordo pulsante: 0px
- Spaziatura delle lettere dei pulsanti: 2px
- Carattere pulsante: Titillium Web
- Peso del carattere del pulsante: grassetto
- Stile carattere pulsante: TT
- Imbottitura dei pulsanti: 1em in alto, 1em in basso
Continua ad aggiornare il design come segue:
- Larghezza: 33,33%
- Allineamento del modulo: centro
- Imbottitura: 0px in alto, 0px in basso
La larghezza del 33,33% del pulsante consentirà al pulsante di occupare esattamente 1/3 della finestra del browser quando è in posizione fissa. Combinando questo con altri due pulsanti (ciascuno con la stessa larghezza del 33,33%) si otterrà una barra dei menu CTA completa di pulsanti.
Nella scheda Avanzate, aggiungi il seguente snippet CSS personalizzato alla descrizione della promozione (ha spazi non necessari di cui non abbiamo bisogno):
display:none;
Quindi aggiungi un altro frammento al pulsante Promo:
display:block;
Rendere il pulsante appiccicoso
Per rendere il pulsante permanente, utilizzeremo l'opzione di posizione permanente per attaccare il pulsante e la parte superiore e inferiore della finestra del browser. Aggiungeremo anche un offset per l'intestazione fissa Divi predefinita.
Aggiorna quanto segue:
- Posizione appiccicosa: attaccare in alto e in basso
- Offset superiore permanente: 54 px (desktop), 0 px (tablet)
- Offset dagli elementi appiccicosi circostanti: NO
Con la nostra posizione permanente in atto, ora possiamo scegliere come target lo stile del pulsante nello stato permanente. In questo caso vogliamo spostare il pulsante a sinistra per fare spazio a ulteriori pulsanti permanenti in seguito.
Aggiorna il seguente stile di trasformazione nello stato permanente:
- Trasforma Trasla asse X (appiccicoso): -100%
Questo sposterà il pulsante su una distanza pari alla larghezza esatta del pulsante (che è 33,33%) una volta che si attacca alla parte superiore o inferiore della pagina.
Costruzione CTA #2
Ora che abbiamo una sezione completa con un pulsante CTA permanente funzionante, possiamo duplicare la sezione precedente e apportare piccole modifiche al pulsante.
Innanzitutto, duplica la sezione.
Apri le impostazioni per il modulo Call to Action nella nuova sezione e aggiorna le opzioni di trasformazione come segue:
- Trasforma Trasla asse X (appiccicoso): 0px
In realtà si tratta solo di ripristinarlo allo stato predefinito perché non vogliamo spostare questo pulsante poiché deve rimanere al centro.
Costruzione CTA #3
Per creare la terza sezione CTA, duplica la sezione precedente.
Quindi apri le impostazioni per il modulo Call to Action nella nuova sezione e aggiorna le opzioni di trasformazione come segue:
- Trasforma Trasla asse X (Appiccicoso): 100%
Questo sposterà il pulsante a destra di una distanza pari alla larghezza esatta del pulsante (che è 33,33%) una volta che si attacca alla parte superiore o inferiore della pagina.
Aggiorna testo e colori del pulsante
Per perfezionare il design, aggiorna il testo e i colori del pulsante CTA in modo che corrispondano al design del tuo sito. Ecco le impostazioni per questo esempio:
Per l'invito all'azione n. 2...
- Testo del pulsante: visualizza i nostri piani
- Colore del testo del pulsante: #ffffff
- Colore di sfondo del pulsante: #1b1f50
Per l'invito all'azione n. 3...
- Testo del pulsante: chatta con noi
- Colore del testo del pulsante: #ffffff
- Colore di sfondo del pulsante: #4328b7
Aggiungi un margine temporaneo alla sezione superiore e inferiore per la funzionalità di test
Su un normale sito Web, questi CTA risiedono al centro della pagina da qualche parte, quindi c'è spazio extra per scorrere su e giù per la pagina. Per ora, possiamo aggiungere un margine temporaneo alle sezioni superiore e inferiore della pagina.
Nella sezione superiore aggiungi un margine superiore di 90vh.
Nella sezione inferiore, aggiungi un margine inferiore di 90vh.
Risultato finale
Ora diamo un'occhiata al risultato finale.
Pensieri finali
Questo tutorial ti mostra un modo creativo per mantenere in primo piano quegli importanti CTA in modo che gli utenti possano fare clic su di essi ogni volta che lo desiderano. Aggiunge anche una sottile microinterazione che attira ancora più attenzione su di loro senza distrarre dal contenuto principale della pagina. Si spera che questo aiuti a far fluire quei succhi creativi in modo da poter sperimentare più design per renderlo ancora migliore.
Non vedo l'ora di sentirti nei commenti.
Saluti!