Comprendre les couleurs relatives dans la conception Web

Dans la conception Web, même les décisions les plus simples peuvent se multiplier. Ce qui commence comme un seul choix de conception se développe rapidement en dizaines de variations visuelles pour les interactions, les arrière-plans, les frontières, etc. Votre version peut devenir encombrée de valeurs incompatibles et de réglages manuels sans système cohérent.

La syntaxe des couleurs relatives dans CSS offre une approche plus intelligente et plus évolutive. Il vous permet de définir des variations visuelles en fonction d'une seule source, en gardant votre conception cohérente et facile à gérer. Normalement, cela nécessite d'écrire du code personnalisé. Mais avec Divi 5, vous pouvez utiliser ces techniques modernes visuellement, dès le début. Regardons de plus près.

Problèmes communs de gestion des couleurs

Cette couleur de marque parfaite que vous choisissez peut rapidement se multiplier en dizaines de variations dispersées sur votre site. Voici quelques problèmes qui contribuent à ce problème:

Gestion des variations pour une couleur

Vous commencez par une base bleue et avez rapidement besoin de dizaines de variations. Le sélecteur de couleurs de votre constructeur devient un gâchis. Bleu clair, bleu plus léger, bleu foncé, bleu plus foncé, bleu fané - chacun est enregistré comme une couleur séparée.

Votre marque bleue s'étend sur vingt nuances différentes sur votre site. Certaines sections utilisent le bleu d'origine, d'autres utilisent une version plus claire que vous avez faite il y a trois semaines, et vos boutons utilisent la nuance plus foncée que vous avez faite pour un meilleur contraste.

Aucune de ces couleurs ne se connecte aux autres. Lorsque votre client veut du violet au lieu du bleu, vous faites face à la mise à jour de chaque couleur à la main. Vous passerez des heures à cliquer sur des modules. Vous traquez chaque ombre. Vous espérez que vous n'en manquez aucun.

Une collection de nombreuses nuances bleues similaires à gauche se transforme en violets dispersés et non liés à droite, car les mettre à jour un par un est fastidieux et nécessite une consistance constante. Plus encore, ces variations de couleur sont généralement globales et n'ont aucune connexion.

Le problème d'opacité

De nombreux constructeurs de pages incluent des contrôles de transparence, qui peuvent être un cauchemar pour la cohérence des couleurs. Vous pouvez créer une superposition bleue parfaite avec 60% d'opacité, mais plus tard, vous avez besoin de ce même rouge transparent pour une section différente.

Votre constructeur de pages ne se souvient pas du mélange exact, vous êtes donc à gauche de glorer le curseur d'opacité et d'essayer de correspondre à ce que vous avez fait auparavant.

Les tentatives 1, 2 et 3 varient en teinte et en transparence car le globe oculaire ne donne pas de résultats précis même avec des contrôles précis.

Certains constructeurs de pages vous permettent d'économiser des couleurs transparentes. D'autres non. Vous vous retrouvez avec un tas de bleu transparent similaire.

Ils sont tous légèrement différents. Votre conception perd la cohérence. Vous ne pouvez pas recréer de manière fiable la même couleur transparente sur divers modules. Chaque fois que vous avez besoin de transparence, vous partez de zéro. Vous devinez les valeurs d'opacité. Vous espérez qu'ils correspondent à votre conception existante.

Créer des variables manuellement

La plupart des constructeurs de pages offrent une forme d'économie de couleurs, mais cela devient rapidement ingérable. Vous enregistrez des couleurs avec des noms génériques comme «Jaune 1», «Jaune 2» et «Yellow Light».

Six mois plus tard, vous n'avez aucune idée de ce que le jaune fait quoi. Votre palette de couleurs enregistrée devient un gâchis de couleurs similaires avec des noms dénués de sens. Votre bibliothèque de couleurs se développe sans aucun système organisationnel. Vous avez trois oranges différentes qui se ressemblent presque, mais elles servent diverses fins.

Une grille de nombreux échantillons de couleurs avec des nuances qui se chevauchent et des noms incohérents et peu clairs contribuent à une palette encombrée et déroutante qui est difficile à organiser ou à utiliser efficacement.

Les membres de l'équipe ajoutent leurs variations de couleur, créant des nuances en double avec des noms différents. Votre marque orange existe comme «orange», «marque orange», «orange primaire» et «Main Orange». Personne ne sait lequel utiliser.

