Utiliser les préréglages par défaut de Divi 5 pour styliser l'ensemble de votre site

L'arrivée des préréglages du groupe d'options a ouvert tant de nouvelles possibilités au sein de Divi 5. Nick a déclaré que c'était la fonctionnalité la plus importante pour frapper Divi au cours des années, et lorsque vous les testez, vous verrez exactement pourquoi il a dit cela .

Vous êtes déjà habitué aux préréglages élémentaires, mais les préréglages du groupe d'options ajoutent une toute nouvelle couche de contrôle de conception que vous n'arrêterez jamais d'utiliser. Cependant, les deux types de préréglages prennent en charge les « préréglages par défaut ». C'est ce que je veux vous montrer au cours des 2000 mots suivants.

Que sont les préréglages par défaut dans Divi 5?

Les préréglages par défaut sont les premiers préréglages que vous voudrez modifier sur vos sites Web. À bien des égards, ce sont un remplacement total pour le personnalisateur de thème.

Vous avez deux types de préréglages par défaut avec lesquels vous pouvez travailler immédiatement lors de la modification d'une page : les préréglages d'élément par défaut et les préréglages de groupe d'options par défaut . Couvrons d'abord les préréglages des éléments car il est plus familier, mais vous voudrez démarrer toutes vos conceptions avec des préréglages de groupe d'options.

Préréglages d'élément par défaut

Les préréglages des éléments font rapidement du travail de conception d'un élément que vous utilisez plusieurs fois sur votre site Web. Avec les préréglages des éléments, vous pouvez prendre un module comme le module Blurb et modifier le préréglage par défaut du module. Une fois le préréglage par défaut modifié, il utilise ces mêmes styles lors de l'ajout d'un nouveau module de texte de présentation à votre site (car les nouveaux éléments utilisent les paramètres par défaut).

Comment modifier un élément par défaut préréglé

La modification d'un préréglage par défaut est simple. Cliquez sur l'élément pour lequel vous souhaitez modifier les paramètres par défaut (dans ce cas, un module de texte). En haut à droite, cliquez sur le sélecteur prédéfini.

Vous devriez voir au moins un préréglage dans le menu déroulant - le préréglage par défaut de cet élément. Recherchez les paramètres (icône de vitesse) et cliquez sur-le pour modifier les options de paramètres de l'élément de page spécifique aux options de paramètres pour le préréglage par défaut.

Vous saurez que vous modifiez un préréglage lorsque la chapelure (montrant la position imbriquée de l'élément sur lequel vous travailliez) disparaît et le mot « préréglé » apparaît en haut à gauche du panneau des paramètres. Vous remarquerez également que le sélecteur de préréglage dit « préréglé par défaut » et il devient bleu. De là, accédez au groupe d'options d'élément que vous souhaitez modifier. Dans ce cas, j'ai décidé d'aller dans l' onglet de conception> Texte> Taille du texte pour modifier la taille du contenu du texte pour ce module.

Cliquez sur «Enregistrer le préréglage» pour que vos modifications saisissent le site à l'échelle du site.

Au cas où tu ne savais pas
Si vous êtes autour de Divi depuis un certain temps, vous connaissez les préréglages de modules . Les préréglages d'éléments sont les mêmes que les préréglages de modules, mais les appeler des préréglages de module était déroutant car les préréglages peuvent également être utilisés sur des éléments non modules tels que les sections et les lignes.

Vue filaire d'une page dans Divi 5. Remarquez comment cette ligne a des préréglages tout en n'apportant pas les critères pour être un module mais plutôt un conteneur.

Les préréglages d'élément par défaut peuvent être «remplacés» simplement en appliquant un autre élément personnalisé préréglé au module (plus à ce sujet ci-dessous) ou en appliquant des styles directement à un module ou à un élément spécifique. Divi, comme CSS, fonctionne avec les règles de spécificité, et dans ce cas, les paramètres appliqués à un module sont directement plus spécifiques que les paramètres appliqués à un préréglage par défaut.

Mais il y a un nouveau préréglage sur le bloc avec lequel vous devriez d'abord concevoir vos sites Web Divi.

Presets de groupe d'options par défaut

Les nouveaux préréglages de groupe d'options de Divi vous permettent de créer des styles par défaut qui couvrent divers modules et éléments qui peuvent utiliser des groupes d'options similaires. Tout cela se fait avec des préréglages de groupe d'options «par défaut» . Si vous êtes flou sur les détails de ce nouveau concept de groupes d'options, vous pouvez en savoir plus à ce sujet dans notre article, qui vous indique tout ce que vous devez savoir à leur sujet.

Renseignez-vous sur les préréglages du groupe d'options

En bref, différents modules ont des compositions différentes (voir le tableau ci-dessous pour un exemple comparant quatre éléments différents).

Lorsque les fonctionnalités composites d'un élément se chevauchent avec une autre, il peut partager des styles au niveau du groupe d'options, ce qui signifie que vous gagnez du temps lors de la conception de motifs similaires sur différents modules et éléments (comme le texte du titre sur de nombreux modules). En particulier avec les titres, le texte du corps, les ombres, les animations, les fonctionnalités collantes, les frontières, l'espacement et les boutons, vous concevrez beaucoup de sites Web, beaucoup plus rapidement.

Comment modifier un groupe d'options par défaut préréglé

Pour modifier un groupe de groupe d'options par défaut, accédez à un module ou un panneau de paramètres de ligne / section. Survolent les groupes d'options disponibles (texte, texte de titre, bouton, arrière-plan, etc.). Les groupes d'options qui prennent en charge les préréglages révéleront une icône prédéfinie sur le côté droit de ce champ OG lorsqu'ils ont survolé. Cliquez sur l'icône Presets pour afficher la valeur par défaut et tout préréglage personnalisé pour ce groupe d'options.

Voici une vidéo démontrant la différence entre l'édition d'un aspect particulier d'un seul module et l'édition de ce même aspect avec un groupe de groupe d'options.

Vous savez que vous modifiez un groupe de groupe d'options lorsque l'interface utilisateur passe de la lumière à l'obscurité (sauf si vous étiez en mode sombre, auquel cas c'est le contraire) pour uniquement le groupe d'options que vous modifiez actuellement. Vous devez enregistrer les modifications pour qu'ils prennent effet.

