Gérer le contenu répété avec les variables de conception de Divi 5

S'il y a une chose qui ralentit la création de sites Web, il s'agit de contenu répété - adresses, coordonnées, liens de bouton ou mission de votre entreprise. Le contenu répété est nécessaire pour la cohérence, mais peut être fastidieux à gérer manuellement.

Les variables de conception de Divi 5 aident à résoudre ce problème. Au lieu de copier et de coller le même contenu sur les pages, vous pouvez désormais insérer et mettre à jour des éléments répétés comme le texte, les liens, les images, les polices et les couleurs. Dans cet article, nous nous concentrerons spécifiquement sur les types de contenu répété que vous pourriez avoir sur votre site Web, et comment vous pouvez le rationaliser avec les variables de conception de Divi 5. Allons-y!

Divi 5 est prêt à être utilisé sur de nouveaux sites Web, mais nous ne recommandons pas encore de migrer les sites existants vers Divi 5.

Que sont les variables de conception dans Divi 5?

Les variables de conception dans Divi 5 sont des valeurs réutilisables que vous pouvez définir une fois et appliquer sur votre site en quelques clics. Vous pouvez également modifier les variables définies à l'intérieur du gestionnaire de variables pour mettre à jour toutes les instances (où elles apparaissent) automatiquement. Vous pouvez créer différents types de variables, des chaînes de texte aux polices, aux nombres, etc.

Le gestionnaire de variables vous permet de créer, de noms et d'enregistrer des variables sous chaque type, ce qui les rend plus faciles à trouver. Pour appliquer des variables à vos conceptions, survolez les options de paramètres pour localiser l' icône de contenu dynamique , et vos variables enregistrées apparaîtront.

Ce petit changement vous aide à optimiser votre processus de conception Web en utilisant intelligemment et en gérant des éléments de contenu répétés.

Types de variables de conception

Divi 5 vous permet de définir des variables de conception pour six types différents. Chacun sert un objectif différent:

• Variables de texte: chaînes de texte brut réutilisables. Vous pouvez définir des variables de texte comme les noms de l'entreprise, les numéros de téléphone, les étiquettes, la copie des bouton, etc.
• Variables de police: facilite la typographie cohérente. Par exemple, définissez la famille des polices pour le titre (H1 à H6) et le texte du corps.
• Variables de nombre: standardiser les tailles comme le rembourrage, les marges et la hauteur de la ligne. Par exemple, définissez et appliquez un paramètre de marge de rembourrage à toutes vos sections.
• Variables de couleur: version moderne et mise à niveau des couleurs globales pour la cohérence à l'échelle du site.
• Variables de liaison: Définissez les URL fréquemment utilisées comme les liens sociaux, les boutons ou les pages juridiques.
• Variables d'image: Enregistrez les images communes, telles que le logo de votre entreprise, les motifs d'arrière-plan, les images de produits, etc., pour les réutiliser facilement.

Apprenez tout sur les variables de conception

Comment créer et utiliser des variables de conception

Nous construisons Divi 5 à partir de zéro pour rendre la conception Web accessible même pour les débutants. Chaque fonctionnalité est facile à utiliser et les variables de conception ne sont pas différentes. Passons rapidement en revue les étapes pratiques liées à la mise en place de variables de conception.

Création d'une nouvelle variable

À l'intérieur du Divi Builder, accédez au gestionnaire de variables en cliquant sur l'icône de la botte de données (l'icône à trois couches dans la barre d'outils du constructeur).

Une fenêtre apparaîtra qui comprend les six types de variables décrits ci-dessus. Choisissez celui que vous souhaitez créer. Pour notre exemple, nous vous montrerons comment enregistrer mon adresse d'entreprise en tant que variable de texte globale, nous choisirons donc l'option de variable texte .

Cliquez sur Ajouter une chaîne globale pour ajouter une nouvelle variable de texte.

Ici, nous allons nommer et ajouter une chaîne de texte associée à cette valeur de variable de texte. Nommez d'abord votre variable de texte, puis attribuez une valeur de chaîne.

Une fois que vous avez attribué une valeur de chaîne appropriée à votre prénom, cliquez sur Enregistrer les variables pour enregistrer votre variable de texte. Assurez-vous que le nom de votre chaîne est unique.

Et c'est tout! Vous avez créé une variable de texte globale qui sera désormais disponible sur toutes les pages de votre site Web. Voyons à quel point il est facile d'appliquer cette variable.

Application d'une variable

Disons que je veux changer l'adresse dans ma section de pied de page.

Pour appliquer la variable texte, cliquez sur l'élément que vous souhaitez modifier - dans notre cas, l'adresse. Étant donné que c'est la variable texte, accédez au contenu du panneau de paramètres et survolez le corps pour localiser l' icône de contenu dynamique.

Une fois que vous avez cliqué, toutes vos variables enregistrées (chaînes globales dans le cas des variables de texte) apparaîtront en haut de la liste.

Nous avons enregistré notre adresse comme adresse. Pour appliquer la variable d'adresse , cliquez dessus.

