Éléments préréglages et groupes de groupe d'options: la différence expliquée

Et si vous pouviez coiffer votre site Divi avec la flexibilité des cours CSS? Le système prédéfini de Divi vous permet de mélanger l'énergie et la facilité, ce qui changera la façon dont vous créez des sites Web. Que ce soit une seule page de destination ou un site de plusieurs pages, les préréglages vous permettent de créer des styles réutilisables qui coincent le temps de conception tout en gardant tout cohérent.

Dans Divi 5, les préréglages d'éléments et les préréglages du groupe d'options s'associent pour offrir un flux de travail puissant et efficace. Les préréglages d'élément vous permettent de créer des packages de conception pré-style pour des éléments spécifiques, tandis que les préréglages de groupe d'options offrent des styles de mixage et de match qui fonctionnent sur votre site. Ils gagnent du temps, assurent la cohésion et débloquent de nouvelles possibilités créatives.

Dans cet article, nous explorerons comment ils fonctionnent, comment ils diffèrent et comment les combiner pour une conception plus intelligente et plus rapide. À la fin, vous verrez pourquoi le système prédéfini de Divi est un incontournable pour votre prochain projet de conception.

Que sont les préréglages des éléments?

Les préréglages des éléments vous aident à créer une cohérence entre divers éléments de divi. Dans Divi, il existe quatre types d'éléments récurrents que vous pouvez trouver dans l'ensemble du produit: sections, lignes, colonnes et modules. Introduits dans Divi 4 et reportés dans Divi 5, ils vous permettent de créer un package de style complet pour un élément et de le réutiliser en un seul clic, peu importe où vous travaillez sur votre site.

Les préréglages d'éléments capturent chaque paramètre que vous avez appliqué à un seul type d'élément - comme la typographie, les couleurs, l'espacement d'un module de texte de présentation, l'espacement, etc. Par exemple, si vous avez créé un module de texte de présentation avec des tailles de police spécifiques, un look stylé pour l'icône et des couleurs, un préréglage élément verrouille tous ces détails en un seul préréglage réutilisable.

Les pré-prests d'élément peuvent être définis par défaut, donc chaque nouvelle instance de cet élément hérite automatiquement du style du préréglage. Ils sont mondialement modifiables, ce qui signifie qu'un ajustement au POST met à jour chaque instance liée sur votre site instantanément. Si vous devez modifier un préréglage, vous pouvez remplacer le préréglage au niveau de l'élément, vous donnant une flexibilité sans casser le système. Vous pouvez également modifier le préréglage à l'échelle mondiale afin qu'il prenne effet dans tous les cas où il a été utilisé.

Les préréglages d'éléments sont parfaits pour économiser et réutiliser des conceptions polies complètes pour les éléments récurrents. Par exemple, lors de la création d'un module CTA, vous pouvez en faire un élément prédéfini, puis l'appliquer à plusieurs pages. Avec un élément préréglé, il est conçu une fois, sauvé et prêt à l'emploi partout où vous en avez besoin, assurant la cohérence de la conception sans trop d'effort.

Que sont les préréglages du groupe d'options?

Nouveau dans Divi 5, les préréglages du groupe d'options déplacent la mise au point des éléments de conception entiers aux propriétés de conception réutilisables - comme la typographie, les ombres de boîte, les bordures, l'espacement ou les effets de défilement. Ce sont des blocs de style modulaire que vous pouvez appliquer sur différents éléments, des ombres de bouton aux polices de cap. Ils ne sont pas liés à un type d'élément, ce qui les rend incroyablement polyvalents.

L'une des grandes choses à propos des préréglages du groupe d'options de Divi, qui le distingue fortement des concurrents, est qu'il n'est pas seulement axé sur le CSS. Il comprend également des effets construits à l'aide de scripts. Vous pouvez le remarquer dans les fonctionnalités plus interactives de Divi, telles que les options de condition, les vidéos d'arrière-plan HTML, les effets de défilement, etc.

Les préréglages de groupe d'options peuvent être appliqués sur tous les types d'éléments. Une section, une ligne, une colonne et un module peuvent tous partager le même préréglage de la frontière. Les modules avec les paramètres de bouton intégrés peuvent tous partager le même bouton préréglé.

Élément préréglages vs préréglages du groupe d'options: les principales différences

