Rempiré un site Web en 5 minutes avec des attributs d'étendue

Le rebrandage de votre site Web ne nécessite pas de reconstruction complète, bien qu'elle le ressent souvent. Les polices sont coincées dans des pièces distinctes, les couleurs sont réparties sur les sections et l'espacement est caché dans des paramètres individuels. Et après la mise à jour de la page d'accueil, vous trouvez d'autres pages nécessitant les mêmes modifications. C'est la routine habituelle, mais il y a un moyen plus rapide.

Avec des attributs d'étendue dans Divi 5, vous pouvez styliser un seul élément et appliquer instantanément ce look à chaque module similaire entre les lignes, les sections et même la page entière. Faisons de la façon de l'utiliser pour renommer un site Web complet en quelques minutes, pas des heures.

Quelles sont les attributs d'étendue dans divi 5

Extend Attributs est une fonctionnalité Divi 5 qui vous permet de prendre la conception d'un module et de l'appliquer à d'autres éléments ou modules qui l'entourent. Cela signifie que si vous avez stylé un bouton, un titre ou un bloc de texte, vous n'avez pas à recréer ces styles à partir de zéro, car vous pouvez simplement les étendre à d'autres éléments.

Voici comment cela fonctionne dans la pratique. Vous commencez par modifier n'importe quel module dans le constructeur visuel. Ensuite, au lieu de répéter ces modifications de module par module, cliquez simplement avec le bouton droit sur le module et choisissez Extend Attributs.

Divi demandera où vous voulez que ces styles aient. Une fois que vous avez confirmé, tous les modules correspondants adoptent les mêmes styles. Extension Attributs ne recherche pas ce qui correspond, mais copie l'apparence actuelle et l'applique à votre cible de choix.

Cela en fait l'un des moyens les plus rapides de déployer des changements de conception sans microgestion de chaque bloc. Il vous aide à transformer le style répétitif en une seule action, peu importe si vous construisez à partir de zéro ou renommandez une disposition entière.

Comment prolonger les attributs aide à renommer un site Web plus rapidement

Nous parcourons la façon dont vous pouvez utiliser les attributs Extend seuls et également avec les préréglages du groupe d'options pour accélérer votre processus de rebranding de site Web.

Utilisation d'attributs d'étendue dans Divi 5

Le processus est simple: style un module, cliquez avec le bouton droit pour choisir les attributs d'étendue et étendez ces choix de conception à chaque module similaire, sans ouvrir deux fois un panneau de réglage unique. Passons-y en utilisant un véritable exemple.

Dites que vous souhaitez renommer tous vos boutons d'appel à l'action. Commencez par styliser un module de bouton à l'intérieur du constructeur visuel.

