Exigences du tutoriel :

• JetElements et les plug-ins JetEngine installés et activés ;
• Gratuit addon de données dynamiques installé et activé ;
• Version gratuite d’Elementor Page Builder.

Avec l’aide du plugin JetEngine, vous pourrez afficher du contenu dynamique à l’aide des widgets JetElements, tels que le carrousel avancé, la mise en page des images, le portefeuille, la liste de prix, le curseur, les témoignages et la chronologie (horizontale et verticale).

Assurez-vous d’avoir installé l’addon gratuit Dynamic Data, et commençons.

Nous allons montrer comment gérer le bloc Paramètres dynamiques qui apparaît après l’installation de l’addon de données dynamiques. Dans ce tutoriel, nous allons le faire sur l’exemple du widget Slider.

Création d’un méta-champ avec le plugin JetEngine

1 Étape – Créer une méta-boîte

La première chose que vous devez faire est de créer une méta-boîte dans le tableau de bord WordPress > la section JetEngine > Meta Boxes. Cliquez sur le bouton « Ajouter nouveau » et la fenêtre des paramètres apparaîtra immédiatement.

Dans le bloc Général, vous devez déterminer le titre de la méta-boîte et choisir le type de poste ou de taxonomie pour lequel vous souhaitez ajuster la méta-boîte. Si vous avez sélectionné le type de publication, vous devez spécifier le type de publication approprié (dans notre cas, il s’agit du type de publication Tour).

Étape 2 – Créer un champ méta

Le bloc Meta Fields permet de créer des méta-champs avec un répéteur. Nous créons le champ méta de la galerie et remplissons les barres Étiquette et Nom/ID. Nous choisissons également l’option « Champ » et sélectionnons le type de champ « Répéteur ».

Appuyez sur le bouton « Nouveau champ de répéteur » pour ajouter le champ à compléter.

Après cela, la section apparaît où nous pouvons ajouter un champ de répéteur de média. Pour ce faire, remplissez l’étiquette et le nom. Recherchez ensuite l’option « Média » dans le menu déroulant Type.

En outre, vous pouvez spécifier le format de valeur ou le laisser vide pour stocker l’image dans le format d’ID par défaut.

Cliquez sur le « Nouveau champ de répéteur » chaque fois que vous devez ajouter un champ supplémentaire au répéteur.

Par exemple, nous ajoutons un champ de texte supplémentaire pour la description de l’image.

Si vous rencontrez des problèmes, consultez notre tutoriel sur l’utilisation du répéteur sur le terrain.

Cliquez sur le bouton « Ajouter une boîte méta » à droite lorsque tout est réglé.

Personnalisation de l’élément CPT

Nous ouvrons la section Tour (notre CPT) dans le tableau de bord WordPress. Nous allons ajouter des images de galerie à chacun des éléments CPT. Cliquez sur le bouton « Modifier » sous le produit.

Ici, nous pouvons voir la méta-boîte créée avec un champ répéteur, où nous pouvons ajouter des fichiers multimédias.

Ajoutez la quantité nécessaire d’articles et mettez à jour la publication.

Affichage de contenu dynamique via le widget JetElements Slider

Il existe deux façons d’afficher les informations dynamiques des champs répétiteurs de la page. Le plus simple est d’ouvrir la page, où vous présenterez le contenu à l’aide de valeurs dynamiques et ferez glisser le widget nécessaire vers la section appropriée. Mais il existe également un moyen de le faire à l’aide de modèles. Nous allons vous présenter la deuxième façon.

1 Étape – Créer un modèle d’une seule page

Allez dans la section Tableau de bord WordPress > Modèles de thème > Crocoblock. Ici, nous cliquons sur le bouton « Ajouter nouveau » et créons un modèle de page unique dans le constructeur de pages Elementor.

Ou appuyez sur le bouton « Modifier/Modifier avec Elementor » à côté de l’élément sur lequel vous passez le curseur de la souris.

2 Étape – Ajouter un widget Slider

Trouvez le widget Slider ou tout autre module prenant en charge l’addon de données dynamiques (carrousel avancé, mise en page des images, portefeuille, liste de prix, témoignages et chronologie) et placez-le sur la page.

Ouvrez les paramètres du widget et dépliez l’onglet Paramètres dynamiques. Nous devons déplacer la bascule près de l’option Activer les données dynamiques et spécifier le nom du champ Répéteur comme nous l’avons défini précédemment dans le champ Nom/ID du champ méta du répéteur.

Définissez le champ Répéteur d’image avec le nom/l’ID du champ méta média, et également, dans les champs suivants, vous pouvez spécifier les autres ID si vous en avez déjà ajouté.

N’oubliez pas de cliquer sur le bouton « Mettre à jour » ci-dessous et de continuer à afficher la galerie de produits dans le formulaire de curseur sur le front-end.

Comme vous pouvez le voir, tout s’affiche correctement sur le front-end.

Désormais, vous savez comment utiliser JetElements et JetEngine pour afficher du contenu dynamique à partir des champs du répéteur.