ACF vs Divi Design Variables: Quand utiliser ce

Avec la dernière version alpha de Divi 5, les variables de conception sont entrées dans l'écosystème Divi comme une nouvelle approche pour gérer la conception et les valeurs de contenu sur vos sites Web. Cela a excité nos utilisateurs, en particulier ceux qui comptent sur des champs personnalisés avancés (ACF) depuis des années. Devez-vous vous en tenir à l'ACF ou passer aux variables de Divi? Ou pouvez-vous utiliser les deux simultanément?

Cet article explique la différence et lorsque vous devez utiliser quoi. Allons-y!

Divi 5 est prêt à être utilisé pour les nouvelles versions de sites Web.

Que sont les variables de conception divi?

Lors de la création d'un site Web, vous réutiliserez souvent les mêmes informations sur de nombreuses pages, des couleurs aux styles de police, des coordonnées, etc. Les variables de conception vous aident à gérer ces éléments partagés d'un lieu central. Contrairement aux champs ACF standard, les variables de conception ne sont pas liées au contenu post-spécifique, ils agissent comme des valeurs de conception et de contenu globales, et non des champs de contenu dynamiques.

Au lieu de creuser dans chaque page pour faire une mise à jour mineure, comme modifier un numéro de téléphone ou ajuster une couleur d'arrière-plan, vous mettez à jour une variable une fois, et qui change automatiquement sur l'ensemble de votre site.

Vous voulez changer les couleurs de votre marque pour une promotion saisonnière? Changer une seule variable. Besoin de mettre à jour le texte de votre pied de page ou un logo? Une modification met à jour chaque instance instantanément. Avec les variables de conception de Divi, vous n'êtes pas seulement plus rapide mais construisant plus intelligemment.

Construire un site Web plus intelligent et plus facile à mettre à jour

Les champs ACF standard améliorent la façon dont les utilisateurs WordPress structurent la conception et le contenu en créant des champs personnalisés liés à des publications spécifiques. Les variables de conception de Divi prennent un itinéraire complètement différent. Ce sont des valeurs de conception accessibles à l'échelle mondiale qui mettent à jour partout à la fois. La différence pourrait initialement sembler subtile, mais elle change la façon dont vous construisez et maintenez les sites WordPress.

Ce que l'ACF apporte à la table

Les champs personnalisés avancés (ACF) vous permet d'ajouter des champs de données supplémentaires à vos pages et articles dans sa version principale. Vous obtenez plus que les cases de titre et de contenu de base. ACF vous donne des champs spéciaux pour les images, les blocs de texte, les fichiers, les menus déroulants et bien plus encore.

Vous pouvez regrouper les champs liés en groupes logiques pour vos projets. Par exemple, vous pourriez faire un groupe de membres du personnel avec des spots pour le titre du poste, le département, la photo et la biographie. Ou créer des détails du produit avec des champs pour les spécifications, les prix et les listes de fonctionnalités.

Ces groupes de terrain fonctionnent très bien avec les types de publiques personnalisées. Lorsque vous les combinez, vous pouvez créer des sections de contenu spéciales comme les répertoires d'équipe, les listes de services ou les catalogues de propriétés - chacun avec exactement les bons champs pour ce contenu.

Les gens aiment l'ACF car il s'intègre en douceur dans la zone d'administration WordPress ordinaire. Vos champs personnalisés apparaissent directement dans les écrans d'édition normaux, ce qui facilite les clients qui ne sont pas avertis en technologie de mettre à jour le contenu.

Pages d'options: votre panneau de configuration à l'échelle du site

Les pages d'options ACF, disponibles dans ACF Pro, vous permettent de créer un lieu central pour les informations à l'échelle du site, contrairement aux champs ACF réguliers qui s'attachent à un contenu spécifique. Cette fonctionnalité est idéale pour:

• Coordonnées
• Liens importants
• Heures d'ouverture et lieux
• Images et logos par défaut

Lorsque quelque chose change, comme votre numéro de téléphone, vous n'avez besoin de le mettre à jour qu'une seule fois dans la section Admin. Le changement apparaîtra tout de suite sur votre site. Il convient de noter que vous aurez besoin de l'ACF Pro pour utiliser les pages d'options.

Intégration profonde avec Divi

Les champs ACF standard s'associent bien à Divi via le système de contenu dynamique de Divi. Lorsque vous créez des pages dans le constructeur Divi, vous pouvez extraire des informations de vos champs personnalisés ACF. Ce travail d'équipe vous permet d'utiliser les outils de conception de Divi aux côtés de la gestion de contenu d'ACF.