Une fois que vous avez terminé, cliquez avec le bouton droit et sélectionnez Étendre les attributs. (Nous avons sélectionné des attributs de conception de bouton d'étendre car nous voulons seulement étendre les styles, pas le contenu. Vous remarquerez également de nombreuses options, ce qui vous aide à micro-sélectionner des propriétés spécifiques.)

Le panneau d'attributs Extende s'ouvrira et vous pouvez choisir parmi plusieurs options différentes pour décider comment et où vos modifications de conception doivent être appliquées.

• (1) Étendre à partir de l'élément: le module dont vous étendez, comme le bouton dans notre cas. Ceci est automatiquement rempli en fonction de ce que vous avez cliqué avec le bouton droit.
• (2) Étendre à l'emplacement: Choisissez jusqu'au chemin de la conception. Nous avons sélectionné une page entière car nous voulons que tous les boutons de la page changent.
• (3) Étendre au type d'élément: Choisissez les types de modules qui devraient recevoir les nouveaux styles. Par exemple, seuls les modules de bouton ou tous les modules similaires.
• (4) Type d'attribut à étendre: spécifiez ce que vous souhaitez copier. Nous avons choisi des attributs de conception et laissé les autres.
• (5) Groupe d'options à étendre: décidez quel (s) groupe (s) d'options appliquer: texte, bouton, bordure, espacement, etc.
• (6) Champs modifiés à étendre: vous pouvez également limiter votre sélection à une seule propriété de style ou choisir tous les champs modifiés pour étendre toutes les modifications que vous avez apportées.

Après avoir sélectionné vos préférences, cliquez sur Étendre les attributs et les nouveaux styles seront appliqués à tous les autres boutons de la page.

Avez-vous remarqué comment il n'y avait pas besoin de rechercher des valeurs correspondantes? En effet, les attributs Extend ne se soucient pas des styles originaux. Il copie l'aspect actuel du module sélectionné et le colle directement sur chaque module similaire de votre emplacement choisi.

C'est ce qui le rend si utile pour les packs de mise en page et les sites Web existants. Extende Attributs vous donne un contrôle total avec un module stylé et un clic, que vous ajustez les tailles de police, la mise à jour des couleurs ou les ajustements.

Apprenez tout sur les attributs d'étendue

Utilisation des préréglages de groupe d'options avec des attributs d'étendue

Lorsque vous travaillez sur un site Web avec plusieurs pages, il ne suffit pas de simplement copier les styles visuellement. Vous voulez un système qui colle, et c'est là que les préréglages entrent en jeu.

Les préréglages vous permettent d'économiser un groupe de styles à l'intérieur de n'importe quel module et de les réutiliser sur votre site. Combinez cela avec les attributs Extend, et vous avez un moyen rapide et flexible de renommer non seulement une page, mais sur l'ensemble de votre site Web. Cette combinaison vous aide également à résoudre votre site Web, de sorte que si vous avez besoin de renommer à nouveau, vous pouvez facilement modifier les préréglages et tous les modules où ils sont utilisés à jour également.

Revenons à l'exemple du bouton pour comprendre comment cela fonctionne.

Nous avions stylé un bouton avec un tout nouveau look. Maintenant, au lieu d'étendre les paramètres sous forme de valeurs statiques, nous les enregistrerons sous forme de préréglages.

Voici où se trouve les attributs Extend. Sélectionnez individuellement si vous souhaitez étendre uniquement les préréglages sélectionnés ou choisissez les préréglages du bouton Extenger pour reprendre tout.

Lorsque vous étendez, Divi ne copie pas seulement le look; Il applique votre préréglage enregistré dans les coulisses. Ainsi, tout autre bouton qu'il touche utilise désormais le même préréglage.

Pourquoi ajouter une autre étape? C'est là que les avantages de votre site Web à l'épreuve de votre site Web. Supposons que dans les prochains mois, vous décidez de modifier votre style de bouton plus tard. Voudriez-vous étendre à nouveau les styles? Non, non?

Eh bien, vous n'avez même pas besoin de le faire car il vous suffit de mettre à jour le préréglage une fois. Étant donné que tous vos modules de bouton ont été construits avec le même préréglage, chaque instance l'utilisant se met à jour automatiquement.

De plus, une fois enregistré, les préréglages de groupe d'options sont également disponibles sur d'autres pages. Ainsi, lorsque vous avez fini de renommer votre page d'accueil et de passer à d'autres, vous appliquerez simplement vos préréglages enregistrés et les étendez en quelques minutes.

C'est pourquoi l'utilisation des préréglages de groupe d'options avec des attributs Extend est un moyen plus innovant de renommer. Vous obtenez une cohérence visuelle et un système facile à mettre à jour sans refaire votre travail.

Apprenez tout sur les préréglages du groupe d'options

Vous voulez essayer cela vous-même? Vous aurez besoin de Divi 5, qui apporte des attributs étendus, des préréglages de groupe d'options et de nombreuses autres fonctionnalités dans le nouveau constructeur. Il a été repensé à partir de zéro pour la vitesse, le contrôle et un flux de travail de conception plus lisse.

Comment renommer un site Web avec des attributs

Maintenant que vous avez vu comment les attributs Extend fonctionnent et comment il se marie avec les préréglages du groupe d'options, il est temps de l'appliquer à un vrai site Web.

Pour cette procédure pas à pas, nous utiliserons le pack de mise en page AI du logiciel. Il s'agit d'un site Web complet avec des pages comme Home, About, Contact et Pricing. Nous ne visons pas ici une refonte complète. C'est juste un changement de marque léger, le genre que nous ferions normalement dans nos mises à jour mensuelles.

Pour commencer, regardez les éléments qui définissent l'identité visuelle de votre site, telles que les boutons, les en-têtes, les textes et le texte du corps. Ces modules apparaissent sur plusieurs pages et portent la majeure partie de la personnalité de la marque. Une fois que vous avez resté quelques-uns, des attributs étendus vous permettent de pousser ces changements partout où ils apparaissent.

Faisons exactement quoi mettre à jour.

Modules clés de renommée visuelle à travers la disposition

Nous allons commencer par la page d'accueil, car elle donne le ton au reste du site. La plupart des sites Web répètent les mêmes modèles de conception sur plusieurs pages, donc une fois que nous mettons à jour la page d'accueil, vous aurez les bases de tout le reste.

Après avoir scanné la disposition, nous avons identifié les éléments les plus visibles qui façonnent l'apparence et la sensation de la marque. Ce sont des boutons, des titres, des souplesseurs, du texte du corps et des images. Comme nous avons déjà renommé nos boutons, nous commencerons par des titres.

Modules de capture de rebranding

Tout d'abord, personnalisez tout module de cap pour refléter votre nouvelle marque. Je vais commencer par H4S.

Une fois que vous êtes satisfait du style, cliquez avec le bouton droit sur le module et choisissez Étendre les attributs . Sélectionnez la portée de la page entière et du type de module au texte . Appliquez la modification à tous les modules H4 de la page.

De même, vous renvoyez le H1, H2 et H4S pour unifier la typographie et donner à votre site une voix cohérente en quelques clics sans relance chaque module de cap manuellement.

Texte du corps de rebranding pour une meilleure lisibilité

Mettons à jour le texte du corps. Commencez par choisir n'importe quel module de texte avec un bloc de paragraphe. Personnalisez pour correspondre au ton de votre marque. Lorsque vous êtes satisfait des modifications, cliquez avec le bouton droit sur le module et sélectionnez Étendre les attributs . Choisissez d'appliquer la mise à jour sur tous les modules de texte de la page.

Cela donne à vos paragraphes un style cohérent à travers la page en quelques secondes et élimine la nécessité de modifier chacun individuellement.

Fondations de renommée

Ensuite, je veux ajouter une bordure pour rationaliser tous mes modules de texte de présentation. Je vais donc styliser une colonne, puis cliquer avec le bouton droit sur la colonne dans l'onglet Design de la ligne et sélectionner les styles de copie . Ensuite, collez les styles à la colonne suivante et ainsi de suite.

Vous remarquerez que j'ai changé la disposition de la ligne en flexion et divi a automatiquement égalisé les hauteurs de la colonne, en gardant les traces alignées, quelle que soit la quantité de contenu qu'ils contiennent. Cela fonctionne parce que Divi prend désormais en charge les fonctionnalités Flexbox, qui vous aident à créer plus rapidement des dispositions réactives et intelligentes.

Readrand d'autres pages à l'aide de préréglages enregistrés

Maintenant que la page d'accueil est mise à jour, vous n'avez pas besoin de répéter le processus à partir de zéro. Vous pouvez dupliquer des sections ou des lignes dans d'autres pages, ou, puisque vous avez enregistré vos nouveaux styles en tant que préréglages de groupe d'options, vous êtes déjà prêt.

Vos préréglages enregistrés apparaîtront sur toutes les pages.

Tout ce que vous avez à faire est de les appliquer si nécessaire et d'utiliser des attributs d'étendue pour pousser les styles instantanément. Il n'y a pas de modifications manuelles et aucun travail de conception répété.

Vous pouvez suivre le même processus pour renommer les autres pages de votre site Web.

Extension Attributs vous donne la flexibilité de profiter à nouveau de rebrandir. Ils sont excellents lorsque vous voulez relier visuellement les modules sur une page.

Mais si vous avez besoin d'échanger une valeur spécifique, comme un code hexadécimal, une taille de police ou une unité d'espacement, sur différents modules, vous voudrez essayer de trouver et de remplacer. Il fonctionne particulièrement bien pour les packs de mise en page qui utilisent des valeurs à code dur. Vous pouvez utiliser Find et remplacer pour échanger ceux avec des variables de conception enregistrées pour obtenir plus de flexibilité pour les futures mises à jour.

Conseil de pro: utilisez des attributs d'étendue avec des variables de conception

Extension des attributs ne copient pas seulement les styles statiques; Il peut également reporter vos variables de conception enregistrées. Par exemple, si vous avez attribué une variable de police de cap vers un module de texte, vous pouvez étendre les paramètres de ce module à tous les autres modules de texte de la page. Au lieu de chaque ruban portant des valeurs codées durs, ils héritent tous de la même variable.

Cela signifie que les mises à jour futures sont encore plus faciles: ajustez la variable une fois dans le gestionnaire de variables et que chaque module étendu se met à jour automatiquement. C'est un moyen puissant de combiner les attributs d'étendue avec le système variable de Divi 5 pour un contrôle évolutif à l'échelle de la marque.

Étendre les attributs vous permet de renommer sans reconstruire

Le rebranding ne doit pas signifier reconstruire. Avec les attributs d'étendue, vous stylisez un module et appliquez ce look au reste, des heures de réduction des modifications en quelques secondes.

Que vous travailliez avec un pack de mise en page ou que vous mettiez à jour un site en direct, Divi 5 vous donne le moyen le plus rapide de rafraîchir votre conception sans toucher chaque élément.