Divi Layout Block apre le porte a molti modi convenienti per integrare le potenti funzionalità di progettazione di Divi Builder con l'editor di blocchi predefinito di WordPress (Gutenberg). Ciò ti consente di scrivere la maggior parte dei file contenuto del tuo post sul blog utilizzando la familiare interfaccia a blocchi Gutenberg, quindi inserisci layout Divi dove sono necessari design o funzionalità personalizzati. Un blocco di layout Divi può includere tutto ciò che puoi creare in Divi Builder, ma è ottimo anche per includere qualcosa di semplice ed essenziale come un forma di abbonamento.
In questo tutorial vedremo come aggiungere un file forma abbonamento a un post sul blog di Gutenberg utilizzando il blocco di layout Divi.
Possibile risultato
Importazione del blocco layout JSON
Scarica il layout nella libreria Divi
Per importare il file JSON che sei riuscito a scaricare sopra, vai alla tua libreria Divi nel back-end della dashboard di WordPress e fai clic su "Importa ed esporta".
Quindi selezionare il file JSON nella cartella di download e fare clic su "Importa layout Divi Builder".
Aggiungi un nuovo blocco Divi all'interno del post di Gutenberg
Una volta importato il layout, è possibile accedere al messaggio Gutenberg e aggiungere un nuovo blocco di layout Divi.
Importa un file JSON da presentazioni salvate
Quindi fai clic su "Carica dalla libreria", vai su "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, ok?
Aggiungi un modulo e-mail Optin 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 contenuto fittizia il titolo e il corpo dell'articolo utilizzando alcuni blocchi di intestazione e paragrafo. Successivamente, aggiungi un'immagine in primo piano e scegli "Nessuna barra laterale" per il layout nelle impostazioni della pagina Divi.
Aggiungi un blocco layout Divi online
Una volta creata la maggior parte del post, tutto ciò che dobbiamo fare è aggiungere un nuovo blocco di layout Divi ovunque vogliamo nell'area del post. contenuto di pubblicazione. Potremmo aggiungerlo più vicino alla fine del messaggio per catturare un lead qualificato che sia ovviamente interessato al contenuto del messaggio.
Per aggiungerlo, passa il mouse sull'area in cui desideri aggiungere l'opzione email, quindi fai clic sull'icona blu più per aggiungere un nuovo blocco. Nell'elenco dei blocchi contestuali, seleziona il blocco Layout Divi.
Crea un nuovo layout nel blocco layout Divi
Una volta selezionato il blocco di layout Divi, avremo la possibilità di "Crea un nuovo layout" o "Carica dalla libreria". Poiché abbiamo bisogno di creare l'opzione email da zero, scegli l'opzione "Crea nuovo layout".
Disegno della sezione
Nell'editor di layout, possiamo iniziare a progettare l'email che sceglie di essere inclusa nel nostro post. Tutto ciò che progettiamo in questo editor verrà visualizzato nell'area Blocco layout Divi del post.
Per iniziare, apri già le impostazioni della sezione della sezione predefinita.
Per il layout, sceglieremo un layout a due colonne.
Quindi aggiungeremo il modulo Email Optin a una delle colonne, lascio a te la scelta della colonna.
Successivamente, personalizzeremo lo sfondo della sezione. Puoi sempre modificare i valori per rendere unico il tuo design. Tuttavia, abbiamo utilizzato i seguenti valori:
- Sfondo: # ff6100
- Separatore superiore e inferiore: il tredicesimo conteggio dall'alto.
- Larghezza elemento divisore: 40 px (in alto e in basso).
Ora aggiungeremo il testo alla colonna opposta. Qui utilizzerai il testo incentivante per portare il file visitatore sottoscrivere.
Dovrai quindi apportare le diverse modifiche:
- Testo del carattere: Montserrat
- Colore carattere: #FFF
- Carattere testo Sottotitolo H2: Montserrat
- Dimensione sottotitoli testo H2: 2.5em
- Testo Sottotitolo H2 Colore: #FFF
Ricordati di configurare il sistema di posta elettronica che utilizzerai. Dovresti sapere che Gutenberg è compatibile con MailChimp.
Considerazioni finali
Aggiungere un'e-mail di consenso al tuo messaggio Gutenberg è diventato incredibilmente facile con il blocco del layout Divi. Non solo puoi aggiungere un'opzione di posta elettronica 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 animazione. Tutto questo senza dover utilizzare un plugin!