Elementor Dynamic Content Explained : Un guide sur l'ensemble du processus, de la sélection des sources de données à la conception de sites web personnalisés

Elementor, un puissant constructeur pour WordPress, vous permet de combiner votre design avec plusieurs sources de données pour automatiser les mises à jour de contenu et personnaliser votre présentation grâce à sa fonction de contenu dynamique. Cet article se penche sur le flux de travail du contenu dynamique d'Elementor, de la sélection des sources de données à la mise en œuvre du design final, afin de vous aider à tirer le meilleur parti de cette fonctionnalité pour créer des sites web plus interactifs et plus attrayants.

Qu'est-ce qu'Elementor Dynamic Content ?

Elementor Dynamic Content est une fonctionnalité avancée d'Elementor Pro qui permet aux utilisateurs de connecter leurs conceptions de pages à des sources de données dynamiques pour afficher et mettre à jour automatiquement le contenu. Pour ce faire, vous devez créer un modèle qui extrait et affiche dynamiquement des données provenant de bases de données, d'entrées utilisateur, d'API tierces ou de champs personnalisés, sans avoir à mettre la page à jour manuellement.

Sélection des sources de données

Avant de commencer à concevoir du contenu dynamique, vous devez d'abord choisir une source de données appropriée :

1. Base de données WordPressSource de données : Il s'agit de la source de données la plus couramment utilisée. Vous pouvez utiliser les champs intégrés dans WordPress, tels queTitres des articles, contenu, images vedettes, catégories et balisesetc. Avec Elementor, ces données peuvent êtreAffiché dynamiquement sur la page.
2. Champs personnalisés: Par le biais de Champs personnalisés avancés (ACF) et d'autres plugins pour ajouter des champs personnalisés à une page ou à un article, puis utiliser les données de ces champs dans Elementor. Permettre aux champs personnalisés d'être plus flexibles dans la gestion et l'affichage d'informations supplémentaires liées à l'article, telles que les informations sur l'auteur, la date de publication, les spécifications du produit, etc.

