Comment la conception préréglée modifie le paradigme de la conception divi

Les capacités de conception de Divi ont évolué avec l'introduction de préréglages du groupe d'options dans Divi 5. Bien que les préréglages d'élément aient longtemps facilité l'épargne et la réutilisation des éléments entièrement de style, les nouveaux préréglages du groupe d'options ajoutent une couche de flexibilité en vous permettant de réutiliser des propriétés de conception comme la typographie, l'espacement et les effets sur divers éléments.

Ensemble, ces fonctionnalités divi intégrées aident à remodeler la façon dont les concepteurs abordent la cohérence et l'efficacité, permettant des itérations de conception plus rapides et des mises à jour mondiales plus faciles. Dans cet article, nous allons plonger dans la façon dont ces préréglages fonctionnent ensemble pour transformer votre flux de travail de conception Divi 5!

Les deux piliers de la conception prédéfinie

Avant de plonger dans les détails, il est important de comprendre les deux composants principaux qui rendent la conception prédéfinie en Divi si puissant. En combinant des préréglages d'éléments et des préréglages de groupe d'options, vous pouvez créer un processus de conception plus efficace, cohérent et évolutif. Regardons ces deux piliers et comment ils travaillent ensemble pour élever votre flux de travail de conception.

Préréglages élémentaires: packages de conception réutilisables

Les préréglages des éléments enregistrent des configurations de conception entières pour des éléments de divi spécifiques. Divi a actuellement 4 types d'éléments distincts: modules, colonnes, lignes et sections. Et en ce qui concerne les modules, les préréglages d'élément sont également uniques au type de module (bouton, texte, CTA, etc.). Lorsque vous appliquez un élément prédéfini, tous les paramètres associés comme la typographie, les couleurs, l'espacement et les effets sont instantanément hérités lorsqu'ils sont appliqués. L'objectif des préréglages des éléments est le suivant:

• Assurer la cohérence visuelle entre les pages
• Réduire les tâches de style répétitives
• Autoriser les mises à jour globales pour les modifications plus rapides

Presets de groupe d'options: contrôle de conception modulaire

Les préréglages du groupe d'options se concentrent sur les propriétés de style comme la typographie, les ombres de boîte, les frontières et les effets de défilement. Ils travaillent sur plusieurs éléments, permettant aux concepteurs de mélanger et de faire correspondre les styles sans être liés à un type d'élément unique. Cela signifie que vous pouvez, par exemple, utiliser le même Box Shadow Preset sur une ligne et un module. Les principaux avantages de l'utilisation des préréglages du groupe d'options sont:

• Appliquer des styles partagés à différents éléments
• Empilable pour la personnalisation avancée
• Autoriser les modifications mondiales en temps réel sans affecter les modules individuels

Création d'un flux de travail structuré avec des préréglages

Maintenant que nous vous avons montré les deux piliers des préréglages en Divi et avons brièvement expliqué la différence, passons par quelques conseils pour créer un flux de travail structuré.

Étape 1: Définissez les styles de base avec des préréglages de groupe d'options

Commencez par établir les principaux principes de conception de votre site Web. Cela comprend la typographie, les couleurs, les styles de bouton, l'espacement, etc. Ces éléments fondamentaux sont essentiels pour maintenir la cohérence tout au long de votre site Web.

Pour les paramètres constamment récurrents, vous pouvez choisir de définir le groupe d'options préréglé par défaut. Un bon exemple de ceci est le style de texte de votre paragraphe et l'utiliser par défaut.

Les préréglages du groupe d'options sont polyvalents et réutilisables, vous permettant d'appliquer ces paramètres sur plusieurs éléments. Par exemple, une fois que vous avez défini un préréglage de Text-Shadow, vous pouvez appliquer ce préréglage aux titres de tous les types d'éléments de votre site Web. À ce stade, vous jetez les bases du reste de votre conception, et ces préréglages devraient servir de blocs de construction de votre site Web.

Étape 2: Créez des préréglages d'élément pour des modules spécifiques

Une fois que vous avez défini les styles de base, l'étape suivante consiste à créer des préréglages d'élément pour des éléments de conception plus spécifiques. Bien que suivre cet ordre soit le plus logique en théorie, vous vous retrouverez souvent à créer à la fois simultanément. Les préréglages d'éléments sont des packages de conception complets pour les éléments individuels (sections, lignes, colonnes, modules) et vous permettent d'appliquer rapidement des styles cohérents sur le site.

