Comment transformer les styles de pack de mise en page en valeurs par défaut globales avec Divi

La nouvelle mise à jour des valeurs par défaut globales de Divi vous aide à appliquer certains styles de conception aux éléments de l'ensemble de votre site Web. Il vous fait gagner du temps, vous aide à garder une vue d'ensemble de votre site Web et à styliser chaque paramètre global comme vous y êtes habitué ; à l'intérieur du Divi Builder lui-même.

Désormais, lorsque vous utilisez un pack de mise en page pour votre site Web, il est probable que vous souhaitiez transformer les styles du pack de mise en page en valeurs par défaut globales, afin que vous n'ayez pas à faire des allers-retours. Mais quelle est la meilleure façon de s'y prendre ? Nous vous montrerons dans le didacticiel de cas d'utilisation de cette semaine. Nous utiliserons le pack de mise en page de cybersécurité pour le démontrer, mais rassurez-vous, la technique s'applique à tout pack de mise en page que vous utilisez.

Allons-y !

1. Créez une nouvelle page pour chaque mise en page dans le pack de mise en page

Si vous envisagez de transformer le style d'un pack de mise en page en valeurs par défaut globales, la première chose à faire est de créer une page distincte pour chaque mise en page fournie avec le pack de mise en page. Avoir une page séparée pour chacune des mises en page vous aidera dans la deuxième étape ; rechercher les éléments de conception utilisés dans le pack de mise en page et les transformer en valeurs par défaut globales.

2. Détectez les modules utilisés dans les mises en page et rendez-les mondiaux

Une fois que vous avez créé une page distincte pour chaque mise en page, vous pouvez commencer à numériser les pages pour trouver les différents modules utilisés. Nous sautons délibérément les paramètres de section, de ligne et de colonne car ceux-ci dépendent du type de section que vous créez. Et pour la plupart des sections et des lignes, l'équipe de conception décide d'utiliser les paramètres par défaut de Divi pour vous permettre de configurer plus facilement vos propres paramètres par défaut globaux.

Nous sommes allés de l'avant et avons détecté les modules les plus fréquemment utilisés dans le Cyber ​​Security Layout Pack qui contiennent des styles personnalisés. Ces modules font également partie des modules les plus populaires de Divi et peuvent être trouvés dans presque tous les packs de mise en page :

• Module de texte
• Module de bouton principal
• Module diviseur
• Module d'option d'e-mail
• Formulaire de contact

Transformer les paramètres de corps et d'en-tête du module de texte en valeurs par défaut globales

Il est temps de commencer à transformer les styles de module en valeurs par défaut globales ! Vous devrez faire ce module par module. Nous allons commencer par le module de texte. Les seuls paramètres que nous recommandons de rendre globaux sont les paramètres d'en-tête et de corps de texte. Ces deux groupes d'options resteront probablement les mêmes, quelle que soit la conception que vous créez. Les autres paramètres, tels que l'espacement et la taille, dépendent généralement de la façon dont votre module de texte est influencé par le reste de la conception et sont modifiés en cours de route. Nous allons passer en revue le processus de définition des valeurs par défaut globales pour ce module particulier. Nous allons ensuite continuer en listant les paramètres que nous recommandons de transformer en valeurs par défaut globales pour les autres modules.

Tout au long des mises en page, trois en-têtes de module de texte sont utilisés ; H1, H2 et H3. Nous allons transformer ces trois titres et les paramètres de texte de paragraphe en valeurs par défaut globales. Si vous souhaitez aller plus loin que H3, vous pouvez les styliser manuellement dans les paramètres de texte globaux H3.

Sur la page de destination, vous trouverez tous ces paramètres répartis sur différents modules de texte. Le premier module de texte de la section héros contient la copie H1. Ouvrez les paramètres, accédez aux paramètres de texte H1, faites un clic droit sur l'élément H1 et cliquez sur « Définir les styles par défaut ».

Localisez ensuite un module de texte avec du contenu de paragraphe. Allez dans les paramètres de texte, faites un clic droit et cliquez sur "Définir les styles par défaut".

Le dernier module de texte que nous ouvrirons contient à la fois les styles de texte H2 et H3. Cliquez avec le bouton droit sur chacun des éléments de titre individuellement et cliquez sur « Définir les styles par défaut ». Une fois que vous avez suivi ces étapes, vos modules de texte sont prêts à fonctionner !

Vous devrez répéter ces étapes pour chacun des modules récurrents de votre site Web. Passons aux autres.

