Vai al contenuto principale

Come aggiungere CTA appiccicosi a un modello di articolo con Divi Builder

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 701.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Le barre laterali adesive sono estremamente efficaci per attirare l'attenzione dei visitatori senza essere prepotenti o distratti. Il trucco sta nell'includere uno o due elementi nella barra laterale che "restano visibili" o fissi al lato del contenuto del post mentre l'utente scorre la pagina. Questa è un'alternativa rinfrescante al layout tradizionale della barra laterale, poiché dà l'impressione di un layout moderno a larghezza intera (senza barra laterale), con il vantaggio di presentare inviti all'azione. importante sul 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.

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> Generatore di temi. Fare clic sull'icona della portabilità in alto a destra nella pagina. Nella modalità di portabilità, seleziona la scheda di importazione e scegli il file divi-theme-builder-pack-1-post-template.json nella cartella. Se nel tuo sito sono attualmente installati modelli, 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 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.

Aggiungi un layout divi

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

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

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

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:

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

  • Classe CSS: sticky-cta

Quindi aggiungi il seguente CSS personalizzato all'elemento principale:

ufficio

margin-top: 50%

tavoletta

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.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

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.

Considerazioni finali

Questi appiccicosi inviti all'azione della barra laterale sono un'alternativa rinfrescante alla barra laterale tradizionale. Si adattano bene al design minimalista in quanto sono meno invadenti e non fanno sembrare il palo ingombra. Inoltre, puoi posizionare il CTA più in basso nella pagina in modo che appaia gradualmente e rimanga attaccato alla pergamena, rendendolo più visibile ai visitatori. E non dimenticare. Puoi sostituire il CTA con qualsiasi modulo Divi o combinazione di moduli per creare qualsiasi cosa tu voglia. Puoi anche scegliere di mantenere un solo CTA su un lato. Sembra avere molte applicazioni.

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
2 azioni
quota2
Tweet
Enregistrer