Concevez un bouton CTA pré-style à l'aide de vos préréglages de groupe d'options prédéfinis, en vous concentrant sur la typographie du bouton, la couleur d'arrière-plan et les effets de survol.

Enregistrez-le en tant que préréglage d'élément pour une utilisation future. Construisez d'autres éléments récurrents, tels que des modules de témoignage, des sections de caractéristiques ou des tables de tarification, et les styliser en conséquence. Chacun de ces modules pré-style peut être enregistré comme un préréglage d'élément que vous pouvez appliquer chaque fois que cela est nécessaire.

Lorsque vous concevez, pensez à enregistrer les dispositions qui contiennent ces préréglages dans votre bibliothèque Divi. Cela vous permet de maintenir un aperçu de toutes vos conceptions, vous aidant à garder une trace de chaque style prédéfini que vous avez créé. Vous n'avez pas à vous soucier de tout rendre parfait depuis le début. Lorsque vous construisez votre site, vous modifierez probablement ces éléments au fur et à mesure.

Étape 3: implémenter et ajuster au besoin

Une fois que vous avez créé votre groupe d'options et votre préréglage d'éléments, vous pouvez les appliquer sur votre site Web. Si vous créez un site Web à partir de zéro sans utiliser de logiciel de conception à l'avance, les chances sont élevées que vous ayez déjà appliqué vos préréglages lors de la création de la première page.

Vous devrez peut-être effectuer des ajustements au niveau de l'élément pendant que vous travaillez. Par exemple, si vous appliquez un préréglage à un module de témoignage mais que vous devez modifier l'espacement sur une page spécifique, vous pouvez le faire sans affecter le reste du site. Cette flexibilité vous permet de vous régler au fur et à mesure, garantissant que votre conception reste évolutive et adaptable.

La clé ici est de considérer les préréglages comme un outil pour créer un système de conception flexible et cohésif plutôt que comme un cadre rigide que vous devez suivre exactement. Vous aurez probablement besoin de modifier vos styles au fur et à mesure que vous continuez à construire, alors n'hésitez pas à modifier les préréglages en cas de besoin et à les remplacer au niveau des éléments. Continuez à affiner votre conception et profitez pleinement de l'édition en temps réel de Divi pour effectuer ces ajustements à la volée.

Étape 4: Gardez vos styles organisés dans la bibliothèque Divi

Pour garder une trace de tous vos préréglages et dispositions d'élément, enregistrez-les dans une disposition que vous pouvez conserver dans votre bibliothèque Divi.

À mesure que votre site se développe, vous pourrez ajuster vos préréglages enregistrés pour améliorer votre conception. Vous êtes toujours en mesure de modifier vos préréglages à l'intérieur de l'élément sur lequel vous travaillez également. Une fois que vous aurez mis à jour un préréglage, il se mettra à jour sur l'ensemble de votre site Web.

Étape 5: itérez et améliorez

L'une des grandes choses du système prédéfini de Divi est la capacité d'améliorer et d'affiner continuellement votre conception. Lorsque vous créez plus de pages et de dispositions, revisitez votre groupe d'options et vos préréglages d'élément pour effectuer des ajustements globaux.

Si vous décidez de modifier la couleur de votre bouton primaire ou de mettre à jour la taille de la police de tous les en-têtes, vous pouvez le faire une fois et le faire refléter à l'échelle du site sur toutes les instances où ce préréglage est appliqué.

Au fur et à mesure que vous continuez à travailler, vous comprenez plus profondément quels éléments fonctionnent bien ensemble et qui ont besoin de nouveaux ajustements. N'ayez pas peur de modifier les préréglages au fur et à mesure et profitez de la flexibilité de Divi pour apporter de petits changements qui correspondent à votre vision de conception en évolution.

En itérant et en améliorant continuellement vos préréglages, vous créez un site non seulement cohérent mais aussi adaptable aux changements futurs ou aux tendances de conception. N'oubliez pas que le système prédéfini est un outil pour vous aider à rationaliser votre processus - pas un ensemble de règles que vous devez suivre strictement dès le premier jour.

Les avantages d'un flux de travail prédéfini

Maintenant que nous avons traversé les bases de la création d'un flux de travail structuré avec des préréglages Divi, passons en revue certains des avantages qui accompagnent cette approche.

Vitesse: Réduisez le temps de conception avec des préréglages prêts à l'emploi

Avec le système prédéfini de Divi, vous pouvez considérablement réduire le temps nécessaire pour concevoir un site Web. Plutôt que de commencer à zéro chaque fois que vous devez concevoir un élément, créez et réutilisez simplement les préréglages d'élément et de groupe d'options. Qu'il s'agisse d'un bouton CTA, d'un style de cap ou d'un module de témoignage, ces préréglages vous permettent d'appliquer un package de conception complet en un seul clic.