Les préréglages des éléments servent de kits de conception tout-en-un, conçus pour rationaliser le flux de travail de Divi en verrouillant dans les détails d'un type d'élément unique - comme un module d'en-tête ou un texte de tout de style entièrement de style avec sa typographie, ses couleurs, son espacement et ses effets regroupés dans un plan statique. Leur objectif est étroit, lié exclusivement à un élément, ce qui les fait exceller à la duplication des conceptions complexes et polies sur votre site en un seul clic.

Ils sont parfaits pour accélérer le processus lorsque vous avez besoin d'une section CTA cohérente sur cinq pages - stylisez-la une fois, enregistrez-la et déployez-la sans effort. Bien qu'ils offrent des mises à jour globales et des paramètres par défaut, leur portée est limitée, offrant un package fixe et prêt à emporter qui priorise la cohérence des éléments entiers.

Presets de groupe d'options

Les préréglages du groupe d'options, en revanche, zooment sur les styles ou les comportements réutilisables - comme l'ombre d'un bouton, les styles de typographie d'un titre ou un effet de défilement - offrant une approche dynamique et croisée qui se détache du moule à élément unique. Ces couches de conception empilables peuvent ajouter un style cohérent aux boutons sur n'importe quel module qui en contient un, comme un texte de contact, un formulaire de contact ou un module d'opt-in par e-mail, en appliquant le style où qu'il s'adapte, avec la flexibilité de mélanger et de faire correspondre.

Ils brillent en coupant la redondance dans un cadre partagé. Ils vous permettent de définir une ombre de style ou de boîte de cap une fois et de l'appliquer à l'échelle du site, tout en prenant en charge les modifications globales en temps réel et les remplacements au niveau des éléments. Contrairement à la nature statique et à rien, les préréglages du groupe d'options de l'élément vous donnent un style et une adaptabilité précis sur l'ensemble de votre conception.

Comment utiliser les préréglages des éléments et les préréglages du groupe d'options ensemble dans Divi 5

La combinaison des préréglages d'élément et des préréglages de groupe d'options dans Divi 5, c'est comme associer un maître chef avec un sous-chef - One gère la vue d'ensemble, et l'autre plonge dans les détails. Voici un guide étape par étape pour les faire fonctionner en harmonie:

Étape 1: Commencez par les préréglages du groupe d'options pour les styles fondamentaux

Commencez par définir les règles de conception de base de votre site, comme la typographie, les schémas de couleurs, les ombres ou les effets dynamiques comme les animations de défilement. Enregistrez ces éléments en tant que groupes de groupe d'options et définissez-les en défaut. Lorsque vous commencez sur une conception, les préréglages du groupe d'options peuvent aider à créer les bases de la conception de votre site. Par exemple, lors de la création d'une disposition d'en-tête dans le constructeur de thème, vous pouvez faire un groupe de groupe d'options pour styliser un bouton dans le menu pour répéter facilement le style de ce bouton dans tout le site lors de la création de vos pages Web.

Chaque nouvel élément que vous ajoutez et attribuez le préréglage à hériter automatiquement ces styles, donnant à votre site un look unifié sans le peaufinir constamment.

Étape 2: Construire les préréglages des éléments

Une fois que vous avez créé des préréglages de groupes d'options pour styliser des éléments, vous pouvez construire sur votre fondation de conception en créant des préréglages d'élément pour vos mises en page. Par exemple, si vous souhaitez disposer de plusieurs modules de texte de présentation sur votre page d'accueil, vous n'avez besoin que de styliser un et de créer un préréglage d'élément. À partir de là, vous pouvez ajouter plus de soulues et appliquer l'élément préréglé à chacun d'eux, ce qui vous fait gagner une tonne de temps de conception.

Étape 3: affiner les modifications prédéfinies

Parfois, vous voudrez peut-être modifier un préréglage sans modifier les autres instances sur votre site. Heureusement, les préréglages d'éléments et les préréglages du groupe d'options le permettent. Par exemple, vous avez créé des préréglages de groupe d'options pour vos titres - H1 via H6 - mais vous souhaitez modifier la couleur de titre que vous prévoyez d'utiliser sur un fond d'image. Nos titres sont appelés # 000000 , qui ne fonctionneront pas pour cette application. Vous pouvez modifier une seule instance de ce préréglage sans modifier le préréglage lui-même . Dirigez-vous vers l'onglet Design du module de cap et modifiez la couleur.

