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

Risultato finale divi

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".

Import Divi

Quindi selezionare il file JSON nella cartella di download e fare clic su "Importa layout Divi Builder".

Importa json divi 1

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.

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

Iniettare un modulo su gutenberg
Abbonamento e-mail di layout Divi

E questo è tutto!

Iniettare un modulo divi form

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.

Design dell'oggetto

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.

Aggiungi blocco di progettazione 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".

Progettare un nuovo design divi

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.

Scegli layout divi

Quindi aggiungeremo il modulo Email Optin a una delle colonne, lascio a te la scelta della colonna.

Optin divi modulo email

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.
Separatore modulo Divi
  • 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.

Modulo di testo Divi

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
Personalizzazione del titolo Divi

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!