Comment créer des modules de témoignages dynamiques avec Divi & ACF
Publié: 2022-04-17Divi fonctionne bien avec du contenu dynamique. Le contenu dynamique peut être utilisé pour afficher du texte, des titres et bien plus encore. Il peut même être utilisé dans le module de témoignage de Divi en le combinant avec un plugin appelé Advanced Custom Fields. Dans cet article, nous verrons comment créer des modules de témoignages dynamiques avec Divi et ACF. Divi & ACF fonctionnent très bien ensemble, et cet article vous aidera à comprendre comment !
Allons-y.
Configuration avancée des champs personnalisés
Tout d'abord, nous devrons installer la version gratuite du plugin Advanced Custom Fields.
Installer les champs personnalisés avancés
Pour l'installer dans WordPress, accédez à Plugins > Ajouter un nouveau dans le tableau de bord WordPress. Recherchez Champs personnalisés avancés et cliquez sur Installer maintenant .
- Plugins
- Ajouter nouveau
- Recherche
- Installer maintenant
Une fois l'installation terminée, cliquez sur Activer .
- Activer
Nous sommes maintenant prêts à paramétrer les champs personnalisés pour notre témoignage Divi.
Créer un nouveau groupe de champs
Créez ensuite un groupe de champs . Ce groupe de champs contiendra tous les champs nécessaires pour un témoignage. Nous pouvons ensuite cloner ce groupe de terrain pour créer autant de témoignages que nous le souhaitons.
Pour créer le groupe de champs, accédez à Champs personnalisés > Ajouter nouveau dans le tableau de bord WordPress.
- Les champs personnalisés
- Ajouter nouveau
Créer le groupe de champs pour le témoignage 1
Tout d'abord, ajoutez un titre et cliquez sur Ajouter un champ .
- Ajouter un titre
- Cliquez sur Ajouter un champ
Cela ouvre l'éditeur dans lequel nous allons créer les champs. Nous devrons ajouter un champ à la fois. Chaque champ inclura l'étiquette, le nom et le type de champ. Le nom et l'étiquette peuvent correspondre.
Témoignage 1 Description
Saisissez le libellé du champ et le nom du champ . Cliquez sur la liste déroulante Type de champ pour voir les options. Ce champ utilise un type de champ différent des trois autres champs.
- Libellé du champ : Témoignage 1 Description
- Nom du champ : Témoignage 1 Description
Sélectionnez Zone de texte dans la liste.
- Type de champ : zone de texte
Témoignage 1 Nom
Ensuite, faites défiler vers le bas et cliquez sur Ajouter un champ .
Ensuite, entrez le nom du témoignage 1 pour le nom du champ et l'étiquette du champ . Laissez le Type de champ à sa valeur par défaut (Texte).
- Nom du champ : Témoignage 1 Nom
- Libellé du champ : Témoignage 1 Nom
Témoignage 1 Poste
Ensuite, cliquez sur Ajouter un champ et entrez Témoignage 1 Poste pour le nom du champ et l'étiquette du champ .
- Nom du champ : Témoignage 1 Poste
- Libellé du champ : Témoignage 1 Poste
Témoignage 1 Entreprise
Ensuite, cliquez sur Ajouter un champ et saisissez Témoignage 1 Entreprise pour le Nom du champ et l'Étiquette du champ .
- Nom du champ : Témoignage 1 Entreprise
- Libellé du champ : Témoignage 1 Entreprise
Emplacement
Ensuite, nous allons définir les règles de localisation . Nous choisirons la ou les pages où nous voulons utiliser le témoignage. Il a la règle Type de publication est égal à Page par défaut. Nous allons garder cette règle et en ajouter une autre. Cliquez sur Ajouter un groupe de règles .
Sélectionnez la liste déroulante Type de publication pour la nouvelle règle et choisissez Page. Sélectionnez la liste déroulante Publier pour la nouvelle règle et sélectionnez la page que vous souhaitez utiliser. Si vous souhaitez utiliser plusieurs pages, ajoutez une nouvelle règle pour chaque page.
- Premier champ : Page
- Deuxième champ : le nom de votre page
Publier le nouveau groupe de champs
Enfin, cliquez sur le bouton Publier dans le coin supérieur droit de l'éditeur pour publier le nouveau groupe de champs.
Une fois le groupe de champs publié, vous verrez la liste des champs et des règles.
Cloner le groupe de terrain de témoignage
Ensuite, nous allons cloner le groupe de champs de témoignage. Cela nous permettra de créer un autre témoignage. Nous devrons répéter cela pour chaque témoignage que nous voulons créer. Dans le tableau de bord WordPress, accédez à Champ personnalisé > Groupes de champs . Survolez le groupe de champs que vous souhaitez cloner et cliquez sur Dupliquer .
- Les champs personnalisés
- Groupes de champs
- Dupliquer
Ensuite, cliquez sur Modifier pour ouvrir le nouveau groupe de champs et modifier les noms du groupe et de chaque champ à l'intérieur du groupe.
Modifiez le titre et sélectionnez chaque champ et remplacez le 1 par un 2. Cliquez sur Mettre à jour lorsque vous êtes prêt.
Ensuite, choisissez la page sur laquelle vous souhaitez que ce témoignage soit disponible.
Vous avez maintenant le groupe de terrain pour votre deuxième témoignage.
Créer le témoignage
Les champs du témoignage apparaissent en bas de l'éditeur de page pour la page que vous avez sélectionnée comme emplacement du témoignage. Cet exemple n'a que les champs pour le témoignage 1. J'ai sélectionné une page différente pour l'emplacement du témoignage 2, donc elle n'apparaît pas ici.
Remplissez les champs comme d'habitude. Ensuite, vous serez prêt à utiliser les champs de la mise en page Divi pour cette page.
Créer le module Témoignage Dynamique Divi
Un avantage pour lui est que n'importe qui peut saisir les informations ou modifier les champs sans avoir à ouvrir les modules Divi. Les champs devront être cartographiés dans le module de témoignage de Divi. Cliquez pour utiliser le Divi Builder pour cette page.
Vous pouvez ajouter le groupe de champs personnalisés à n'importe quelle page, mais je vais créer une nouvelle page. Puisque j'ai nommé cette page À propos de nous, j'utiliserai la page À propos du pack gratuit de mise en page du produit pour appareil photo disponible dans Divi. Je vais ajouter un nouveau module de témoignage et le styler en fonction de la page. Tout d'abord, je vais parcourir le processus d'ajout du témoignage à la page.
Ajouter une nouvelle section et ligne de témoignage Divi
Ajoutez une nouvelle section régulière sous la deuxième section de la mise en page.