Quelle est la différence entre les préréglages par défaut et personnalisés?

Les préréglages par défaut sont les styles appliqués automatiquement à tous les nouveaux éléments (modules / sections / lignes) placés sur une page ou un modèle. Quoi qu'il en soit, chaque élément et chaque groupe d'options de Divi aura un préréglage par défaut. Voir ci-dessous d'où viennent les styles par défaut.

Les préréglages personnalisés sont des préréglages supplémentaires qui sont aussi faciles à gérer et à appliquer en tant que préréglages par défaut mais qui ne seront pas utilisés automatiquement (vous devez appliquer ces préréglages personnalisés à la place de la valeur par défaut). Ils sont utilisés dans des situations spéciales, telles que des sections sombres, des barres latérales et des affichages de contenu denses, quel que soit votre conception.

Chaque site Web doit être conçu à l'aide de préréglages de groupe d'options par défaut autant que possible. Ensuite, des préréglages de groupe d'options personnalisés supplémentaires doivent être créés pour gérer des situations similaires selon vos spécifications de conception. Tout ce qui n'est pas couvert par ces préréglages OG peut être conçu avec des préréglages par défaut d'élément et des préréglages d'éléments personnalisés. Vous pouvez appliquer directement des styles aux modules individuels pour les caisses de bord restantes qui doivent encore être conçues.

Divi est à un stade passionnant avec toutes les nouvelles fonctionnalités déploiées. Lorsque les unités avancées et les variables de conception chutent, vous pouvez définir des variables CSS avec toutes les unités et fonctions CSS. De là, vous pouvez utiliser ces variables CSS dans tous vos préréglages, ce qui rend votre flux de travail de conception environ 10 fois plus cohérent et plus rapide.

Il existe également une fonctionnalité planifiée pour permettre des préréglages de groupe d'options de nidification dans les préréglages d'élément, vous permettant de créer des préréglages d'élément avec la logique des préréglages de groupe d'options qui y sont intégrés. Cela signifie que lorsque vous modifiez un préréglage OG, il modifierait également les préréglages des éléments connexes (et vice versa dans une certaine mesure).

L'avenir semble réglé pour les concepteurs et les développeurs sur Divi 5!

Comment transformer un préréglage personnalisé en un préréglage par défaut

Nous avons des préréglages par défaut et nous avons également des préréglages personnalisés. Nous avons vu comment appliquer un préréglage personnalisé au lieu d'un par défaut, mais que se passe-t-il si nous l'aimons tellement que nous voulons en faire notre défaut?

Eh bien, c'est facile. Accédez aux préréglages d'élément ou à la liste déroulante des prérégations du groupe d'options . Survolez le préréglage personnalisé, vous souhaitez effectuer votre défaut et cliquez sur l'icône Star . Ensuite, enregistrez vos modifications . Votre préréglage est désormais le préréglage par défaut sur l'ensemble de votre site Web.

D'où viennent les styles à l'intérieur des préréglages par défaut?

Les préréglages par défaut non édits héritent simplement les valeurs de style trouvé dans le personnalisateur de thème. Presque tous les thèmes WordPress utilisent toujours un aspect du personnalisateur de thème (même les thèmes de blocs), bien que Divi ait fait en sorte qu'il soit connecté mais n'est pas nécessaire pour l'utiliser . Nous remplacerons probablement le personnalisateur à un moment donné dans le futur, mais pour l'instant, c'est une relique reportée de WordPress Core qui est une bizarrerie de thèmes WordPress même modernes .