Voici comment le processus fonctionne habituellement:

• Configurer des champs personnalisés avec ACF
• Remplissez ces champs de contenu dans WordPress
• Concevez la mise en page de votre page en divi
• Connectez votre contenu ACF à vos modules Divi

Cette combinaison de Divi et ACF crée une séparation utile. Les éditeurs de contenu peuvent mettre à jour les informations dans une interface propre et organisée tandis que les concepteurs peuvent créer des dispositions sans s'enliser dans les détails de gestion du contenu.

Approche flexible

Les champs ACF standard fonctionnent pour vos compétences, que vous codéz ou que vous aimiez des outils visuels. Les développeurs peuvent utiliser des fonctions de modèle pour afficher les valeurs de champ dans des thèmes personnalisés. Si vous ne codez pas, vous pouvez toujours utiliser des champs ACF avec des constructeurs comme Divi sans connaître PHP.

Cette flexibilité rend les champs ACF standard adaptés aux sites Web de base des entreprises et aux projets complexes. Vous pouvez commencer par des fonctionnalités simples et en utiliser des fonctionnalités plus avancées à mesure que vous apprenez et votre site se développe.

La flexibilité des variables de conception de Divi

Les variables de conception divi 5 simplisent la gestion des sites Web. Ils stockent des choix de conception et du contenu réutilisable que vous pouvez utiliser n'importe où sur votre site. Lorsque vous mettez à jour une variable, il change partout où vous l'avez utilisé.

Le gestionnaire de variables se trouve en cliquant sur l'icône des variables dans la barre latérale Visual Builder de Divi 5. Il vous permet de gérer tous vos éléments de conception en un seul endroit.

Six types de variables de conception

Divi 5 comprend six types de variables différents pour vous aider avec divers aspects de votre site Web:

• Variables de couleur: Tenez les couleurs de votre marque, les couleurs de texte et les arrière-plans de votre marque
  • Vous pouvez les nommer clairement comme «Coral Blush» ou «Champagne Gold»
  • Utilisez-les pour les boutons, le texte, les arrière-plans et les bordures
  • Ensuite, vous pouvez modifier l'ensemble de votre schéma de couleurs en mettant à jour ces quelques variables
• Variables de police: Définissez des options de typographie au-delà du personnalisateur de thème
  • Vous pouvez créer des paramètres de police séparés pour les titres, le texte du corps ou les zones spéciales
  • Cela maintient la typographie cohérente sur votre site Web
  • En cas de besoin, vous pouvez mettre à jour toutes les polices à la fois
• Variables de nombre: stocker les mesures utilisées dans votre conception
  • Idéal pour l'espacement, les bordures, les tailles et les dimensions de texte
  • Travaillez avec des unités CSS comme CLAMP () pour des conceptions réactives
  • Ceux-ci vous aident à maintenir l'espacement et le dimensionnement cohérent partout

Les variables divi 5 gèrent également le contenu qui apparaît sur tout votre site:

• Variables d'image: stocker des images utilisées à plusieurs endroits
  • Parfait pour les logos, les motifs de fond et les photos
  • Mettre à jour les images une fois au lieu de chaque page
  • Rendre les mises à jour saisonnières ou renommer beaucoup plus rapidement
• Variables de texte: Enregistrer le contenu écrit qui apparaît à de nombreux endroits
  • Utile pour les coordonnées, les slogan et les heures d'ouverture
  • Modifiez un texte une fois pour le mettre à jour partout
  • Gardez les informations cohérentes lorsque les détails changent
• Variables de liaison: Store URL pour les boutons et les menus
  • Utiliser les boutons d'action, les liens de médias sociaux et la navigation
  • Évitez les liens cassés lorsque les adresses Web changent
  • Mettez à jour tous les boutons connexes à la fois lors de l'ajout de nouvelles pages

Avantages réels

Les variables de conception gagnent du temps et réduisent les erreurs car elle est visuelle. Lorsqu'un client veut modifier les couleurs de son site Web, vous pouvez mettre à jour uniquement les variables de couleur, et tout ce qui avec cette couleur (boutons, arrière-plans et texte) change immédiatement sur le site.

Ces variables fonctionnent bien avec le système prédéfini de Divi. Ajoutez des variables à vos préréglages de module et lorsque vous mettez à jour une variable, chaque module avec cette variable change.