3. Données WooCommerceDans le cas d'un site de commerce électronique, le flux de données de WooCommerce vous aide à afficher de manière dynamique les informations sur les produits, les prix, l'état des stocks, les catégories de produits, etc. Cela rend la conception des pages de produits et des pages de panier plus flexible et dynamique.
4. API tiercePour les sites web qui ont besoin de données provenant de sources externes, Elementor prend en charge les API pour récupérer les données et les afficher de manière dynamique. Par exemple, vous pouvez obtenir des mises à jour de médias sociaux, des informations météorologiques ou des données boursières par l'intermédiaire de l'API.
5. saisie de l'utilisateurLes données d'entrée des utilisateurs (par exemple, les commentaires, les formulaires de retour d'information, le contenu généré par les utilisateurs) peuvent également être utilisées comme source de contenu dynamique. Cela permet aux sites web de mettre à jour et d'afficher le contenu en temps réel en fonction du comportement ou de l'apport de l'utilisateur.

Utiliser le contenu dynamique dans Elementor

Elementor propose plusieurs widgets pour faciliter la mise en œuvre de contenus dynamiques. Grâce à ces widgets, les concepteurs de sites web peuvent facilement relier le contenu aux données des bases de données ou à d'autres variables afin de rendre les pages plus flexibles et plus intelligentes.

1. le widget du titre de l'article

Le widget du titre de l'article est un exemple simple de contenu dynamique. Ce widget affiche le titre de la page ou de l'article en cours et change automatiquement en fonction de la page ou de l'article utilisé. Par exemple, lorsque vous passez d'un article de blog à un autre, le titre se met automatiquement à jour et devient celui de l'article correspondant.

2、 Affichage dynamique du slogan du site web

Si vous souhaitez ajouter dynamiquement le titre d'appel de votre site web à la page, vous pouvez suivre les étapes ci-dessous :

1. Faire glisser le widget d'en-tête sur l'écranLes étapes suivantes sont les suivantes : Tout d'abord, sélectionnez un widget de titre dans l'éditeur Elementor et faites-le glisser à l'endroit approprié sur la page.

2. Cliquez sur l'icône dynamiqueDans les paramètres du widget d'en-tête, vous verrez une petite icône dynamique (qui ressemble généralement à une icône avec un éclair) située dans le coin supérieur droit du champ.
3. Sélectionner le slogan du siteAprès avoir cliqué sur l'icône dynamique, sélectionnez dans le menu déroulant "Slogan du site". À ce stade, le texte du titre est immédiatement mis à jour pour afficher l'accroche actuelle de votre site.

De cette manière, vous pouvez vous assurer que les titres de vos pages sont générés dynamiquement et peuvent être mis à jour automatiquement lorsque le titre de votre site web change, sans avoir à modifier manuellement chaque page.

Paramètres avancés pour le contenu dynamique : champs avant, après et de repli

Dans Elementor, vous pouvez également ajouter un contenu "avant", "après" et "après" à chaque élément dynamique. Ces options vous permettent d'ajouter un contenu statique avant ou après un contenu dynamique afin d'améliorer la présentation du contenu. En outre, le champ de repli peut être défini pour afficher un contenu alternatif par défaut si l'élément n'a pas de contenu ou si le contenu n'existe pas.

1. Cliquez sur l'icône de la clé à moletteLe type de contenu dynamique : À côté du type de contenu dynamique, vous verrez une icôneclés de serrageIcône. Un clic sur cette icône ouvre les options pour ce type de contenu.
2. Définition des contenus "avant" et "aprèsVous pouvez saisir tout texte ou HTML que vous souhaitez afficher avant ou après le contenu dynamique, par exemple, vous pouvez ajouter le texte "Bienvenue" avant l'accroche.
3. Mise en place d'un contenu de secoursSi le contenu dynamique de l'élément est vide ou indisponible, vous pouvez spécifier un texte par défaut comme affichage alternatif.

Le contenu dynamique ne se limite pas au texte

La fonction de contenu dynamique d'Elementor ne s'applique pas seulement aux éléments textuels, mais aussi à d'autres types de contenu tels que les images, les vidéos et les données utilisateur. Dès que vous voyez l'icône dynamique dans un widget, vous pouvez faire passer ce contenu de statique à dynamique.

1、L'image du profil de l'utilisateur est générée dynamiquement sur la page centrale de l'utilisateur.

Par exemple, vous pouvez générer l'image de profil d'un utilisateur à l'aide de données dynamiques afin de créer des pages personnalisées centrées sur chaque utilisateur. Pour ce faire, vous pouvez lier dynamiquement un widget d'image aux données de la photo de profil de l'utilisateur. Ainsi, quel que soit l'utilisateur qui se connecte, il pourra voir sa photo de profil sur la page au lieu de l'image statique par défaut.

2. application des commandes numériques dynamiques

Des contrôles numériques dynamiques ont été introduits dans certains widgets couramment utilisés, tels que les compteurs, les listes de prix et les classements par étoiles. Les concepteurs disposent ainsi d'une plus grande créativité et d'une plus grande souplesse pour définir dynamiquement les valeurs de ces contrôles en fonction de conditions spécifiques. Par exemple, vous pouvez mettre en place un compteur dynamique de ventes de produits qui se met à jour en temps réel pour s'afficher sur la page en fonction des données de ventes réelles dans la base de données.

Utilisation de clés de champ personnalisées

Il s'agit d'une fonctionnalité puissante pour les utilisateurs avancés, en particulier lorsqu'une intégration avec les champs personnalisés avancés (ACF) de WordPress est nécessaire.

1、Utiliser les clés des champs personnalisés pour remplir les contrôles dynamiques

Dans les options dynamiques d'Elementor, vous pouvez sélectionner "Clé personnalisée" et saisir la valeur clé d'un champ personnalisé pour afficher dynamiquement les données de ce champ sur la page. Pour certaines applications avancées, cette approche peut considérablement améliorer la flexibilité et la fonctionnalité de la page.

2、Prévision du contenu dynamique dans le modèle

Elementor vous permet de sélectionner des pages ou des posts spécifiques comme contenu de prévisualisation lors de la conception d'un modèle, ce qui vous permet de visualiser l'aspect du modèle lorsqu'il est appliqué à différentes pages au cours du processus de conception.

3、Mise en place d'une prévisualisation dynamique du contenu

1. Cliquez sur l'icône de l'engrenageDans l'éditeur Elementor, il y a une icône d'engrenage dans le coin inférieur gauche du panneau des widgets. Cliquez dessus pour ouvrir les paramètres de prévisualisation.

2. Sélectionner le type de contenu de l'aperçuDans l'option Prévisualiser le contenu dynamique en tant que, vous pouvez sélectionner le type de contenu que vous souhaitez prévisualiser, tel que des articles, des pages ou des médias.
3. Sélectionner une page spécifiqueVous pouvez ensuite sélectionner une page ou un message spécifique dans le menu déroulant afin de voir comment le modèle s'affichera sur ces pages au fur et à mesure que vous le modifierez.

De la source des données à la conception : une analyse complète du processus

Une fois la source de données identifiée, l'étape suivante consiste à intégrer ces données dans la conception de la page. Voici un aperçu du processus complet, de la source de données à la conception :

1. Configuration de la source de donnéesDans le backend de WordPress, configurez votre source de données. Par exemple, si vous utilisez des champs personnalisés, assurez-vous qu'ils ont été créés et configurés à l'aide d'un plugin comme ACF. Si vous utilisez une API, assurez-vous que les données de l'API peuvent être utilisées.Tirer et analyser correctement.
2. Création de modèles dynamiquesElementor : Créez une nouvelle page ou modifiez une page existante dans Elementor. Grâce à l'éditeur par glisser-déposer d'Elementor, vous pouvez ajouter toute une série d'éléments dynamiques. Ces éléments peuvent être du texte, des images, des vidéos, des listes, etc. Ensuite, liez ces éléments à votre source de données. Par exemple, vous pouvez lier un élément texte au champ du titre de l'article et un élément image au champ de l'image vedette.
3. Appliquer des étiquettes dynamiquesElementor : Elementor fournit un puissant système de balises dynamiques qui vous permet de connecter facilement des sources de données aux éléments de la page. Vous pouvez appliquer des balises dynamiques à des éléments tels que du texte, des images, des liens, etc. Ces balises extrairont automatiquement des informations de la source de données que vous sélectionnez. Par exemple, si vous sélectionnez la balise dynamique "Titre de l'article", la page affichera automatiquement le titre de l'article en cours.
4. Conception et style personnalisésLes outils de conception d'Elementor vous permettent d'appliquer des styles et des effets au contenu dynamique. Vous pouvez définir les polices, les couleurs, l'espacement, l'alignement, et plus encore pour vous assurer que le contenu dynamique est cohérent avec le design général de votre site. Vous pouvez également appliquer des styles personnalisés CSS avancés au contenu dynamique pour le rendre plus attrayant visuellement.
5. Essais et optimisationAprès avoir terminé la conception, veillez à prévisualiser et à tester la page pour vous assurer que le contenu dynamique s'affichera et se mettra à jour correctement. Vérifiez que les différentes sources de données extraient et affichent correctement le contenu. Testez la réactivité sur différents appareils pour vous assurer que la page offre une bonne expérience utilisateur sur les ordinateurs de bureau et les appareils mobiles.
6. Édition et maintenanceAprès s'être assuré que tout le contenu est affiché correctement, la page peut être publiée. Dans le fonctionnement quotidien du site web, le contenu dynamique sera automatiquement mis à jour en fonction des modifications de la source de données, sans qu'il soit nécessaire de procéder à des ajustements manuels. Cela réduit considérablement la charge de travail de maintenance et est particulièrement pratique pour les sites web dont le contenu est fréquemment mis à jour.

résumés

Les capacités de contenu dynamique d'Elementor ouvrent des possibilités infinies pour la conception de sites web. En combinant plusieurs sources de données, il est facile de créer un contenu de page personnalisé, dynamiquement mis à jour et hautement interactif. Que vous construisiez un blog, un portail d'information ou un site de commerce électronique, Elementor vous offre les outils et les fonctionnalités dont vous avez besoin pour que votre site se distingue par son design et ses fonctionnalités.