Come enfatizzare il tuo pulsante appiccicoso in una splendida sezione CTA con Divi

Quando è stata rilasciata la funzione Divi sticky options, il post di rilascio sul nostro blog è stato accompagnato da demo live che mostrano la versatilità di questa nuova funzionalità. Per aiutarti a capire meglio le opzioni adesive e iniziare a usarle nel tuo design, ti mostreremo come ricreare uno dei design demo dal vivo in questo tutorial. Il design che stiamo ricreando si concentra sull'enfatizzare il tuo bottone appiccicoso. È una sezione CTA basata su testo che ti consente di evidenziare la tua call to action in un modo bellissimo. Potrai anche scaricare gratuitamente il file JSON!

Andiamo ad esso.

Anteprima

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

Desktop

Mobile

Scarica GRATUITAMENTE il layout della sezione CTA

Per mettere le mani sul layout della sezione CTA 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!

1. Costruisci la struttura degli elementi

Aggiungi nuova sezione

Colore di sfondo

Inizia aggiungendo una nuova sezione alla pagina su cui stai lavorando. Questa può essere una nuova pagina o una esistente, ma ti consigliamo di aggiungerla a una pagina che ha già del contenuto, quindi c'è abbastanza spazio per lo scorrimento per vedere effettivamente gli effetti prendere vita. Apri le impostazioni della sezione e applica un colore di sfondo a tua scelta.

• Colore di sfondo: #00965a

Dimensionamento

Passa alla scheda Progettazione della sezione e applica un'altezza massima. Questa altezza massima ci aiuterà a garantire che l'altezza della sezione sia limitata.

• Altezza massima: 100 vh

straripamenti

Poiché in seguito applicheremo alcuni effetti di scorrimento al tutorial, dovremo anche nascondere gli overflow della sezione per assicurarci che nulla superi il contenitore della sezione.

• Overflow orizzontale: nascosto
• Overflow verticale: nascosto

Aggiungi nuova riga

Struttura della colonna

Una volta che le impostazioni della sezione sono a posto, aggiungi una nuova riga utilizzando la seguente struttura di colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e applica alcune impostazioni di ridimensionamento personalizzate. Queste impostazioni di dimensionamento consentiranno al contenitore della riga di occupare l'intera larghezza della riga, il che conferisce al nostro design un effetto a schermo intero.

• Larghezza: 100%
• Larghezza massima: nessuna

Impostazioni colonna 2

Spaziatura

Apri quindi le impostazioni della colonna 2 e applica alcuni valori di riempimento personalizzati su diverse dimensioni dello schermo.

• Imbottitura inferiore: 60 px
• Imbottitura sinistra:
  • Tablet e telefono: 5%
• Imbottitura destra:
  • Desktop: 10vw
  • Tablet e telefono: 5%

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto

È ora di aggiungere moduli, iniziando con un modulo di testo nella colonna 1. Aggiungi del contenuto a tua scelta. Per creare esattamente lo stesso design dell'anteprima di questo post, inserisci alcune parole pertinenti che aiutino a potenziare il CTA che inseriremo nella colonna 2 più avanti nel tutorial. Assicurati di posizionare ogni parola anche all'interno della propria riga.

Impostazioni testo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo. Noterai che stiamo utilizzando la larghezza della finestra come unità di misura del testo. L'uso dell'unità di larghezza della finestra ci aiuterà a mantenere il testo reattivo su tutte le dimensioni dello schermo.

• Carattere del testo: Work Sans
• Peso del carattere del testo: grassetto
• Colore del testo: #000000
• Dimensione del testo: 10vw
• Altezza riga di testo: 0,2 em

Aggiungi modulo di testo alla colonna 2

Aggiungi contenuto

Alla seconda colonna. Lì, aggiungi un modulo di testo con una copia di invito all'azione a tua scelta.

Impostazioni testo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:

• Carattere del testo: Work Sans
• Colore del testo: #ffffff
• Dimensione del testo: 56px
• Altezza riga di testo: 1.2em

Dimensionamento

Assegna anche una larghezza massima al modulo di testo.

• Larghezza massima: 400 px

Aggiungi modulo pulsante alla colonna 2

Aggiungi copia

Il prossimo e ultimo modulo di cui abbiamo bisogno nel nostro progetto è un modulo pulsante nella colonna 2. Aggiungi una copia a tua scelta.

Impostazioni dei pulsanti

Passa alla scheda di progettazione del modulo e modella il pulsante di conseguenza:

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 16 px
• Colore del testo del pulsante: #000000
• Colore di sfondo del pulsante:
  • Predefinito: #ffffff
  • Al passaggio del mouse: rgba (255,255,255,0.7)
• Larghezza bordo pulsante: 5px
• Colore bordo pulsante: rgba (0,0,0,0)

• Raggio bordo pulsante: 5px
• Carattere pulsante: Work Sans
• Mostra icona pulsante: No

2. Applica effetti di scorrimento e adesivi

Aggiungi movimento verticale al modulo di testo nella colonna 1

Ora che le basi del nostro design sono state poste, è il momento di applicare gli effetti di scorrimento e adesivi! Apri il modulo di testo nella colonna 1 e applica un movimento verticale reattivo.

• Abilita movimento verticale: Sì
• Compensazione iniziale:
  • Scrivania: 10
  • Tablet e telefono: 0
• Compensazione media: 0
• Scostamento finale:
  • Scrivania: -10
  • Tablet e telefono: 0
• Attivazione effetto movimento: parte superiore dell'elemento

Aggiungi effetto adesivo alla colonna 2

Successivamente, apriremo le impostazioni della colonna 2 e applicheremo un effetto adesivo sul desktop. Poiché le colonne e i moduli su schermi di dimensioni più piccole sono posizionati uno sotto l'altro, anziché uno accanto all'altro, riporteremo le impostazioni permanenti su "Non incollare" su schermi di dimensioni più piccole.

• Posizione appiccicosa:
  • Desktop: resta in alto
  • Tablet e telefono: non attaccare
• Offset in alto appiccicoso: 80px
• Limite appiccicoso inferiore: sezione
• Offset da elementi appiccicosi circostanti: Sì
• Stili di transizione predefiniti e permanenti: Sì

Aggiungi uno stile appiccicoso al pulsante nella colonna 2

Ora che la colonna 2 è diventata appiccicosa, saremo in grado di applicare uno stile adesivo alla colonna stessa e ai moduli all'interno della colonna. Le uniche modifiche persistenti che faremo, tuttavia, si concentrano sul pulsante. Apri il modulo, vai alle impostazioni dei pulsanti e inverti il ​​testo e i colori dei pulsanti. Questo è tutto! Una volta salvato il layout ed esci dal visual builder, puoi guardare il bellissimo design dal vivo sul tuo sito web.

• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #000000

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 ricreare uno dei design utilizzati come demo all'interno del post di aggiornamento della funzionalità delle opzioni adesive. Questo design si concentra sull'evidenziazione del pulsante permanente modificando lo stile una volta abilitato lo stato permanente. Sei stato anche 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.