Comment ajouter des URL dynamiques à vos CTA avec Divi et ACF

Lors de la création de la structure de votre site Web, il y a de fortes chances que vous souhaitiez inclure les mêmes CTA sur plusieurs pages, articles et projets. Bien sûr, vous pouvez garder les URL à portée de main et les copier-coller au fur et à mesure, mais ce n'est pas nécessairement le moyen le plus simple. Avant de commencer à créer vos pages, articles et projets, vous pouvez configurer une liste de toutes les URL dont vous pourriez avoir besoin, leur définir une valeur par défaut et utiliser les valeurs par défaut sur les nouveaux éléments que vous créez.

Si, pour une raison quelconque, les URL diffèrent sur une certaine page, publication ou projet, vous pouvez les modifier dans l'élément lui-même sans que cela s'applique à l'ensemble de la valeur par défaut du champ. Les valeurs par défaut attachées aux URL vous aideront à prendre une longueur d'avance lors de la création d'une nouvelle page, d'un article ou d'un projet. Dans ce tutoriel, nous allons vous montrer étape par étape comment y arriver !

Allons-y !

Présentation du didacticiel

• Cette approche fonctionne mieux si vous ajoutez le groupe de champs personnalisés à un nouveau site Web, juste avant de commencer à ajouter des pages, des articles et des projets.
• Installez le plugin Advanced Custom Fields sur votre site WordPress
• À l'intérieur du plugin, vous pourrez configurer un groupe de champs qui apparaîtra sur toutes vos pages, articles et projets
• Créez un champ URL distinct pour toutes les URL possibles dont vous pourriez avoir besoin sur votre site Web
• Attribuez une valeur par défaut à chacun des champs ; cette valeur par défaut apparaîtra automatiquement sur chaque nouvelle page, publication ou projet
• Sur les pages, articles et projets existants, les valeurs n'apparaîtront qu'une fois que vous aurez entré le backend et enregistré les URL par défaut
• Utilisez les champs URL tout au long de votre conception Divi en tant que contenu de lien dynamique (page, publication, projet, modèle)
• Si vous modifiez l'URL par défaut dans les paramètres de champ, l'ancienne URL par défaut s'appliquera toujours aux pages, publications et projets ayant hérité de la valeur par défaut précédente

1. Installer et activer le plugin ACF

La première chose à faire est d'installer le plugin Advanced Custom Fields sur votre site Web. Vous pouvez télécharger le plugin ici, ou simplement le rechercher dans votre tableau de bord WordPress. Après avoir installé le plugin, assurez-vous de l'activer également afin de pouvoir commencer tout de suite.

2. Configurez un groupe de champs sur tous les articles, pages et projets

Maintenant, une fois le plugin ACF installé, il est temps de créer le groupe de champs URL. Ce groupe contiendra tous les CTA que vous utiliserez plusieurs fois sur vos pages, publications et projets. Accédez à votre tableau de bord WordPress > Champs personnalisés > Ajouter un nouveau .

Donnez un titre à votre groupe et continuez en définissant les règles. Nous veillons à ce que le groupe de champs apparaisse sur chaque type de publication sur notre site Web. Si, toutefois, vous souhaitez que les liens n'apparaissent que sur un type de publication spécifique, vous pouvez ajuster les règles à vos besoins.

Afficher ce groupe de champs si :

• Type de publication – est égal à – Publier ou
• Type de publication – est égal à – Page ou
• Le type de publication est égal à – Projet

3. Ajouter différents champs d'URL avec la valeur par défaut

Nous allons continuer en ajoutant les différents champs URL. Comme mentionné précédemment, vous aurez besoin d'un champ URL distinct pour chaque URL que vous utilisez plusieurs fois dans vos types de publication. Pour illustrer son fonctionnement, nous allons ajouter trois champs URL différents. L'un des champs redirigera les visiteurs vers la page de destination de la galerie Divi, le second dirigera les visiteurs vers la page de contact et le dernier redirigera les utilisateurs vers l'espace membres.

