Les moyens les plus rapides de mettre à jour la conception de votre page avec Divi 5

Divi 5 présente une poignée de nouveaux outils intelligents pour vous aider à travailler plus rapidement et à concevoir plus librement. Mais avec tant de puissance à portée de main, il est facile de ne pas se sentir incertain de savoir par où commencer, en particulier lors de la mise à jour d'une disposition existante.

Vous savez probablement déjà comment modifier l'espacement, ajuster les couleurs et nettoyer les dispositions, donc ce post ne concerne pas les bases. Il s'agit de les faire plus rapidement avec Divi 5. Dans les étapes ci-dessous, nous parcourons un flux de travail de mise à jour pratique que vous pouvez suivre sur n'importe quelle page existante. Et si des changements récents se sont sentis écrasants, commencez ici. Vous serez facilité avec clarté et confiance.

8 étapes pour mettre à jour la conception de votre page avec Divi 5

Pour ce didacticiel, nous utilisons la page de destination de Business CV de la bibliothèque Divi Layout Pack.

Abonnez-vous à notre chaîne YouTube

Nous allons expliquer comment mettre à jour la page à l'aide de nouveaux outils de Divi 5, comme trouver et remplacer, concevoir des variables et étendre les attributs, pour accélérer votre flux de travail et réduire les modifications répétitives. Commençons.

1. Optimiser votre tableau de bord pour l'édition sans distraction

Même les interruptions mineures peuvent vous casser lorsque vous mettez à jour une mise en page. Vous pouvez sauter entre les sections, ouvrir à plusieurs reprises les paramètres et perdre la trace de l'endroit où vous vous êtes arrêté. Ces types de retards s'additionnent rapidement, en particulier sur des pages plus longues ou plus complexes.

Divi 5 aide à réduire cette friction avec un environnement d'édition plus flexible. Vous pouvez accueillir des panneaux pour garder les paramètres clés visibles, ouvrir plusieurs modules dans les onglets et utiliser le panneau Calques pour naviguer dans votre disposition sans défilement sans fin. Au lieu de cliquer à l'intérieur et à sortir des modules, vous pouvez tout garder ouvert et accessible lorsque vous vous déplacez.

Le panneau Calques vous donne un aperçu structurel complet de la mise en page, vous pouvez donc instantanément sauter à n'importe quelle section, ligne ou module simplement en cliquant. Il est particulièrement utile pour sauter sur de grandes pages sans faire défiler.

Plus tôt, le workflow signifiait souvent ouvrir un module, le sauver, faire défiler à nouveau, ouvrir le suivant et répéter ce cycle. Divi 5 saute tout ça. Vous pouvez ouvrir plusieurs modules dos à dos; Chacun reste visible comme un onglet dans votre panneau d'édition. Cela facilite la comparaison des paramètres ou la commutation entre les éléments sans fermer à plusieurs reprises et réouverture les paramètres des éléments.

Cela pourrait prendre un ajustement pour s'habituer au nouveau flux de travail. Alors que les panneaux se comportent différemment, donc la commutation entre les modules ne ressentira pas de la seconde nature immédiatement. Mais donnez-lui un peu de pratique, et ces petits changements commencent à s'additionner.

Lorsque vous suivez les étapes ci-dessous, essayez de travailler avec des panneaux différemment, amarrez-vous quelques-uns, empilez quelques onglets ou gardez le panneau des couches ouverts. Vous commencerez à ressentir ce qui fonctionne le mieux pour votre flux.

2. Définissez d'abord vos variables de conception globales

Lorsque vous gérez une disposition complète, la dernière chose que vous voulez est de vous répéter. Mais c'est exactement ce qui se passe lorsque chaque style est défini manuellement à l'intérieur de chaque module. Cela pourrait fonctionner au début, mais au fil du temps, votre page se transforme en patchwork de choix déconnectés. Finalement, quelque chose se manque toujours.

Les variables de conception vous aident à éviter cela. Ils vous donnent un endroit central pour définir votre langue de conception. Vous définissez des valeurs réutilisables pour les polices, les couleurs, l'espacement, les images, les URL ou les liens. Une fois appliqués, ces valeurs restent liées à chaque module qui les utilise.

Voici un exemple simple. Dites que vous voulez que tous vos titres utilisent la police Lato. Au lieu de choisir Lato dans chaque module, vous créez une variable de police . Donnez-lui un nom, sélectionnez Lato et enregistrez-le. Tout titre que vous liez à cette variable restera désormais synchronisé.

Si vous souhaitez passer à une police différente plus tard, mettez simplement à jour la variable. Chaque module connecté reflétera automatiquement le changement.

Et ce n'est qu'un cas d'utilisation. Vous pouvez également définir des variables pour un rembourrage de section cohérent, des styles de bouton, des couleurs d'arrière-plan ou tout ce que vous utilisez à plusieurs reprises. Vous n'avez pas besoin de tout définir à la fois si cela semble trop écrasant. Commencez par les styles que vous savez que vous réutilisez et élargissez votre système de conception à partir de là.

3. Remplacer les valeurs statiques par des variables de conception

