Comment inclure un bloc de mise en page Divi de résumé dans votre article Gutenberg

Créer des articles de blog précieux prend du temps et des efforts. En plus de trouver les meilleurs sujets sur lesquels écrire dans votre créneau, il est également important de fidéliser les lecteurs et de leur permettre de trouver rapidement les informations qu'ils recherchent. Maintenant, une bonne façon d'aborder ce type d'expérience utilisateur est de partager une boîte de résumé visuel à la fin de votre article de blog, juste avant les dernières réflexions. Avec les nouveaux blocs de mise en page de Divi, vous pouvez désormais créer sans effort une boîte de résumé avec les options intégrées de Divi. Dans ce didacticiel, nous vous guiderons tout au long du processus et vous pourrez également télécharger gratuitement le fichier JSON de la mise en page !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez The Summary Box Divi Layout Block GRATUITEMENT

Pour mettre la main sur le bloc de mise en page Divi de la boîte de résumé de héros gratuite, vous devrez d'abord le télécharger à l'aide du 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 à partir de la bibliothèque », accédez à « Vos mises en page enregistrées » et sélectionnez la mise en page pour importer la zone de résumé dans votre article de blog. C'est ça!

Commençons à recréer !

Utiliser le sixième modèle de publication du pack de création de thèmes

Télécharger le sixième pack de création de thèmes

La boîte de résumé que nous recréerons tout au long de ce didacticiel correspond parfaitement au modèle de publication du sixième pack de création de thème gratuit. Accédez à l'article de blog et téléchargez le pack complet.

Aller à Divi Theme Builder

Ensuite, accédez au Divi Theme Builder.

Télécharger le modèle de publication

Cliquez sur l'icône dans le coin supérieur droit et téléchargez le modèle de publication du pack de création de thèmes. Assurez-vous de modifier toutes les modifications apportées au générateur de thème par la suite.

Ouvrir un article Gutenberg existant ou en créer un nouveau

Maintenant, une fois que vous avez ajouté le modèle de publication correspondant, il est temps de créer la zone de résumé. Ouvrez ou créez un nouveau message en utilisant Gutenberg.

Ajouter un titre récapitulatif H2

Vers la fin de l'article de blog, nous ajouterons un nouveau titre H2.

Ajouter un nouveau bloc Divi en ligne

Ensuite, nous ajouterons un nouveau bloc de mise en page Divi.

Construire une nouvelle mise en page à l'intérieur du bloc Divi

Une fois que vous avez ajouté le bloc, vous aurez deux options. Choisissez de créer une nouvelle mise en page.

Paramètres de section

Couleur de l'arrière plan

À l'intérieur de l'éditeur de blocs de mise en page Divi, vous remarquerez une section. Ouvrez cette section et utilisez un fond blanc pour cela.

• Couleur d'arrière-plan : #FFFFFF

Espacement

Passez à l'onglet de conception de la section et ajoutez des valeurs de marge et de remplissage personnalisées.

• Marge supérieure : 100 pixels
• Marge de gauche : -10 % (ordinateur de bureau), 0 % (tablette et téléphone)
• Marge de droite : -10 % (ordinateur de bureau), 0 % (tablette et téléphone)
• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Frontière

Ajoutez également un rayon de bordure.

• En bas à gauche : 16px
• En bas à droite : 16px

Boîte ombre

Avec une ombre de boîte subtile.

• Force du flou d'ombre de la boîte: 60px
• Force de propagation de l'ombre de la boîte: 10px
• Couleur de l'ombre : rgba(0,0,0,0.08)

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter de modules pour le moment, ouvrez les paramètres de la ligne et autorisez la ligne à occuper toute la largeur du conteneur de section.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui
• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Supprimez ensuite le rembourrage supérieur et inférieur par défaut de la ligne.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Paramètres de la colonne 1

Couleur de l'arrière plan

Ensuite, ouvrez les paramètres de la colonne 1 et utilisez une couleur de fond blanche pour cela.

• Couleur d'arrière-plan : #FFFFFF

Espacement

Ajoutez également des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 70 pixels
• Rembourrage inférieur : 70px
• Remplissage gauche : 70px
• Rembourrage droit : 70 pixels

Boîte ombre

Continuez en ajoutant une ombre de boîte subtile avec une couleur d'ombre par défaut et en survol différente.

• Force de flou d'ombre de boîte : 50px
• Couleur de l'ombre par défaut : rgba(0,0,0,0)
• Survolez la couleur de l'ombre : rgba(0,0,0,0.15)

Échelle de transformation de survol

Au survol, nous souhaitons également redimensionner légèrement la colonne.

• À droite : 105 %
• Bas : 105 %

Hover Z Index

Complétez les paramètres de colonne en ajoutant un index z de survol.

• Indice de survol Z : 11

Ajouter le module de texte n°1 à la colonne

Ajouter un numéro à la zone de contenu

