Tout ce que vous devez savoir sur la gestion des attributs de Divi 5

Divi 5 introduit une approche rationalisée pour créer des sites Web. Chaque ajustement de conception, des polices aux couleurs en passant par l'espacement, circule sans effort sur votre site, ce qui permet d'économiser des heures de travail répétitif. La fonction de gestion des attributs de Divi 5 vous permet de créer des sites Web plus rapidement et avec une flexibilité accrue, ce qui en fait un nouveau déploiement pratique de la fonctionnalité de la phase alpha divi 5.

Dans cet article, nous plongerons dans tout ce que vous devez savoir sur la gestion des attributs de Divi 5 - ce que c'est, ce qui le rend si utile pour les concepteurs et comment vous pouvez l'utiliser pour créer des sites Web cohésifs et professionnels plus rapidement et plus efficacement.

Divi 5 est prêt à être utilisé sur de nouveaux sites Web, mais nous ne recommandons pas encore de convertir les sites existants en Divi 5.

Plongeons-nous.

Qu'est-ce que la gestion des attributs dans Divi 5?

La gestion des attributs dans Divi 5 est une fonctionnalité qui peut améliorer la façon dont les concepteurs Web gèrent et appliquent des styles, des préréglages et du contenu sur leurs sites Web. Que vous souhaitiez modifier le style de typographie d'un bouton, dupliquer le style d'un module CTA entier ou de réinitialiser le look d'une section sur la valeur par défaut, la gestion des attributs rend le processus plus facile, plus rapide et plus intuitif que jamais.

Cette fonctionnalité est intégrée dans le constructeur visuel et est accessible en cliquant sur les menus et panneaux de paramètres. Cette approche est une pierre angulaire de l'approche de conception prédéfinie de Divi.

Composants clés de la gestion des attributs

La gestion des attributs est construite sur deux piliers clés: le contrôle granulaire et l'intégration prédéfinie.

Contrôle granulaire sur les attributs

Les concepteurs peuvent gérer les attributs à plusieurs niveaux - des éléments, comme un module CTA entier, des préréglages de groupe d'options (typographie ou des styles de bordure), un onglet (conception, contenu ou avancé) ou des champs individuels (comme la couleur d'arrière-plan d'un bouton). Cette flexibilité permet des ajustements larges et précis. Par exemple, vous pouvez copier tous les attributs d'un module ou coller sélectivement uniquement ses styles de bordure à un autre élément, en vous assurant d'appliquer exactement ce dont vous avez besoin sans modifications indésirables.

Intégration avec le groupe d'options et les préréglages élémentaires

La gestion des attributs fonctionne de main dans la main avec le système prédéfini de Divi 5. Les préréglages de groupe d'options sont des ensembles de style réutilisables - comme un arrière-plan, une bordure ou un style de rembourrage - qui peut être appliqué sur plusieurs modules pour la cohérence à l'échelle du site.

D'un autre côté, les préréglages d'éléments sont des packages de conception pré-style qui fonctionnent avec des modules de conception, comme un texte de présentation, un CTA, un accordéon ou un curseur. La gestion des attributs vous permet de copier et de coller ces préréglages ou leurs attributs, ce qui facilite la reproduction de conceptions complexes ou à mettre à jour des styles spécifiques sur votre site Web.

Pourquoi l'attribut la gestion est importante

La gestion des attributs permet aux concepteurs et aux développeurs de créer des sites Web plus rapidement et plus efficacement avec Divi. L'application de préréglages ou des attributs de copie en un seul clic permet un prototypage rapide et des modifications de style à grande échelle tout en maintenant la précision. En tant que colonne vertébrale du cadre prédéfini de Divi 5, il vous libère de vous concentrer facilement sur la création de beaux sites Web cohésifs.

Comprendre les préréglages dans Divi 5

Les préréglages sont la pierre angulaire du flux de travail de conception efficace de Divi 5, permettant facilement des sites Web cohérents et évolutifs. Explorons comment ils améliorent la gestion des attributs.

Capacités accrues avec la gestion des attributs

En intégrant les préréglages dans le flux de travail de copie et de coller, Divi 5 permet aux concepteurs de:

Reproduire efficacement les conceptions

Les préréglages des éléments permettent aux utilisateurs de copier une conception complète du module - par exemple, un module CTA entièrement de style - et de le coller ailleurs, garantissant un style et un contenu identiques avec une seule action. La collation d'un élément préréglé peut instantanément appliquer instantanément l'arrière-plan, la typographie et les styles de bouton d'un CTA à un autre module.

Appliquer des styles ciblés

Vous pouvez copier et coller des styles plus ciblés, comme les préréglages du groupe d'options. La possibilité de copier et de coller des éléments de conception singulière permet un contrôle granulaire, de laisser les concepteurs copier et coller des attributs de style spécifiques sur plusieurs éléments, tels que les frontières, les ombres ou les paramètres de conception d'un titre. Cela garantit la cohérence à l'échelle du site sans écraser des attributs non liés, comme le contenu ou la mise en page.

Les préréglages rationalisent la gestion des attributs en réduisant le style manuel, en facilitant le maintien de la conception cohérente sur vos sites Web. Ils comblent les éléments individuels et les systèmes de conception globale, permettant des mises à jour rapides et un style cohérent.

Exemple pratique

Considérez un scénario où vous concevez un site Web de plusieurs pages avec un style de bouton cohérent dans un module CTA. Voici comment les préréglages et la gestion des attributs fonctionnent ensemble:

Définissez d'abord un groupe préréglé de groupe d'options nommé Branding Button . En utilisant la gestion des attributs, vous pouvez copier ce préréglage à partir d'un bouton dans un CTA et le coller sur des boutons dans une section à propos, un héros ou tout autre bouton de la page. Cela garantit que chaque bouton partage le même look et la même sensation sur l'ensemble de votre site Web, avec les paramètres prédéfinis intacts.

Comment fonctionne la gestion des attributs

Le système de gestion des attributs de Divi 5 simplifie le style et la gestion des éléments de conception avec des outils pour copier, coller et réinitialiser les attributs entre les modules, les colonnes, les lignes et les sections.

Copie d'attributs

Le processus est simple. Cliquez avec le bouton droit sur n'importe quel élément - module, colonne, ligne ou section - et sélectionnez les attributs de copie. Cela capturera tous les attributs, y compris le contenu, les styles et tous les préréglages associés au module. Alternativement, vous pouvez utiliser un raccourci clavier - Shift + Commande + C sur un Mac ou Shift + Alt + C sur un ordinateur Windows - pour copier des styles sans accéder aux paramètres du module.

Pour un contrôle plus granulaire, vous pouvez copier des attributs sur le terrain, le groupe d'options ou le niveau prédéfini des éléments pour un contrôle plus précis. Par exemple, vous pouvez vous diriger vers l'onglet de contenu d'un module d'en-tête et copier les attributs de titre, lien, arrière-plan ou étiquette d'administration en cliquant avec le bouton droit au-dessus d'un groupe de champ spécifique.

Les attributs peuvent également être copiés à partir de l'onglet Design, ce qui facilite la copie des préréglages ou des paramètres de groupe de groupes pour la police, la taille du texte, l'espacement des lettres, etc. Vous ne pouvez copier que les styles que vous souhaitez sans vous soucier des paramètres d'écrasement où vous copiez les attributs.

Vous pouvez également copier des attributs dans l'onglet avancé, ce qui facilite la réplication des extraits CSS, des conditions d'affichage, des transitions, des effets de défilement et du positionnement en un seul clic.

Attributs de collage

Le concept est le même lors de la coloration des attributs, mais il y a plus d'options. Dans Divi 5, vous pouvez coller tous les attributs, qui colleront tous les contenus, les styles et les préréglages associés des paramètres du module source au nouveau. Semblable à la copie des attributs, vous pouvez utiliser un raccourci clavier pour les coller - Shift + Command + V sur un Mac ou Shift + Alt + V sur Windows - appliquant les paramètres en un seul clic.

Vous ne pouvez également pas coller uniquement certains attributs, comme les paramètres de conception d'un module de cap, qui copie tous les paramètres de la balise de conception - ombres de texte, police, taille de cap, espacement, frontières, etc.