Donc, disons que nous commençons par le CTA qui redirige les gens vers la page de destination de la galerie Divi. Nous allons lui ajouter un nouveau champ et lui donner un nom de champ reconnaissable. De cette façon, une fois dans le constructeur Divi, il n'y a pas de confusion lorsqu'il s'agit de sélectionner la bonne URL.

Nous continuerons en faisant défiler les paramètres des champs et en sélectionnant « URL » comme type de champ.

La prochaine et dernière chose à faire est d'ajouter une valeur par défaut au champ. C'est ici que vous placerez l'URL vers laquelle vous souhaitez que votre CTA soit redirigé. Dès que vous ajoutez cette valeur par défaut, elle s'appliquera automatiquement à chaque nouvelle page, publication et projet que vous ajoutez.

Répétez les étapes ci-dessus pour chaque champ CTA dont vous avez besoin sur votre site Web. Pour cet exemple particulier, cela signifie que nous créons deux champs supplémentaires ; une fois pour la page contact et une pour l'espace membres.

Une fois que tous vos champs d'URL ont été ajoutés, assurez-vous d'enregistrer toutes les modifications apportées à votre groupe de champs.

4. Liens de bouton vers des URL dynamiques

Désormais, lors de la saisie d'un article, d'une page ou d'un projet, vous remarquerez le groupe de champs URL en bas. Si, pour une raison quelconque, vous souhaitez utiliser une URL différente sur cette page, cet article ou ce projet spécifique, vous pouvez ajouter une autre URL dans le champ. L'URL que vous ajoutez ne s'appliquera qu'à cette page, publication ou projet spécifique sur lequel vous travaillez. Au cœur du groupe de champs, l'URL par défaut sera toujours la même que celle que vous avez ajoutée lors de la création du champ.

Si vous utilisez les URL par défaut, passez à Visual Builder pour commencer à lier les boutons de votre conception à la bonne URL.

Ajouter une URL dynamique à vos boutons Divi est vraiment simple. Ouvrez le bouton que vous pouvez trouver sur votre page, accédez aux paramètres du lien et cliquez sur l'icône de contenu dynamique.

Une fois que vous avez cliqué sur l'icône dynamique, vous trouverez une liste de contenus dynamiques parmi lesquels choisir. Dans cette liste, vous verrez également apparaître les différents champs d'URL. Sélectionnez le champ URL correct vers lequel vous souhaitez créer un lien.

Répétez les étapes pour chaque bouton de votre page. Si les URL d'une page, d'une publication ou d'un projet changent pour une raison quelconque, vous pouvez revenir à cette page, publication ou projet spécifique et modifier le contenu dynamique de l'URL dans le backend.

La même approche s'applique également à l'ajout d'URL dynamiques à vos modèles. Si vous souhaitez ajouter une URL dynamique à un bouton dans votre modèle de publication de blog, par exemple, vous pouvez accéder au générateur de thème de votre site Web et ouvrir l'éditeur de modèle de corps de publication.

Continuez en ouvrant les paramètres du module de boutons, accédez aux paramètres du lien et cliquez sur l'icône de contenu dynamique.

Encore une fois, un menu déroulant s'affichera où vous pourrez sélectionner le contenu dynamique de l'URL qui correspond au CTA.

Assurez-vous de modifier toutes les modifications apportées au générateur de thème après avoir également ajouté les URL dynamiques !

Dernières pensées

Dans cet article, nous vous avons montré comment créer des URL dynamiques et les rendre disponibles sur chaque page, article ou projet de votre site Web. Nous avons utilisé le contenu dynamique de Divi en combinaison avec le plugin ACF. Nous avons pu définir une valeur par défaut et appliquer cette valeur URL à nos CTA. Ce tutoriel a pour objectif de vous permettre d'être le plus efficace possible lorsque vous créez des sites Web avec Divi ! Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.