Présentation des variables de conception pour divi 5

Je suis ravi d'introduire des variables de conception pour Divi 5, une nouvelle fonctionnalité qui améliorera considérablement le flux de travail de conception de Divi et donnera aux utilisateurs de Divi une séance sérieuse sur les autres constructeurs.

Vous pouvez définir des variables pour n'importe quoi, telles que les couleurs, les polices, les nombres, les images et le texte, et les brancher sur des éléments et des préréglages divisés. Lorsque vous mettez à jour une variable, la conception et le changement de contenu de votre site Web.

La synergie entre les variables et le nouveau système de conception basé sur le préréglage de Divi est fantastique. Permettez-moi de vous montrer comment cela fonctionne.

Découvrez la vidéo suivante pour voir la nouvelle fonctionnalité en action.

Divi devient «global» avec une gestion variable

Grâce au système de couleurs mondiales de Divi, vous connaissez peut-être déjà le concept d'une variable de conception. Une couleur globale est un type de variable de conception. Avec cette mise à jour, cependant, nous introduisons tout mondial! De plus, la gestion de vos paramètres globaux est plus facile que jamais, grâce à un nouveau gestionnaire de variables.

Création de nouvelles variables

L'icône Variables dans la barre latérale gauche ouvrira le gestionnaire de variables de votre site Web. Ajoutez une nouvelle variable, donnez-lui un nom et une valeur, puis vous pouvez brancher cette variable dans des paramètres pertinents sur n'importe quelle page. Divi prend actuellement en charge six types de variables couvrant tous les champs d'entrée natifs de Divi:

• Couleurs : les couleurs sont essentielles à chaque site Web; La plupart des sites Web n'utilisent que trois à quatre couleurs primaires. Définir les variables de couleurs et les utiliser via votre site Web signifie que vous pouvez ajuster la palette de couleurs de votre site Web en quelques secondes.
• Fonts : L'ère de travailler avec des polices statiques est terminée. De plus, vous n'êtes plus limité aux paramètres mondiaux de police du personnalisateur de thème. Vous pouvez définir les polices de votre site Web comme des variables et les gérer toutes en un seul endroit.
• Numéros : Vous pouvez utiliser des variables de nombre pour concevoir le système de dimensionnement de votre site Web. Par exemple, vous pouvez utiliser une taille de radius frontalière standard sur tous les éléments. Transformer cela en une variable vous permettra d'ajuster la taille de vos coins arrondis en modifiant une seule variable. D'autres utilisations quotidiennes incluent la définition de la taille de texte de votre site Web et des hauteurs de ligne, des largeurs de conteneurs et de l'espacement, et tout le reste.
• Images : utilisez-vous la même image sur plusieurs pages? Par exemple, vous pouvez avoir une image d'arrière-plan standard qui sert de motif de marque familier. Si vous transformez cela en une variable, il est facile de rafraîchir votre marque sur la route.
• Texte : Les variables ne sont pas limitées à la conception; Vous pouvez également définir des variables de texte. Par exemple, si vous transformez le numéro de téléphone de votre entreprise et l'adresse en variables de texte, vous n'aurez pas à aller à la recherche de tous les endroits où vous avez utilisé ces variables lorsque les détails de votre entreprise changent.
• URL : Nous avons également jeté des variables URL, car pourquoi pas? Vous souhaiterez peut-être avoir votre lien d'appel à l'action principal sur différentes pages au cours des différentes périodes de l'année (la modification lors d'une vente, par exemple). Au lieu de mettre à jour cette URL partout, mettez à jour la variable unique.

En utilisant des variables dans les éléments et les préréglages

Cliquez sur l'icône des variables ci-dessus paramètres pour choisir parmi une liste de variables pertinentes et de contenu dynamique de votre site Web.

Le système de contenu variable et dynamique de Divi a été étendu à tous les champs, où il n'était auparavant disponible que dans les champs de contenu. Cela signifie que vous pouvez attribuer des variables et du contenu dynamique aux champs numériques, aux champs de police, etc.

Concevoir des exemples variables

Les variables de conception sont instrumentales et deviendront rapidement un composant central du flux de travail Divi Design. Mais si le concept n'a pas cliqué, permettez-moi de vous donner quelques exemples.

Exemple un: gérer les polices mondiales

Comment pouvez-vous utiliser des variables de conception pour améliorer votre flux de travail? Tout d'abord, considérons les variables de police.

La plupart des sites Web utilisent deux à trois polices. Vous avez probablement passé du temps à installer le corps souhaité et les polices de texte de titre dans divers éléments et préréglages.