De même, vous ne pouvez pas coller uniquement les paramètres de style du module, qui incluent l'espacement (rembourrage ou marge) et le dimensionnement.

Si vous souhaitez simplement coller le même contenu d'un module à un autre, sélectionnez les attributs de contenu coller et Divi remplacera le contenu existant dans le module par le contenu copié de la précédente.

Enfin, si le module source dispose de préréglages associés, la sélection des préréglages en tête de pâte appliquera le préréglage associé au module et le affectera dans le menu déroulant Preset.

En plus de coller des styles, des paramètres de conception et des préréglages, vous pouvez sélectionner des attributs spécifiques pour coller. Par exemple, vous pouvez choisir de coller des attributs de conception, de style ou de contenu sélectionnés, et Divi 5 remplira les options dans un menu supplémentaire, vous permettant de sélectionner les paramètres spécifiques que vous souhaitez coller.

Réinitialiser les attributs

Le système de gestion des attributs de Divi 5 vous permet de réinitialiser les attributs pour tout module, complètement ou uniquement des éléments spécifiques.

Par exemple, vous pouvez réinitialiser tous les attributs - Shift + Commande + R sur un Mac ou Shift + Alt + R sur Windows - supprimant tous les contenus, styles et tout préréglage associé en un seul clic.

Cependant, vous pouvez réinitialiser certains attributs, comme les paramètres de style ou de conception. Pour être encore plus précis, vous pouvez réinitialiser uniquement les paramètres de sélection, de conception ou de contenu appliqué, comme l'espacement, les animations de défilement ou les extraits CSS.

Applications et avantages pratiques

Nous avons démontré pourquoi la gestion des attributs est un ajout nécessaire à Divi 5. Ci-dessous, nous explorons les cas d'utilisation clés, soulignons les avantages de la fonctionnalité et fournissons un exemple pratique pour illustrer son impact sur la promotion d'un flux de travail rationalisé.

Cas d'utilisation

La gestion des attributs garantit la cohérence de la marque en permettant aux concepteurs de copier et coller les styles sur plusieurs pages. Par exemple, si votre marque nécessite que tous les modules d'accordéon aient une police et une couleur d'icône spécifiques, vous pouvez copier les attributs à partir d'un module d'accordéon et les appliquer à toutes les instances.

La gestion des attributs vous permet de dupliquer rapidement et de modifier les préréglages pour tester les variations de conception. Par exemple, vous pouvez copier un élément préréglé pour un module CTA, modifier ses couleurs ou disposition, et l'appliquer à différents modules pour comparer les conceptions sans recommencer à zéro. Cela accélère l'expérimentation et l'itération pendant le processus de conception.

Vous pouvez également effectuer des mises à jour sélectives en réinitialisant les attributs spécifiques pour s'aligner sur les directives de conception mises à jour. Par exemple, si un client demande une nouvelle couleur d'arrière-plan pour les boutons, vous pouvez réinitialiser les attributs de bouton d'un bouton dans un CTA, créer un nouveau style et le coller sur d'autres boutons de la page, laissant d'autres styles comme la typographie ou les frontières intactes.

Avantages

Il y a quelques avantages à utiliser la gestion des attributs pour créer votre site Web dans Divi 5, notamment:

• Ils gagnent du temps: la gestion des attributs élimine le style manuel répétitif, un majeure-suspension de temps pour les grands sites Web. La copie et le collage des attributs ou des préréglages à travers les éléments prennent quelques secondes, libérant des concepteurs pour se concentrer sur la créativité plutôt que sur les tâches fastidieuses.
• Ils rendent vos conceptions évolutives: les préréglages et la gestion des attributs rendent les mises à jour à l'échelle du site sans effort. Une seule modification à un groupe de groupe d'options peut se propager sur tous les éléments liés, garantissant la cohérence même sur d'énormes sites avec des dizaines de pages.
• Les attributs fournissent une précision: le contrôle granulaire de la gestion des attributs garantit que seuls les attributs souhaités sont copiés, collés ou réinitialisés. Cette précision empêche les changements indésirables, tels que l'écrasement du contenu lors de l'application d'un préréglage de style, ce qui donne aux designers la confiance dans leurs modifications.

