Come aggiungere CTA Sticky Sidebar a un modello di post di blog in Divi

I CTA Sticky Sidebar sono estremamente efficaci nel catturare l'attenzione dei visitatori senza essere invadenti o distrarre. Il trucco è includere uno o due elementi nella barra laterale che "si attaccano" o rimangono fissi sul lato del contenuto del post mentre l'utente scorre la pagina. Questa è un'alternativa rinfrescante a un layout della barra laterale tradizionale perché fornisce la sensazione di un moderno layout a larghezza intera (senza barra laterale) con il vantaggio di mostrare importanti CTA sul lato della pagina quando necessario.

In questo tutorial, ti mostreremo come aggiungere CTA permanenti alla barra laterale a un modello di post di blog utilizzando Divi Theme Builder. L'applicazione di questo layout è di vasta portata. Funzionerà per quasi tutte le pagine o modelli di post. Inoltre, non devi limitarti ai CTA; puoi scegliere di aggiungere qualsiasi modulo Divi che ti piace.

Iniziamo!

Scarica GRATUITAMENTE il modello CTA Sticky Sidebar

Per mettere le mani sul modello di post cta della barra laterale adesiva di questo tutorial, 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 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!

Per importare il layout nella tua pagina, estrai semplicemente il file zip e aggiungi uno dei file json nel Divi Theme Builder utilizzando l'opzione Theme Builder Portability.

Andiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai installare e attivare il tema Divi. Assicurati di avere l'ultima versione di Divi.

Avrai anche bisogno di almeno un post creato con Divi Builder a scopo di test per mostrare il risultato previsto.

Dopodiché, sei pronto per partire.

Sbirciata

Ecco una rapida occhiata agli inviti all'azione della barra laterale appiccicosi che sono stati aggiunti a un modello di post di blog in Divi.

Come aggiungere CTA Sticky Sidebar al tuo modello di post sul blog in Divi

Aggiunta del modello per la creazione di temi

Il primo passaggio include l'importazione del nostro modello predefinito nel nostro sito. Utilizzeremo il modello di post dal Divi Theme Builder Pack #1.

Per iniziare, vai su Divi > Generatore di temi. Fare clic sull'icona della portabilità in alto a destra della pagina. Nella modalità di portabilità, seleziona la scheda di importazione e scegli il file divi-theme-builder-pack-1-post-template.json dalla cartella. Nel caso tu abbia dei modelli attualmente installati sul tuo sito, assicurati di deselezionare tutte le opzioni che potrebbero sovrascrivere i tuoi modelli attuali. Quindi fare clic sul pulsante di importazione.

Costruire il modello di post sul blog

Una volta che il modello è stato importato, siamo pronti per iniziare ad aggiungere i nostri nuovi CTA permanenti della barra laterale al layout del modello. Per fare ciò, fare clic sull'icona di modifica dell'area del corpo personalizzata.

Aggiunta di un layout della barra laterale doppia per contenere gli inviti all'azione della barra laterale

Nell'editor del layout del modello, trova la riga che contiene il modulo del contenuto del post e modifica il layout della colonna in una struttura di colonne un quinto tre quinti un quinto (1/5 3/5 1/5). Ciò ci consentirà di mantenere la colonna centrata per il contenuto del post fornendo due sezioni su entrambi i lati per i nostri CTA permanenti della barra laterale.

Dopo aver modificato la struttura della colonna, trascina il modulo del contenuto del post nella colonna centrale.

Aggiornamento delle impostazioni della riga

Apri le impostazioni della riga e aggiorna le seguenti opzioni di progettazione:

• Usa larghezza grondaia personalizzata: S
• Larghezza grondaia: 2
• Larghezza: 100% (desktop), 90% (tablet)
• Larghezza massima: 1500 px

Questo ci darà lo spazio di cui abbiamo bisogno per la nostra configurazione della doppia barra laterale.

Aggiornamento delle impostazioni della colonna 1

Quindi, apri le impostazioni per la colonna 1 e assegna alla colonna una classe CSS personalizzata:

• Classe CSS: sticky-cta

Aggiunta di un invito all'azione della barra laterale alla colonna di sinistra

Ora siamo pronti per la prima call to action. Aggiungi un modulo di invito all'azione nella colonna all'estrema sinistra.

Disegnare l'invito all'azione della barra laterale

Aggiorna le impostazioni come segue:

Contenuto

• Pulsante: "Clicca qui"
• Corpo: “Il tuo contenuto va qui. Modifica o rimuovi questo testo in linea o nelle impostazioni del contenuto del modulo.
• URL collegamento pulsante: #

Design del testo del corpo

