Comment créer une page Web dynamique dans WordPress avec Elementor

Les pages statiques sont idéales pour les sites Web simples. Mais si vous voulez garder votre contenu frais et personnalisé, les pages Web dynamiques sont le meilleur choix. Parce qu'ils mettent automatiquement à jour et affichent le contenu en fonction du comportement de l'utilisateur, des entrées de base de données ou des conditions spécifiques.

Les pages Web dynamiques rendent votre site Web plus intelligent. Vous pouvez afficher du contenu personnalisé à chaque utilisateur en fonction de ses intérêts ou comportements. Ils peuvent également filtrer et trouver le poste / contenu exact qu'ils recherchent. Cela rend l'expérience de navigation plus fluide et maintient les gens engagés plus longtemps.

Si vous utilisez WordPress, la création de pages dynamiques ne doit pas être difficile. Avec Elementor, vous pouvez concevoir même des dispositions de page dynamiques même complexes et les connecter aux données sans écrire de code. Dans cet article, nous vous montrerons comment créer une page Web dynamique dans WordPress avec Elementor.

Que sont les pages Web dynamiques?

Les pages Web dynamiques se réfèrent aux pages Web qui peuvent modifier automatiquement leur contenu. Ils affichent un contenu différent en fonction de l'utilisateur, du temps ou des données d'une base de données. Par exemple, un site Web d'actualités peut afficher les derniers articles, ou une boutique en ligne peut afficher des produits en fonction des recherches précédentes des utilisateurs.

Contrairement aux pages statiques, vous n'avez pas à modifier le contenu manuellement à chaque fois. Ainsi, ils gagnent du temps pour les propriétaires de sites Web et offrent une meilleure expérience aux visiteurs. Dans WordPress, le contenu dynamique peut provenir des articles de blog, des champs personnalisés, des profils d'utilisateurs ou des listes de produits.

Pourquoi utiliser Elementor pour des pages Web dynamiques?

Elementor est l'un des meilleurs outils pour créer des pages Web dynamiques dans WordPress, en particulier pour les débutants et les non-codeurs. Il vous donne un contrôle total sur la conception de votre site Web tout en vous permettant de connecter le contenu à partir de votre base de données WordPress. Voici quelques raisons clés pour utiliser Elementor pour les pages dynamiques:

un. Aucun codage nécessaire

Le système de glisser-déposer d'Elementor est très adapté aux débutants. Vous pouvez concevoir des dispositions avancées et ajouter du contenu dynamique en quelques clics.

né Étiquettes dynamiques puissantes

Vous pouvez retirer le contenu à partir de champs personnalisés, de données utilisateur, d'informations sur le site ou de données de données à l'aide de balises dynamiques. Cela rend votre page intelligente et flexible.

c. Fonctionne avec des plugins de type post personnalisés

Elementor prend en charge les plugins comme les champs personnalisés avancés (ACF), le ensemble d'outils et les pods. Ces plugins vous permettent de stocker des données supplémentaires, que vous pouvez facilement afficher sur vos pages.

d. Contrôle de la conception complet

Elementor vous donne une liberté totale de concevoir à quoi ressemble votre contenu dynamique. Vous pouvez utiliser des conditions, des modèles et des règles d'affichage pour contrôler ce que le contenu apparaît et où.

e. Aperçu en direct

Vous pouvez voir le contenu dynamique en direct lors de la création de la page. Cela vous aide à travailler plus rapidement et à éviter les erreurs. Explorez comment concevoir une base de connaissances dans WordPress.

Prérequis pour créer une page Web dynamique

Pour concevoir une page Web dynamique dans WordPress sans codage, il existe plusieurs outils dont vous avez besoin. Ils sont essentiels pour stocker des données personnalisées, connecter ces données à vos conceptions et afficher tout de manière flexible et dynamique. Jetez un œil aux outils dont vous avez besoin.

1. Gousses
2. Élémentor
3. Elementor Pro
4. Happyaddons
5. Happyaddons pro

Ci-dessous, nous avons brièvement expliqué pourquoi vous avez besoin de ces outils pour créer des pages Web dynamiques:

Pods Admin - Ce plugin vous permet de créer des types de publiques personnalisés, des champs personnalisés et des relations. La création d'un type de message personnalisé avec les champs personnalisés nécessaires est la première étape de la création d'une page Web dynamique.

