Implémenter des tableaux dynamiques dans Elementor : Mises à jour automatiques et guide des styles personnalisés

Cet article explique comment créer des formulaires dynamiques à l'aide de plugins tiers et d'Elementor pour vous aider à mettre en valeur vos produits.Mise à jour automatique des données de contenu. Qu'il s'agisse de catalogues de produits, d'informations sur les stocksMise à jour des données en temps réelCe guide vous aidera à mettre en œuvre des formulaires dynamiques hautement personnalisables dans Elementor.

Pourquoi utiliser des formulaires dynamiques dans Elementor ?

Les formulaires dynamiques peuvent mettre à jour automatiquement le contenu des données et réduire la charge de travail liée à la maintenance manuelle. Vous trouverez ci-dessous des scénarios d'application courants utilisant des formulaires dynamiques :

• Afficher des données actualisées en temps réel (par exemple, les stocks et les prix)
• Afficher des informations personnalisées (par exemple, des données sur les membres)
• Présentation dynamique du catalogue ou des informations sur les services
• Mise à jour automatique des données relatives aux campagnes et aux ventes

Grâce aux formulaires dynamiques, vous pouvez vous assurer que le contenu de votre site est toujours à jour tout en améliorant l'expérience interactive de l'utilisateur.

Outils et plug-ins requis

Pour créer des formulaires dynamiques dans Elementor, nous vous recommandons les outils et plugins suivants :

• Elementor ProLe système de gestion des contenus dynamiques : Il prend en charge les fonctionnalités de base des contenus dynamiques.
• TablePress peut-être Tableaux de données WPCes deux plugins permettent la création et la mise à jour de tableaux dynamiques et peuvent être utilisés comme source de données pour les tableaux.

Etapes pour créer un formulaire dynamique dans Elementor

Étape 1 : Installer le plugin

1. Installez et activez Elementor ProLe site web doit être installé et activé : Assurez-vous qu'il est installé et activé sur le site web Elementor Pro.
2. Installation du plugin FormsPour plus d'informations sur les plugins WordPress, consultez le site web de WordPress. TablePress peut-être Tableaux de données WP qui permet de créer et de gérer des formulaires dynamiques.

Étape 2 : Ajouter une source de données

1. Création de formulaires: :
   • utiliser TablePress allez à l'adresse suivante TablePress > Ajouter un nouveau formulaireDéfinissez le nom et la structure du tableau (nombre de lignes et de colonnes).
   • Cliquez ensuite sur "Ajouter un formulaire" pour accéder à la page d'édition du formulaire.

