Come creare un'opzione di posta elettronica permanente in Divi che attiri l'attenzione
Pubblicato: 2020-09-30Le opzioni di posizione appiccicosa di Divi ti consentono di rendere appiccicoso qualsiasi elemento della tua pagina. Ciò consente di correggere gli elementi della pagina a determinati intervalli mentre l'utente scorre la pagina in modo che rimangano visibili più a lungo. E per voi blogger là fuori, ha molto senso aggiungere un opt-in e-mail appiccicoso al vostro modello di post per un sottile, ma efficace, per mantenere quel modulo importante in prima linea.
In questo tutorial, ti mostreremo come aggiungere un opt-in e-mail permanente al tuo modello di post sul blog Divi che attiri più attenzione e, si spera, attiri più lead. Ti mostreremo anche come aggiungere un effetto popup al passaggio del mouse anche all'attivazione dell'e-mail adesiva!
Iniziamo!
Sbirciata
Ecco una rapida occhiata al design che costruiremo in questo tutorial.
Scarica GRATUITAMENTE il modello di post per l'opzione di posta elettronica adesiva
Per mettere le mani sui disegni 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 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.
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!
Come caricare il modello di post con l'opzione Sticky Email sul tuo sito
Per caricare il modello, vai al Divi Theme Builder nel backend del tuo sito Web WordPress.
Quindi, nell'angolo in alto a destra, vedrai un'icona con due frecce. Fare clic sull'icona.
Passa alla scheda di importazione, carica il file JSON che sei stato in grado di scaricare in questo post e fai clic su "Importa modelli Divi Theme Builder".
Una volta caricato il file, noterai un nuovo modello con una nuova area del corpo che è stata assegnata a Tutti i post. Salva le modifiche di Divi Theme Builder non appena desideri che il modello venga attivato.
Passiamo al tutorial, vero?
Parte 1: importa il modello di post del blog predefinito
Per questo tutorial utilizzeremo il modello di post del blog per Divi's Business Consultant Layout Pack che puoi scaricare da questo post del blog.
Una volta scaricato il file zip, dovrai decomprimerlo e importare il file nel Divi Theme Builder.
Ecco come farlo...
- vai a Divi > Generatore di temi.
- Fare clic sull'icona della portabilità in alto a destra.
- Seleziona la scheda di importazione nel popup di portabilità.
- Scegli il file json dal file che hai scaricato.
- Fare clic sul pulsante Importa.
Parte 2: Aggiunta dell'opzione Sticky Email al modello
Una volta importato il file JSON, fai clic sull'icona di modifica per modificare il layout del modello di corpo personalizzato.
Nella parte inferiore del layout del modello di post, troverai la sezione con il modulo di attivazione dell'e-mail che utilizzeremo per l'attivazione dell'e-mail permanente.
Per questo esempio, vogliamo che la posizione permanente dell'e-mail opt-in in una sezione in modo che l'utente non veda l'e-mail opt-in fino a quando non scorrerà alla sezione con l'e-mail permanente opt-in. Tuttavia, poiché l'email opt-in si trova nella propria sezione, l'email opt-in non avrà spazio sufficiente per spostarsi. Pertanto, dobbiamo inserirlo nella sezione sopra che contiene la sezione dei commenti in modo che l'opzione di attivazione dell'e-mail passi sopra quella sezione prima di fermarsi nella sua posizione originale.
Aggiungi nuova riga nella sezione sopra
Per fare ciò, crea una nuova riga a una colonna direttamente sotto la riga contenente il modulo commenti.
Aggiungi stile riga
Quindi apri le impostazioni della nuova riga e aggiungi un colore di sfondo come segue:
- Colore di sfondo: #282828
Nella scheda Progettazione, aggiorna le seguenti dimensioni e spaziatura della riga:
- Larghezza: 100%
- Larghezza massima: 100%
- Margine: 15vw in alto
- Imbottitura: 0px in alto, 0px in basso
Sposta l'attivazione dell'email in una nuova riga
Una volta che lo stile della riga è a posto, sposta l'opzione di attivazione dell'email nella sezione inferiore nella nuova riga appena creata.
Elimina la sezione inferiore (non ne abbiamo più bisogno).
Aggiorna l'attivazione dell'email con la posizione fissa
Quindi apri le impostazioni per l'email opt-in ora all'interno della nuova riga e aggiorna le opzioni di posizione dello stick come segue:
- Posizione appiccicosa: attaccati al fondo
- Limite permanente superiore: sezione
Ciò farà sì che l'e-mail opt-in rimanga nella parte inferiore della finestra del browser durante lo scorrimento della sezione prima di fermarsi nella riga principale.
Aggiorna lo stile di attivazione dell'email
Nella scheda Design, aggiorna il layout dell'e-mail di attivazione come segue:
- Layout: corpo in alto, forma in basso
Quindi aggiorna il seguente stile:
- Dimensione del testo del titolo: 32px
- Larghezza massima: 600 px
- Allineamento del modulo: Centro
Quindi imposta lo stile di animazione su nessuno.
Risultato
A questo punto, possiamo verificare il risultato visualizzando un post in un'altra finestra del browser.
Aggiunta di uno stile di posizione appiccicosa
Quando l'email opt-in è in posizione permanente, possiamo aggiungere uno stile specifico al modulo che si applicherà solo allo stato permanente. Questo ci consente di aggiungere diverse combinazioni di colori per compensare lo sfondo bianco per farlo risaltare un po' di più.
Per aggiungere un colore di sfondo diverso per lo stato permanente, apri le impostazioni di attivazione dell'email e seleziona l'icona della miniatura (icona adesiva) accanto all'opzione di sfondo. Quindi fare clic sulla scheda permanente e aggiungere il seguente colore di sfondo:
- Colore di sfondo (appiccicoso): #282828
Continua lo stesso processo per aggiungere uno stile appiccicoso alle seguenti opzioni nella scheda Design:
- Colore del testo del titolo (appiccicoso): #ffffff
- Colore del corpo del testo (appiccicoso): #ffffff
- Larghezza massima (appiccicosa): 500 px
- Imbottitura (appiccicosa): 18px in alto, 30px in basso, 30px a sinistra, 30px a destra
Risultato
Ora diamo un'occhiata al risultato su un post in diretta.
Aggiungi l'effetto popup al passaggio del mouse all'attivazione dell'e-mail adesiva
Per aggiungere un effetto popup al passaggio del mouse sull'attivazione dell'e-mail permanente, apri le impostazioni di attivazione dell'e-mail e aggiorna la trasformazione della levetta come segue:
- Trasforma Trasla Asse Y (appiccicoso): 85%
Questo porterà l'email opt-in verso il basso (al di fuori del viewport) dell'85% della sua stessa altezza, esponendo quel tanto che basta dell'email optin in modo che l'utente possa passare il mouse sopra il titolo.
Quindi aggiungi uno stato al passaggio del mouse all'opzione di trasformazione in modo che la posizione di conversione della trasformazione torni alla sua posizione originale al passaggio del mouse:
- Trasforma Trasla Asse Y (hover): 0%
Risultato
Questo è il risultato finale.
Risultati finali
Ecco le tre versioni della nostra intestazione adesiva che abbiamo creato.
Pensieri finali
Per fortuna, Divi semplifica l'aggiunta di opt-in e-mail permanenti al tuo sito. Ciò libera più tempo per modificare il design del tuo elemento adesivo per modi più unici di visualizzare il tuo modulo. Si spera che questa tecnica ti serva bene nei prossimi progetti di blog.
Non vedo l'ora di sentirti nei commenti.
Saluti!