La flexibilité de s'étendre à différents types d'éléments dans Divi 5

Faire des mises à jour de conception ne devrait pas avoir envie de cocher les cases. Mais trop souvent, même quelque chose de simple, comme modifier un style de bouton ou mettre à jour une police, signifie modifier chaque module manuellement. C'est lent, répétitif et facile à gâcher.

Divi 5 corrige cela avec des attributs de prolongation, une version améliorée des styles Extend de Divi 4. Il vous permet d'appliquer un changement une fois et de l'étendre n'importe où, même sur différents types d'élément et de modules. Dans cet article, nous examinerons comment cette flexibilité peut vous faire gagner du temps et nettoyer votre flux de travail.

Qu'est-ce que les attributs d'étendue dans Divi 5?

Les attributs d'étendue vous permettent d'étendre les styles, le contenu ou les préréglages d'un élément à d'autres en quelques clics sans avoir à modifier chaque module manuellement.

Abonnez-vous à notre chaîne YouTube

Mais ce n'est pas votre flux de travail de copie et de coller typique (nous l'avons aussi, si vous êtes intéressé). Les attributs de l'étendue fonctionnent sur différents types d'élément et de modules, pas seulement des types identiques. Par exemple, vous pouvez styliser un titre une fois et appliquer la même police à un titre à bascule, un nom de module de personne ou un titre de texte. Tant qu'ils partagent le même groupe de style, comme le texte, ils suivront.

Et ça ne s'arrête pas là. Vous pouvez étendre à peu près n'importe quoi, n'importe où. Copiez une couleur d'arrière-plan d'une section et appliquez-la à chaque ligne, section, colonne ou module sur votre page.

Ou réutiliser les styles de bouton sur différents modules; Vous pouvez étendre les styles d'un appel à l'action à un formulaire de contact. Une fois que vous commencerez à l'utiliser, vous modifierez la façon dont vous pensez aux mises à jour. Vous ne serez plus coincé à faire les mêmes choses encore et encore. Avec les attributs Extend, vous resterez cohérent, gagnez du temps et déplacez-vous dans la disposition des changements plus rapidement et avec plus de contrôle.

Utilisation d'attributs d'étendue dans Divi 5

Les attributs d'étendue sont simples à utiliser et vous donnent beaucoup de flexibilité. Pour commencer, cliquez avec le bouton droit sur l'élément que vous avez déjà stylé. Il peut s'agir d'un module, d'une colonne, d'une ligne ou même d'une section entière. Dans le menu qui apparaît, sélectionnez Étendre les attributs.

(Vous pouvez également cliquer avec le bouton droit directement sur un groupe de réglage spécifique, comme la police ou l'espacement. Cela ouvre le panneau d'attributs Extende avec ce groupe déjà sélectionné, ce qui rend le processus plus rapide et plus précis lorsque vous savez exactement ce que vous ciblez.)

Une fois que le panneau d'attributs Extende s'ouvre, vous décidez quoi étendre et où l'appliquer.

Vous verrez quelques options claires:

• (1.) Étendre de l'élément: l'élément que vous avez stylé et que vous souhaitez copier.
• (2.) Étendre à l'emplacement: Choisissez jusqu'où les modifications doivent aller. Juste la section actuelle, la ligne parentale ou la page complète.
• (3.) Étendre au type d'élément: Choisissez le type d'élément que vous souhaitez cibler, tels que uniquement des modules de texte ou tous les modules.
• (4.) Type d'attribut à étendre: Choisissez quoi copier: conception, contenu, préréglage ou tout mélange de ceux-ci.
• (5.) Groupe d'options à étendre: Concentrez-vous sur un groupe spécifique de paramètres, comme le texte, la bordure ou les styles de bouton.
• (6.) Champs modifiés à étendre: vous ne pouvez pas appliquer uniquement les champs que vous avez changés ou tout inclure.

Voici un exemple rapide. Disons que vous avez stylé une direction à l'intérieur d'un module de texte et que vous souhaitez que la même police appliquée aux autres titres de la même section. Vous définissez l' emplacement sur la section parent , le type d'élément sur le texte, puis choisissez le groupe d'options du corps (car nous voulons seulement transférer les styles de corps).

