Comment créer des modules de témoignages dynamiques avec Divi & ACF

Publié: 2022-04-17

Divi 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 .

  1. Plugins
  2. Ajouter nouveau
  3. Recherche
  4. Installer maintenant

Installer les champs personnalisés avancés

Une fois l'installation terminée, cliquez sur Activer .

  1. Activer

Installer les champs personnalisés avancés

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.

  1. Les champs personnalisés
  2. Ajouter nouveau

Créer un nouveau groupe de champs

Créer le groupe de champs pour le témoignage 1

Tout d'abord, ajoutez un titre et cliquez sur Ajouter un champ .

  1. Ajouter un titre
  2. Cliquez sur Ajouter un champ

Créer le groupe de champs pour le témoignage

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

Créer le groupe de champs pour le témoignage

Sélectionnez Zone de texte dans la liste.

  • Type de champ : zone de texte

Créer le groupe de champs pour le témoignage

Témoignage 1 Nom

Ensuite, faites défiler vers le bas et cliquez sur Ajouter un champ .

Créer le groupe de champs pour le témoignage

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

Créer le groupe de champs pour le témoignage

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

Créer le groupe de champs pour le témoignage

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

Créer le groupe de champs pour le témoignage

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 .

Emplacement

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

Emplacement

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.

Publier le nouveau groupe de champs

Une fois le groupe de champs publié, vous verrez la liste des champs et des règles.

Publier le nouveau groupe de champs

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 .

  1. Les champs personnalisés
  2. Groupes de champs
  3. Dupliquer

Cloner le groupe de terrain de témoignage

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.

Cloner le groupe de terrain de témoignage

Modifiez le titre et sélectionnez chaque champ et remplacez le 1 par un 2. Cliquez sur Mettre à jour lorsque vous êtes prêt.

Cloner le groupe de terrain de témoignage

Ensuite, choisissez la page sur laquelle vous souhaitez que ce témoignage soit disponible.

Cloner le groupe de terrain de témoignage

Vous avez maintenant le groupe de terrain pour votre deuxième témoignage.

Cloner le groupe de terrain de 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.

Créer le témoignage

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 témoignage

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.

Créer le module Témoignage Dynamique Divi

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.

Ajouter une nouvelle section et ligne de témoignage Divi

Ensuite, ajoutez une ligne à une seule colonne .

Ajouter une nouvelle section et ligne de témoignage Divi

Ajouter le module Divi Témoignage

Ensuite, ajoutez un module de témoignage à la ligne.

Ajouter le module Divi Témoignage

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.

Créer le contenu de témoignage dynamique

Nom de l'auteur dynamique

Tout d'abord, survolez le champ Auteur et cliquez sur l' icône de contenu dynamique .

Créer le contenu de témoignage 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 .

Créer le contenu de témoignage dynamique

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é.

Créer le contenu de témoignage dynamique

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.

Créer le contenu de témoignage dynamique

Intitulé du poste dynamique

Ensuite, survolez le champ Titre du poste et cliquez sur l'icône de contenu dynamique.

Créer le contenu de témoignage dynamique

Choisissez Témoignage 1 Poste dans la liste.

Créer le contenu de témoignage dynamique

Ajoutez le texte Avant ou Après de votre choix dans les champs et sélectionnez la coche verte.

Créer le contenu de témoignage dynamique

Nom de société dynamique

Ensuite, survolez le champ Société et sélectionnez son icône dynamique.

Créer le contenu de témoignage dynamique

Choisissez Témoignage 1 Entreprise dans la liste.

Créer le contenu de témoignage dynamique

Ajoutez le texte Avant et Après si vous le souhaitez et cliquez sur la coche verte.

Créer le contenu de témoignage dynamique

Description dynamique

Enfin, survolez la zone de contenu du corps et sélectionnez l'icône dynamique.

Créer le contenu de témoignage dynamique

Choisissez Témoignage 1 Description dans la liste.

Créer le contenu de témoignage dynamique

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.

Créer le contenu de témoignage dynamique

Nous avons maintenant un module de témoignage qui utilise un contenu dynamique pour les champs.

Créer le contenu de témoignage dynamique

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.

Modification du contenu du témoignage dynamique

Le nom est automatiquement mis à jour dans le module.

Modification du contenu du témoignage dynamique

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

Stylez le module de témoignage dynamique

Icône de devis

Ensuite, allez dans l'onglet conception. Choisissez le noir pour la couleur de l' icône de devis .

  • Couleur : #000000

Stylez le module de témoignage dynamique

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

Stylez le module de témoignage dynamique

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

Stylez le module de témoignage dynamique

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

Stylez le module de témoignage dynamique

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

Stylez le module de témoignage dynamique

Texte de position

Ensuite, faites défiler vers le bas jusqu'à Positionner le texte et changez la police en Montserrat.

  • Police : Montserrat

Stylez le module de témoignage dynamique

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

Stylez le module de témoignage dynamique

Résultat du module de témoignage dynamique

Voici l'aspect fini du module de témoignage dynamique Divi.

Résultat du module de témoignage dynamique

Voici à quoi cela ressemble dans la mise en page.

Résultat du module de témoignage dynamique

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.