Elementor - La version principale de Elementor vous permet de créer de belles mises en page de pages à l'aide d'un système de glisser-déposer. Il est facile à utiliser et parfait pour la conception visuelle.

Elementor Pro - La version premium ajoute des fonctionnalités puissantes comme le constructeur de thèmes, les balises dynamiques et les modèles personnalisés. Ceux-ci sont essentiels pour connecter vos pages avec un contenu dynamique.

HappyAddons - Il peut étendre les fonctionnalités d'Elementor en ajoutant plus de widgets et d'options de style. Il vous aide à créer des dispositions plus attrayantes avec moins d'efforts.

HappyAddons Pro - La version Pro déverrouille les widgets et fonctionnalités avancées qui prennent en charge le contenu dynamique. Il fonctionne bien avec Elementor Pro, offrant plus de flexibilité dans la conception de modèles personnalisés.

Comment créer une page Web dynamique dans WordPress (étape par étape)

La création de pages Web dynamiques implique deux phases. Tout d'abord, créez un type de publication personnalisé et ajoutez les champs personnalisés nécessaires à l'aide d'un plugin comme des pods. Ensuite, concevez votre page personnalisée à l'aide de Elementor et connectez les balises dynamiques pour afficher les données de ces champs personnalisés à l'avant.

Phase un: créer un type de message personnalisé

Avant de créer une page Web dynamique, vous devez créer un type de message personnalisé et ajouter les champs personnalisés nécessaires. Pour cela, nous utiliserons le plugin d'administration PODS .

Étape 1: Installez le plugin d'administration PODS

Si vous n'avez pas déjà installé le plugin PODS - Types de contenu personnalisés et champs , allez-y et faites-le d'abord. Installez et activez- le. Après cela, vous pourrez créer facilement des types de publication et des champs personnalisés.

Étape 2: Créez des articles à partir de la section du blog

Supposons que nous voulons créer des publications personnalisées pour 50 sociétés d'ingénierie. Voici comment ajouter ces messages:

À partir de votre tableau de bord WordPress, accédez à Posts > Ajouter nouveau . Créez autant de messages que vous avez besoin de vos données personnalisées.

Vous pouvez écrire une brève description de chaque entreprise dans l'éditeur de contenu. Pour ce faire, cliquez sur Modifier dans chaque message.

Ajoutez ensuite la description dans l'éditeur de blocs.

Étape 3: Créez un type de message personnalisé et ajoutez des champs personnalisés

Il est maintenant temps de créer des champs personnalisés à l'aide du plugin d'administration PODS.

Depuis votre tableau de bord, accédez à Pods Admin > Ajouter nouveau . Choisissez Ajouter des champs au type de contenu existant et sélectionnez Posts .

Cliquez sur Ajouter un champ pour commencer à ajouter des champs personnalisés.

Un pop-up apparaîtra. Vous obtiendrez des options pour étiqueter le champ, définir une logique conditionnelle et bien d'autres choses pour cela. Effectuez les modifications nécessaires et enregistrez-les au besoin.

Vous pouvez voir que nous avons déjà étiqueté le nouveau champ personnalisé. Les boîtes marquées d'une étoile de couleur rouge ( * ) sont obligatoires pour remplir. Le reste est facultatif.

Une fois terminé, enregistrez toutes les modifications en cliquant sur le bouton Enregistrer le nouveau champ .

De la même manière, vous pouvez créer des champs plus personnalisés autant que vous le souhaitez. Cliquez simplement sur le bouton Ajouter un champ .

Un point important à mentionner est que lors de la création d'un nouveau champ personnalisé, assurez-vous de sélectionner le type de champ approprié également dans la liste déroulante marquée dans l'image ci-dessous. Après cela, enregistrez les modifications.

Vous pouvez voir que nous avons créé les champs personnalisés nécessaires dont nous avons besoin. Maintenant, cliquez sur le bouton Enregistrer Pod pour enregistrer tous les champs.

Apprenez à concevoir une grande page Web d'Halloween.

Étape 04: Remplissez des informations dans les champs personnalisés que vous venez de créer

