Le barre laterali adesive sono estremamente efficaci nell'attirare l'attenzione di Visitatori senza essere invadente o distratto. Il trucco sta nell'includere uno o due elementi nella barra laterale che “restano visibili” o fissati a lato del file contenuto del post quando l'utente scorre la pagina. Si tratta di un'alternativa rinfrescante al layout tradizionale della barra laterale, in quanto dà l'impressione di un layout moderno a tutta larghezza (senza barra laterale), con il vantaggio di presentare inviti all'azione importanti a lato della pagina quando necessario.

In questo tutorial, ti mostreremo come aggiungere inviti all'azione persistenti a un modello di post del blog utilizzando Divi Theme Builder. L'applicazione di questo layout è notevole. Funzionerà per quasi tutte le pagine o qualsiasi modello di post. Inoltre, non devi limitarti ai CTA; puoi scegliere di aggiungere il / i modulo / i Divi di tua scelta.

Cosa ti serve per iniziare

Per cominciare, devi per installare e attivare il tema Divi . Assicurati di avere l'ultima versione di Divi.

Sarà inoltre necessario almeno un messaggio creato con Divi Builder per i test per visualizzare il risultato desiderato.

Dopodiché, sei pronto per partire.

Panoramica

Ecco una rapida panoramica di ACT appiccicosi che sono stati aggiunti a un modello di post di blog in Divi.

Aggiungi divi barre laterali adesive

Come aggiungere inviti all'azione fissi nel modello di post del blog in Divi

Aggiunta del modello di generatore di temi

Il primo passo è importare il nostro modello predefinito sul nostro sito. Utilizzeremo il modello di pubblicazione Divi Theme Builder Pack n. 1.

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

Importa un layout divi

Crea il modello di post sul blog

Una volta importato il modello, siamo pronti per aggiungere i nostri nuovi CTA alla barra laterale fissa al layout del modello. A tale scopo, fare clic sull'icona di modifica per l'area del corpo personalizzata.

Aggiungi un corpo divi personalizzato

Aggiunto layout a doppia barra laterale per contenere CTA della barra laterale

Nell'editor del layout del modello, trova la riga contenente il modulo Pubblica. contenuto e sostituire il layout delle colonne con una struttura di colonne di un quinto per tre quinti per un quinto (1/5 3/5 1/5). Questo ci permetterà di mantenere la colonna centrata per il contenuto del post fornendo al contempo due sezioni su entrambi i lati per i nostri CTA appiccicosi.

Aggiungi un layout divi

Dopo aver modificato la struttura della colonna, trascinare il modulo di pubblicazione del contenuto nella colonna centrale.

Aggiorna i parametri della linea

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

  • Utilizzare una larghezza della grondaia personalizzata: SÌ
  • Larghezza della grondaia: 2
  • Larghezza: 100% (desktop), 90% (tablet)
  • Larghezza massima: 1500px
Aggiungi una sezione fix divi

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

Aggiorna le impostazioni della colonna 1

Quindi apri le impostazioni della colonna 1 e assegna a questa colonna una classe CSS personalizzata:

  • Classe CSS: sticky-cta
Personalizza la colonna 1 css divi

Aggiunta di una barra laterale CTA alla colonna di sinistra

Siamo ora pronti per il primo invito all'azione. Aggiungi una chiamata al modulo di azione nella colonna di sinistra.

Aggiungi il modulo di invito all'azione

Stilizzazione della barra laterale CTA

Aggiorna le impostazioni come segue:

Contenuto
  • Pulsante: «Clicca qui»
  • Body: "Il tuo contenuto va qui. Modifica o elimina questo testo online o nelle impostazioni del contenuto del modulo. "
  • URL del collegamento del pulsante: #
Personalizza il modulo di invito all'azione
Disegno del testo del corpo
  • Body Font: Montserrat
  • Peso carattere: semi-grassetto
  • Corpo del testo: allineamento a destra
  • Il colore del corpo del testo: # 444444
  • Dimensione del testo del corpo: 22px (desktop), 18px (tablet)
  • Altezza del corpo: 1.3em
Collant CTA
Pulsante
  • Dimensione del testo del pulsante: 14px
  • Colore testo pulsante: #ffffff
  • Colore di sfondo del pulsante: # 6148df
  • Larghezza del bordo del pulsante: 0px
  • Raggio del pulsante: 80px
  • Peso carattere: grassetto
  • Stile carattere pulsante: TT
  • Imbottitura dei pulsanti: 12px in alto, 12px in basso, 22px a sinistra, 22px a destra
Sezione modulo Divi
Larghezza, allineamento, imbottitura e cordoli
  • Larghezza: 100%
  • Larghezza massima: 320px
  • Allineamento del modulo: giusto
  • Imbottitura: 10px a sinistra, 10px a destra
  • Larghezza del bordo superiore: 10px
  • Colore del bordo superiore: #eeeeee
  • Larghezza del bordo inferiore: 10px
  • Colore del bordo inferiore: #eeeeee
Configurazione dell'invito all'azione Divi

Aggiunta della barra laterale CTA alla colonna di destra

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

  • Allineamento del corpo del testo: a sinistra
  • Allineamento del modulo: a sinistra
Aggiungi ct a a destra

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 barra laterale CTA in un punto inferiore della pagina.

Inizia aprendo i parametri della 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:

ufficio

margin-top: 50%

tavoletta di cioccolato Tablette

margin-top: 0%

Personalizza lo stile della colonna divi

Questo ci darà un punto di partenza diverso per il CTA appiccicoso sulla colonna di destra, che è il 50% della larghezza della riga. Sentiti libero di modificare questo valore come necessario per il tuo post sul blog.

Duplica un modulo cta divi

Aggiungi CSS personalizzato al modello con un modulo di codice

Per ottenere il nostro posizionamento "appiccicoso" per i nostri CTA della barra laterale, dobbiamo aggiungere CSS personalizzati. A tale scopo, creare un nuovo modulo di codice sotto il modulo di pubblicazione del contenuto (o in qualsiasi punto della pagina).

Inserire un modulo di tipo codice divi

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>

Codice parametro modulo Divi

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

Salva le impostazioni

Al termine, salva il layout del modello.

Salva i parametri del modulo cta divi

E quindi salva le impostazioni del generatore di temi

Salva il generatore di temi divi

Risultato finale

Per visualizzare il risultato finale, visitare un articolo di blog utilizzando il modello.

Collant CTA

Ed è così che i CTA appiccicosi rimarranno bloccati sullo scorrimento. Puoi vedere come funzionerebbe meglio per contenuti più lunghi.

Animazione cta divi

Considerazioni finali

Questi inviti all'azione laterali appiccicosi sono un'alternativa rinfrescante alla tradizionale barra laterale. Funzionano bene per il design minimalista perché sono meno invadenti e non fanno sembrare il post ingombrante. Inoltre, puoi posizionare l'invito all'azione più in basso nella pagina in modo che appaia gradualmente e aderisca allo scroll, rendendolo più visibile alle persone. 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 invito all'azione su un lato. Sembra avere molte applicazioni.