Une fois appliqué, chaque module de texte correspondant de cette section se met à jour avec le même style de police.

C'est ce qui rend les attributs d'étendue particulièrement utiles. Vous n'êtes pas coincé à copier des designs entiers. Vous pouvez choisir exactement ce que vous voulez étendre, juste un groupe ou plusieurs propriétés à la fois. Vous pouvez même transporter à la fois du contenu et une conception dans un module complètement différent.

Mais si les paramètres se sentent beaucoup au début, comprenez que c'est complètement normal. Vous devrez peut-être tester quelques combinaisons pour comprendre comment les lunettes, les types d'éléments et les groupes de définition fonctionnent ensemble. Une fois qu'il clique, il devient l'un des outils les plus efficaces de votre flux de travail Divi.

Dans la section après ensuite, nous allons parcourir des exemples pratiques pour montrer comment tout se réunisse. Une fois que vous comprenez le fonctionnement de chaque paramètre, les attributs étendus deviennent un outil puissant pour construire des conceptions cohérentes sans répéter le même travail.

Apprenez tout sur les attributs d'étendue de Divi 5

Comment les attributs d'étendue de Divi 5 surpasse les styles d'étendue de Divi 4

Si vous avez utilisé Divi 4, vous êtes probablement familier avec les styles Extende. Il vous permet de copier des paramètres de conception d'un élément à un autre, mais uniquement dans le même type d'élément. Cela l'a rendu utile pour les correctifs rapides, mais limitant les mises à jour plus complexes.

Les attributs d'étendue de Divi 5 deviennent beaucoup plus loin cette idée. Il ne copie pas seulement la conception, il fonctionne également avec le contenu et les préréglages , vous donnant un contrôle total sur ce qui est appliqué et où. Vous pouvez même choisir des propriétés spécifiques à étendre , comme uniquement la couleur d'arrière-plan ou le rayon de bordure, sans affecter rien d'autre.

Vous n'êtes plus verrouillé dans les types de modules de correspondance ou ne répétez les mêmes modifications à travers une disposition. Étendre les attributs vous permet de choisir exactement ce qu'il faut réutiliser et jusqu'où il devrait aller, qu'il s'agisse de sections ou d'une page entière. Il est conçu pour s'adapter à votre flux de travail et rendre le style plus rapide, plus intelligent et plus cohérent.

Les attributs d'étendue sont disponibles dans Divi 5 - Téléchargez la dernière version pour l'essayer maintenant.

5 exemples pratiques de ce que vous pouvez étendre (et comment)

Jusqu'à présent, nous avons parlé de ce que les attributs étendus peuvent faire. Voyons maintenant comment vous pouvez réellement l'utiliser. Ces exemples traversent différentes combinaisons de paramètres, vous pouvez essayer de gagner du temps et d'appliquer plus efficacement les mises à jour.

1. Étendre les styles à travers différents types d'éléments

Extension Attributs ne vous enferme pas dans une hiérarchie fixe. Vous pouvez appliquer des styles sur différents niveaux de disposition, que vous passiez d'une section à un module ou d'une ligne à une colonne.

Cela facilite la création de connexions visuelles sur votre mise en page. Un module de témoignage peut correspondre à la section dans laquelle il se trouve. Un module d'appel à l'action peut ramasser les styles de la ligne ci-dessus. Vous n'êtes pas limité à l'extension des styles entre des éléments similaires, tant qu'ils partagent un groupe de style. Selon vos besoins de conception, vous pouvez passer de large à spécifique ou vice versa.

S'étendant d'une section à une colonne

Disons que vous avez ajouté un rayon de bordure subtil à la section pour adoucir les bords de la disposition. À l'intérieur de cette section, vous avez une colonne avec une image d'arrière-plan, et vous voulez qu'elle reflète les mêmes coins arrondis pour la cohérence visuelle.

Au lieu de réappliquer manuellement le rayon, cliquez simplement avec le bouton droit sur la section, choisissez Extend Attributs , définissez le type d'élément sur la colonne et sélectionnez Border dans les groupes d'options.

La colonne héritera du même rayon de bordure, de sorte que votre image d'arrière-plan ou votre disposition imbriquée ne casse pas le flux visuel.