Ouvrez vos messages un par un. Vous verrez tous les champs personnalisés que vous venez de créer sous le contenu de la publication principale, comme indiqué dans la vidéo ci-dessous. Remplissez les informations nécessaires dans ces champs.

Jetez un œil à l'image ci-dessous, dans laquelle nous avons rempli les champs personnalisés. Faites de même pour tous les autres articles que vous avez créés et où vous le souhaitez.

Lorsque tous les messages sont prêts, il est temps de concevoir votre page Web dynamique. Nous expliquerons le processus dans la phase suivante.

Phase deux: Concevoir et créer une page Web dynamique avec Elementor

Dans cette section, nous vous aiderons à apprendre à concevoir et à créer une page Web dynamique avec Elementor et HappyAddons. Explorons le processus ci-dessous.

Étape 01: Sélectionnez une seule publication dans le constructeur de thème Elementor

À partir du tableau de bord WordPress, accédez à des modèles> Builder de thème .

Vous arriverez à une nouvelle page. À partir d'ici, choisissez l' option de publication unique , puis cliquez sur le bouton + Ajouter un nouveau nouveau .

La toile Elementor sera ouverte immédiatement. Vous pouvez sélectionner un modèle ou concevoir la page à partir de zéro. Pour concevoir la page à partir de zéro, fermez la fenêtre contextuelle de la bibliothèque de modèles.

Étape 02: Créez une disposition de colonne pour la conception de la page dynamique

Maintenant, pour créer une disposition de conteneurs, sélectionnez une structure de colonne appropriée que vous souhaitez. Pour ce tutoriel, nous sélectionnerons le conteneur à trois colonnes.

Étape 03: Faites glisser et déposez les widgets nécessaires pour concevoir la page

Maintenant, faites glisser et déposez les widgets dont vous avez besoin pour concevoir la page conformément aux champs personnalisés afin que vous puissiez présenter les informations nécessaires. Faisons d'abord glisser et supprimer le widget d'image .

Dans la barre latérale droite, sous la section d'image, vous verrez l'option Dynamic Tags comme indiqué dans l'image ci-dessous. Cliquez sur les balises dynamiques .

Une fois les balises dynamiques cliquées, une liste de balises apparaîtra. De là, sélectionnez la balise de champ d'image des pods .

Après cela, une nouvelle option de liste déroulante apparaîtra à côté de la clé. Cliquez sur l' icône de la liste .

Sélectionnez le nom respectif que vous avez utilisé pour étiqueter le champ d'image personnalisé.

Vous verrez l'image affichée instantanément.

Étape 04: Continuez à ajouter d'autres widgets pour afficher toutes les informations

De la même manière, continuez à ajouter d'autres widgets et affichez des informations à partir des champs personnalisés en définissant des balises dynamiques respectives. Par exemple, faites glisser et déposez le widget d'en-tête sous l'image de la toile.

Cliquez sur l'option Dynamic Tags dans la section Title du widget.

Une petite fenêtre contextuelle apparaîtra pour la configuration des paramètres. Cliquez sur la case à côté de la touche. Cliquez sur la case.

Sélectionnez le champ personnalisé respectif pour le widget qui convient au widget d'en-tête.

Vous pouvez voir que le champ personnalisé a été sélectionné pour le widget. Instantanément, vous verrez le nom du produit apparaître sur la toile.

Remarque: De la même manière, nous avons ajouté tous les champs personnalisés à la page via des balises.

Voici un tutoriel sur la façon de concevoir une page de destination du Black Friday et du Cyber Monday.

Étape 05: styliser la page Web dynamique

Accédez à l'onglet Style pour chaque widget un par un et personnalisez-les afin qu'ils aient l'air bien en fonction de la conception de votre page Web.

Étape 06: Ajoutez le widget post-carrousel à la toile (facultatif)

À l'aide du widget post-carrousel, vous pouvez présenter les articles connexes ou les derniers articles, ce qui peut ajouter une meilleure expérience pour les utilisateurs.

Vous pouvez voir que nous avons ajouté le widget post-carrousel, qui affiche d'autres modèles mobiles.

Étape 07: rendre la page mobile réactive

Vous trouverez des options pour ajuster la disposition de la page pour différentes tailles d'écran sur la barre supérieure. Assurez-vous d'optimiser votre disposition séparément pour chaque taille d'écran.

