Creazione di un CTA "Inizia" che rivela più opzioni al passaggio del mouse
Pubblicato: 2019-06-26Molte aziende includeranno un CTA "per iniziare" nella home page. Di solito è l'invito all'azione principale sulla pagina, poiché condurrà l'utente attraverso una sorta di processo previsto. Potrebbe essere un semplice pulsante "Inizia ora" che collega a un'altra pagina. Oppure potrebbe essere una sezione di una pagina che include istruzioni "per iniziare" e/o diverse opzioni che l'utente può adottare per avviare il processo previsto dall'azienda.
In questo tutorial, ti mostreremo come creare un CTA "Per iniziare" che rivelerà più opzioni "Per iniziare" al passaggio del mouse. Usando Divi, progetteremo una sezione in modo che appaia come un pulsante grande. Quindi, passando il mouse sul pulsante, le opzioni appariranno in modo molto simile a un dispositivo di scorrimento verticale che rivelerebbe la diapositiva successiva.
Il design è elegante e la funzionalità potrebbe essere utile in molti modi.
Iniziamo.
Sbirciata
Ecco una rapida occhiata al CTA "Get Started" che creeremo in questo tutorial.
Scarica GRATUITAMENTE il layout Divi CTA "Inizia"
Per mettere le mani sul design 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 avere quanto segue:
- Il tema Divi installato e attivo
- Una nuova pagina creata per costruire da zero sul front-end (visual builder)
- Immagini da utilizzare per contenuti fittizi
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Implementazione del design CTA "Inizia qui" in Divi
L'idea alla base di questo design è spostare il contenuto di una sezione verso l'alto quando si passa con il mouse sopra la sezione. Per fare ciò, dobbiamo assicurarci che la nostra sezione abbia un'altezza fissa con l'overflow nascosto. Questo nasconderà le opzioni CTA prima dello stato al passaggio del mouse. Quindi possiamo usare il margine per posizionare i nostri moduli e il padding superiore per spostare il contenuto in vista al passaggio del mouse.
Cominciamo con la sezione.
Creazione della sezione
Per iniziare, crea una sezione regolare con una riga a una colonna. Quindi, prima di aggiungere qualsiasi modulo, aggiorniamo le impostazioni della sezione.
Apri le impostazioni della sezione e aggiorna quanto segue:
Colore di sfondo:#2b87da
Larghezza: 90%
Larghezza massima: 1100 px
Allineamento della sezione: centro
Margine: 6vw in alto, 6vw in basso (solo per dargli un po' di spazio per respirare)
Imbottitura (desktop): 300 px in alto, 0 px in basso
Imbottitura (tablet): 0px in alto, 15% in basso
Quindi aggiungi alcuni angoli arrotondati. Questo creerà il nostro design simile a un pulsante ogni volta che diamo alla sezione un'altezza massima.
Angoli arrotondati: 140 px (desktop), 20 px (hover), 10 px (tablet)
Quindi dagli un'ombra di scatola (vedi screenshot).
A questo punto non aggiungeremo tutte le impostazioni necessarie per il design finale. Dovremo tornare indietro e dargli un'altezza fissa e un effetto hover. Ma per ora aggiungiamo il contenuto.
Creazione della prima riga di contenuti
Apri le impostazioni per la riga di una colonna che hai creato e aggiorna quanto segue:
Larghezza: 100%
Imbottitura: 0px in alto, 0px in basso, 5% a sinistra, 5% a destra
All'interno della riga di una colonna, aggiungi un modulo di testo.
Quindi aggiungi la seguente intestazione h2 al contenuto del corpo.
<h2>Get Started Here...</h2>
Aggiorna le impostazioni di progettazione come segue:
Intestazione 2 Carattere: Nunito
Intestazione 2 Peso del carattere: grassetto
Colore testo titolo 2: #ffffff
Titolo 2: Dimensione testo: 78 px (desktop e tablet), 46 px (telefono)
Larghezza massima: 500 px
Altezza: 300 px (desktop), automatico (tablet e telefono)
Margine: -300px superiore (desktop), 0px superiore (tablet e telefono)
Imbottitura: 7% superiore
L'altezza di 300 px e il margine superiore di -300 px portano il modulo di testo fino a riempire il riempimento superiore di 300 px della sezione. Successivamente, ogni volta che togliamo il riempimento della sezione superiore al passaggio del mouse, il modulo di testo scorrerà verso l'alto sopra la sezione.
Creazione della seconda riga di contenuti
La seconda riga di contenuto è dove aggiungeremo le nostre opzioni CTA. Vai avanti e aggiungi una nuova riga con un layout a tre colonne.
Quindi aggiorna le impostazioni della riga come segue:
Larghezza: 100%
Larghezza massima: 100%
Imbottitura: 0px in alto, 0px in basso
Quindi aggiungi un modulo blurb nella colonna 1.
Quindi aggiorna le impostazioni del blurb come segue:
Elimina il testo del corpo predefinito e lascia il titolo.
Quindi Aggiungi un'icona immagine (90 X 90). Oppure puoi usare una normale icona Divi se vuoi.
Aggiungi uno sfondo e aggiorna il design del testo del titolo.
Colore di sfondo: #ffffff
Carattere del titolo: Nunito
Peso del carattere del titolo: Ultra grassetto
Stile carattere titolo: TT
Allineamento del testo del titolo: al centro
Colore del testo del titolo: #2b87da
Dimensione del testo del titolo: 14px
Prima di poter rendere circolari i blurb, prima dobbiamo dare al blurb un'altezza e una larghezza uguali. Quindi possiamo usare la spaziatura per allineare il blurb e il contenuto del blurb al centro.
Larghezza contenuto: 200 px (desktop), 250 px (tablet)
Larghezza: 250 px (desktop), 300 px (tablet)
Allineamento del modulo: centro
Altezza: 250 px (desktop), 300 px (tablet)
Margine: 25 px in alto, 0 px in basso
Imbottitura: 50px superiore (desktop), 75px superiore (tablet e telefono)
Per completare il disegno del cerchio, dai alla trama un angolo arrotondato e un'ombra a scatola.
Angoli Arrotondati: 50%
Box Shadow: vedi screenshot
Questo si occupa del nostro primo blurb. Per creare i due successivi. Copia la descrizione e incollala nella colonna 2 e nella colonna 3. Quindi aggiorna l'icona dell'immagine per ciascuna. Dovrebbe essere simile al seguente:
Ultimi ritocchi alla sezione
Per completare il progetto CTA "Inizia", dobbiamo aggiornare un po' di più la sezione. Aggiorna le seguenti impostazioni della sezione:
Altezza: 300 px (desktop), automatico (tablet e telefono)
Overflow orizzontale: nascosto
Overflow verticale: nascosto
Ciò manterrà la sezione alla stessa altezza del contenuto nella riga 1 e nella riga 2. Nascondere l'overflow manterrà nascosto il contenuto nella riga 2 finché non lo visualizzeremo al passaggio del mouse.
Per visualizzare il contenuto della riga 2, è necessario rimuovere l'imbottitura superiore della sezione al passaggio del mouse.
Padding (hover): 0px in alto
Ora controlla il risultato finora. Il contenuto scorrerà verso l'alto per rivelare il contenuto nella riga 2 che mostra le tre opzioni CTA.
Per rendere la sezione più simile a un pulsante, possiamo utilizzare le opzioni di trasformazione per ridimensionarla e quindi riportarla alle dimensioni normali al passaggio del mouse. Aggiorna le seguenti opzioni di trasformazione per la sezione.
Scala di trasformazione (desktop): 70%
Scala di trasformazione (hover): 100%
Scala di trasformazione (tablet): 100%
Ora aggiungi un'immagine di sfondo (500 X 500) per occupare la giusta dimensione della sezione.
Immagine di sfondo: inserisci immagine
Dimensione immagine di sfondo: dimensione effettiva
Posizione immagine di sfondo: centro destra (desktop), in alto a destra (tablet), in alto a sinistra (telefono)
Aggiunta di URL di collegamento ai Blurb e ridimensionamento al passaggio del mouse
Poiché i nostri blurb servono davvero come pulsanti circolari, dobbiamo aggiungere gli URL dei collegamenti ai moduli a ciascuno dei blurb. Ovviamente dovrai aggiungere il tuo per soddisfare le tue esigenze.
Poiché i blurb sono nascosti nel visual builder, attiva/disattiva la modalità di visualizzazione wireframe e aggiorna ciascuna delle impostazioni del blurb con l'URL di collegamento del modulo.
Quindi rimani in modalità di visualizzazione wireframe e usa la multiselezione per selezionare tutti e tre i blurb. E apri le impostazioni di uno dei blurb per aggiornare le impostazioni degli elementi per tutti e tre. Quindi aggiorna l'opzione di trasformazione come segue:
Scala di trasformazione (hover): 105%
Questo è tutto!
Il risultato finale
Diamo un'occhiata al design finale del CTA "Get Started".
Ed ecco il design su tablet e telefono.
Pensieri finali
Il CTA "Get Started" è comune sul web oggi. Speriamo che questo tutorial ti aiuti a portarlo al livello successivo. E non aver paura di pensare ad altri modi per utilizzare questa funzionalità. Pensaci. Puoi aggiungere qualsiasi contenuto tu voglia alla sezione!
Sentiti libero di condividere i tuoi pensieri nei commenti qui sotto.
Aspetto tue notizie.
Saluti!