Comment utiliser les préréglages globaux avec les blocs de mise en page Divi pour rationaliser la conception des articles de blog
Publié: 2020-08-19Créer du contenu pour votre blog est déjà assez difficile sans avoir à vous soucier de la conception. C'est pourquoi il est important pour votre site que les éléments de conception soient facilement disponibles (ou préconçus) afin que vous puissiez vous concentrer davantage sur la création d'un contenu étonnant. Bien sûr, un thème enfant WordPress traditionnel peut gérer cela, mais, dans la plupart des cas, vous êtes coincé avec un design qui n'est pas facilement modifiable.
Avec Divi, nous avons plus de contrôle sur l'expérience de conception d'un article de blog. Les préréglages globaux de Divi vous permettent de créer un design à l'échelle du site (comme un thème enfant) pour les éléments de votre site avec la commodité supplémentaire de pouvoir modifier le design comme vous le souhaitez en quelques clics. De plus, si vous avez l'habitude de créer du contenu dans l'éditeur de blocs WordPress par défaut, vous pouvez exploiter la puissance du bloc de mise en page Divi pour intégrer ces éléments de préréglage global à la volée dans le contenu de la publication. Cela vous permettra d'ajouter de nouveaux éléments de conception dans un article de blog qui correspond au modèle et au reste du site.
Dans ce tutoriel, nous allons vous montrer comment utiliser les préréglages globaux avec les blocs Divi Layout pour rationaliser le processus de conception d'un article de blog. Pour ce faire, nous allons vous montrer comment utiliser les préréglages globaux pour concevoir rapidement et efficacement le nouveau contenu d'un article de blog. Cela aidera à créer une expérience de blog qui ne compromet pas l'image de marque globale de votre site.
Commençons!
Aperçu
Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.
Un aperçu rapide des préréglages globaux
La beauté de Divi est qu'il vous donne un contrôle total sur la conception de votre site Web en utilisant un large éventail de paramètres de conception que vous pouvez utiliser pour personnaliser l'apparence de n'importe quel élément ou module.
Le nouveau système de préréglages Divi vous permet de concevoir une apparence personnalisée pour un élément Divi (comme un module de boutons) et de l'enregistrer en tant que préréglage. Toutes les modifications de conception que vous apportez sont enregistrées dans le préréglage. Lorsque vous ajoutez un nouveau module à votre page, vous pouvez parcourir vos préréglages enregistrés et les appliquer rapidement.
Une fois qu'un préréglage a été appliqué, la conception par défaut du module est contrôlée par le préréglage. Si vous mettez à jour le style d'un préréglage, tous les modules utilisant ce préréglage sont également mis à jour. Cela vous permet de contrôler la conception de l'ensemble de votre site Web à l'aide d'une petite collection de préréglages enregistrés. De plus, cela permet de gagner beaucoup de temps lors de l'ajout de nouveaux modules à votre page, car vous n'avez pas besoin de concevoir chaque nouveau module à partir de zéro, mais vous pouvez à la place sélectionner rapidement une apparence dans votre bibliothèque de préréglages Divi.
Guides de styles prédéfinis globaux
Des guides de style prédéfinis globaux (comme celui que nous allons utiliser dans ce didacticiel) peuvent être créés pour démarrer la conception des éléments lors de la conception de votre site Web. Ces guides de style contiennent une collection de modules avec différents préréglages qui correspondent à la conception de votre site. Avoir les préréglages disponibles au début rationalisera le processus de conception en éliminant la corvée de mise à jour des paramètres de conception pour chaque nouveau module. Nous avons même un cadre de guide de style pour ceux qui veulent créer le leur.
Un aperçu rapide des blocs de mise en page Divi
Le bloc de mise en page Divi permet aux utilisateurs d'ajouter n'importe quelle mise en page Divi à un article de blog dans l'éditeur Gutenberg. Nous pouvons même convertir un bloc de mise en page Divi en un bloc réutilisable dans Gutenberg comme n'importe quel autre bloc WordPress. Cela ouvre la porte à la rationalisation de certaines conceptions utiles de Divi Layout dans le flux normal de la rédaction d'un article dans Gutenberg.
Comment les préréglages globaux et les blocs de mise en page fonctionnent ensemble
Étant donné qu'un préréglage global est « global », les styles de ce préréglage affectent toutes les instances du préréglage à l'échelle du site. Cela signifie que vous pouvez utiliser des préréglages globaux lors de la conception d'un élément dans l'éditeur de blocs de mise en page et que ces préréglages seront également mis à jour en conséquence. Ainsi, si vous souhaitez ajouter un CTA au contenu de votre article de blog à l'aide du bloc de mise en page Divi, vous pouvez créer le CTA en ajoutant des modules avec des préréglages globaux comme vous le feriez avec une page ou un article normal. Cela vous permet d'ajouter des éléments de conception correspondants dans votre message rapidement et efficacement.
Utilisation des préréglages globaux avec les blocs de mise en page Divi pour rationaliser la conception des articles de blog
Téléchargement du guide de style des préréglages globaux
Pour ce didacticiel, nous allons commencer par créer des préréglages globaux en utilisant la mise en page du guide de style des préréglages globaux pour la mise en page de l'agence Web. Après avoir téléchargé le guide de style, nous aurons des préréglages globaux disponibles à utiliser lors de l'ajout d'éléments de conception à un article de blog à l'aide du bloc de mise en page Divi.
Pour télécharger les préréglages globaux, accédez à l'article de blog. Faites défiler jusqu'à la section intitulée « Télécharger le guide de style des préréglages globaux ». Entrez ensuite votre adresse e-mail et cliquez pour recevoir le téléchargement.
Après avoir téléchargé le fichier zip sur votre ordinateur, décompressez le fichier et revenez au tableau de bord WordPress.
Pour importer le fichier JSON du guide de style dans la bibliothèque Divi…
- accédez à Divi > Bibliothèque Divi.
- Cliquez sur le bouton Importer et exporter.
- Sous la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation.
- Choisissez le fichier JSON du guide de style global de l'agence Web.
- Assurez-vous de sélectionner Importer les préréglages.
- Cliquez ensuite sur le bouton importer.
Désormais, tous ces préréglages globaux sont disponibles dans le Divi Builder.
Téléchargement du modèle de publication
Maintenant que le guide de style est en place, nous allons nous lancer dans la conception du modèle de publication de blog en important le modèle de publication de blog de l'agence Web qui correspond déjà aux éléments du guide de style.
Pour télécharger le modèle, accédez à l'article de blog, entrez votre adresse e-mail et cliquez pour télécharger les fichiers.
Pour importer le modèle de publication…
- accédez à Divi > Générateur de thèmes.
- Cliquez ensuite sur l'icône de portabilité.
- Sous le modal de portabilité, sélectionnez l'onglet d'importation.
- Choisissez le fichier JSON du modèle de publication que vous avez téléchargé.
- Cliquez ensuite sur le bouton importer.
Utilisation des préréglages pour mettre à jour/concevoir le modèle de publication
Une fois que vous avez le modèle de publication personnalisé en place, cliquez pour modifier le modèle de corps personnalisé. Là, vous pouvez également voir la conception du modèle de publication et effectuer des ajustements à l'aide des préréglages globaux disponibles dans le guide de style importé. Si vous construisiez votre propre modèle de publication à partir de zéro, vous pouvez utiliser les préréglages globaux pour aider à faire correspondre la conception du modèle de publication avec les autres éléments du site Web. Par exemple, vous pouvez utiliser le préréglage « WALP – H1 – 1 » sur le titre du message comme suit :
Ou vous pouvez utiliser le module de présentation "WALP - Blurb 2" prédéfini sur le présentation qui contient les informations dynamiques sur l'auteur.
Le module de contenu de publication est la zone où le contenu de votre article de blog sera généré sur la page. C'est pourquoi il est important de faire correspondre les paramètres de conception du module de contenu de publication avec les autres éléments de texte utilisés sur votre site.
Si vous construisiez le modèle de publication à partir de zéro, vous pouvez copier et coller des paramètres de texte à partir de divers modules de texte via le site. Ou si vous avez préalablement créé un guide de style prédéfini global pour votre site, vous pouvez copier les éléments de conception de ces modules dans le guide de style.
Par exemple, vous pouvez copier les styles de texte de titre pour le préréglage global créé pour tous les styles de texte dans un module de texte.
Ensuite, passez ces styles de texte d'en-tête dans le module de contenu de publication pour le modèle de publication. Cela vous aidera à vous assurer que tout le titre utilisé pour le contenu de votre article correspondra au style du site.
L'important ici est que vous ayez un modèle de publication qui corresponde au style de votre site. L'utilisation de préréglages globaux peut grandement aider ce processus si vous concevez le modèle à partir de zéro.
Utilisation des préréglages globaux avec les blocs de mise en page Divi
Une fois le modèle conçu, nous sommes prêts à commencer à utiliser les préréglages globaux avec les blocs Divi Layout pour concevoir des éléments de contenu de publication supplémentaires à l'aide de l'éditeur de blocs WordPress par défaut.
Pour ce faire, modifiez (ou créez) un article de blog. Ensuite, assurez-vous d'avoir du contenu fictif (comme quelques en-têtes et paragraphes, et une image en vedette).
À l'heure actuelle, si vous regardez la publication sur le front-end, le contenu de la publication sera affiché dans le modèle de publication et le contenu (titres, corps de texte, etc.) hérite du style des paramètres du module de contenu de publication.
Le module de contenu de publication ne gérera que le style du contenu textuel de base. Si vous souhaitez ajouter des éléments supplémentaires tout au long de votre publication à l'aide de l'éditeur de blocs WordPress par défaut, le style de ces éléments devra être modifié via CSS personnalisé dans un thème enfant. C'est à moins que vous n'utilisiez des blocs de mise en page Divi.
Pour ajouter du contenu supplémentaire que vous souhaitez faire correspondre à votre modèle de publication et à votre site, vous pouvez utiliser les blocs Divi Layout. Cela vous permettra d'ajouter le contenu de votre choix et de le styliser à l'aide du Divi Builder. Et, puisque nous pouvons également utiliser des préréglages globaux, nous pouvons rationaliser davantage la conception du contenu de notre article de blog à la volée.
Conception n°1 : créer un CTA de blog avec des préréglages globaux et un bloc de mise en page Divi
Dans ce premier exemple, créons un CTA de blog personnalisé qui correspond au modèle de publication et à la conception du site.
Pour ce faire, ajoutez un bloc de mise en page Divi au contenu de la publication.
Cliquez ensuite sur Créer une nouvelle mise en page.
Cela ouvrira l'éditeur de blocs de mise en page qui est essentiellement le Divi Builder comme d'habitude. Donnez à la section par défaut une ligne sur une colonne.
Ouvrez votre disposition globale des préréglages dans un autre navigateur, en vous assurant de cliquer pour construire sur le front-end afin que vous puissiez voir les éléments. De cette façon, vous avez l'éditeur de mise en page ouvert dans un navigateur et le guide de style ouvert dans l'autre.
Si vous n'avez pas de guide de style, vous pouvez ouvrir une mise en page de la page sur votre site afin de pouvoir accéder à tous les éléments de conception que vous souhaitez apporter.
Copier l'arrière-plan du guide de style
Pour ce CTA, nous allons utiliser le fond bleu roi du guide de style. Ouvrez les paramètres du module de texte et copiez l'arrière-plan.
Ouvrez ensuite les paramètres de la section dans l'éditeur de mise en page et passez l'arrière-plan de la section.
Ajouter un module de texte avec le préréglage H3
Ensuite, ajoutez un nouveau module de texte à la ligne.
Ensuite, ouvrez les paramètres et mettez à jour les éléments suivants :
Ajoutez un en-tête H3 pour le CTA en collant le code HTML suivant dans le corps :
<h3>Learn How One Client Increased Revenue by 500%</h3>
Ouvrez le menu déroulant Global Presents et sélectionnez le préréglage pour le titre H3 (WALP – H3 – 1)
Mettre à jour la conception
Mettez ensuite à jour la couleur du texte en blanc et centrez l'alignement.
Ajouter un bouton avec un préréglage global
Sous le module de texte, ajoutez un nouveau bouton.
Mettez ensuite à jour le texte du bouton et sélectionnez l'un des modèles de boutons prédéfinis globaux. Pour cet exemple, utilisons « WALP – Bouton 3 ».
Sauvegarder les modifications
Une fois terminé, cliquez sur Enregistrer et quitter.
Vous pouvez maintenant voir l'élément affiché dans l'éditeur de blocs WordPress.
Design #2 : Construire un devis de blog avec des préréglages globaux et un bloc de mise en page Divi
Pour ce prochain élément de conception, nous allons ajouter une citation à l'article de blog.
Ajouter un bloc de mise en page Divi
Pour commencer, ajoutez Divi Layout Block là où vous souhaitez que la citation soit affichée.
Cliquez ensuite sur Créer une nouvelle mise en page.
Copier et coller l'arrière-plan du guide de style
Copiez le fond bleu foncé du guide de style.
Collez-le ensuite dans la section par défaut de l'éditeur de mise en page.
Ajouter une rangée
Ensuite, ajoutez une ligne à une colonne à la section.
Ajouter un module de témoignage avec préréglage
Ajoutez ensuite un module de témoignage à la colonne. Sélectionnez ensuite le préréglage global « WALP – Testimonial 2 ».
Cela vous donnera un bon départ pour la conception de la citation pour le billet de blog.
Mettre à jour la conception
Sous l'onglet Conception, ajustez les paramètres de conception comme suit :
- Couleur de l'icône de devis :
- Poids de la police de caractères : léger
- Style de police du corps : italique
- Alignement du corps du texte : à gauche
- Couleur du corps du texte : #ffffff
- Police de l'auteur : Ubuntu
- Taille du texte de l'auteur : 16px
Ajouter un nouveau préréglage global
Étant donné que nous avons apporté des modifications importantes à ce préréglage de témoignage, il est logique d'en créer un nouveau à ce stade afin de l'utiliser pour les futurs devis de publication.
Pour en créer un nouveau, cliquez sur le bouton « Créer un nouveau préréglage à partir des styles actuels ». Donnez ensuite un nom au nouveau préréglage (« citation de publication de blog ») et enregistrez-le. Le préréglage global est maintenant prêt à être utilisé à l'avenir.
Enregistrez la mise en page et vous la verrez dans le contenu de la publication.
Conception n°1 : ajouter des éléments de présentation à un article de blog avec des préréglages globaux et un bloc de mise en page Divi
Pour cet exemple suivant, nous allons ajouter quelques textes de présentation à la publication.
Ajouter un nouveau bloc de mise en page Divi
Ajoutez un autre bloc de mise en page Divi et cliquez sur le bouton Créer une nouvelle mise en page.
Dans l'éditeur de mise en page, ajoutez une ligne à deux colonnes à la mise en page.
Ajouter un module Blurb avec des préréglages
Dans la colonne de gauche, ajoutez un module de présentation.
Ajoutez une nouvelle image d'icône au texte de présentation. Ensuite, ouvrez la liste déroulante des préréglages et sélectionnez le préréglage de présentation « WALP - Blurb 4 ».
Ajouter une deuxième présentation
Copiez ensuite le texte de présentation et collez-le dans la colonne 2 et mettez à jour l'image.
Enregistrez la mise en page et vous la verrez dans le contenu de la publication.
Résultat final
Ouvrez maintenant le message sur le front-end pour voir le résultat final.
Blocs réutilisables avec préréglages globaux
Si vous souhaitez profiter des blocs réutilisables avec les blocs de mise en page Divi, il est bon de savoir qu'ils fonctionneront avec des préréglages globaux. Ainsi, si vous souhaitez enregistrer le CTA du blog que nous avons créé précédemment en tant que bloc réutilisable, vous disposerez d'un bloc pratique que vous pourrez utiliser pour ajouter des CTA lors de la création de vos articles. Et, puisque le CTA utilise un bouton et un texte avec un préréglage global, la mise à jour du préréglage global pour cet élément mettra également à jour l'élément dans le bloc réutilisable.
Dernières pensées
Global Presets est l’un de nos outils de conception les plus puissants disponibles dans Divi. Une fois que vous avez pris le temps d'ajouter des préréglages globaux aux modules que vous utilisez sur l'ensemble du site, vous pouvez vraiment tirer parti d'un processus simplifié de conception de modèles et de contenu d'articles de blog à l'aide de blocs de mise en page.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!