Come aggiungere un popup attivato dallo scorrimento ai post del tuo blog in Divi

L'aggiunta di un popup a scorrimento ai post del tuo blog sembra una cosa davvero intelligente da fare. Potresti averli visti prima durante la lettura di altri blog. Mentre l'utente scorre fino a un certo punto del post (di solito la fine), appare improvvisamente una casella contenente un invito all'azione. L'intero scopo di un popup attivato dallo scorrimento è presentare un invito all'azione mirato ai visitatori nel momento esatto in cui desideri che lo vedano sulla pagina. In breve, è un ottimo strumento per aumentare le conversioni o acquisire lead qualificati. Per questo motivo, molti plug-in di potenziamento delle conversioni (come il nostro Bloom o come Optin Monster) ti consentono di fare esattamente la stessa cosa.

In questo tutorial, ti mostreremo come aggiungere da zero un popup attivato a scorrimento ai post del tuo blog in Divi, senza un plug-in. Per fare ciò, utilizzeremo Divi Theme Builder per progettare un popup che presenta un post correlato per categoria e anche un popup che include un'opzione di posta elettronica. L'attivazione dello scorrimento verrà eseguita utilizzando un piccolo frammento di jQuery.

Iniziamo!

Sbirciata

Ecco una rapida occhiata ai popup attivati ​​dallo scorrimento che creeremo.

Creeremo su popup per rivelare un post correlato (per categoria) come mostrato di seguito.

E ti mostreremo anche come aggiungere un'email optin al popup così come visto qui.

Scarica GRATUITAMENTE il modello Divi Post Popup con scorrimento attivato

Per mettere le mani sul modello di post di questo tutorial, dovrai 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.

Dovrai scaricare il quarto pacchetto di creazione di temi poiché utilizzeremo il modello di post predefinito di quel pacchetto per questo tutorial.

Avrai anche bisogno di almeno alcuni post del blog creati a scopo di test affinché il modello di post mostri i risultati.

Dopodiché, sei pronto per partire.

Creazione di un pop-up attivato dallo scorrimento alla fine dei post del blog Divi

Importazione del modello di post del blog dal quarto pacchetto di creazione di temi