S'étendant d'une section à une ligne

Un autre exemple consiste à étendre le rembourrage d'une section aux lignes ou à d'autres sections pour maintenir un espace blanc cohérent. Cliquez avec le bouton droit sur la section, choisissez Extend Attributs , définissez le type d'élément sur la ligne et sélectionnez l'espacement dans les groupes d'options.

Toutes les lignes héritent désormais des mêmes valeurs de rembourrage, donnant à la page un espacement cohérent.

S'étendant d'une section à un module

Disons qu'une section a déjà l'arrière-plan, la bordure ou l'espacement que vous voulez. Au lieu de recréer ces styles ailleurs, vous pouvez les transmettre directement à un autre élément, même s'il est imbriqué à l'intérieur ou placé à l'extérieur de cette section.

Par exemple, si une section a l'arrière-plan que vous souhaitez dans un témoignage, utilisez simplement des attributs d'étendue. Choisissez le témoignage comme type d'élément, définissez la portée sur la page entière et assurez-vous que les attributs d'arrière-plan sont sélectionnés.

Une fois appliqué, le témoignage hérite de ce fond sans avoir besoin de modifications manuelles.

Dans la conception Web, des détails visuels cohérents comme les couleurs d'arrière-plan, les bordures et l'espacement aident à tout lier ensemble. Avec les attributs d'étendue, vous pouvez facilement transporter cette cohérence sur votre disposition et créer une expérience polie et polie sans repartir à partir de zéro à chaque fois.

S'étendant d'une colonne à une ligne

Vous pouvez également suivre une approche inverse, par exemple, d'une colonne à une ligne. Disons que vous avez ajouté une ligne propre et continue pour encadrer vos colonnes. Si vous voulez la ligne, il fait partie du même style de bordure pour la cohérence visuelle, vous pouvez réutiliser ces styles instantanément. Étendez simplement le groupe d'options de bordure à la ligne parent.

La ligne ramasse les mêmes paramètres de bordure, créant une connexion visuelle claire entre les deux. Cela fonctionne particulièrement bien lors de la construction de sections en couches ou de dispositions en boîte qui reposent sur des contours ou des séparateurs cohérents.

Ce ne sont que quelques combinaisons, qui peuvent également être inversées . En pratique, vous pouvez étendre les styles sur à peu près n'importe quel niveau de mise en page. Les attributs de l'étendue vous donnent une pleine flexibilité, de l'application de l'espacement des colonnes aux modules à l'intérieur pour transporter des ombres de section en lignes ou boutons. Vous pouvez également:

• Copiez un radius frontalier à partir d'une ligne et appliquez-le à un module
• Réutiliser une animation de transformation d'un module à travers les colonnes
• Étendre l'alignement des polices d'une section à tous les modules de texte à l'intérieur
• Appliquer des filtres d'image d'une colonne à une autre pour un style cohérent
• Si deux éléments partagent un groupe de style et un contexte, les attributs étendus peuvent probablement le gérer.

L'objectif n'est pas de mémoriser toutes les combinaisons mais d'expérimenter et de découvrir ce qui fonctionne pour votre mise en page. Une fois que vous commencez à penser à des mouvements de conception réutilisables au lieu de modifications ponctuelles, votre flux de travail devient naturellement plus rapide, plus propre et plus cohérent.

2. Étendre les styles à travers différents types de modules

Extend Attributs reconnaît les groupes de style partagé comme le bouton, vous pouvez donc appliquer le même style sur différents modules en quelques étapes.

Par exemple, disons que vous avez conçu un bouton que vous aimez et que vous souhaitez l'utiliser sur un formulaire de contact. Au lieu de le redresser manuellement, cliquez avec le bouton droit sur le bouton d'origine, sélectionnez Étendre les attributs , choisissez le groupe d'options du bouton et définissez le type d'élément sur le formulaire de contact . Définissez ensuite la portée sur une page entière .

La conception sera instantanément sur le bouton Soumettre du formulaire de contact sans ajustement manuel.

Vous pouvez également répéter le processus pour d'autres modules. Si vous souhaitez étendre le même style de bouton à un e-mail Optin, modifiez simplement le type d'élément en e-mail Optin et le bouton correspond automatiquement.