Par exemple, une fois que vous avez conçu un style de bordure avec vos préréglages de groupe d'options, vous pouvez l'appliquer de manière cohérente sur toutes les pages sans avoir à refaire le travail.

Les préréglages des éléments vous font gagner encore plus de temps en vous permettant de réutiliser des modules pré-style entiers. Vous pouvez déployer un module entièrement conçu en un seul clic, en vous assurant que votre disposition correspond instantanément à votre vision.

Cette approche de conception prête à l'emploi vous permet de construire plus rapidement et de vous concentrer sur les aspects créatifs de votre projet au lieu des tâches répétitives du style des éléments individuels.

Cohérence: maintenir un style uniforme sur les pages

Un avantage majeur d'un flux de travail prédéfini est la cohérence. En utilisant des préréglages d'élément et de groupe d'options, vous vous assurez que chaque page de votre site Web adhère aux mêmes règles de conception, de la typographie à l'espacement aux couleurs.

Définir un seul groupe d'options préréglé en tant que par défaut du bouton garantit que les tailles de police et les styles de votre site restent uniformes, peu importe où ils apparaissent. Cette cohérence renforce l'identité visuelle de votre site et lui donne un aspect poli et cohérent.

Plutôt que de gérer des styles incohérents sur différentes pages, vous pouvez maintenir un système de conception unifié qui améliore l'expérience utilisateur et rend votre site plus professionnel.

Évolutivité: élargissez et mettez facilement la conception du site

Les préréglages facilitent la mise à l'échelle de votre site Web au fur et à mesure de sa croissance. Que vous ajoutiez de nouvelles pages ou modifiez la conception de celles existantes, vous pouvez mettre à jour votre conception rapidement et efficacement. Si vous devez ajouter une nouvelle page, appliquez simplement l'élément existant et les préréglages du groupe d'options, en vous assurant que la nouvelle page s'adapte parfaitement au reste de la conception de votre site.

Besoin de faire des mises à jour globales? Avec le système prédéfini de Divi, vous pouvez modifier un préréglage une fois et le refléter automatiquement dans toutes les instances où ce préréglage est appliqué. Par exemple, si vous souhaitez modifier la couleur de tous les boutons de votre site, mettez simplement à jour le préréglage du bouton, et chaque bouton lié à ce préréglage sera instantanément mis à jour.

Cette évolutivité signifie qu'au fur et à mesure que votre site évolue, vous pouvez continuer à développer votre conception sans avoir à retravailler chaque élément individuellement. Que vous ajoutiez un blog, de nouveaux produits ou des sections entièrement nouvelles, votre conception restera cohérente et cohérente.

Flexibilité: remplacer les éléments individuels sans casser le système

Bien que les préréglages vous donnent une approche structurée de la conception Web, elles permettent toujours la flexibilité. Si vous devez faire des ajustements à un élément spécifique, vous pouvez remplacer le préréglage pour cet élément sans affecter le reste de la conception.

Par exemple, si vous appliquez un élément préréglé à un module de texte de présentation mais que vous devez ajuster la taille de l'icône ou l'espacement pour une instance spécifique, vous pouvez apporter ces modifications directement sur le module sans affecter d'autres instances du préréglage ailleurs sur le site. Avec les préréglages de groupe d'options, vous pouvez modifier les paramètres individuels, tels que la taille de la police ou la couleur du bouton, pour des éléments spécifiques tout en conservant les styles de base sur le site.

Cette flexibilité est essentielle pour obtenir un look personnalisé pour des sections uniques de votre site. Il permet une personnalisation détaillée sans casser la cohérence et la structure que les préréglages fournissent. Au fur et à mesure que votre conception évolue, vous pouvez continuer les éléments fins au besoin, offrant un équilibre de contrôle et de facilité qui rend le processus plus lisse et plus adaptable.

Commencez à concevoir plus intelligemment avec des préréglages en divi 5

L'adoption d'un flux de travail prédéfini redéfinira la façon dont vous créez des sites Web avec Divi. En tirant parti des préréglages d'éléments et des préréglages de groupe d'options, vous pouvez créer des sites Web visuellement étonnants, très adaptables et faciles à gérer. Les préréglages de groupe d'options sont disponibles en Divi 5 exclusivement, donc c'est le meilleur moment pour commencer à se familiariser avec l'interface Divi 5!