Vous pouvez éditer avec précision les préréglages des éléments, comme l'exemple de texte de présentation d'avant. Une icône n'est pas parfaitement carrée, apparaissant plus large que les autres. En appliquant CSS dans l'onglet avancé, le changement reste isolé. D'autres modules de présentation avec le même préréglage ne restent pas affectés. Cela augmente la flexibilité de la conception, permettant des ajustements aux éléments individuels sans modifier le système plus large.

Vous obtiendrez le meilleur des deux mondes en incorporant des préréglages d'éléments et des préréglages de groupe d'options dans votre prochain projet de conception Web: cohérence à l'échelle du site avec Room pour la liberté de création.

Pourquoi ils fonctionnent mieux ensemble

• Efficacité de conception accrue: les préréglages des groupes d'options gèrent les détails de Nitty-Gritty (comme la typographie ou les ombres de boîte), tandis que les préréglages des éléments vous permet de déployer des sections, des lignes, des colonnes ou des modules de style entièrement.
• Une conception plus cohérente: les styles partagés restent synchronisés via des préréglages de groupe d'options, et les préréglages des éléments garantissent que les dispositions sont identiques partout où elles sont utilisées.
• Il encourage l'évolutivité: modifier un préréglage du groupe d'options (comme la taille de la police), et chaque préréglage lié se metra à jour instantanément - parfait pour les sites de culture où des pages supplémentaires sont nécessaires.
• C'est une preuve future: la feuille de route de Divi 5 fait allusion aux préréglages du groupe d'options de nidification à l'intérieur des préréglages des éléments, promettant une intégration encore plus serrée.

L'avenir des préréglages d'éléments et d'options dans Divi 5

Divi 5 offre déjà un système prédéfini puissant, mais le futur promet une intégration encore plus serrée qui pourrait redéfinir la façon dont vous construisez des systèmes de conception: les préréglages de groupe d'options de nidification à l'intérieur des préréglages d'élément. Bien que toujours en développement, cette fonctionnalité vous permettra de créer des préréglages d'éléments presque entièrement à partir des préréglages de groupe d'options modulaires, débloquant un nouveau niveau de contrôle de conception global.

Imaginez la création sans effort de Flurbs entièrement de style, CTA et plus en utilisant des préréglages de groupe d'options que vous avez déjà conçus. Cela gagnera du temps, facilitera la création d'un look cohérent pour vos sites et vous permettra de créer des sites Web plus rapidement. Les deux groupes prédéfinis travaillant ensemble, vous pouvez mettre à jour des éléments de conception sur votre site une fois, et chaque élément lié s'ajustera instantanément. Ce n'est pas seulement une mise à niveau incrémentielle; C'est un saut vers un véritable système de conception de type CSS dans le constructeur visuel de glisser-déposer de Divi.

Bien que nous ne puissions pas encore nicher de préréglages, la feuille de route de Divi 5 les inclut. À leur arrivée, ils seront le moyen ultime de créer un système de conception: commencez par les préréglages du groupe d'options comme blocs de construction, les assemblez en préréglages d'élément pour un déploiement rapide et maintenez le contrôle global avec un minimum d'effort.

Conception intelligente avec des préréglages de groupe d'options

Le système prédéfini de Divi 5 n'est pas seulement une fonctionnalité - c'est une révolution pour les concepteurs de sites Web. Les préréglages d'élément et les préréglages du groupe d'options peuvent ressembler à de petits outils, mais ils ont un coup de poing. Les préréglages Element vous permet d'économiser et de réutiliser des conceptions entières avec des traits zéro, tandis que les préréglages du groupe d'options apportent une flexibilité et une cohérence aux styles et comportements que vous utilisez partout. Utilisés ensemble, ils créent un flux de travail rapide, cohésif et adaptable - que vous créiez un site de commerce électronique d'une page ou de plusieurs pages.

La vraie magie se produit lorsque vous les utilisez ensemble. Les préréglages de groupe d'options vous aident à poser une fondation solide en roche, puis à construire des conceptions polies et réutilisables avec des préréglages d'élément. Le résultat est un site Web cohérent sans rigidité, évolutif sans écrasement et efficace sans couper les coins. Ce système de conception basé sur prédéfini change la donne pour les utilisateurs de Divi, déverrouillant la puissance de type CSS avec une simplicité ponctuelle et clicée.

Avant de plonger dans votre prochain projet, téléchargez le dernier Divi 5 Alpha, expérimentez des préréglages et voyez comment ils transforment la façon dont vous créez des sites Web Divi.