Comment ajouter des citations surlignées construites par Divi dans votre article Gutenberg

Lorsque vous écrivez un article de blog, vous aurez souvent envie de citer quelqu'un ou de mettre en évidence une phrase utilisée dans un paragraphe normal. Désormais, dans l'éditeur Gutenberg, vous pouvez ajouter un bloc de citation dès le départ, mais cela ne vous offre pas autant de liberté de conception que vous le souhaiteriez. Avec les blocs de mise en page de Divi, ce n'est plus un problème. Vous pouvez facilement créer un bloc particulier avec Divi tout en conservant l'environnement Gutenberg ailleurs. Dans ce tutoriel, nous allons vous montrer comment ajouter des citations surlignées en ligne à vos articles de blog à l'aide de Divi. Vous pourrez également télécharger le fichier JSON gratuitement !

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.

Exemple 1

Bureau

Mobile

Exemple #2

Bureau

Mobile

Téléchargez GRATUITEMENT les mises en page des citations en surbrillance Divi-Built

Pour mettre la main sur les mises en page de citations surlignées gratuites construites par Divi, vous devrez d'abord les 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 !

https://youtu.be/zScpa4-I7-8

Abonnez-vous à notre chaîne Youtube

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 mise en page des citations en surbrillance dans votre article de blog. C'est ça!

Étapes générales

Utilisez un modèle de publication de blog simple et convivial pour l'expérience utilisateur

Télécharger le modèle

Pour définir le style de ce tutoriel, nous utiliserons un modèle de publication d'une publication précédente. Accédez à cet article et téléchargez le modèle.

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, accédez à l'onglet d'importation et importez le modèle de publication que vous avez téléchargé lors de la première étape de ce didacticiel.

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

Une fois que vous avez défini un modèle de publication, vous pouvez créer une nouvelle publication Gutenberg ou en ouvrir une existante.

Ajouter un nouveau bloc Divi en ligne

Ajoutez un nouveau bloc Divi quelque part dans votre publication.

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 celui qui dit « Créer une nouvelle mise en page ».

Recréer l'exemple #1

Paramètres de section

Espacement

Une fois que vous êtes dans l'éditeur de blocs de mise en page Divi, vous remarquerez une section. Pour recréer le premier exemple de conception, ouvrez les paramètres de la section et modifiez les valeurs de marge en conséquence :

• Marge supérieure : 50px
• Marge inférieure : 50px
• Marge gauche : -5%
• Marge droite : -5%

Frontière

Ajoutez une bordure gauche à la section suivante.

• Largeur de la bordure gauche : 2px
• Couleur de la bordure gauche : #000000

Animation

Et utilisez les paramètres d'animation suivants :

• Style d'animation : diapositive
• Direction de l'animation : vers le bas
• Durée de l'animation : 1500 ms
• Intensité de l'animation : 200 %
• Opacité de démarrage de l'animation : 100 %
• Courbe de vitesse d'animation :

Ajouter une nouvelle ligne

Structure des colonnes

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

Dimensionnement

Ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement en conséquence :

• Largeur: 90%
• Largeur maximale : 100 %

Animation

Complétez les paramètres de ligne en modifiant les paramètres d'animation comme suit :

• Style d'animation : Fondu
• Délai d'animation : 1500 ms
• Courbe de vitesse d'animation :

Ajouter un module de texte à la colonne

Insérer du contenu H3

Le seul module dont nous avons besoin est un module de texte. Insérez le contenu de la citation en surbrillance H3.

Paramètres de texte H3

Complétez les paramètres du module en modifiant les paramètres du texte H3 comme suit :

• Style de police H3 : italique
• Taille du texte H3 : 2.1rem (ordinateur de bureau), 1.5rem (tablette), 1.3rem (téléphone)
• Hauteur de la ligne H3 : 1,5 em

Recréer l'exemple #2

Paramètres de section

Espacement

Vous voulez plutôt recréer le deuxième exemple de conception ? Ouvrez les paramètres de section et modifiez les valeurs d'espacement comme suit :

• Marge supérieure : 50px
• Marge inférieure : 50px
• Marge gauche : -5%
• Marge droite : -5%
• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Ajouter une nouvelle ligne

Structure des colonnes

Ensuite, ajoutez une nouvelle ligne 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.

• Largeur : 100 %
• Largeur maximale : 100 %

Ajouter le module de texte n°1 à la colonne

Ajouter du contenu

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

Paramètres de texte

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

• Police du texte : affichage Playfair
• Couleur du texte : #eaeaea
• Taille du texte : 500px
• Hauteur de la ligne de texte : 0em

Espacement

Nous ajoutons également une marge supérieure.

• Marge supérieure : 150 px

Animation

Ensuite, nous allons modifier les paramètres d'animation.

• Style d'animation : Retourner
• Direction d'animation : Centre
• Délai d'animation : 500 ms
• Intensité de l'animation : 200 %
• Courbe de vitesse d'animation :

Position

Nous veillerons à ce que le devis soit placé dans le coin supérieur gauche du conteneur de lignes en modifiant également les paramètres de position.

• 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 le contenu de la citation en surbrillance H3 à la zone de contenu.

Paramètres de texte H3

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

• Titre 3 Style de police : Italique
• Titre 3 Taille du texte : 2.6rem (ordinateur de bureau), 1.7rem (tablette), 1.3rem (téléphone)
• Titre 3 Hauteur de ligne : 1.4em

Espacement

Ajoutez également des valeurs de marge personnalisées sur différentes tailles d'écran.

• Marge supérieure : 150 px
• Marge inférieure : 150px
• Marge de gauche : 150 pixels (ordinateur de bureau), 70 pixels (tablette), 30 pixels (téléphone)
• Marge droite : 150 pixels (ordinateur de bureau), 70 pixels (tablette), 30 pixels (téléphone)

Animation

Et complétez les paramètres du module en modifiant les paramètres d'animation comme suit :

• Style d'animation : Fondu
• Délai d'animation : 2000 ms
• Courbe de vitesse d'animation :

Ajouter le module de texte n° 3 à la colonne

Ajouter du contenu

Passons au module suivant et dernier, qui est un autre module de texte. Ajoutez un symbole de citation à la zone de contenu.

Paramètres de texte

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

• Police du texte : affichage Playfair
• Couleur du texte : #eaeaea
• Taille du texte : 500px
• Hauteur de la ligne de texte : 0em
• Alignement du texte : à droite

Animation

Utilisez ensuite les paramètres d'animation suivants :

• Style d'animation : Retourner
• Direction d'animation : Centre
• Délai d'animation : 1000 ms
• Intensité de l'animation : 200 %
• Courbe de vitesse d'animation :

Position

Et assurez-vous que la citation est placée dans le coin inférieur droit du conteneur de lignes.

• Position : Absolu
• Emplacement : En bas à droite

Enregistrer les mises en page de devis dans la bibliothèque Divi pour les réutiliser

Une fois que vous avez terminé la mise en page de citation de votre choix, assurez-vous de l'enregistrer dans votre bibliothèque Divi afin de pouvoir l'utiliser également pour de futures publications !

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.

Exemple 1

Bureau

Mobile

Exemple #2

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment faire preuve de créativité avec les blocs de mise en page de Divi. Plus précisément, nous vous avons montré comment ajouter des citations animées surlignées tout au long de votre article de blog Gutenberg. Les possibilités de conception sont infinies, mais nous vous avons fourni deux exemples avec lesquels vous pouvez commencer. Vous avez également pu télécharger les fichiers JSON gratuitement ! Si vous avez des questions ou des suggestions, 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.