Ce type de style de module croisé permet d'économiser des heures lorsque vous travaillez avec des dispositions vives. Parce que Divi traite les boutons comme faisant partie d'un groupe partagé, vous pouvez coiffer une fois et réutiliser n'importe où sans rompre la cohérence.

3. Enregistrer et étendre les préréglages du groupe d'options

Extend Attributs fonctionne également avec les préréglages, vous permettant de réutiliser les styles enregistrés sur votre mise en page.

Par exemple, imaginez que vous avez conçu une colonne avec des coins arrondis, une bordure subtile et une ombre douce. Vous enregistrez cela en tant que préréglage de la frontière pour l'utiliser à nouveau plus tard.

L'option de préréglage de la bordure Extende n'apparaît que si l'élément a des préréglages enregistrés.

Maintenant, au lieu d'appliquer manuellement ce préréglage à d'autres colonnes, vous pouvez l'étendre en une seule étape. Cliquez avec le bouton droit sur la colonne d'origine, choisissez Extende Attributs et sélectionnez Étendre Border Preset dans le panneau.

Une fois sélectionné, définissez votre type d'élément sur la colonne et la section Scope vers Parent ou une page entière , selon l'endroit où vous le souhaitez. Le style prédéfini est instantanément transporté aux autres colonnes sans la remettre à nouveau.

Cela facilite le maintien de votre disposition cohérente, en particulier lorsque vous travaillez avec des styles de bordure personnalisés, des ombres ou tout autre design groupé sous un préréglage.

4. Style une fois puis étendre uniquement ce que vous avez changé

Lors de la construction d'une disposition à partir de zéro, le style chaque élément peut se sentir sans fin. Extension des styles une propriété à la fois, comme la première ombre, puis la bordure, puis l'espacement, ne fait que vous ralentir.

C'est là que l'option All Modified Fields entre en jeu. Au lieu de sélectionner chaque paramètre manuellement, vous pouvez styliser un élément, puis appliquer uniquement les modifications que vous avez apportées au reste.

Par exemple, disons que vous avez ajouté une bordure douce et une ombre légère à une image dans une galerie.

Pour appliquer le même look à toutes les autres images, cliquez avec le bouton droit sur l'image stylée, choisissez Étendre les attributs et sélectionnez tous les champs modifiés dans les champs modifiés pour étendre la colonne.

Seules les propriétés que vous avez changé se reproduiront. Tout le reste reste intact. Cela maintient votre conception cohérente sans écraser d'autres paramètres, et c'est l'une des façons les plus simples d'accélérer le style en vrac sans perdre le contrôle.

5. Étendre les styles à l'intérieur d'un seul module

Les attributs d'étendue fonctionnent non seulement entre les modules mais aussi en eux. Prenez le module d'accordéon, par exemple. Si vous avez déjà stylé un article et que vous avez ensuite dû répéter ces changements cinq fois, vous savez à quel point cela peut être fastidieux.

Maintenant, il vous suffit de coiffer le premier élément et d'étendre les styles plus loin.

Une fois que vous avez appliqué votre conception, ouvrez simplement le panneau d'attributs Extend, choisissez le module d'accordéon et sélectionnez les champs modifiés spécifiques que vous souhaitez appliquer au reste.

Lorsque vous confirmez, tous les autres éléments de ce même module mettent automatiquement à jour. C'est un moyen rapide de garder votre style cohérent et d'appliquer des modifications sur tous les éléments avec une seule action.

Extension Attributs déverrouille la vraie flexibilité de conception

Les attributs Extend de Divi 5 vous donnent un moyen plus rapide et plus ciblé de modifier la conception. Des boutons et des titres aux frontières, au contenu et même à des éléments imbriqués, vous avez un contrôle total sur ce qui est copié et où il va.

Il fonctionne sur différents modules, sections de mise en page et niveaux de conception, tout en gardant votre flux de travail fluide et efficace. Mais vous ne pouvez le croire que si vous l'essayez par vous-même. Expérimentez donc avec les attributs d'étendue dans Divi 5 aujourd'hui et partagez votre expérience avec nous ci-dessous!