Le Divi Layout Block ouvre la porte à de nombreuses façons pratiques d’intégrer les puissantes fonctionnalités de conception de Divi Builder à l’éditeur de blocs par défaut de WordPress (Gutenberg). Cela vous permet d’écrire la majeure partie du contenu de votre article de blog à l’aide de l’interface de bloc Gutenberg familière, puis d’injecter des mises en page Divi là où une conception ou des fonctionnalités personnalisées sont nécessaires. Un bloc de mise en page Divi peut inclure tout ce que vous pouvez créer dans Divi Builder, mais il est également idéal pour inclure quelque chose d’aussi simple et essentiel qu’un formulaire d’abonnement.

Dans ce tutoriel, nous verrons comment ajouter un formulaire d’abonnementà un article de blog Gutenberg en utilisant le bloc de mise en page Divi.

Résultat Possible

Résultat final divi

Importation du bloc de mise en page JSON

Télécharger la mise en page dans la bibliothèque Divi

Pour importer le fichier JSON que vous avez pu télécharger ci-dessus, accédez à votre bibliothèque Divi dans le backend de votre tableau de bord WordPress et cliquez sur ‘Importer et exporter’.

Importation divi

Ensuite, sélectionnez le fichier JSON dans votre dossier de téléchargement et cliquez sur «Importer les mises en page Divi Builder».

Importer json divi 1

Ajouter un nouveau bloc Divi Block à l’intérieur du poteau Gutenberg

Une fois que votre mise en page a été importée, vous pouvez accéder à votre message Gutenberg et ajouter un nouveau bloc de mise en page Divi.

Divi conception

Importer un fichier JSON à partir de présentations enregistrées

Ensuite, cliquez sur «Charger depuis la bibliothèque», accédez à «Vos dispositions enregistrées» et sélectionnez la disposition pour importer le bloc de disposition Divi CTA dans votre article de blog. C’est ça !

Injecter un formulaire sur gutenberg
Abonnement email mise en page divi

Et c’est tout!

Injecter un module formulaire divi

Passons au tutoriel, d’accord?

Ajouter un module e-mail Optin à votre article de blog Gutenberg

Créer ou modifier un article de blog

Pour commencer, nous devons créer un nouveau billet de blog ou en modifier un existant. Pour cet exemple, ajoutons du contenu factice au titre et au corps de l’article en utilisant quelques blocs d’en-tête et de paragraphe. Ensuite, ajoutez une image sélectionnée et choisissez «Pas de barre latérale» pour la mise en page sous les paramètres de la page Divi.

Conception article

Ajouter un bloc de disposition Divi en ligne

Une fois que vous avez créé la majeure partie de la publication, tout ce que nous devons faire est d’ajouter un nouveau bloc de mise en page Divi où nous voulons dans la zone de contenu de la publication. Nous pourrions l’ajouter quelque part plus près de la fin du message pour capturer un prospect qualifié qui est évidemment intéressé par le contenu du message.

Pour l’ajouter, passez la souris sur la zone dans laquelle vous souhaitez ajouter l’e-mail option, puis cliquez sur l’icône bleue plus pour ajouter un nouveau bloc. Dans la liste des blocs contextuels, sélectionnez le bloc Disposition Divi.

Ajouter bloc de conception divi

Créer une nouvelle disposition dans le bloc de disposition Divi

Une fois le bloc de mise en page Divi sélectionné, nous aurons la possibilité de «Créer une nouvelle mise en page» ou «Charger à partir de la bibliothèque». Étant donné que nous devons créer l’option de messagerie à partir de zéro, choisissez l’optin «Créer une nouvelle mise en page».

Concevoir nouvelle conception divi

Conception de la section

Dans l’éditeur de mise en page, nous pouvons commencer à concevoir l’optin de messagerie électronique à inclure dans notre publication. Tout ce que nous concevons dans cet éditeur sera affiché dans la zone Divi Layout Block de la publication.

Pour commencer, ouvrez les paramètres de section de la section par défaut déjà là.

Pour la mise en page, nous allons choisir une mise ne page à deux colonnes.

Choisir mise en page divi

Ensuite, nous allons ajouter le module Email Optin à l’une des colonnes, je vous laisse le choix de la colonne.

Module email optin divi

Ensuite, nous allons personnaliser l’arrière plan de la section. Vous pouvez toujours changer les valeurs pour rendre votre conception unique. Cependant, nous avons utilisé les valeurs suivantes :

  • Arrière-plan : #ff6100
  • Séparateur Haut & Bas : le 13e en comptant depuis le haut.
Separateur divi module
  • Largeur d’élément diviseur : 40px (haut et bas).

Nous allons maintenant ajouter sur la colonne opposée du texte. Ici, vous utiliserez un texte incitatif pour amener le visiteur à s’abonner.

Module texte divi

Il vous faudra ensuite effectuer les différentes modifications :

  • Texte Police : Montserrat
  • Couleur Police : #FFF
  • Texte Police Sous-Titre H2: Montserrat
  • Texte Sous-Titre H2 Taille : 2.5em
  • Texte Sous-Titre H2 Couleur : #FFF
Personnalisatin titre divi

N’oubliez pas de configurer le système de messagerie que vous utiliserez. Vous devez savoir que Gutenberg est compatible avec MailChimp.

Dernières pensées

L’ajout d’un e-mail optin à votre message Gutenberg est devenu incroyablement simple avec le bloc de mise en page Divi. Non seulement vous pouvez ajouter une option de courriel entièrement fonctionnelle (et facile à utiliser) en quelques secondes, mais vous pouvez également utiliser Divi Builder pour ajouter une conception personnalisée, des effets de survol et une animation. Tout cela sans avoir à utiliser de plugin!