Pour les sites Web qui sont beaux sur tous les appareils, les variables de nombre avec des fonctions CSS comme clamp () aident vos dispositions à s'adapter à une taille d'écran sans avoir besoin de conceptions distinctes. Lorsque plusieurs personnes travaillent sur un site Web, les variables de conception gardent que tout le monde utilise les mêmes règles de conception. Cela aide le site à rester cohérent et professionnel, peu importe qui apporte des modifications.

Comment ils se comparent

Lorsque vous comparez les champs ACF standard et les variables de conception de Divi, nous examinons deux approches différentes pour rendre les sites Web plus gérables. Décomposons leurs différences de base:

Les champs ACF standard brillent lorsque vous avez besoin de contenu structuré qui change entre les publications et les pages, tandis que les variables de conception Divi conservent la cohérence de conception à l'échelle du site. Il existe certains aspects où les pages d'options ACF (disponibles dans ACF Pro) et les variables de conception divi sont similaires:

Il est important de comprendre que les variables de conception Divi n'essaient pas de faire tout ce qu'ACF Pro fait. Ils vous donnent une autre façon de stocker et d'utiliser les mêmes informations sur votre site Web. L'ACF peut toujours faire beaucoup de choses que les variables divi ne peuvent pas:

Les variables divi sont très bien pour des travaux simples comme changer les coordonnées, échanger des photos avec les saisons ou mettre à jour les couleurs de votre marque. L'ACF est idéale pour les sites Web qui ont besoin d'une gestion spécialisée de contenu au-delà des éléments de conception, comme la création de champs personnalisés et de types de publication. De même, les pages d'options ACF, disponibles avec ACF Pro, sont une version plus mature des variables de conception Divi.

Cependant, les variables de conception de Divi sont intégrées à Divi 5 sans frais supplémentaires. Vous pouvez configurer des couleurs, des polices, du texte et des images directement dans le constructeur que vous utilisez déjà. Il n'y a pas besoin de plugins supplémentaires ou d'apprentissage de nouveaux systèmes. Les exigences de votre projet devraient guider quel système joue le rôle principal dans votre flux de travail, mais n'oubliez pas que ces outils résolvent des problèmes fondamentalement différents malgré leurs similitudes de surface.

Les variables ACF et Divi peuvent-elles fonctionner ensemble?

Oui. Vous pouvez réellement utiliser à la fois les champs ACF standard et les variables de conception Divi sur le même site Web. Ils fonctionnent bien ensemble parce qu'ils gèrent différentes parties de votre site. Lorsque vous les associez, les champs ACF standard peuvent gérer des relations de données complexes comme un site immobilier avec un type de poste de listes de propriétés qui se connecte aux agents, au quartier et aux champs personnalisés de prix.

Pendant ce temps, les variables de conception gardent les couleurs de votre marque, la typographie et l'espacement cohérent sur chaque modèle et modèle de publication. Cela signifie que votre site Web a à la fois une puissante gestion des données et cohérence visuelle.

Vos éditeurs de contenu peuvent travailler avec les domaines familiers d'ACF pour mettre à jour les détails de la propriété ou les prix, tandis que votre site maintient son aspect professionnel via le système de conception de Divi. Cette combinaison vous donne un meilleur contrôle que l'un ou l'autre outil ne pourrait fournir seul.

La clé est de savoir quel outil utiliser pour chaque travail. En comprenant leurs forces, vous pouvez créer des sites Web avec des structures de contenu sophistiquées qui maintiennent toujours une identité visuelle cohérente. Examinons les vrais exemples de la façon dont ces outils résolvent ensemble les problèmes de site Web communs.

Cas d'utilisation n ° 1 - Site Web d'entreprise local avec des changements saisonniers

Un site Web de boulangerie local a besoin de contenu structuré et de mises à jour de conception saisonnières. Nous avons combiné des champs ACF standard et des variables de conception de divine de manière pratique pour ce site.

Les champs ACF standard gèrent le catalogue de produits de la boulangerie avec des types et des champs personnalisés pour:

• Articles
• Descriptions d'articles
• Ingrédients et informations sur les allergènes
• Tarification des niveaux
• Statut de disponibilité

Ces détails changent pour chaque produit, donc l'approche structurée d'ACF fonctionne parfaitement. Le personnel de boulangerie met à jour les informations sur les produits via l'interface WordPress familière d'ACF.