2. Ajout de données dynamiques: :
   • Ajouter des données manuellement: :
     • Sur la page d'édition du tableau, vous pouvez saisir des données directement dans chaque cellule. Cette méthode convient aux mises à jour en temps réel qui ne nécessitent pas deétat de non-fonctionnementFormulaires (TablePress).
   • Utilisation de Google Sheets: :
     • Créez un tableau dans Google Sheets qui contient les données que vous souhaitez afficher.
     • En utilisant un plugin (tel que WP Data Tables')Sources de données externes) connecte Google Sheets au plugin Forms. De cette manière, le plugin Forms synchronisera automatiquement les données de Google Sheets et les affichera sur la page WordPress en temps réel.
   • Importer des fichiers CSV dans TablePress: :
     • Dans WordPress, allez à TablePress > importation (données).
     • Sélectionnez le fichier CSV téléchargé, définissez les options d'importation et choisissez de créer un nouveau formulaire ou de mettre à jour un formulaire existant.
     • frappe (sur le clavier) importation (données)Les données du fichier CSV seront importées dans le formulaire TablePress.

Étape 3 : Intégrer un tableau dans Elementor

• Ouvrez l'éditeur Elementor
  • Dans WordPress, naviguez jusqu'à la page où vous souhaitez ajouter le formulaire.
  • Cliquez "Utilisation de l'éditeur Elementor"pour entrer dans l'éditeur d'Elementor.

• Ajouter un Widget Shortcode
  • Dans le panneau gauche d'Elementor, trouvez "code court"Faites-le glisser dans la page où vous souhaitez que le tableau apparaisse.
  • Dans le champ de saisie Code, inscrivez le code court du formulaire TablePress, par exemple [table id=1 /](remplacez "1" par l'ID réel du formulaire).

Étape 4 : Styles personnalisés

L'apparence du tableau peut être personnalisée grâce aux options de style fournies avec Elementor et le plugin :

1. Options de style avancées d'ElementorSélectionnez la section du tableau dans la section "Avancé > CSS personnalisé", ajoutez du code CSS directement pour contrôler le style du formulaire TablePress.

/* Définir le style général du tableau */
.tablepress {
    width : 100% ; /* définir la largeur du tableau */
    border-collapse : collapse ; /* supprimer l'espace entre les cellules */
    font-family : Arial, sans-serif ; /* définit la police du tableau */
    font-size : 14px ; /* définir la taille de la police */
}
/* Définissez le style de l'en-tête du tableau */
.tablepress thead th {
    background-color : #4CAF50 ; /* couleur d'arrière-plan de tablepress thead */
    color : white ; /* couleur du texte de l'en-tête du tableau */
    padding : 10px ; /* marges des cellules de l'en-tête du tableau */
    text-align : centre ; /* Centrer le contenu de l'en-tête */
    font-weight : bold ; /* police de l'en-tête en gras */
}
/* Définir les styles des lignes de contenu du tableau */
.tablepress tbody tr {
    border-bottom : 1px solid #ddd ; /* bordure au bas de la ligne */
}
/* Définissez des couleurs d'arrière-plan différentes pour les lignes paires et impaires */
.tablepress tbody tr:nth-child(odd) {
    background-color : #f9f9f9 ; /* couleur d'arrière-plan de la ligne impaire */
}
.tablepress tbody tr:nth-child(even) {
    background-color : #ffffff ; /* couleur d'arrière-plan des lignes paires */ }
}
/* Définir le style de la cellule */
.tablepress td {
    padding : 10px ; /* cell-inside-margins */
    border : 1px solid #ddd ; /* Bordure de la cellule */
    text-align : left ; /* texte aligné à gauche */
}
/* Effet de survol de la souris */
.tablepress tbody tr:hover {
    background-color : #f1f1f1 ; /* couleur de fond de la ligne survolée */
}
/* Définir le style général du tableau */
.tablepress {
    width : 100% ; /* définir la largeur du tableau */
    border-collapse : collapse ; /* supprimer l'espace entre les cellules */
    font-family : Arial, sans-serif ; /* définit la police du tableau */
    font-size : 14px ; /* définir la taille de la police */
}

/* Définissez le style de l'en-tête du tableau */
.tablepress thead th {
    background-color : #4CAF50 ; /* couleur d'arrière-plan de tablepress thead */
    color : white ; /* couleur du texte de l'en-tête du tableau */
    padding : 10px ; /* marges des cellules de l'en-tête du tableau */
    text-align : centre ; /* Centrer le contenu de l'en-tête */
    font-weight : bold ; /* police de l'en-tête en gras */
}

/* Définir les styles des lignes de contenu du tableau */
.tablepress tbody tr {
    border-bottom : 1px solid #ddd ; /* bordure au bas de la ligne */
}

/* Définissez des couleurs d'arrière-plan différentes pour les lignes paires et impaires */
.tablepress tbody tr:nth-child(odd) {
    background-color : #f9f9f9 ; /* couleur d'arrière-plan de la ligne impaire */
}

.tablepress tbody tr:nth-child(even) {
    background-color : #ffffff ; /* couleur d'arrière-plan des lignes paires */ }
}

/* Définir le style de la cellule */
.tablepress td {
    padding : 10px ; /* cell-inside-margins */
    border : 1px solid #ddd ; /* Bordure de la cellule */
    text-align : left ; /* texte aligné à gauche */
}

/* Effet de survol de la souris */
.tablepress tbody tr:hover {
    background-color : #f1f1f1 ; /* couleur de fond de la ligne survolée */
}
/* Définir le style général du tableau */
.tablepress {
    width : 100% ; /* définir la largeur du tableau */
    border-collapse : collapse ; /* supprimer l'espace entre les cellules */
    font-family : Arial, sans-serif ; /* définit la police du tableau */
    font-size : 14px ; /* définir la taille de la police */
}

/* Définissez le style de l'en-tête du tableau */
.tablepress thead th {
    background-color : #4CAF50 ; /* couleur d'arrière-plan de tablepress thead */
    color : white ; /* couleur du texte de l'en-tête du tableau */
    padding : 10px ; /* marges des cellules de l'en-tête du tableau */
    text-align : centre ; /* Centrer le contenu de l'en-tête */
    font-weight : bold ; /* police de l'en-tête en gras */
}

/* Définir les styles des lignes de contenu du tableau */
.tablepress tbody tr {
    border-bottom : 1px solid #ddd ; /* bordure au bas de la ligne */
}

/* Définissez des couleurs d'arrière-plan différentes pour les lignes paires et impaires */
.tablepress tbody tr:nth-child(odd) {
    background-color : #f9f9f9 ; /* couleur d'arrière-plan de la ligne impaire */
}

.tablepress tbody tr:nth-child(even) {
    background-color : #ffffff ; /* couleur d'arrière-plan des lignes paires */ }
}

/* Définir le style de la cellule */
.tablepress td {
    padding : 10px ; /* cell-inside-margins */
    border : 1px solid #ddd ; /* Bordure de la cellule */
    text-align : left ; /* texte aligné à gauche */
}

/* Effet de survol de la souris */
.tablepress tbody tr:hover {
    background-color : #f1f1f1 ; /* couleur de fond de la ligne survolée */
}

Description du code :

• .tablepress: définit le style de l'ensemble du tableau, tel que la largeur, la police et les marges intérieures.
• .tablepress lead le: contrôle le style de l'en-tête du tableau, y compris la couleur d'arrière-plan, la couleur de la police et les marges intérieures.
• .tablepress tbody tr:nth-child(odd) répondre en chantant .tablepress tbody tr:nth-child(even)Les couleurs de fond sont différentes pour les lignes paires et impaires afin de créer un effet "zébré".
• .tablepress tdAjuste le style des cellules d'un tableau, y compris les bordures, les marges intérieures et l'alignement du texte.
• .tablepress tbody tr:hoverCouleur d'arrière-plan : Définit la couleur d'arrière-plan de la ligne lorsque la souris passe au-dessus de la ligne afin d'améliorer l'expérience de l'utilisateur.

2. Paramètres CSS individuels personnalisés de TablePress

Si vous souhaitez appliquer des styles spécifiques à tous les formulaires TablePress, vous pouvez également ajouter le code CSS ci-dessus directement à la page d'accueil de WordPress CSS personnalisé Au milieu :

• Allez dans le tableau de bord de WordPress.
• Naviguez jusqu'à état extérieur > personnalisation > CSS supplémentaire.
• Collez le code CSS ci-dessus et cliquez sur poste.

Cela permet de garantir que les styles de formulaire de TablePress sont appliqués de manière cohérente sur l'ensemble du site, et pas seulement sur des pages spécifiques.

Paramètres avancés : mise à jour dynamique et filtrage

1. Mise à jour automatique des donnéesSi le formulaire est connecté à une source de données externe telle que Google Sheets, les données peuvent être mises à jour automatiquement pour que le contenu reste actuel.
2. fonction de radiomessagerieActiver la fonction de pagination pour éviter le chargement d'une grande quantité de données, ce qui ralentit les pages, et améliorer l'expérience de l'utilisateur.

Optimisation des performances des formulaires dynamiques

Pour garantir la vitesse de chargement des pages et l'expérience des utilisateurs, voici quelques suggestions d'optimisation :

• Utilisation de la paginationLes tableaux de grande taille peuvent être paginés afin de permettre aux utilisateurs de visualiser les données étape par étape.
• Activer le cacheRéduire le nombre de requêtes du serveur : Réduisez le nombre de requêtes du serveur en mettant en cache les données des formulaires dynamiques à l'aide du plugin WordPress Cache.
• Limiter la fréquence des mises à jourPour plus d'informations, veuillez consulter le site web de l'Agence européenne pour la sécurité et la santé au travail (ESA).

résumés

Cet article explique comment créer des tableaux dynamiques dans Elementor avec des mises à jour automatiques et des styles personnalisés. En utilisant le plugin TablePress, il est facile d'afficher des données mises à jour en temps réel, telles que l'inventaire, le catalogue de produits ou les informations sur les membres, ce qui réduit la charge de travail liée à la maintenance manuelle. Par ailleurs, des mesures d'optimisation telles que la pagination, la mise en cache et la synchronisation des données garantissent la vitesse de chargement des tableaux et l'expérience de l'utilisateur pour les sites web qui nécessitent des mises à jour fréquentes du contenu.