Et c'est tout. Avec l'adresse de mon entreprise enregistrée en tant que variable de texte, je peux facilement l'insérer dans n'importe quelle page en quelques clics.

Types communs de contenu répété sur les sites Web

Pour vous donner un aperçu de ce qui est possible avec les variables de conception, nous avons compilé une liste de tous les éléments de contenu répétitifs que vous n'avez plus à créer ou à copier / coller manuellement à chaque fois.

Notez que ce ne sont que des éléments de contenu (bons exemples pour le texte, l'image et les types de variables de liaison), mais avec d'autres variables de conception, vous pouvez également économiser des paramètres couramment répétés comme les styles de police et les couleurs, ce qui facilite également votre travail.

Cas d'utilisation réalistes: Variables de conception simplifiant le contenu répété

Nous avons également collecté quelques exemples du monde réel pour montrer comment chaque variable de conception dans Divi 5 peut simplifier votre flux de travail en éliminant les mises à jour de contenu répétées.

1. Mise à jour des copies de bouton lors d'une vente

La mise à jour des copies de bouton, des titres de produit, des descriptions, etc., est devenue une tâche qui ne peut être modifiée qu'une seule fois pour refléter les modifications à l'échelle du site. Supposons que je gère une vente du Black Friday sur ma boutique en ligne, et je souhaite afficher 30% de réduction sur chaque bouton de page d'accueil.

Je peux facilement le faire en un seul édition en utilisant des variables de texte . J'ai déjà créé et enregistré une variable de texte nommée Button (30% de réduction) avec un magasin de valeurs de chaîne maintenant (30% de réduction !! ), nous n'avons donc besoin de l'appliquer qu'une seule fois à tous les boutons pour refléter la copie.

La meilleure partie est que lorsque la vente se termine, vous n'avez besoin de mettre à jour la valeur de la variable de texte qu'une seule fois, et tous les boutons reviendront automatiquement à leur copie d'origine.

Vous pouvez créer des variables de texte similaires pour l'adresse de votre entreprise, les coordonnées, les slogan, etc., que vous utiliserez plus souvent. Un autre exemple serait d'enregistrer les témoignages des clients sous forme de chaînes de texte et de les réutiliser dans des domaines clés comme la page de tarification, sous le formulaire de contact ou des boutons de service près. Cela rendrait subtilement la confiance et aiderait les visiteurs à prendre des décisions plus rapidement.

2. Étendre les couleurs du thème à tous les boutons

Supposons que vous souhaitiez modifier toutes les couleurs de bouton de votre site Web en noir lors de la vente du Black Friday. Étant donné que tous vos boutons héritent des couleurs de la variable de couleur du bouton du site que vous avez enregistré, tout ce que vous avez à faire est de changer la couleur en noir et que tous les boutons refléteront l'esprit du Black Friday.

Notez que si vous modifiez temporairement vos couleurs primaires ou secondaires (comme dans l'exemple ci-dessus), vous devez garder vos codes hexadécimaux de couleur d'origine écrits quelque part afin que vous puissiez toujours les restaurer en modifiant à nouveau les valeurs.

3. Gérer les valeurs globales de la typographie

Vous n'avez pas à répéter les mêmes paramètres de typographie lors de l'ajout d'un nouveau module d'en-tête ou de texte. Au lieu d'ajuster chaque ruban à travers le paramètre de taille de texte, affectez vos valeurs préférées une fois et réutilisez-les partout où il est nécessaire. Vous pouvez définir des tailles de polices globales pour chaque niveau d'en-tête de H1 à H6 et les appliquer sur votre site en un seul clic. Vous pouvez également utiliser facilement vos variables de conception à l'intérieur des préréglages d'élément ou de groupe d'options.

C'est une énorme gain de temps, surtout lorsque vous travaillez sur de grandes pages ou des styles de mise à jour comme les unités d'espacement, les largeurs de bordure ou les rapports d'image sur différentes sections. Au lieu de peaufiner chaque élément individuellement, vous pouvez appliquer instantanément des valeurs cohérentes pour garder votre conception propre et efficace.

4. Économiser et gérer les polices mondiales plus efficacement

Économisez et réutilisez les polices globales pour les titres, le corps et les sections spécifiques. Vous pouvez attribuer différentes facettes à des sections, comme des pages de catégorie ou des pages de destination, pour correspondre au ton.

Par exemple, vous pouvez utiliser une forte police Serif pour des pages de catégorie de blog comme «opinion» ou «éditorial» pour leur donner une sensation plus sérieuse et imprimée tout en utilisant un sans-serif propre et moderne pour les produits ou les pages de destination pour garder les choses légères et axées sur la conversion. Vous pouvez également utiliser une police différente pour les témoignages ou les bannières en ligne. Ajoutez plusieurs variables de police, étiquetez-les clairement et appliquez-les à l'échelle du site sans mises à jour manuelles.

5. Enregistrez vos motifs d'arrière-plan pour un accès rapide

Vous pouvez enregistrer vos motifs d'arrière-plan sous forme de variables d'image et les appliquer à l'arrière-plan de la section, de la ligne et du module en quelques clics.

De même, l'enregistrement du logo de votre entreprise, des images de produits, des photos personnelles (si vous construisez une marque personnelle), de l'image de héros, et plus encore en tant que variables d'image, il est super facile d'y accéder en un seul clic en cas de besoin.

6. Ajouter des liens d'achat instantanément

Enregistrer les URL clés comme les liens d'achat, les pages de contact ou les politiques de confidentialité comme variables de liaison et les appliquer aux boutons ou au texte en un seul clic. Plus de copie à chaque fois. Ceci est particulièrement utile pour les liens fréquemment utilisés qui apparaissent sur plusieurs pages ou modèles.

Les variables de conception jouent un rôle clé dans le système de conception prédéfini de Divi 5, en particulier lors de la gestion efficace du contenu répété. Au lieu de réappliquer les mêmes styles ou de coller le texte exact sur les pages, vous pouvez définir une fois des variables et les réutiliser n'importe où. Combiné avec des préréglages, les variables de conception deviennent encore plus utiles.

Cela accélère non seulement votre flux de travail, mais assure la cohérence sur votre site. Qu'il s'agisse d'une variable de nombre pour les tailles de police ou une variable de texte pour vos coordonnées, les variables de conception vous permettent de mettre à jour le contenu répété globalement sans creuser dans chaque module.

Meilleures pratiques pour utiliser efficacement les variables de conception

Pour tirer le meilleur parti des variables de conception, commencez à les inclure dans les premiers stades (planification) du processus de conception de votre site Web. Voici quelques conseils pour vous aider:

1. Commencez petit

Si vous commencez par des variables de conception, commencez par les éléments essentiels que vous savez que vous réutilisez souvent, comme votre logo, vos polices globales, les couleurs, les tailles de police ou le rembourrage de bouton. Les instructions vous donnent d'abord une base cohérente. Ensuite, au fur et à mesure que votre conception évolue, superposez plus de variables au besoin.

2. Suivez une convention de dénomination claire

Au fur et à mesure que vous ajoutez plus de variables, il est facile de commencer à confondre les uns avec les autres, même avec des catégories en place. C'est pourquoi une convention de dénomination claire est essentielle. Évitez les étiquettes vagues comme Text1 ou Promoa . Au lieu de cela, utilisez des noms descriptifs comme Company_name , Main_cta ou Footer_Disclaimer pour rester organisé et gagner du temps.

3. Mettre à jour les variables avant les pages du site

Si vous déployez une offre à l'échelle du site ou la mise à jour de l'image de marque, vous souhaitez modifier individuellement les principaux éléments. Ne le faites pas. Ajuster d'abord la variable. Ensuite, parcourez vos pages pour confirmer que tout est synchronisé. Une mise à jour est tout ce qu'il faut; La chasse à chaque bouton ou section n'est pas nécessaire.

4. Ne pas utiliser, être stratégique

Bien qu'il soit tentant de transformer chaque morceau de texte en variable, cela peut rapidement devenir écrasant, surtout si vous ne nommez pas vos variables contextuellement. Ainsi, notez les modèles, tels que des phrases ou des lignes utilisés dans plus d'un endroit. Et ne les convertissez que en variables. Si une phrase n'apparaît qu'une seule fois, il est normal de le laisser tel quel.

Les variables de conception simplifient la gestion du contenu

Gérer manuellement le contenu répété, comme la mise à jour du même slogan ou du même appel à l'action sur des dizaines de pages, a été une partie fastidieuse du travail d'un concepteur Web. Copier, coller, double vérifier - il était facile de manquer quelque chose et encore plus facile à être frustré. Pas plus.

Avec les variables de conception, vous pouvez centraliser vos paramètres de contenu. Modifiez la variable une fois et chaque instance se met à jour instantanément. Plus de modifications répétitives ou de décalages de version - des mises à jour plus rapides, des workflows plus propres et moins de maux de tête.

Téléchargez le dernier divi 5 alpha

Les variables de conception sont désormais disponibles dans Divi 5 Alpha et sont là pour simplifier votre flux de travail. Vous pouvez contrôler le contenu et les styles répétés d'une seule source, des polices et des couleurs globales aux variables de liaison et de texte. Configurez vos éléments de base, appliquez-les sur des sections et mettez à jour tout en une seule fois. Qu'il s'agisse de raffiner un projet client ou de reconstruire votre site, cette fonctionnalité vous aide à vous déplacer plus rapidement avec moins d'erreurs.

Prêt à l'essayer? Téléchargez Divi 5 Alpha et commencez à expérimenter les variables de conception. Définissez les polices, réutilisez les étiquettes des boutones ou configurez intelligemment les styles mondiaux. Et n'oubliez pas de partager vos commentaires avec l'équipe Divi - nous le construisons en pensant à vous.

Divi 5 est prêt à être utilisé sur de nouveaux sites Web, mais nous ne recommandons pas encore de convertir les sites existants en Divi 5.