Comment ajouter une option de messagerie Divi à votre article de blog Gutenberg

Le bloc de mise en page Divi ouvre la porte à de nombreuses façons pratiques d'apporter 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 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'une option d'e-mail.

Dans ce didacticiel, nous verrons comment ajouter une belle option de messagerie Divi à un article de blog Gutenberg à l'aide du bloc de mise en page Divi.

Commençons!

Aperçu

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

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

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

Ajouter un nouveau bloc de blocs Divi à l'intérieur de la publication Gutenberg

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

Importer un fichier JSON à partir de mises en page enregistrées

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

Et c'est tout!

Passons au tutoriel, voulez-vous ?

Ajouter une option de messagerie Divi à votre article de blog Gutenberg

Créer ou modifier un article de blog

Pour commencer, nous devons créer un nouvel article de blog ou en modifier un existant. Pour cet exemple, ajoutons du contenu fictif au titre et au corps du message en utilisant quelques blocs de titre et de paragraphe. Ajoutez ensuite une image en vedette et choisissez « Pas de barre latérale » pour la mise en page sous les paramètres de la page Divi.

Ajouter un bloc de mise en page Divi en ligne

Une fois que vous avez créé la majeure partie de la publication, tout ce que nous avons à 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, survolez la zone dans laquelle vous souhaitez ajouter l'option d'e-mail, puis cliquez sur l'icône bleue plus pour ajouter un nouveau bloc. Dans la liste des blocs contextuels, sélectionnez le bloc Divi Layout.

Construire une nouvelle mise en page dans le bloc de mise en page 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 de « Charger à partir de la bibliothèque ». Étant donné que nous devons créer l'option de messagerie à partir de zéro, choisissez l'option « Créer une nouvelle mise en page ».

Conception des sections

Dans l'éditeur de blocs de mise en page, nous pouvons commencer à concevoir l'option d'e-mail à 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à.

Dégradé de fond

Ajoutez ensuite un dégradé d'arrière-plan comme suit :

• Couleur de fond du dégradé de gauche : #ff9945
• Couleur d'arrière-plan à droite : #f86a4c

Diviseurs

Ensuite, accédez à l'onglet conception et à un séparateur de section supérieur et inférieur comme suit :

• Style de séparateur supérieur : voir capture d'écran
• Couleur du séparateur supérieur : #f86a4c
• Répétition horizontale du diviseur supérieur : 0,8 x

• Style de séparateur inférieur : voir la capture d'écran
• Couleur du séparateur inférieur : # ff9945
• Répétition horizontale du diviseur inférieur : 0.8x
• Bas diviseur Flip: horizontal et vertical

Marge et frontière

Une fois les séparateurs en place, donnez à la section une petite marge au-dessus et en dessous, puis terminez-la avec une bordure et une animation comme suit :

• Marge : 20 pixels en haut, 20 pixels en bas
• Coins arrondis : 30px
• Largeur de la bordure : 2px
• Couleur de la bordure : #ff9945
• Style d'animation : Retourner

Ajouter une colonne et définir la largeur de ligne

Maintenant que la section est terminée, ajoutez une structure à une colonne à la ligne.

Mettez ensuite à jour les paramètres de ligne comme suit :

• Largeur : 100 %
• Largeur maximale : 100 %

Construire l'option d'e-mail

Ajouter un module d'option de messagerie

Ensuite, ajoutez un module d'abonnement par e-mail à la ligne.

Contenu de l'option d'e-mail

Pour les paramètres de contenu d'activation par e-mail, mettez à jour les éléments suivants :

• Titre : « Obtenez des conseils GRATUITS chaque semaine ! »
• Corps : [conserver le contenu fictif par défaut]
• Liste Mailchimp : [ajouter une liste]
• Utiliser le champ de nom unique : OUI
• Utiliser la couleur d'arrière-plan : NON

Conception d'option d'e-mail

Des champs

Passez à l'onglet Conception et concevez les champs d'option d'e-mail en mettant à jour les éléments suivants :

• Disposition : corps à droite, formulaire à gauche
• Couleur d'arrière-plan des champs : #f86a4c
• Couleur du texte des champs : #ffffff
• Police des champs : IBM Plex Sans
• Taille du texte des champs : 18px
• Espacement des lettres des champs : 2px
• Hauteur de la ligne des champs : 2 em

Titre

Mettez à jour les paramètres du texte du titre comme suit :

• Police du titre : IBM Plex Sans Condensed
• Poids de la police du titre : semi-gras
• Couleur du texte du titre : #ffffff
• Taille du texte du titre : 60 px (ordinateur de bureau), 30 px (téléphone)
• Hauteur de la ligne de titre : 1,2 em (ordinateur de bureau), 1,6 (téléphone)

Bouton

Pour le bouton, mettez à jour les éléments suivants :

• Utiliser des styles personnalisés pour le bouton : OUI
• Couleur du texte du bouton : #ff9945
• Couleur du dégradé de fond du bouton à gauche : #ff9945
• Dégradé d'arrière-plan du bouton Couleur droite : #ffffff
• Direction du gradient : 90 degrés
• Position finale : 34 %
• Largeur de la bordure du bouton : 0px
• Espacement des lettres des boutons : 2px
• Police des boutons : IBM Plex Sans
• Poids de la police du bouton : gras
• Style de police des boutons : TT
• Remplissage des boutons : 15 pixels en haut, 15 pixels en bas

Rembourrage

Et pour une dernière touche, ajoutez le rembourrage suivant :

• Rembourrage : 5 % à gauche, 5 % à droite

Résultat final

Une fois que nous avons fini de concevoir la mise en page dans l'éditeur de mise en page Divi, assurez-vous et enregistrez la mise en page. Enregistrez ensuite la publication afin de pouvoir voir un aperçu de l'inscription par e-mail sur une page en direct. Voici à quoi cela ressemble.

Voici la légère animation de l'option d'e-mail lorsque vous faites défiler la publication.

Dernières pensées

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

J'ai hâte de vous entendre dans les commentaires.

À votre santé!