Étape 08: Publiez la page dynamique et définissez l'état

Lorsque la conception est terminée, cliquez sur le bouton Publier dans le coin supérieur droit.

Vous serez invité à définir des conditions pour la page. Cliquez sur le bouton Ajouter une condition .

Étant donné que les messages dynamiques seront affichés sur une page spécifique, il est préférable de définir une balise ou une catégorie particulière pour les publications. Pour notre page, nous définissons une balise pour les publications respectives. Ainsi, nous sélectionnons l'option «In Tag».

Tapez votre balise ou votre nom de catégorie pour la page. Ensuite, appuyez sur le bouton Enregistrer et fermer .

Étape 09: Aperçu de la page dynamique

Maintenant, accédez à la page Aperçu et vérifiez si la page fonctionne ou non. Vous pouvez cliquer sur plusieurs messages pour vérifier s'ils sont ouverts avec la même mise en page personnalisée. Vous pouvez voir que cela fonctionne bien de notre côté dans le clip vidéo ci-dessous.

Ainsi, vous pouvez créer des pages Web dynamiques dans WordPress à l'aide du plugin Elementor.

Liste de contrôle que vous devez garder à l'esprit lors de la création d'une page Web dynamique

Jusqu'à présent, vous avez appris à créer une page Web dynamique dans WordPress en utilisant Elementor. J'espère que vous l'avez apprécié. Mais pour tirer le meilleur parti de la création de pages dynamiques, il y a plusieurs points que vous devez considérer avec soin, que nous avons énumérés ci-dessous comme liste de contrôle.

un. Utilisez correctement les balises dynamiques

Assurez-vous que vous utilisez des balises dynamiques aux bons endroits. Elementor vous permet de retirer le contenu des champs personnalisés, des publications, des utilisateurs, des données du site, etc. Ne pouvez-vous jamais créer des pages merveilleuses et dynamiques sans pouvoir utiliser correctement les balises.

né Définir des conditions d'affichage

Lorsque vous utilisez Elementor Theme Builder, qu'il s'agisse d'un seul article, archive ou page de produit, définissez toujours les bonnes conditions d'affichage. Sinon, la page Web dynamique ne tirera pas et affichera les publications personnalisées.

c. Optimiser pour la vitesse et le référencement

Les pages dynamiques tirent souvent des données de la base de données. Alors, utilisez un plugin de mise en cache et un optimiseur d'image pour garder la page rapidement. Assurez-vous également que vous utilisez des balises de cap appropriées (H1, H2, etc.), du texte ALT pour les images et des méta descriptions pour améliorer le référencement.

d. Maintenir la cohérence de la conception

Utilisez les polices, les couleurs et l'espacement mondiaux d'Elementor pour garder votre conception cohérente sur toutes les pages dynamiques. La conception cohérente semble plus professionnelle et renforce la confiance des utilisateurs.

e. Activer le mode sans échec pour le dépannage

Si quelque chose se casse ou agit bizarre, activez le mode sûr de Elementor. Il vous permettra de modifier la page sans interférence à partir d'autres plugins ou thèmes. Ceci est utile lorsque vous travaillez avec un contenu dynamique complexe.

Clôture!

Les pages Web dynamiques sont une idée intelligente pour présenter des informations sur un site Web dans les formats les plus flexibles. Dans ce tutoriel, nous vous avons parcouru le processus étape par étape et partagé une liste de contrôle détaillée pour vous guider. De plus, nous vous avons présenté les outils par lesquels vous pouvez concevoir efficacement un Web dynamique, sans même une seule ligne de codage.

Tout ce que vous pouvez faire est simplement des paramètres de glisser-déposer et de valeur. Même un débutant peut créer des pages Web dynamiques après avoir exploré ces outils pendant quelques jours. Nous pensons que l'apprentissage en faisant est la meilleure façon de grandir. Maintenant, si vous avez encore des questions ou une confusion qui vous poussent l'esprit, laissez simplement un commentaire ou frappez sur la boîte de chat en direct.

Les membres de notre équipe répondront immédiatement à vos questions. Suivez également nos chaînes Facebook, Twitter et YouTube pour des mises à jour régulières.