Dalla dashboard di WordPress, vai a Divi > Generatore di temi. All'interno del generatore di temi, seleziona l'icona della portabilità in alto a destra nella pagina. Nel popup della portabilità, seleziona la scheda di importazione, scegli il file theme-builder-pack-4-post-template.json e fai clic sul pulsante di importazione. (Questo file di importazione sarà all'interno della cartella Fourth Theme Builder Pack)

Puoi anche selezionare l'opzione per importare l'intestazione e il piè di pagina globali come layout statici.

Dopo che il modello è stato importato, fare clic sull'icona per modificare l'area del corpo personalizzata.

Questo ti porterà all'editor di layout del modello del corpo in cui aggiungeremo i popup attivati ​​dallo scorrimento.

Progettare il popup attivato dallo scorrimento con un post correlato per categoria

Il popup sarà contenuto da una riga Divi. Pertanto, una volta implementata la funzionalità popup, puoi riempire quella riga con qualsiasi modulo per creare qualsiasi contenuto tu voglia. Per questo primo esempio, creeremo un popup caratterizzato da un post correlato per categoria. In questo modo, quando un visitatore scorre fino alla fine del post, riceverà un messaggio correlato suggerito in un popup.

Ecco come farlo.

Aggiungi riga a una colonna

Per prima cosa aggiungi una riga di una colonna appena sotto la riga contenente il modulo del contenuto del post nel layout del modello di post.

Impostazioni riga

Prima di aggiungere un modulo, aggiorna le impostazioni della riga come segue:

• Colore di sfondo: #ffffff
• Larghezza grondaia: 1
• Larghezza: 300 px (desktop), 200 px (telefono)
• Imbottitura: 20px in alto, 0px in basso
• Box Shadow: vedi screenshot

Modulo Aggiungi testo

Dopo aver personalizzato le impostazioni della riga, aggiungi un modulo di testo alla riga. Questa sarà l'area del titolo del nostro post-popup correlato.

Contenuto

Aggiorna il contenuto del corpo con il testo "Post correlato".

Design

Quindi aggiorna le impostazioni di progettazione come segue:

• Carattere del testo: Heebo
• Stile del carattere del testo: TT
• Colore del testo del testo: #f94857
• Allineamento del testo: centro

Aggiungi modulo blog

Sotto il modulo di testo, aggiungi un modulo blog.

Contenuto

Poiché vogliamo presentare solo un post correlato, limiteremo il conteggio dei post a uno e includeremo la "categoria corrente" in modo che il post visualizzato nel popup condivida la stessa categoria del post effettivo visualizzato sul modello.

Aggiorna quanto segue:

• Conteggio post: 1
• Categorie incluse: Categoria corrente

Elementi

Sotto il gruppo di opzioni degli elementi, assicurati di selezionare per mostrare solo l'immagine in primo piano. Nascondi tutto il resto.

Design

Nella scheda Progettazione, aggiorna quanto segue:

• Carattere del titolo: Heebo
• Peso del carattere del titolo: Ultra grassetto
• Dimensione del testo del titolo: 16px
• Altezza della riga del titolo: 1.4em
• Imbottitura: 5% superiore, 5% sinistra, 5% destra

Impostazioni di riga avanzate

Classe CSS, CSS personalizzato e Indice Z

Nella scheda avanzata, dobbiamo assegnare alla nostra riga una classe CSS, un po' di CSS personalizzato e aggiornare l'indice z in modo che il popup rimanga sopra l'altro contenuto della pagina.

Questo passaggio nasconderà la riga alla vista quando si utilizza il visual builder sul front-end. Quindi potrebbe essere meglio distribuire la vista wireframe prima di aggiornare queste opzioni.

Una volta in modalità di visualizzazione wireframe, apri il backup delle impostazioni di riga e aggiungi la seguente classe CSS:

• Classe CSS: post-riga

Quindi aggiungi il seguente CSS personalizzato all'elemento principale:

position: fixed;
bottom: 0%;
right: -300px;

E aggiorna l'indice Z:

• Indice Z: 999

Aggiungi divisori come punti trigger di scorrimento

A questo punto il nostro popup è pronto. Ora dobbiamo decidere dove aggiungere i nostri punti di attivazione dello scorrimento sul modello di post, in modo che una volta che l'utente scorrerà su questi punti, il popup verrà mostrato o nascosto. I punti di attivazione dello scorrimento saranno determinati da un elemento con una classe CSS. Poiché vogliamo che il punto di attivazione dello scorrimento sia in fondo al post, possiamo usare un divisore con una classe CSS come elemento del punto di attivazione dello scorrimento.

Aggiungi punto di attivazione scorrimento #1

Per aggiungere il nostro primo punto di attivazione dello scorrimento, aggiungiamo un modulo divisore direttamente sotto il modulo del contenuto del post.

Quindi aggiungi la seguente classe CSS:

• Classe CSS: post-waypoint

È stato facile.

Aggiungi punto di attivazione scorrimento #2

Ora per aggiungere il secondo trigger point (quello che nasconderà il popup più in basso nella pagina), copia il modulo divisore appena creato.

Quindi incollalo in una posizione più in basso nel modello di post in cui desideri che il popup venga chiuso (o nascosto). Per questo esempio, lo aggiungo appena sotto il modulo blog dei post correlati e proprio sopra la sezione dei commenti del modello di post.

Aggiungi codice personalizzato con modulo codice

Tutto ciò che resta da fare affinché questo popup attivato dallo scorrimento funzioni è un piccolo codice.

Vai avanti e aggiungi un modulo di codice al modello di post.

Quindi incolla il seguente codice nella casella del codice:

<style>
  .post-row {
    transition: all .4s;
  }
  .post-row.show-post {
    right: 0px;
  }
</style>
<script>
  jQuery(document).ready(function($) {
    $('.post-waypoint').waypoint(function() {
        $('.post-row').toggleClass('show-post');
    }, {offset: '97%'});
  });
</script>

Risultato

Per vedere il risultato, visita uno dei post del tuo blog e scorri verso il basso la pagina. Dovresti vedere il popup del post correlato quando raggiungi la fine del contenuto del post. Continua a scorrere per vederlo nascosto subito dopo la sezione dei post correlati del post.

Aggiunta di un'opzione e-mail al pop-up attivato dallo scorrimento

Il popup del post correlato è interessante, ma forse vorresti un'email che optasse per il popup. È facile da fare. In effetti, possiamo persino utilizzare l'opzione di posta elettronica già progettata nel layout del piè di pagina predefinito su questo modello.

Salva attivazione email piè di pagina nella libreria Divi

Salva il tuo layout ed esci dal generatore di temi. Quindi fare clic per modificare il layout del modello di piè di pagina personalizzato.

Trova il modulo di attivazione della posta elettronica e salvalo nella libreria divi.

Aggiungi l'opzione email salvata alla riga popup

Ora torna al layout del modello del corpo personalizzato e aggiungi l'e-mail salvata nella stessa riga che stai utilizzando come popup. Ricorda, qualsiasi cosa all'interno di quella riga verrà mostrata come contenuto popup.

Dal momento che non stai utilizzando il modulo testo e blog, puoi disabilitarne la visualizzazione sul front-end.

Impostazioni di attivazione della posta elettronica

Una volta che l'opzione e-mail è attiva e gli altri moduli sono disabilitati, aggiorna le impostazioni di attivazione e-mail come segue:

• Titolo: "Mi è piaciuto questo articolo?"
• Corpo: "Iscriviti alla nostra newsletter!"

Quindi aggiungi la seguente imbottitura:

• Imbottitura: 5% in basso, 20 px a destra

Risultato

Ora controlla il risultato su un post in diretta.

Pensieri finali

I popup attivati ​​dallo scorrimento potrebbero sicuramente essere una risorsa preziosa per il tuo blog. Forniscono un modo discreto per capitalizzare su lead qualificati. Usa un popup di post correlato per tenerli impegnati sul tuo sito o usa un'e-mail opt-in per aiutare a far crescere la tua lista. E con Divi, puoi aggiungere qualsiasi altro contenuto che ti viene in mente. E puoi decidere esattamente quando vuoi che il visitatore veda quei popup, il che è piuttosto potente. Spero che lo trovi utile per il tuo blog o per il prossimo progetto.

Non vedo l'ora di sentirti nei commenti qui sotto.

Saluti!