Conseils et meilleures pratiques

L'adoption des stratégies intelligentes et des meilleures pratiques est importante pour maximiser le potentiel de la gestion des attributs. Ces conseils vous aideront à tirer parti de la gestion des attributs efficacement, en garantissant des flux de travail efficaces, des conceptions cohérentes et un processus de conception en douceur.

Apprenez l'interface de gestion des attributs

L'un des meilleurs aspects de la gestion des attributs est de son intérêt profondément dans le constructeur visuel. Assurez-vous d'expérimenter ce que fait chaque raccourci et de prendre le temps d'apprendre à les utiliser. Chaque option a un objectif spécifique. Par exemple, vous pouvez copier les attributs lorsque vous survolez un module de cap et un clic droit.

Lorsque vous souhaitez coller ces attributs, il existe plusieurs options à choisir. Par exemple, vous pouvez coller tous les attributs de la tête (y compris la conception, le style et le contenu) ou coller des attributs spécifiques ou des préréglages sélectivement sur tout module qui a une rubrique.

Commencez par des variables et des préréglages

Établir une solide fondation de conception en créant des variables de conception globales, des préréglages par défaut, des préréglages d'éléments et des préréglages de groupe d'options au début de votre projet. Par exemple, créez un groupe de groupes d'options pour les bordures d'image et un élément par défaut prédéfini pour les modules d'image pour garantir un style cohérent dès le départ. Cette approche proactive minimise les retouches et aligne tous les éléments avec l'identité de votre marque.

Organiser les préréglages

Nommez vos préréglages clairement et descriptivement pour éviter la confusion lors des tâches de gestion des attributs. Par exemple, étiquetez un groupe d'options préréglé sous la bordure arrondi 15px plutôt que comme un nom générique, comme le style 1 . La dénomination claire facilite l'identification et l'application du préréglage correct lors de la copie ou du collage des attributs d'un préréglage entre les modules.

Vérifier les points d'arrêt

Assurez-vous que les attributs copiés, comme les styles réactifs, s'alignent avec les points d'arrêt réactifs personnalisables de Divi 5 pour le bureau, la tablette et le mobile. Par exemple, lors de la copie d'un style de texte, vérifiez qu'il se rend correctement sur tous les appareils de la vue réactive du constructeur visuel avant de le coller ailleurs. Cela garantit que vos conceptions restent polies et fonctionnelles sur chaque taille d'écran.

Suite à ces meilleures pratiques, vous pouvez exploiter la gestion de l'attribut pour créer des conceptions cohérentes, efficaces et professionnelles dans Divi 5.

Libérez la puissance de la gestion des applications de Divi 5

La fonction de gestion des attributs de Divi 5 redéfinit l'efficacité de la conception Web en permettant aux concepteurs de copier, coller et réinitialiser les attributs entre les modules, les colonnes, les lignes ou les sections pour une marque cohérente. Son contrôle granulaire et son interface intuitive en font une pierre angulaire de la conception Web moderne, simplifiant les tâches complexes en actions précises.

Êtes-vous prêt à découvrir la gestion des attributs par vous-même? Téléchargez le dernier divi 5 public alpha et plongez dans cette nouvelle fonctionnalité pour voir comment il peut changer la façon dont vous créez des sites Web avec Divi. Juste une note rapide: Divi 5 est prêt à briller sur de nouveaux sites Web, mais nous ne recommandons pas encore de migrer les sites existants.

Alors que Divi 5 continue d'évoluer avec des fonctionnalités passionnantes telles que le générateur de boucle de requête et les contrôles Flexbox, il est maintenant le moment d'exploiter la gestion des attributs et de faire passer vos conceptions Web au niveau supérieur.

Nous aimerions entendre vos pensées. Partagez votre expérience avec nous dans la section des commentaires ci-dessous, ou rejoignez la conversation sur les réseaux sociaux en nous marquant sur votre plate-forme préférée.