Pendant ce temps, les variables de conception divi gèrent les éléments de conception saisonniers:

• Schémas de couleurs qui changent avec les saisons
• Texte de bannière promotionnelle pour les vacances
• Images de produits en vedette sur la page d'accueil
• Modèles de fond qui actualisent mensuellement

Lorsque l'automne arrive, le propriétaire de la boulangerie met simplement à jour les variables de couleur saisonnières des pastels d'été aux tons d'automne, et l'ensemble du site se rafraîchit instantanément.

L'image de fond change pour montrer les décorations sur le thème de l'automne, sans avoir besoin de modifier chaque page individuellement en utilisant les variables d'image comme suit:

Cette configuration donne à la boulangerie le meilleur des deux mondes: données de produits structurées via des champs ACF standard et des rafraîchissements saisonniers rapides grâce aux variables de conception de Divi.

Cas d'utilisation n ° 2 - site Web de portefeuille de photographie

Un site Web d'entreprise de photographie doit équilibrer les galeries de clients organisés avec une marque visuelle cohérente. Voici comment les champs ACF standard et les variables de conception de divications résolvent ce défi. Les champs ACF standard gèrent les aspects du contenu structuré:

• Galeries de projets clients comme type de message personnalisé
• Champs personnalisés pour:
  • Packages de services avec des champs de tarification détaillés
  • Collection de témoignages avec noms de clients
  • Types de projet
  • Spécifications de l'équipement

Le photographe met à jour chaque galerie client via l'interface d'ACF, ajoutant:

• Date et emplacement du projet
• Informations de base
• Tri et catégorisation d'images

Pendant ce temps, les variables de conception divi gèrent la cohérence de la marque:

• Système de typographie pour tous les titres et le texte du corps
• La palette de couleurs de marque appliquée sur toutes les pages
• Valeurs d'espacement pour un rythme de disposition cohérent
• Paramètres de grille de galerie pour présentation uniforme

Besoin d'un rafraîchissement de marque? Le photographe met à jour quelques variables de conception et l'ensemble du site change. Les galeries gardent leur espacement en raison des variables de nombre, et chaque projet conserve ses détails grâce à l'ACF.

Lorsque la saison des mariages est occupée, le photographe modifie une variable de texte pour la réservation du statut, et elle se met à jour partout sur le site. Plus de vérification de chaque page pour corriger le même texte. Cette combinaison conserve des photos et des informations sur les clients (en ACF) distinctes de l'apparence du site (avec des variables de conception) afin que le photographe puisse obtenir la structure et l'apparence correctement.

Faire le bon choix pour votre projet

En regardant nos exemples de boulangerie et de photographie, nous pouvons voir ces outils relever différents défis de site Web. Le propriétaire de la boulangerie met à jour les informations sur les produits tout en échangeant sans effort les couleurs saisonnières. Le photographe garde les galeries organisées mais peut toujours mettre à jour le look de leur site en quelques clics.

Certains sites n'ont besoin que d'un seul de ces outils, tandis que d'autres fonctionnent mieux avec les deux. Une chose est claire: le choix entre les champs ACF standard et les variables de conception Divi ne doit pas être une décision ni ou.

Divi 5 a ajouté une autre option utile à votre boîte à outils. Que vous construisiez quelque chose de simple ou de complexe, vous avez maintenant plus de moyens de créer des sites qui ont l'air bien et fonctionnent bien.

Commencez à construire plus intelligemment

L'essentiel est que les variables de conception de Divi 5 et les champs ACF standard résolvent chacun des problèmes différents tout en ayant un certain chevauchement (en particulier avec les pages d'options). Besoin de mises à jour de conception rapide sur votre site? Les variables de conception brillent. Vous voulez une gestion de contenu puissante avec une logique conditionnelle? Les champs ACF standard livrent.

De nombreux sites fonctionnent bien avec les deux outils côte à côte. Les pages d'options ACF sont meilleures pour gérer les besoins de contenu complexes. Les variables de conception ne sont pas destinées à remplacer complètement les pages d'options, mais pour la plupart des utilisateurs ayant des exigences simples, ils peuvent être une alternative forte.

La fonction de variables de conception est désormais disponible avec Divi 5 - pas de coût supplémentaire, pas de codage nécessaire et il est prêt pour votre prochain projet.

N'oubliez pas: Divi 5 fonctionne mieux pour les nouveaux sites Web. Nous ne recommandons pas encore de déplacer les sites existants vers Divi 5.