Mais que se passe-t-il si vous voulez changer les choses? Même si vous avez conçu votre site Web de manière optimale avec des préréglages, il peut prendre du temps de revenir en arrière et de changer de polices. Vous ne vous souvenez peut-être même pas de tous les endroits où vous avez utilisé une police particulière.

C'est là que les variables de police entrent en jeu.

J'ai construit le site Web dans la vidéo ci-dessus en utilisant trois variables de police: une police de titre, une police corporelle et une police de surbrillance.

L'ajout de la variable de police de titre à des éléments comme mon préréglage de présentation par défaut est facile. Étant donné que je n'ai jamais utilisé de valeurs de police statiques, mais j'ai plutôt branché mes variables, les polices sur mon site Web sont entièrement dynamiques.

La modification de la police de titre de mon site Web est aussi simple que la mise à jour de la variable de police de titre.

Exemple deux: gérer les tailles mondiales

Vous pouvez faire la même chose avec les tailles de texte.

Pour le site Web de la vidéo ci-dessous, j'ai défini une série de huit tailles de texte pour divers niveaux de cap et styles de texte corporel. Lorsque je met à jour mon préréglage de présentation par défaut et j'attribue la variable de taille de texte d'en-tête moyen, tous mes titres de présentation héritent de la valeur de cette variable.

Étant donné que je fonde la taille de texte de mon site Web sur les variables, je peux gérer entièrement les tailles de texte de mon site Web à partir du gestionnaire de variables.

Exemple trois: globalisez l'intégralité de votre site Web

Dans la vidéo ci-dessus, vous pouvez voir un site Web tirant parti de toute la puissance des variables. Toutes les couleurs sont des variables, tout comme les polices, les tailles de texte, les tailles de radius frontalières et les valeurs d'espacement dans mes éléments de conteneur.

Non seulement cela, mais j'ai également transformé le contenu partagé en variables. Le nom de mon entreprise, le numéro de téléphone et l'adresse sont des variables de contenu.

Même l'image d'arrière-plan, un motif de marque familier sur tout le site Web, est une variable d'image que je peux facilement changer.

Essayez Divi 5 aujourd'hui

Des variables de conception pour Divi 5 sont disponibles aujourd'hui, et c'est l'une des nombreuses fonctionnalités qui arrivent à Divi cette année.

Vous pouvez suivre au fur et à mesure que nous progressons dans la version finale de Divi 5 et au-delà, avec des mises à jour toutes les deux semaines. Selon vos priorités, vous pouvez utiliser Divi 5 maintenant pour créer de nouveaux sites Web ou attendre que nous ajoutions plus de fonctionnalités, tout ce qui vous convient le mieux.

Comme indiqué dans le calendrier de libération multi-phases original de Divi 5, le divi 5 public alpha est comme «divi 5 lite». Il manque quelques fonctionnalités et peut ne pas convenir aux sites Web existants, mais il est prêt à être utilisé sur de nouveaux sites Web si vous préférez l'expérience à Divi 4.

Nous voulons que vous l'essayiez, et si vous l'aimez, utilisez-le; Quand tout le monde l'aime, nous le rendrons officiel.

Aperçu: lignes imbriquées

Nous construisons des fonctionnalités rapidement . Chaque fois que nous terminons une nouvelle fonctionnalité, nous en commençons une nouvelle. Chaque fois que nous commençons une nouvelle fonctionnalité, je vous donne un aperçu.

Au cas où vous l'auriez manqué, consultez le fonctionnement de la semaine dernière Sneak Peek, où j'ai présenté des rangées imbriquées. Rows à l'intérieur des rangées! C'est une idée simple mais une première étape essentielle dans la création d'un système de mise en page plus flexible pour Divi 5.

Regardez cette vidéo pour tous les détails.

Plus de mises à jour divi 5 sont en route

2025 est l'année de Divi 5 . Le travail fastidieux est derrière nous. Nous avons construit la fondation super rapide, et maintenant il est temps pour Divi pour faire son retour.

Merci d'avoir regardé, et avant de partir, j'ai une faveur à demander. Si vous êtes ici pour le retour Divi, commentez cette vidéo; Je vais lire chaque commentaire. J'aimerais voir cette vidéo atteindre deux cents commentaires , alors vérifiez le nombre de commentaires et prêtez-nous un coup de main si vous le pouvez. C'est un excellent moyen de nourrir l'algorithme, et plus important encore, nous aimons discuter avec vous.

N'oubliez pas de nous suivre sur YouTube et abonnez-vous à la newsletter Divi afin de ne jamais manquer une mise à jour. Je vous verrai bientôt pour une autre annonce de fonctionnalité Divi 5, ce qui, je le promets, sera au coin de la rue.