Il est temps d'ajouter des modules, en commençant par un premier module de texte. Ajoutez un numéro à la zone de contenu.

Fond dégradé

Ensuite, ajoutez un fond dégradé.

• Couleur 1 : #ff5e92
• Couleur 2 : #ffd4b6
• Direction du gradient : 165 degrés

Paramètres de texte

Passez à l'onglet conception du module et modifiez les paramètres de texte comme suit :

• Police de texte : Poppins
• Couleur du texte : #ffffff
• Taille du texte : 26 px
• Alignement du texte : Centre

Dimensionnement

Attribuez ensuite une largeur et une hauteur.

• Largeur : 150px
• Hauteur : 150px

Frontière

Ajoutez également un rayon de bordure.

• En bas à gauche, en haut à droite et en bas à droite : 100px

Élément principal CSS

Pour centrer le texte dans notre conteneur, nous devrons ajouter quelques lignes de code CSS à l'élément principal du module dans l'onglet avancé.

display: flex;
align-items: center;
justify-content: center;

Position

Et nous allons compléter les paramètres du module en repositionnant le module.

• Position : Absolu
• Emplacement : en haut à gauche

Ajouter le module de texte #2 à la colonne

Ajouter du contenu H3

Passons au module de texte suivant. Ajoutez du contenu H3 de votre choix.

Paramètres de texte H3

Modifiez ensuite la taille du texte H3 du module.

• Titre 3 Taille du texte : 23px

Espacement

Modifiez également les paramètres d'espacement.

• Marge supérieure : 100 pixels
• Marge inférieure : 20px

Ajouter un module diviseur à la colonne

Visibilité

Le prochain module dont nous avons besoin est un module diviseur. Assurez-vous que l'option « Afficher le diviseur » est activée.

• Afficher le diviseur : Oui

Paramètres de ligne

Passez à l'onglet de conception du module et modifiez les paramètres de ligne comme suit :

• Couleur de la ligne : #ff5e92
• Style de ligne : solide
• Position de la ligne : Haut

Dimensionnement

Modifiez également la taille du module.

• Poids du diviseur : 2px
• Largeur : 20%

Ajouter le module de texte n° 3 à la colonne

Ajouter du contenu

Passons au prochain et dernier module de texte. Ajoutez du contenu de votre choix.

Cloner la colonne

Une fois que vous avez terminé la colonne et tous ses modules, vous pouvez cloner la colonne entière.

Changer la couleur par défaut de l'ombre de la boîte

Ouvrez les paramètres de la colonne 2 et modifiez la couleur d'ombre par défaut.

• Couleur de l'ombre : rgba(0,0,0,0.06)

Modifier l'arrière-plan dégradé du module de texte n°1

Ouvrez ensuite le premier module de texte dans la colonne 2 et modifiez le fond dégradé.

• Couleur 1 : #7e5ce6
• Couleur 2: #25b8ee

Modifier la bordure du module de texte #1

Modifiez également les paramètres de bordure du module.

• En haut à gauche, en bas à gauche et en bas à droite : 100 px

Changer la position du module de texte n°1

Et repositionnez le module dans l'onglet avancé.

• Emplacement : En haut à droite

Changer la couleur du séparateur

Continuez en ouvrant les paramètres du module de division. Modifiez la couleur de la ligne pour qu'elle corresponde à la nouvelle palette de couleurs.

• Couleur de la ligne : #7e5ce6

Modifier tout le contenu

Enfin et surtout, modifiez tout le contenu du module dans la colonne 2.

Cloner la section entière deux fois

Une fois que vous avez terminé toute la première section, vous pouvez la cloner deux fois.

Modifier l'espacement de la première section en double

Ouvrez les paramètres de la première section en double et modifiez les valeurs de marge en conséquence :

• Marge de gauche : -5% (ordinateur de bureau), 0% (tablette et téléphone)
• Marge de droite : -5% (ordinateur de bureau), 0% (tablette et téléphone)

Modifier l'espacement de la deuxième section en double

Ouvrez également le deuxième doublon, supprimez toutes les valeurs de marge et ajoutez une marge inférieure à la place.

• Marge inférieure : 100px

Modifier tout le contenu

Enfin et surtout, modifiez tout le contenu du module.

Enregistrer la mise en page dans la bibliothèque Divi pour la réutiliser

Si vous envisagez d'utiliser cette boîte de résumé dans d'autres articles de blog, assurez-vous de l'enregistrer dans votre bibliothèque Divi afin de pouvoir y accéder facilement ! C'est ça!

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment ajouter une boîte de résumé à votre article Gutenberg avec les nouveaux blocs de mise en page de Divi. Les boîtes de résumé sont un excellent moyen visuel d'aider vos visiteurs à trouver les informations qu'ils recherchent. Vous avez également pu télécharger gratuitement le fichier JSON de la mise en page ! Si vous avez des questions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.