Come rivelare un CTA di colonna in uno stato appiccicoso con Divi
Pubblicato: 2020-10-15Ad un certo punto, quando crei un design di pagina, potresti imbatterti in un elenco di servizi, corsi o qualcosa di simile che desideri condividere in modo interattivo. Il design che stai utilizzando per il contenuto della tua lista gioca un ruolo molto importante nel modo in cui i tuoi visitatori digeriscono il contenuto. E con la maggior parte degli elenchi, vorrai anche includere un invito all'azione che collega i punti. Se stai cercando un modo creativo per farlo, adorerai questo tutorial.
Oggi ti mostreremo come rivelare un CTA di colonna in uno stato appiccicoso con Divi. Non appena il CTA tocca la fine della colonna, l'effetto appiccicoso si interrompe, il che offre un'esperienza senza sforzo in cui le persone possono continuare a leggere gli elementi dell'elenco e decidere di agire quando vogliono senza dover scorrere verso l'alto o verso il basso per trovare il CTA . Condivideremo anche il file JSON gratuitamente!
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 della colonna adesiva
Per mettere le mani sul layout della sezione CTA della colonna adesiva gratuita, devi 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!
Iniziamo a ricreare!
Aggiungi nuova sezione
Colore di sfondo
Inizia aggiungendo una nuova sezione alla pagina su cui stai lavorando. Apri le impostazioni della sezione e applica un colore di sfondo bianco.
- Colore di sfondo: #ffffff
Aggiungi riga n. 1
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
Spaziatura
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e applica un margine inferiore.
- Margine inferiore: 5%
Aggiungi modulo di testo alla colonna
Aggiungi contenuto H2
Aggiungi un modulo di testo con alcuni contenuti H2 a tua scelta.
Impostazioni testo H2
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H2 di conseguenza:
- Intestazione 2 Carattere: Alata
- Intestazione 2 Peso del carattere: grassetto
- Intestazione 2 Allineamento del testo: Centro
- Colore testo titolo 2: #000000
- Intestazione 2 Dimensione del testo:
- Desktop: 55px
- Tablet: 40px
- Telefono: 30px
Aggiungi modulo divisore alla colonna
Visibilità
Proprio sotto il modulo di testo, aggiungi un modulo divisore e assicurati che l'opzione "Mostra divisore" sia abilitata.
- Mostra divisore: Sì
Linea
Passa alla scheda di progettazione del modulo e modifica le impostazioni della linea come segue:
- Colore linea: #3a7a84
- Stile linea: doppio
Dimensionamento
Completa le impostazioni del modulo modificando le impostazioni di dimensionamento di conseguenza:
- Peso del divisore: 10px
- Larghezza: 8%
- Allineamento del modulo: Centro
- Altezza: 10px
Aggiungi riga #2
Struttura della colonna
Continua aggiungendo un'altra riga subito sotto la precedente utilizzando la seguente struttura a colonne:
Dimensionamento
Apri le impostazioni della riga e modifica le impostazioni di dimensionamento come segue:
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 2
- Equalizza le altezze delle colonne: Sì
- Larghezza: 95%
- Larghezza massima: 2580 px
Spaziatura
Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Impostazioni colonna 1
Immagine di sfondo
Quindi, apri le impostazioni della colonna 1 e applica un'immagine di sfondo.
- Dimensione immagine di sfondo: copertina
Frontiera
Passa alla scheda di progettazione della colonna e applica alcuni angoli arrotondati.
- Tutti gli angoli: 20px
Aggiungi modulo Blurb alla colonna 2
Aggiungi contenuto
È ora di aggiungere moduli, iniziando con un modulo Blurb nella colonna 2. Aggiungi del contenuto a tua scelta.
Seleziona icona
Seleziona un'icona successiva.
Colore di sfondo
Quindi, applica un colore di sfondo bianco.
- Colore di sfondo: #FFFFFF
Impostazioni icona
Passa alla scheda di progettazione del modulo e modifica le impostazioni dell'icona di conseguenza:
- Colore icona: #3a7a84
- Posizionamento immagine/icona: a sinistra
Impostazioni del testo del titolo
Quindi, modella le impostazioni del testo del titolo.
- Livello titolo titolo: H3
- Carattere del titolo: Alata
- Peso del carattere del titolo: grassetto
- Colore del testo del titolo: #000000
- Dimensione del testo del titolo:
- Desktop: 35px
- Tablet: 30px
- Telefono: 20px
Impostazioni del corpo del testo
Apporta anche alcune modifiche alle impostazioni del testo del corpo.
- Carattere del corpo: Karla
- Dimensione del testo del corpo:
- Desktop: 17px
- Tablet: 15px
- Telefono: 14px
- Altezza della linea del corpo: 2,5 em
Dimensionamento
Modificare le impostazioni di dimensionamento successivo.
- Larghezza contenuto: 100%
Spaziatura
E applica alcuni valori di riempimento personalizzati alle impostazioni di spaziatura.
- Imbottitura superiore: 20%
- Imbottitura inferiore: 20%
- Imbottitura sinistra: 10%
- Imbottitura destra: 10%
Frontiera
Successivamente, aggiungeremo alcuni angoli arrotondati alle impostazioni del bordo.
- Tutti gli angoli: 20px
Scatola ombra
E includeremo un'ombra sottile della scatola.
- Forza sfocatura ombra scatola: 50 px
- Colore ombra: rgba (59,120,130,0.14)
Animazione
Continua rimuovendo l'animazione predefinita del modulo Blurb nelle impostazioni di animazione successive.
- Animazione immagine/icona: nessuna animazione
Blurb Titolo CSS
E completa le impostazioni del modulo aggiungendo una riga di codice CSS alla casella CSS del titolo del blurb nella scheda Avanzate.
margin-bottom: 20px;
Clona modulo Blurb due volte
Una volta completato il primo modulo Blurb, clona il modulo Blurb tutte le volte che ti servono.
Modifica contenuto
Modificare il contenuto in ogni modulo duplicato.
Aggiungi modulo CTA alla colonna 1
Aggiungi contenuto
Nella colonna 1, l'unico modulo di cui abbiamo bisogno è un modulo di invito all'azione. Aggiungi alcuni contenuti a tua scelta.
Aggiungi collegamento pulsante
Aggiungi un collegamento al pulsante successivo.
Sfondo sfumato
Quindi, applica uno sfondo sfumato.
- Colore 1: RGB (59,120,130,0,53)
- Colore 2: #112730
- Tipo di gradiente: lineare
- Direzione gradiente: 161°
Impostazioni del testo del titolo
Passa alla scheda Design del modulo e apporta le seguenti modifiche alle impostazioni del testo del titolo:
- Livello titolo titolo: H3
- Carattere del titolo: Alata
- Peso del carattere del titolo: grassetto
- Colore del testo del titolo: #ffffff
- Dimensione del testo del titolo:
- Desktop: 50 pixel
- Tablet e telefono: 30px
Impostazioni dei pulsanti
Modella il pulsante successivo.
- Usa stili personalizzati per pulsante: Sì
- Dimensione del testo del pulsante:
- Desktop: 20px
- Tablet: 17px
- Telefono: 15px
- Larghezza bordo pulsante: 0px
- Raggio bordo pulsante: 0px
- Carattere pulsante: Alata
- Peso del carattere del pulsante: grassetto
- Imbottitura superiore: 20px
- Imbottitura inferiore: 20px
- Imbottitura sinistra: 20px
- Imbottitura destra: 20px
- Posizione orizzontale dell'ombra del riquadro: 0px
- Posizione verticale dell'ombra della scatola: 3px
- Colore ombra: #ffffff
Dimensionamento
Passa alle impostazioni di dimensionamento del modulo e applica le seguenti modifiche:
- Larghezza:
- Scrivania: 95%
- Tablet e telefono: 100%
- Allineamento del modulo: Centro
Spaziatura
Aggiungi anche un'imbottitura personalizzata in alto e in basso.
- Imbottitura superiore: 150 px
- Imbottitura inferiore: 150 px
Frontiera
Includi anche alcuni angoli arrotondati.
- Tutti gli angoli: 20px
Trasforma Traduci
Completa le impostazioni del modulo applicando le seguenti impostazioni di conversione di trasformazione:
- Destra:
- Desktop: -25px
- Tablet e telefono: 0px
Applica effetto adesivo al modulo CTA
Impostazioni permanenti
Ora che tutti gli elementi sono a posto, è il momento di applicare l'effetto adesivo. Apri il modulo CTA e applica le seguenti impostazioni permanenti:
- Posizione appiccicosa:
- Desktop: resta in alto
- Tablet e telefono: non attaccare
- Offset in alto appiccicoso: 50 px
- Limite permanente inferiore: colonna
- Offset da elementi appiccicosi circostanti: Sì
- Stili di transizione predefiniti e permanenti: Sì
Opacità
Ora che il modulo è diventato appiccicoso, possiamo applicare stili appiccicosi. Vai alle impostazioni dei filtri e applica le seguenti impostazioni del filtro di opacità:
- Opacità predefinita:
- Desktop: 0%
- Tablet e telefono: 100%
- Opacità appiccicosa: 100%
Transizione
Ultimo ma non meno importante, modificheremo le impostazioni di transizione nella scheda Avanzate. Questo è tutto!
- Durata della transizione: 800 ms
- Curva di velocità di transizione: facilità
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 essere creativo con le opzioni adesive di Divi. Più specificamente, ti abbiamo mostrato come visualizzare magnificamente gli elementi dell'elenco con una CTA appiccicosa. Questo approccio ti consente di visualizzare visivamente tutti gli elementi e avere un invito all'azione nelle vicinanze mentre i tuoi visitatori sono pronti attraverso i tuoi servizi, corsi o altri tipi di elenchi. Sei stato anche in grado di scaricare il file JSON gratuitamente! Se hai domande, 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.