• Carattere del corpo: Montserrat
• Peso del carattere del corpo: semi grassetto
• Allineamento del corpo del testo: a destra
• Colore del corpo del testo: #444444
• Dimensioni del corpo del testo: 22 px (desktop), 18 px (tablet)
• Altezza della linea del corpo: 1,3 em

Pulsante

• Dimensione del testo del pulsante: 14px
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #6148df
• Larghezza bordo pulsante: 0px
• Raggio del bordo del pulsante: 80 px
• Peso del carattere del pulsante: grassetto
• Stile carattere pulsante: TT
• Imbottitura pulsanti: 12 pixel in alto, 12 pixel in basso, 22 pixel a sinistra, 22 pixel a destra

Larghezza, Allineamento, Imbottitura e Bordi

• Larghezza: 100%
• Larghezza massima: 320 px
• Allineamento del modulo: a destra
• Imbottitura: 10px a sinistra, 10px a destra
• Larghezza bordo superiore: 10 px
• Colore bordo superiore: #eeeeee
• Larghezza bordo inferiore: 10 px
• Colore bordo inferiore: #eeeeee

Aggiunta dell'invito all'azione della barra laterale alla colonna di destra

Per creare il CTA per la colonna di destra, copia quello che abbiamo appena creato e incollalo nella colonna all'estrema destra. Quindi aggiorna le impostazioni per il duplicato come segue:

• Allineamento del corpo del testo: a sinistra
• Allineamento del modulo: a sinistra

Aggiorna le impostazioni della colonna 3

Per questo CTA nella colonna di destra, aggiungeremo un margine superiore alla colonna per stabilire una posizione iniziale della CTA della barra laterale in un punto più in basso nella pagina.

Innanzitutto, apri le impostazioni per la colonna 3 e aggiungi la stessa classe CSS che abbiamo aggiunto alla colonna 1:

• Classe CSS: sticky-cta

Quindi aggiungi il seguente CSS personalizzato all'elemento principale:

Desktop

margin-top: 50%

Tavoletta

margin-top: 0%

Questo ci darà un punto di partenza diverso per il CTA appiccicoso sulla colonna di destra che è uguale al 50% della larghezza della riga. Sentiti libero di regolare questo valore secondo necessità per il tuo post sul blog.

Aggiunta del CSS personalizzato al modello con un modulo di codice

Per ottenere il nostro posizionamento "appiccicoso" per i nostri CTA nella barra laterale, dobbiamo aggiungere alcuni CSS personalizzati. Per fare ciò, crea un nuovo modulo di codice sotto il modulo del contenuto del post (o in qualsiasi punto della pagina).

Quindi incolla il seguente CSS nella casella del codice:

<style> 
@media only screen and (min-width: 980px) {
  #page-container { 
    overflow-y:visible !important; } 
  .sticky-cta {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: calc(50vh - 130px) !important;
  }
  }
</style>

L'offset superiore in questo codice è un calcolo che posiziona il CTA verticalmente centrato sulla pagina durante lo scorrimento. Il 50vh è praticamente la metà dell'altezza della finestra del browser e il 130 px è circa la metà dell'altezza del CTA. Se hai un CTA con un'altezza maggiore/minore, dovrai regolare i 130 px verso l'alto o verso il basso.

Salva le impostazioni

Una volta terminato, salva il layout del modello.

E poi salva le impostazioni del generatore di temi

Risultato finale

Per visualizzare il risultato finale, visita un post sul blog che utilizza il modello.

Ed è così che i CTA appiccicosi della barra laterale si attaccheranno allo scorrimento. Puoi vedere come funzionerebbe meglio per contenuti di post più lunghi.

Ed eccolo sul display mobile.

Pensieri finali

Questi CTA appiccicosi della barra laterale sono un'alternativa rinfrescante alla barra laterale tradizionale. Si adattano bene al design minimalista perché sono meno invadenti e non danno al palo un aspetto disordinato. Inoltre, puoi posizionare il CTA più in basso nella pagina in modo che appaia gradualmente e si attacchi allo scorrimento, facendolo risaltare un po' di più ai visitatori. E non dimenticare. Puoi sostituire il CTA con qualsiasi modulo Divi o combinazione di moduli per creare praticamente tutto ciò che desideri. Puoi anche scegliere di mantenere un solo CTA su un lato. Sembra avere molte applicazioni.

Spero che questo aiuterà a migliorare il modo in cui visualizzi i CTA sui tuoi modelli di post in futuro.

Per ulteriore ispirazione, dai un'occhiata ai nostri post simili sugli elementi appiccicosi.

Non vedo l'ora di sentirti nei commenti.

Saluti!