Certains développeurs essaient de résoudre ce problème en écrivant des variables CSS personnalisées. Cela leur donne un meilleur contrôle sur les relations couleur.

Mais maintenant, vous avez créé un obstacle technique. Les membres de votre équipe non technique ne peuvent plus mettre à jour les couleurs et vos clients ne peuvent pas faire de simples changements de couleur. Vous devenez responsable de chaque ajustement des couleurs mineures.

Quelles sont les couleurs relatives dans CSS (et pourquoi vous en avez besoin)

Les couleurs relatives résolvent vos problèmes de couleur. Vous choisissez une couleur de marque. CSS fait toutes les versions dont vous avez besoin. Les légers pour les arrière-plans. Les sombres pour les frontières. Ceux clairs pour les superpositions. Tous à partir d'une couleur de départ.

CSS fonctionne comme un outil de couleur dynamique. Vous lui dites: «Rendez ce briquet jaune». CSS fait le travail. Votre bouton rouge a besoin de s'estomper lorsqu'il oscille. CSS ajoute la transparence. Votre en-tête bleu a besoin d'une bordure plus sombre. CSS le crée tout de suite.

Les flux de travail traditionnels nécessitaient plus d'efforts manuels. Les concepteurs ont fait des ensembles de couleurs dans Photoshop. Les codeurs ont utilisé des outils comme SASS. Les constructeurs de sites Web devaient deviner les couleurs assorties. CSS le gère désormais automatiquement.

Comment CSS crée des couleurs à partir de couleurs

Le mot «From» dit à CSS d'utiliser une couleur existante comme point de départ. Vous donnez une couleur CSS et il casse cette couleur en morceaux qu'il peut utiliser.

Votre couleur de départ devient la base. CSS le divise en parties. Montants rouges, montants verts, montants bleus. Ou teinte, luminosité et saturation si vous préférez ces contrôles.

Vous pouvez commencer par n'importe quel format de couleur. Utilisez une couleur hexagonale comme # E91E63. Dites à CSS de travailler avec HSL pour des changements de luminosité faciles. Sortez-le en RVB si votre code en a besoin. CSS convertit tout automatiquement.

Le code suit un modèle simple. Tout d'abord, vous dites d'où obtenir la couleur, puis vous dites quoi changer à ce sujet. Vous pouvez tout garder de la même manière, mais ajouter la transparence ou changer la teinte mais garder la luminosité. Les deux fonctionnent de la même manière.

Briser les couleurs en parties

Différents formats de couleurs vous donnent différents outils. RVB vous permet de changer séparément rouge, vert et bleu. HSL vous donne des commandes de teinte, de saturation et de légèreté.

