Le barre laterali adesive sono estremamente efficaci nell'attirare l'attenzione di Visitatori senza essere invadente o distrarre. Il trucco consiste nell'includere uno o due elementi della barra laterale che "rimangono visibili" o fissi a lato del contenuto del post mentre l'utente scorre la pagina. Questa è un'alternativa rinfrescante al tradizionale layout della barra laterale, in quanto dà l'impressione di un moderno layout a tutta larghezza (senza barra laterale), con l'ulteriore vantaggio di presentare inviti all'azione importanti sul lato della pagina quando necessario.
In questo tutorial, ti mostreremo come aggiungere inviti all'azione permanenti a un modello di post del blog utilizzando Divi Costruttore di temi. L'applicazione di questo layout è notevole. Questo funzionerà per quasi tutte le pagine o i modelli di post. Inoltre, non devi limitarti alle CTA; puoi scegliere di aggiungere il/i modulo/i Divi de votre choix.
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.
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.
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.
Aggiunto layout a doppia barra laterale per contenere CTA della barra laterale
Nell'editor del layout del modello, trova la riga contenente il modulo di pubblicazione dei contenuti e modifica il layout della colonna in un quinto per tre quinti per un quinto della struttura della colonna (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 appiccicosi.
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
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
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.
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: #
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
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
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
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
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
margin-top: 0%
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.
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).
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 è 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.
E quindi salva le impostazioni del generatore di temi
Risultato finale
Per visualizzare il risultato finale, visitare un articolo di blog utilizzando il modello.
Ed è così che i CTA appiccicosi rimarranno bloccati sullo scorrimento. Puoi vedere come funzionerebbe meglio per contenuti più lunghi.
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.