Parfois, les dispositions ont des styles à code dur, donc les mettre à jour manuellement rend le processus incohérent. C'est pourquoi nous remplaçons les valeurs statiques par les variables globales que nous venons de définir.

Vous n'avez pas besoin de les traquer individuellement. L'outil Find and Remplace de Divi permet d'échanger facilement des valeurs statiques pour les variables en quelques clics. Disons que vos titres utilisent tous des polices sélectionnées manuellement. Ouvrez n'importe quel module d'en-tête, cliquez sur le champ de police et sélectionnez Rechercher et remplacer.

Dans le panneau de valeur Remplacer , survolez le champ et ouvrez le gestionnaire de variables . Sélectionnez la variable de la police de tous les titres et confirmez la modification.

Vous verrez la magie immédiatement: chaque instance de cette police à travers la disposition est remplacée immédiatement. Cette même méthode fonctionne pour les couleurs, l'espacement, les styles de bouton et tout ce que vous avez défini une variable.

Et vous n'avez pas à tout changer à la fois. Démarrez petit, choisissez les styles que vous réutilisez le plus, comme le rembourrage de section ou les arrière-plans des boutones, et les changer d'abord. Au fur et à mesure, votre mise en page passe d'un patchwork de modifications manuelles à un système entièrement connecté. Et lorsque ce système est en place, chaque changement futur devient plus facile, plus rapide et plus cohérent par défaut.

4. Utiliser les attributs d'étendue pour appliquer les mises à jour en secondes

Une fois vos valeurs globales en place, l'étape suivante est le raffinement. Vous vous retrouverez souvent à faire de petits ajustements aux sections individuelles et à souhaiter que vous puissiez apporter ces changements au reste de la disposition sans refaire le travail. Il est possible avec les attributs d'étendue.

Il vous permet de copier instantanément des styles, du contenu ou des préréglages d'un élément et de les appliquer à d'autres. Cela fonctionne également même si les modules ne sont pas du même type. Par exemple, si vous avez conçu une bordure et une ombre personnalisées pour une image, vous pouvez l'utiliser comme référence pour chaque image de la section.

Cliquez avec le bouton droit sur l'image stylée et choisissez Étendre les attributs.

Lorsque le panneau d'étendue s'ouvre, amartez-le sur le côté, car vous y reviendrez probablement. Dans les déroutes, définissez la section Scope sur Parent et le type d'élément à l'image, puis confirmez.

Cette action applique votre mise à jour à chaque image de cette section, sans avoir besoin de les toucher individuellement.

Et c'est là que les attributs Extend gagnent vraiment sa place. Il faut ce qui aurait été une série de modifications manuelles et répétitives et les transforme en une décision cohérente. Vous pouvez l'utiliser pour des sections avec plusieurs colonnes ou modules similaires, comme une galerie d'images ou des soulues. C'est le moyen le plus rapide d'apporter un sentiment de vernis à votre conception sans le temps de brûlure sur chaque module.

5. Enregistrer les modifications réutilisables en tant que préréglages du groupe d'options

Lorsque vous affinez votre disposition, vous allez probablement modifier l'espacement, les bordures ou les couleurs d'arrière-plan pour bien faire les choses. Au lieu de répéter ces ajustements à chaque fois, enregistrez-les sous forme de préréglages de groupe d'options.

