Come aggiungere un'opzione di posta elettronica Divi al tuo post sul blog di Gutenberg

Il Divi Layout Block apre le porte a molti modi convenienti per portare le potenti funzionalità di progettazione di Divi Builder nell'editor di blocchi predefinito di WordPress (Gutenberg). Ciò ti consente di scrivere la maggior parte del contenuto del tuo post sul blog utilizzando la familiare interfaccia a blocchi di Gutenberg e quindi iniettare layout Divi dove è necessario design o funzionalità personalizzati. Un Divi Layout Block può includere tutto ciò che puoi costruire all'interno di Divi Builder, ma è anche ottimo per includere qualcosa di semplice ed essenziale come Email Optin.

In questo tutorial, tratteremo come aggiungere un bellissimo Divi Email Optin a un post sul blog di Gutenberg utilizzando il Divi Layout Block.

Iniziamo!

Sbirciata

Scarica il layout GRATUITAMENTE

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 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!

Importazione del blocco di layout JSON

Carica layout nella libreria Divi

Per importare il file JSON che hai potuto scaricare sopra, vai alla tua libreria Divi nel backend della dashboard di WordPress e fai clic su "Importa ed esporta".

Quindi, seleziona il file JSON all'interno della cartella di download e fai clic su "Importa layout Divi Builder".

Aggiungi un nuovo blocco Divi Block all'interno del post di Gutenberg

Una volta che il tuo layout è stato importato, puoi andare al tuo post di Gutenberg e aggiungere un nuovo blocco di layout Divi.

Importa file JSON da layout salvati

Quindi, fai clic su "Carica dalla libreria", vai a "I tuoi layout salvati" e seleziona il layout per importare il blocco di layout Divi CTA nel tuo post sul blog. Questo è tutto!

E questo è tutto!

Passiamo al tutorial, vero?

Aggiunta di un'opzione di posta elettronica Divi al tuo post sul blog di Gutenberg

Crea o modifica un post sul blog

Per iniziare, dobbiamo creare un nuovo post sul blog o modificarne uno esistente. Per questo esempio, aggiungiamo del contenuto fittizio al titolo e al corpo del post utilizzando alcuni blocchi di intestazione e paragrafo. Quindi aggiungi un'immagine in primo piano e scegli "Nessuna barra laterale" per il layout di pagina nelle impostazioni della pagina Divi.

Aggiungi blocco layout Divi in ​​linea

Una volta creata la maggior parte del post, tutto ciò che dobbiamo fare è aggiungere un nuovo Divi Layout Block ovunque desideriamo all'interno dell'area del contenuto del post. Potremmo aggiungerlo da qualche parte più vicino alla fine del post per catturare un lead qualificato che è ovviamente interessato al contenuto del post.

Per aggiungerlo, passa il mouse sull'area in cui desideri aggiungere l'opzione e-mail, quindi fai clic sull'icona blu più per aggiungere un nuovo blocco. Nell'elenco dei blocchi popup, seleziona il blocco Divi Layout.

Costruisci un nuovo layout all'interno del blocco di layout Divi

Una volta selezionato il Divi Layout Block, avremo la possibilità di "Crea nuovo layout" o "Carica dalla libreria". Dal momento che abbiamo bisogno di creare l'opzione email da zero, scegli l'opzione "Crea nuovo layout".

Progettazione della sezione

All'interno dell'editor dei blocchi di layout, possiamo iniziare a progettare l'opzione e-mail da includere nel nostro post. Tutto ciò che progettiamo in questo editor verrà visualizzato nell'area Divi Layout Block del post.

Per iniziare, apri le impostazioni della sezione della sezione predefinita già presente.

Gradiente di sfondo

Quindi aggiungi un gradiente di sfondo come segue:

• Colore sfondo sfumato sinistro: #ff9945
• Colore di sfondo sfumato a destra: #f86a4c

divisori

Quindi, vai alla scheda Design e a un divisore di sezione superiore e inferiore come segue:

• Stile divisore superiore: vedi screenshot
• Colore divisore superiore: #f86a4c
• Ripetizione orizzontale divisore superiore: 0.8x

• Stile divisore inferiore: vedi screenshot
• Colore divisore inferiore: #ff9945
• Ripetizione orizzontale divisore inferiore: 0.8x
• Flip divisore inferiore: orizzontale e verticale

Margine e bordo

Dopo che i divisori sono a posto, dai alla sezione un piccolo margine sopra e sotto e poi finiscila con un bordo e un'animazione come segue:

• Margine: 20px in alto, 20px in basso
• Angoli arrotondati: 30px
• Larghezza bordo: 2px
• Colore bordo: #ff9945
• Stile di animazione: Flip

Aggiungi colonna e imposta larghezza riga

Ora che la sezione è completa, aggiungi una struttura a una colonna alla riga.

Quindi aggiorna le impostazioni della riga come segue:

• Larghezza: 100%
• Larghezza massima: 100%

Costruisci l'opzione email

Aggiungi modulo di attivazione e-mail

Quindi, aggiungi un modulo di attivazione della posta elettronica alla riga.

Contenuto dell'opzione email

Per le impostazioni del contenuto di attivazione della posta elettronica, aggiorna quanto segue:

• Titolo: "Ricevi consigli GRATUITI ogni settimana!"
• Corpo: [mantieni il contenuto fittizio predefinito]
• Elenco Mailchimp: [aggiungi un elenco]
• Usa campo nome singolo: S
• Usa il colore di sfondo: NO

Progettazione di attivazione e-mail

Campi

Passa alla scheda di progettazione e progetta i campi di attivazione dell'email aggiornando quanto segue:

• Layout: corpo a destra, modulo a sinistra
• Colore di sfondo dei campi: #f86a4c
• Colore testo campi: #ffffff
• Carattere dei campi: IBM Plex Sans
• Dimensioni del testo dei campi: 18 px
• Spaziatura delle lettere dei campi: 2px
• Altezza della linea dei campi: 2em

Titolo

Aggiorna le impostazioni del testo del titolo come segue:

• Carattere del titolo: IBM Plex Sans Condensed
• Peso del carattere del titolo: semi grassetto
• Colore del testo del titolo: #ffffff
• Dimensione del testo del titolo: 60 px (desktop), 30 px (telefono)
• Altezza della riga del titolo: 1.2em (desktop), 1.6 (telefono)

Pulsante

Per il pulsante, aggiorna quanto segue:

• Usa stili personalizzati per il pulsante: S
• Colore del testo del pulsante: #ff9945
• Colore sfondo sfumato a sinistra del pulsante: #ff9945
• Colore sfondo sfumato a destra pulsante: #ffffff
• Direzione gradiente: 90 gradi
• Posizione finale: 34%
• Larghezza bordo pulsante: 0px
• Spaziatura delle lettere dei pulsanti: 2px
• Carattere pulsante: IBM Plex Sans
• Peso del carattere del pulsante: grassetto
• Stile carattere pulsante: TT
• Imbottitura pulsanti: 15px in alto, 15px in basso

Imbottitura

E per un ultimo tocco, aggiungi la seguente imbottitura:

• Imbottitura: 5% sinistra, 5% destra

Risultato finale

Una volta che abbiamo finito di progettare il layout all'interno dell'editor Divi Layout, assicurati di salvare il layout. Quindi salva il post in modo da poter vedere un'anteprima dell'email optin su una pagina live. Ecco come appare.

Ecco la leggera animazione dell'email optin mentre scorri verso il basso il post.

Pensieri finali

Aggiungere un'e-mail al tuo post di Gutenberg è diventato incredibilmente semplice con Divi Layout Block. Non solo puoi aggiungere un opt-in e-mail completamente funzionale (e facile da usare) in pochi secondi, ma puoi anche utilizzare Divi Builder per aggiungere design personalizzato, effetti al passaggio del mouse e animazioni. Tutto questo senza dover utilizzare un plugin!

Non vedo l'ora di sentirti nei commenti.

Saluti!