Ensuite, ajoutez une ligne à une seule colonne .
Ajouter le module Divi Témoignage
Ensuite, ajoutez un module de témoignage à la ligne.
Créer le contenu de témoignage dynamique
Ensuite, nous ajouterons les données des champs personnalisés avancés au module de témoignage. Pour ce faire, nous ajouterons les données du groupe de champs en tant que contenu dynamique à chaque champ. Ouvrez les paramètres du module comme d'habitude. Vous verrez l'option dynamique lorsque vous survolerez chaque champ, comme illustré dans l'image ci-dessous.
Nom de l'auteur dynamique
Tout d'abord, survolez le champ Auteur et cliquez sur l' icône de contenu dynamique .
Vous verrez les options ACF au bas de la liste. Ce sont les étiquettes que nous avons données aux champs lorsque nous avons créé le groupe de champs. Sélectionnez Témoignage 1 Nom .
Si vous voulez du texte avant ou après le nom, ajoutez-le aux champs Avant ou Après. Vous pouvez également ajouter du HTML si vous souhaitez l'activer. Cliquez sur la coche verte lorsque vous avez terminé.
Le champ Auteur affiche désormais le nom de son contenu dynamique. Le texte que vous avez entré dans le champ apparaît maintenant comme le nom de l'auteur.
Intitulé du poste dynamique
Ensuite, survolez le champ Titre du poste et cliquez sur l'icône de contenu dynamique.
Choisissez Témoignage 1 Poste dans la liste.
Ajoutez le texte Avant ou Après de votre choix dans les champs et sélectionnez la coche verte.
Nom de société dynamique
Ensuite, survolez le champ Société et sélectionnez son icône dynamique.
Choisissez Témoignage 1 Entreprise dans la liste.
Ajoutez le texte Avant et Après si vous le souhaitez et cliquez sur la coche verte.
Description dynamique
Enfin, survolez la zone de contenu du corps et sélectionnez l'icône dynamique.
Choisissez Témoignage 1 Description dans la liste.
Ensuite, ajoutez le texte Avant et Après si vous le souhaitez et cliquez sur la coche verte. Quittez le module et enregistrez votre page.
Nous avons maintenant un module de témoignage qui utilise un contenu dynamique pour les champs.
Modification du contenu du témoignage dynamique
Tous les champs de témoignage peuvent être mis à jour sans avoir à ouvrir le constructeur Divi. Pour éditer le contenu dynamique, il suffit d'aller dans l'éditeur de page et de modifier le contenu dans les champs en bas de page. Dans cet exemple, j'ajoute mon nom de famille au champ Nom du témoignage 1.
Le nom est automatiquement mis à jour dans le module.
Stylez le module de témoignage dynamique
Ensuite, stylisons le module de témoignage pour qu'il corresponde au modèle de page.
Image de contenu
Dans l'onglet Contenu, faites défiler jusqu'à Image et ajoutez l'image de la personne à partir de votre médiathèque.
- Image : photo de la personne
Icône de devis
Ensuite, allez dans l'onglet conception. Choisissez le noir pour la couleur de l' icône de devis .
- Couleur : #000000
Image
Ensuite, faites défiler jusqu'à Image . Définissez la largeur et la hauteur sur 150 pixels. Changez les coins arrondis en 0px.
- Largeur : 150 pixels
- Hauteur : 150 pixels
- Coins arrondis : 0px
Le corps du texte
Faites défiler jusqu'à Corps du texte . Choisissez Montserrat pour la police. Changez la couleur en noir.
- Police : Montserrat
- Couleur : #000000
Définissez la taille du bureau sur 16 pixels, la taille du téléphone sur 14 pixels et la hauteur de la ligne sur 1,8 em.
- Taille : 16px, 14px
- Hauteur de ligne : 1,8 em
Texte de l'auteur
Faites défiler jusqu'au texte de l'auteur . Changez la police en Montserrat et changez la couleur en noir. Définissez la taille du bureau sur 20 pixels, la taille de la tablette sur 18 pixels et la taille du téléphone sur 16 pixels.
- Police : Montserrat
- Couleur : #000000
- Taille : 20px, 18px, 16px
Texte de position
Ensuite, faites défiler vers le bas jusqu'à Positionner le texte et changez la police en Montserrat.
- Police : Montserrat
Texte de l'entreprise
Enfin, faites défiler jusqu'au texte de l'entreprise et définissez la police sur Montserrat. Fermez le module et enregistrez votre page.
- Police : Montserrat
Résultat du module de témoignage dynamique
Voici l'aspect fini du module de témoignage dynamique Divi.
Voici à quoi cela ressemble dans la mise en page.
Mettre fin aux pensées
C'est notre regard sur la façon de créer des modules de témoignages dynamiques avec Divi & ACF. L'ajout des champs personnalisés au module de témoignage Divi est simple avec le contenu dynamique de Divi. C'est aussi simple que de créer les champs en tant que groupe de champs, puis de choisir les champs avec le contenu dynamique de Divi.
Nous voulons de vos nouvelles. Utilisez-vous du contenu de témoignage dynamique avec Divi et ACF ? Dites-le nous dans les commentaires.