1. Module de bouton principal

Paramètres des boutons

Rembourrage

2. Module de présentation

Paramètres des icônes (si nécessaire)

Paramètres de texte

Paramètres du texte du titre

Paramètres du corps du texte

3. Module diviseur

Paramètres de ligne

Paramètres de dimensionnement

4. Module d'option d'e-mail

Module entier sauf : marge + dimensionnement + paramètres de transformation

5. Module de formulaire de contact

Module entier sauf : marge + dimensionnement + paramètres de transformation

3. Enregistrer les éléments récurrents en tant qu'éléments (globaux) à réutiliser

Maintenant, une fois que vous avez défini les valeurs par défaut globales pour les modules principalement utilisés, il reste encore d'autres éléments que vous pourriez envisager de réutiliser. Ces éléments sont généralement, mais sans s'y limiter, les suivants :

• Bouton secondaire
• Bouton tertiaire
• Sections du CTA
• Sections de pied de page
• Spécificités du pack de mise en page : modules d'image avec diviseurs de section/modules de présentation de style différent/…

Nous vous recommandons de sauvegarder ces éléments dans votre bibliothèque Divi et de les réutiliser au fur et à mesure. Il est utile d'enregistrer certains d'entre eux en tant qu'éléments globaux au lieu d'éléments réguliers, tels que les pieds de page et les sections CTA. Il est recommandé d'enregistrer des éléments tels que des boutons ou des modules de présentation de style différent sans être globaux, afin que vous puissiez apporter des modifications spécifiques à la copie et à la conception si nécessaire.

Vous pouvez enregistrer un élément dans la bibliothèque Divi en le survolant, en cliquant sur l'icône d'enregistrement dans la bibliothèque, en donnant un nom à votre élément de bibliothèque, en choisissant si vous souhaitez le rendre global et en cliquant sur « Enregistrer dans la bibliothèque ».

4. Créez une palette de couleurs par défaut dans les options du thème Divi

Une fois que vous avez défini vos valeurs par défaut globales et enregistré les éléments récurrents dans votre bibliothèque Divi, vous êtes presque prêt à commencer à créer de nouvelles pages à partir de zéro en utilisant les valeurs par défaut globales et les éléments de la bibliothèque. Avant de le faire, nous vous recommandons de modifier la palette de couleurs par défaut dans vos options de thème Divi. Ces couleurs apparaîtront sur chaque élément de conception que vous ouvrez et vous aideront à changer de couleur sans avoir à constamment copier et coller des codes de couleur. Cela vous permet de vous concentrer sur ce qui est vraiment important ; créer un site Web beau et fonctionnel. Accédez à vos options de thème Divi et assurez-vous d'inclure les types de couleurs suivants dans votre palette de couleurs :

• Couleurs du texte
• Couleurs d'arrière-plan
• Couleurs d'accent

5. Réinitialiser les styles de module sur les pages existantes

Une fois que vous avez défini vos valeurs par défaut globales, enregistré vos éléments de bibliothèque et choisi votre palette de couleurs par défaut, vous pouvez commencer à créer de nouvelles pages à partir de zéro et voir immédiatement la différence d'approche. Si, toutefois, vous avez des pages existantes qui ont été modifiées avant de choisir les valeurs par défaut globales, vous devrez revenir en arrière et réinitialiser les styles de module pour que les valeurs par défaut globales s'appliquent. C'est ainsi que fonctionnent les valeurs par défaut globales. Si vous modifiez manuellement un module, vous devrez également le supprimer manuellement afin que les valeurs par défaut globales puissent apparaître. Heureusement, vous pouvez également utiliser la fonctionnalité d'extension des styles que Divi vous offre pour étendre les styles de réinitialisation sur toute la page !

Dernières pensées

Dans cet article, nous vous avons montré comment utiliser la nouvelle mise à jour des valeurs par défaut globales de Divi pour transformer les packs de mise en page en valeurs par défaut globales. Bien que nous ayons utilisé le pack de mise en page de cybersécurité, vous pouvez faire fonctionner cette technique sur n'importe quel pack de mise en page que vous choisissez d'utiliser. Ce didacticiel de cas d'utilisation fait partie de notre initiative de conception Divi en cours, où nous essayons de mettre quelque chose de plus dans votre boîte à outils de conception chaque semaine. Si vous avez des questions ou des suggestions, n'hésitez pas à les laisser 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.