Voici comment cela fonctionne. Vous écrivez RVB (de # FF4081 RVB). CSS prend ce code hexagonal rose et le divise en nombres rouges, verts et bleus. Ensuite, vous pouvez utiliser ces numéros comme vous le souhaitez. Le motif reste le même: la fonction des couleurs (à partir de votre canal canal 1-couleur1 canal2).

Ainsi, au lieu d'écrire des couleurs à partir de zéro, vous construisez sur une couleur existante et changez uniquement les pièces que vous souhaitez modifier.

Chaque pièce est convertie pour correspondre à ce que vous avez choisi. La conversion de cet hex rose vous donne r = 255, g = 64, b = 129. Utilisez-les tel quel ou changez-les avec calc ().

Vous pouvez également mélanger et assortir les canaux. Vous voulez que tous les pixels rouges soient les mêmes? Utilisez RVB (de var (–color) ggg). Cela prend la valeur verte et l'utilise pour le rouge, le vert et le bleu, créant un ton gris à partir de votre couleur d'origine.

Support du navigateur et autres considérations

Les grands sites ne peuvent pas ignorer les visiteurs car ils doivent accueillir tout le monde. Les anciennes versions de Safari fonctionnent différemment. Les versions Chrome gèrent certaines choses à leur manière. Firefox, c'est propre. Vous finirez par écrire trois versions de code différentes pour un effet de couleur.

Tout ce travail supplémentaire enlève du temps à de meilleures choses. Vous pouvez améliorer les fonctionnalités du site et ajouter des fonctionnalités que les gens veulent.

De nombreux développeurs utilisent sélectivement les couleurs relatives. Les outils internes et les projets personnels fonctionnent bien car vous contrôlez le navigateur. Les sites de marketing et le travail client nécessitent une planification plus minutieuse.

La technologie fonctionne très bien là où elle est soutenue. La question est de savoir si la complexité supplémentaire correspond à la chronologie de votre projet et à l'équipe ou à la capacité technique du client. Mais pour la plupart des cas, ce serait exagéré et des frais généraux pour la plupart des membres de l'équipe.

C'est exactement pourquoi l'équipe Divi est intervenue. Nous avons vu des concepteurs de sites Web aux prises avec la compatibilité du navigateur tout en manquant des outils de couleur puissants. Notre solution dans Divi 5 prend les meilleures parties des couleurs relatives et les enveloppe dans un système qui fonctionne partout et ne nécessite aucun codage.

Comment divi 5 facilite les couleurs relatives

Maintenant, vous connaissez la puissance des couleurs relatives; Cependant, vous avez peut-être réalisé qu'il n'est pas aussi facile à mettre en œuvre. Divi 5 a adopté une approche différente et construit la flexibilité des couleurs directement dans son interface visuelle. Mais découvrons ce qu'est exactement Divi.

Qu'est-ce que Divi?

Divi est le constructeur de page WordPress le plus populaire. Il priorise la conception visuelle et vous donne un contrôle complet sur votre conception.

Vous pouvez regarder vos modifications se produire en direct, ajuster les tailles de police ou l'espacement des lignes et voir immédiatement les résultats sur votre page. Vous avez accès à plus de 200 modules qui vont partout où vous les voulez. Les blocs de texte, les titres et les pièces de contenu fonctionnent en équipe. Pas de modèles rigides qui pressent vos idées en formes maladroites.

Voici ce qui rend Divi différent: plus de 2000 dispositions prêtes à l'emploi conçues pour de vraies entreprises. Ce ne sont pas des modèles de démarrage de base. Chaque conception cible des industries spécifiques. Vous trouverez des dispositions qui parlent la langue de votre public et correspondent aux besoins de votre entreprise.

Sauter la page vierge blues avec des sites rapides divi

Les sites rapides divi corrigent cette toile vide intimidante qui tue des projets avant leur début. Vous obtenez des sites Web de démarrage professionnel avec une conception solide que notre équipe de conception construit en utilisant des images originales et des illustrations que vous ne trouverez nulle part ailleurs.

Si vous voulez quelque chose de plus personnalisé, Divi Quick Sites fonctionne avec Divi AI pour créer des dispositions personnalisées en fonction des détails de votre entreprise. Décrivez votre cabinet de conseil ou votre restaurant, et il produit des pages pertinentes avec un contenu spécifique à l'industrie.

Ce ne sont pas des wireframes de base: vous recevez des titres réels, du contenu écrit et des images qui correspondent à votre type d'entreprise. Il conçoit même des en-têtes et des pieds de page, des pages de produits et des modèles de billet de blog, entre autres, pour vous.

Vous pouvez définir vos polices et couleurs de marque dès le début ou laisser l'IA les choisir pour vous. L'IA travaille dans ces directives. Par la suite, tout reste complètement modifiable, vous pouvez donc ajuster la typographie jusqu'à ce qu'elle correspond à vos besoins exacts.

Contrôle complet sur la conception de votre site, maintenant avec l'IA

Le constructeur de thèmes vous met en charge de la conception sur l'ensemble de votre site Web. Créez des en-têtes personnalisés qui reflètent la personnalité de votre marque. Créez des dispositions de blogs qui gardent les lecteurs engagés avec de longs articles. Vos 404 pages peuvent rester sur la marque avec des polices et un style assortis.

Divi AI, comme mentionné précédemment, place l'IA directement à l'intérieur de votre flux de travail de conception. Créez des titres qui vous semblent avoir écrits et des descriptions de produits qui capturent votre voix de marque.

L'édition photo peut être effectuée à l'intérieur du constructeur. Dites à l'AI quels changements vous voulez dans une image et qu'il gère les modifications.

Besoin d'images fraîches? Cela les crée aussi.

Compléter les sections de page qui correspondent parfaitement à votre entreprise.

Plus des extraits de code lorsque vous en avez besoin.

Divi 5: la prochaine évolution

Divi 5 entre les tests alpha avec une mission claire: améliorer les performances de votre processus de conception Web. Nous avons écouté de vrais commentaires sur ce qui vous ralentit et ce qui vous aiderait.

Tout ce que vous aimez dans le divi actuel reste en place. Nous l'avons juste amélioré. L'interface semble plus propre. Les pages se chargent plus rapidement qu'auparavant. Les contrôles répondent juste lorsque vous cliquez sur eux.

Nous avons reconstruit la fondation en utilisant les normes Web d'aujourd'hui. Cela signifie moins de bugs étranges et de performances plus lisses dans son ensemble.

Vous passez moins de temps à combattre le constructeur et plus de temps à concevoir. Vos sites semblent plus professionnels car la cohérence se produit automatiquement. Les clients obtiennent de meilleurs sites Web car vous pouvez vous concentrer sur leurs besoins au lieu de problèmes techniques.

La version alpha est prête à être utilisée sur de nouveaux sites Web, bien que nous ne recommandons pas de convertir vos sites Web Divi 4 existants en Divi 5.

Quoi de neuf dans Divi 5

Divi 5 apporte des modifications majeures à la façon dont vous créez des sites Web. La version publique Alpha fonctionne très bien pour les nouveaux projets en ce moment. Nos équipes de développement expédient de nouvelles fonctionnalités toutes les deux semaines, avec plusieurs mises à jour majeures déjà publiées depuis le début d'Alpha.

Voici quelques mises à jour clés:

• La base de code moderne accélère les choses en chargeant uniquement les modules dont vous avez réellement besoin, supprimant le ballonnement de code qui a ralenti Divi 4.
• Un système complet de disposition Flexbox comprend désormais de nouveaux modèles de lignes, un centrage vertical automatique, un emballage de contenu et une distribution d'espacement via des commandes visuelles.
• Un tout nouveau constructeur de boucle qui répète des modules, des groupes ou des sections avec un contenu dynamique et prend en charge des boucles imbriquées pour des structures de données complexes.
• Les couleurs relatives avec HSL fournissent un contrôle des couleurs dynamique basé sur les valeurs de teinte, de saturation et de légèreté.
• Le système basé sur HTML-5 remplace complètement les shortcodes , ce qui signifie moins de bogues et une meilleure compatibilité WordPress.
• L'interface Visual Builder a obtenu une cure de jouvence complète, avec des modes clairs et sombres, des panneaux d'amarrière, des fenêtres à onglets, des raccourcis clavier et une vue de couches améliorée avec du fil à fil.
• Les points d'arrêt réactifs personnalisables remplacent les trois fixes de Divi 4, vous donnant plus de contrôle par la mise à l'échelle de la toile pour voir exactement à quoi les conceptions regardent différentes tailles d'écran.
• Les groupes de modules fonctionnent comme des conteneurs polyvalents qui regroupent les éléments liés ensemble afin que vous puissiez les styliser comme des unités ou les déplacer sans perdre de relations.
• Les variables de conception vous permettent de définir des couleurs, des polices, des nombres, des images, du texte et des URL à l'échelle mondiale sur l'ensemble de votre site.
• Les préréglages du groupe d'options enregistrent des propriétés de conception spécifiques comme la typographie ou les ombres qui fonctionnent sur différents types de modules.
• Les unités CSS avancées prennent désormais en charge les fonctions CLAMP (), CALC (), Min () et Max () via l'interface visuelle sans écrire de code.
• Le système d'interactions crée des fenêtres, des bascules, des effets de défilement et des effets de mouvement de souris sans plugins externes.

Qu'est-ce qui va…

• Modules WooCommerce reconstruits à partir de zéro en utilisant une architecture Divi 5 avec une compatibilité préréglage complète et variable.
• L'inspecteur d'élément fournira de nouveaux outils de débogage et de développement pour les utilisateurs avancés.
• De même, le module de carrousel de groupe peut vous aider à créer un carrousel composé de groupes, puis à développer le contenu de chaque diapositive en utilisant l'ensemble complet d'éléments de Divi pour concevoir tout style de carrousel que vous souhaitez.

Construire des palettes qui s'allument avec Divi 5

Votre sélecteur de couleurs devient un gâchis lorsque vous avez besoin de dizaines de variations de couleurs de votre marque. Divi 5 corrige cela en connectant chaque nuance à une couleur de base. Les étapes ci-dessous vous montrent comment construire un système de couleurs évolutif et maintenable.

1. Configuration de votre fond de teint couleur primaire

Ouvrez le constructeur visuel et trouvez l'icône du gestionnaire variable dans la barre latérale gauche. Cliquez dessus pour voir la fondation des couleurs de votre site. Divi 5 est livré avec des variables de couleurs prédéfinies qui vous attendent déjà: les couleurs primaires, secondaires, de cap et du corps.

Vous ne pouvez pas supprimer ces variables prédéfinies, mais vous pouvez modifier leurs valeurs. Cela fonctionne parfaitement parce que ces quatre couleurs gèrent la plupart des sites Web. Cliquez sur la variable de couleur primaire et entrez la couleur principale de votre marque. Cela devient le fondement de toutes les autres variations de couleurs sur votre site.

Votre variable de couleur principale doit refléter la version la plus saturée de la couleur de votre marque. Considérez-le comme la version pure et non diluée avant de créer des arrière-plans plus légers ou d'ajouter des effets de transparence. Cela vous donne le plus de plage lors de la construction de variations plus tard.

La couleur secondaire fonctionne bien pour les accents, les boutons ou les reflets qui doivent se démarquer de la couleur de votre marque principale. Réglez votre couleur de cap sur quelque chose qui se lit bien sur vos arrière-plans. La couleur du corps reste généralement gris foncé ou noir pour la lisibilité.

Ces quatre variables prédéfinies se connectent au système entier de Divi. Lorsque vous créez des modules, ces couleurs apparaissent comme des options rapides. Changez votre primaire du bleu au vert ici, et chaque module en utilisant cette variable principale met à jour instantanément sur votre site.

Évitez de créer des variables personnalisées excessives dès le début. Au lieu de cela, commencez par ces quatre préréglages. La plupart des sites Web pourraient avoir besoin de ces couleurs de base, avec des variations créées via des contrôles de couleurs relatifs de Divi 5. Mais bien sûr, si vous en avez besoin, vous pouvez ajouter autant de variables que vous le souhaitez.

2. Création de nuances de couleur avec commandes HSL

Maintenant, ajoutez une autre variable de couleur. Cette fois, vous construirez une teinte à partir de votre couleur primaire au lieu de définir une nouvelle couleur de base. Dans le sélecteur de couleurs, sélectionnez votre variable de couleur principale dans la liste.

Vous voyez maintenant trois curseurs: teinte, saturation et légèreté. Ceux-ci contrôlent comment votre couleur de base change.

Hue se déplace autour de la roue chromatique de 0 à 360 degrés. Laissez-le tranquille lorsque vous faites des nuances de la même couleur. La saturation passe de 0% à 100% et contrôle à quel point votre couleur est vive. À 0%, toute couleur devient gris. À 100%, vous obtenez une intensité complète.

La légèreté passe de 0% à 100%. Ce curseur crée vos nuances réelles. À 0, vous obtenez la forme pure de votre couleur. Déplacez-le jusqu'à 50% pour des nuances plus claires. Déposez-le à -20% pour les nuances plus sombres.

Vous pouvez mélanger et assortir ces couleurs HSL pour construire de nouvelles couleurs et variations au besoin.

Créons deux variations de notre couleur primaire. Ajoutez une variable et nommez votre nouvelle teinte quelque chose de clair comme la «lumière primaire» ou «sombre primaire». Répétez ce processus pour créer plusieurs nuances. Une configuration typique utilise votre primaire de base à 30% de légèreté pour les arrière-plans et autres, et sombre à -15% de légèreté.

Vous pouvez également ajouter des nuances aussi plus claires et plus sombres pour votre couleur secondaire.

3. Construire des variables de couleurs imbriquées

Vous avez fait la lumière primaire et l'obscurité primaire à l'étape 2. Maintenant, vous pouvez créer plus de couleurs à partir de ces nuances.

Faites une nouvelle variable appelée «ombre de fond de carte». Choisissez votre lumière primaire dans la liste. Baisser l'opacité à 50%. Cela vous donne une teinte à peine pour les arrière-plans de la carte. Ensuite, créez un «bouton de survol». Choisissez l'obscurité primaire. Laisser une légèreté encore 10% pour le rendre encore plus sombre. Maintenant, vos boutons peuvent être une couleur plus foncée lorsque les gens planent sur eux.

Vous pouvez également créer des couleurs personnalisées à partir de vos nuances. Faites de la «l'ombre du texte» en choisissant le bouton en survol. Réglez l'opacité à 15%. Maintenant, votre ombre de texte se connecte à Button Hover, qui se connecte au primaire Dark, qui se connecte au primaire.

Essayez «l'accent de bordure» de la lumière primaire. Bump saturation à 100% pour le faire apparaître davantage. Cela vous donne une bordure lumineuse qui correspond toujours à votre marque. Chaque chaîne s'allonge. Les cinq couleurs remontent à un choix principal.

Ajoutez des teintes similaires pour votre couleur secondaire pour une belle sélection de couleurs à sélectionner.

4. Appliquer des couleurs relatives à votre site

Vous avez construit votre fondation couleur et créé toutes ces nuances. Vient maintenant la partie pratique: les mettre en œuvre sur votre site Web.

Ouvrez n'importe quel module dans le constructeur visuel. Cliquez sur une option de couleur pour les arrière-plans, le texte ou les bordures. Vos variables de couleurs enregistrées apparaissent juste à l'intérieur du sélecteur de couleurs. Vous n'aurez pas besoin de vous souvenir des noms ou des codes hexagonaux.

Choisissez votre couleur primaire pour les boutons principaux. Choisissez la lumière primaire pour les arrière-plans de la section. Utilisez l'obscurité primaire pour les bordures et les accents subtils comme les boutons CTA. Chaque sélection se connecte à votre système de couleurs de base.

Vos variables de couleur fonctionnent partout: les en-têtes, les pieds de page, les dispositions de blog et les pages de produits. Les membres de votre équipe et les clients peuvent choisir des couleurs sans deviner. Ils voient la «lumière primaire» au lieu de codes hexagonaux aléatoires dans le sélecteur. Des noms clairs signifient moins d'erreurs et un travail de conception plus rapide. Tout le monde sait quelle couleur sert quel but.

Ce système basé sur des variables empêche l'incohérence visuelle. Vous n'aurez pas à économiser des dizaines de blues similaires ou à vous demander quelle teinte utiliser pour les effets de survol. Vos variables vous donnent une structure tout en conservant la flexibilité de la conception.

5. Mettre à jour les couleurs en cas de besoin

Votre client décide qu'ils veulent du bleu de minuit au lieu de simplement bleu. Avec la gestion traditionnelle des couleurs, cela signifie des heures de sifflement à travers des modules et de mettre à jour manuellement chaque teinte ou de mettre à jour un tas de couleurs globales à la fois. Avec les couleurs relatives de Divi 5, vous changez une variable et tout le reste suit.

Vos arrière-plans de lumière primaires deviennent vert clair. Les frontières sombres primaires passent au vert foncé. Les couleurs de survol du bouton Ajustent à un bleu plus foncé. Toutes ces relations imbriquées que vous avez établies restent intactes.

L'ombre de votre arrière-plan de la carte avait une opacité de 15% de la lumière primaire. Il devient 15% d'opacité de la nouvelle lumière primaire verte sans que vous le touchez. Votre ombre de texte se connecte à Button Hover, qui se connecte au primaire Dark, qui se connecte au primaire.

L'ancienne manière signifiait recréer une harmonie de couleur à partir de zéro à chaque fois. Vous préservez les relations tout en changeant la fondation et votre conception reste équilibrée.

Vos couleurs, vos règles

L'utilisation de couleurs incohérentes sape une bonne conception. Vous avez enregistré des teintes aléatoires avec des noms dénués de sens, la chasse à des modules pour les mises à jour et la reconstruction des palettes à partir de zéro chaque fois que les clients changent d'avis.

Les couleurs relatives de Divi 5 terminent ce cauchemar de workflow. Construisez une fois à partir d'une couleur de base et regardez automatiquement chaque mise à jour de variation sur votre site. Le système gère la compatibilité du navigateur, entretient des relations et maintient votre sélecteur de couleurs organisé, vous n'aurez donc pas besoin de jouer avec CSS.

Votre prochain projet mérite une meilleure gestion des couleurs. Téléchargez Divi 5 et voyez à quoi ressemble la conception organisée.