Disons que j'ai utilisé le site de démarrage du conseiller financier (comme un exemple concrète). Dans le personnalisation du thème, la taille du texte de l'en-tête est définie sur 30px .

Je peux voir la même valeur (30px) utilisée dans les préréglages par défaut en entrant dans l'éditeur visuel pour une page, en cliquant sur le « préréglage par défaut » pour un module d'en-tête ou de texte , et de vérifier sous la conception> Un texte d'en-tête pour l'élévation H1.

Une valeur grise dans un champ Divi 5 signifie que c'est une valeur héritée, dans ce cas, héritée du personnalisateur de thème

Mais c'est simplement le défaut par défaut de ce site de démarrage. Si vous avez utilisé des préréglages à partir d'un pack de mise en page importé ou démarré à partir de zéro, différentes valeurs par défaut seraient définies dans le personnalisateur de thème.

Comment utiliser les préréglages par défaut pour créer un site Web

Je recommande de commencer vos versions avec quelques pages de wireframes. Posez tout sur quelques pages avec ce que vous savez que vous devrez avoir conçu.

Essayez de compter sur les modules les plus simples pour faire le travail et répéter l'utilisation du même ensemble de modules lorsque cela est possible. Considérez comment vous pouvez utiliser les modules d'en-tête, de texte, de texte de présentation, de menu, d'image, d'accordéon / bascule et de vidéo pour développer la plupart des wireframes de votre page. Ajoutez d'autres modules selon les besoins, mais s'en tenir à un ensemble de modules de base pour la plupart des choses, il y aura beaucoup plus rapidement d'utiliser les préréglages par défaut du groupe d'options et des éléments.

Cette page utilise des sections, des lignes, des colonnes, du texte, du texte de présentation, de l'image, du bouton et des modules de menu. En gardant les choses aussi simples que possible pour cette page particulière, je réduit le nombre de groupes d'options avec lesquels je dois concevoir.

Ensuite, vous voudrez commencer à concevoir vos modifications les plus radicales avec les préréglages de groupe d'options par défaut. Pour la plupart des conceptions, ce sera:

1. Espacement de la section : incluez les marges supérieures / inférieures, les marges gauche / droite et tout rembourrage requis.
2. Couleurs d'arrière-plan de la section : créez un préréglage de groupe d'options par défaut que vous souhaitez utiliser dans la plupart des cas et un groupe de groupe d'options personnalisés pour une couleur d'arrière-plan alternative / contraste. N'oubliez pas que les préréglages par défaut du groupe d'options d'arrière-plan préréglage peuvent également être appliqués à l'arrière-plan des colonnes.
3. Typographie : commencez par vos H1-H6. Selon votre utilisation de votre module, vous voudrez les démarrer dans les préréglages de groupe d'options par défaut sous un texte de titre pour les modules de cap et de texte et le texte de titre pour des choses comme les modules de présentation. Ensuite, travaillez sur du texte normal, en vous concentrant sur le groupe d'options de texte dans les modules de texte et les groupes d'options de texte corporel trouvés dans des choses comme le module de texte de présentation.
4. Autres paramètres de conception : créez des préréglages de groupe d'options pour les bordures, les ombres de boîte, les filtres (si vous stylisez des images) et les animations. Pour ceux-ci, j'ai tendance à ne pas utiliser de préréglages par défaut mais à créer des préréglages personnalisés que je peux s'appliquer sélectivement aux éléments de page.
5. Paramètres avancés : c'est similaire à l'étape ci-dessus, mais je crée des préréglages de groupe d'options pour des choses comme les transitions et les effets de défilement. J'ai également tendance à ne pas utiliser de préréglages par défaut mais à créer des préréglages personnalisés que je peux appliquer sélectivement aux éléments de page.

La création de préréglages de groupe d'options par défaut de cette manière commencera automatiquement à appliquer vos styles sur votre site. Chaque fois qu'un OG par défaut est mis à jour, les éléments pertinents sur vos sites Web acceptent automatiquement ces modifications.

Les préréglages par défaut vous feront gagner des heures

Les préréglages par défaut, à la fois l'élément et la variété du groupe d'options, vous feront gagner un temps massif. J'ai hâte que vous commenciez à construire des sites avec ces fonctionnalités utilisant le constructeur de Divi 5 Blazing. Et ce n'est même pas la fin des nouvelles fonctionnalités qui déploient dans Divi 5.

Avec les fonctionnalités nouvelles et planifiées de Divi, vous aurez un véritable système de conception à portée de main. Avez-vous d'abord essayé de modifier un site en utilisant les préréglages par défaut? Comment ça s'est passé? Faites-nous savoir dans le commentaire ci-dessous et partagez comment vous utilisez ces fonctionnalités.

Téléchargez Divi 5 Apprenez tout sur Divi 5 Essayez la démo divi 5