Supposons que vous avez personnalisé l'espacement, la bordure et le fond d'une colonne. Vous aimez son apparence et voulez le réutiliser ailleurs. Ouvrez les paramètres de cette colonne, faites défiler le groupe de style que vous avez modifié (comme l'espacement ou la bordure), et cliquez sur l'icône prédéfinie pour l'enregistrer.

Pour appliquer le préréglage à d'autres colonnes, cliquez avec le bouton droit sur l'original et choisissez Étendre les attributs> Étendre les préréglages de colonnes . Dans le panneau, définissez votre étendue sur la ligne parent, choisissez la colonne comme type d'élément et appuyez sur les attributs d'étendue.

Ce préréglage s'applique désormais à chaque colonne de la ligne en un seul coup. Il est particulièrement utile pour les dispositions avec des éléments répétitifs tels que des tables de tarification, des souplesses, des témoignages ou partout où vous voulez une cohérence visuelle sans l'effort manuel. Et comme les préréglages sont enregistrés dans le pack de mise en page, vous les aurez également prêts à l'emploi sur d'autres pages.

6. Utilisez la copie / coller pour des modifications ponctuelles rapides

Une fois que vous avez étendu les styles à une section ou une ligne complète, vous pouvez toujours faire de petits ajustements ciblés. Peut-être qu'une seule colonne ou module a besoin d'un look légèrement différent. Au lieu de prolonger à nouveau les préréglages, utilisez la fonction de gestion des attributs.

Par exemple, si vous avez personnalisé la bordure et l'ombre d'une colonne et que vous en souhaitez qu'un ou deux autres correspondent, cliquez avec le bouton droit sur la colonne stylée et choisissez Copier les styles d'élément . Ensuite, cliquez avec le bouton droit sur la colonne que vous souhaitez mettre à jour et sélectionner les styles d'éléments coller .

Cela n'écrasera pas d'autres paramètres et fonctionne instantanément, ce qui le rend idéal pour les situations où vous souhaitez rester flexible. Vous pouvez copier et coller des styles à partir de presque tous les éléments et décider exactement quoi copier, qu'il s'agisse d'espacement, de couleurs, de bordures ou d'autres ajustements de conception.

Les attributs de prolongement gèrent les modifications en vrac et copier / coller gère les détails. Il est parfait pour affiner une mise en page qui est principalement terminée mais qui a encore besoin de quelques touches personnelles.

7. basculer entre les points d'arrêt personnalisés pour perfectionner la vue réactive

Assurez-vous que votre disposition de bureau a fière allure sur chaque taille d'écran. Les points d'arrêt personnalisables de Divi 5 facilitent cela en vous permettant de basculer entre la tablette, le téléphone et même les largeurs d'écran personnalisées en un seul clic. Les icônes de l'appareil sont juste à l'intérieur du constructeur, vous pouvez donc prévisualiser rapidement comment vos sections se comportent sur des écrans plus petits.

Si nécessaire, vous pouvez également définir vos propres points d'arrêt pour plus de contrôle.

C'est le moment idéal pour vérifier l'espacement, les tailles de police et l'alignement de l'image. Cela ne prend que quelques minutes, mais vous évite des problèmes de mise en page plus importants plus tard, en particulier sur les pages chargées de contenu ou axées sur la conversion. Et vous n'avez pas besoin de changer votre flux de travail. Les outils Divi fonctionnent tout aussi bien en vue, alors faites vos ajustements, prévisualisez la mise en page et continuez.

8. Mettez à jour vos variables de conception pour actualiser l'ensemble de la disposition instantanément

Plus tôt, nous avons configuré vos variables de conception globales et remplacé les valeurs statiques à l'aide de trouver et de remplacer. Et maintenant, votre disposition est entièrement connectée à un système de conception centralisé.

Les variables de conception rendent les mises à jour à l'échelle du site Web extrêmement faciles. Disons que votre marque met à jour sa typographie ou sa couleur principale. Au lieu de creuser dans chaque module pour apporter les mêmes modifications à plusieurs reprises, vous mettez simplement à jour la variable enregistrée. Ce seul changement s'applique instantanément sur toute votre disposition.

Pour voir cela en action, jetez un œil à cette comparaison côte à côte. La structure de mise en page reste la même, mais le processus derrière lui devient considérablement plus simple et plus rapide.

Réfléchissez maintenant à la façon dont cela évolue. Imaginez tout votre site Web, chaque page et section, construite sur le même système. Vous ne retracez plus vos étapes pour chaque changement. Un seul ajustement à une variable met à jour tout. Vous gérez l'intégralité de votre marque en gérant les valeurs via le gestionnaire de variables.

Ce type de flexibilité est exactement pour quoi Divi 5 a été conçu. Il ne s'agit pas seulement de modifications plus rapides, mais de réduction de la répétition, de renforcement de la précision et de vous donner plus de contrôle avec moins d'efforts.

Personnalisez votre flux de travail Divi 5

À ce jour, vous avez vu comment des outils tels que les variables de conception, les attributs étendus et les préréglages de groupe d'options peuvent remodeler la façon dont vous mettez à jour les dispositions. Mais il n'y a pas de moyen unique de les utiliser.

Cette procédure pas à pas n'est qu'une version du processus. Vous pouvez suivre les étapes d'un ordre différent, en sauter quelques-uns ou les mélanger dans votre propre routine. Et c'est tout à fait correct, car l'objectif n'est pas de suivre une formule mais de trouver un rythme qui semble naturel et qui correspond à la façon dont vous aimez travailler.

Expérimenter un peu. Plus vous jouez avec les outils, plus vous commencerez à reconnaître ce qui fonctionne le mieux pour votre flux. Si les choses se sentent plus lisses, vos mises à jour sont plus rapides et votre conception reste cohérente, c'est votre signe que cela fonctionne.

Et si vous vous demandez si ces outils peuvent suivre à mesure que votre flux de travail évolue, ils le peuvent absolument parce que…

Divi 5 est conçu pour s'adapter à votre façon de travailler

C'est la pensée derrière chaque fonctionnalité que nous avons couverte. Que vous aimiez définir chaque style à l'avance ou apporter des modifications à votre création, les outils s'adaptent à la façon dont vous préférez travailler.

Vous pouvez vous déplacer rapidement ou prendre votre temps. Commencez à partir d'une page vierge ou affinez une disposition existante. Le constructeur ne vous oblige pas à dans un flux de travail rigide. Il est conçu pour réduire le travail occupé, sauter les modifications répétitives et vous aider à vous concentrer sur ce qui compte réellement: la conception avec clarté, vitesse et confiance.

En fin de compte, il s'agit de créer un processus qui vous ressemble et de vous suivre à mesure que vos projets et idées se développent. Êtes-vous prêt à créer un flux de travail de conception qui s'améliore avec vous?