Widget de chronologie d'élémentateur gratuit : chronologies verticales et horizontales
Timeline est un widget gratuit Master Addons pour Elementor qui présente les dates et les événements le long d'une ligne de connexion Construisez une Timeline personnalisée à la main, avec une date ou une étiquette, un contenu riche, une image et un lien pour chaque élément, et montrez-la verticalement ou sous forme de carrousel horizontal Avec Master Addons Pro, vous pouvez également construire une Post Timeline directement à partir de vos articles de blog, Cela convient aux histoires d'entreprises, aux feuilles de route, aux calendriers d'événements et aux archives d'actualités.
Comment ajouter une chronologie dans Elementor
Ces étapes construisent une Timeline personnalisée gratuite Le widget commence avec trois exemples d'éléments, afin que vous puissiez voir la mise en page avant de modifier quoi que ce soit.
- Dans Elementor, recherchez dans le panneau du widget “Timeline” et faites glisser le widget Master Addons sur la page.
- Conservez le type de chronologie sur la chronologie personnalisée et choisissez Chronologie verticale ou Chronologie horizontale.
- Ouvrez chaque ligne sous Articles et définissez la date ou une étiquette personnalisée, le contenu, une image et un lien.
- Cliquez sur Ajouter un élément pour plus de jalons et faites glisser les lignes pour les réorganiser.
- Pour une chronologie horizontale, définissez les paramètres de navigation et de carrousel.
- Stylez les cartes, les dates, la ligne et les points dans l'onglet Style, puis publiez.
Notre tutoriel chronologie passe par chaque paramètre avec des captures d'écran, et la vidéo en haut de cette page montre les mêmes étapes.
Elementor ou Elementor Pro ont-ils un widget de chronologie ?
Non. Ni Elementor ni Elementor Pro n'incluent de widget de chronologie, vous avez donc besoin d'un addon ou d'une disposition fabriquée à la main à partir de conteneurs, de bordures et de CSS personnalisés. Le widget Master Addons Timeline fonctionne seul avec Elementor et vous n'avez pas besoin d'Elementor Pro pour cela. Voici ce que couvre le widget.
| Widget Chronologie | |
|---|---|
| Dispositions | Vertical, ou un carrousel horizontal |
| Alignement des cartes | Gauche, Centre, Superposition ou Droite |
| Sources de contenu | Articles que vous ajoutez à la main ou articles de votre blog (Post Timeline, Pro) |
| Chaque élément | Date ou étiquette personnalisée, contenu riche, une image et un lien pour toute la carte |
| Types de points | Points, icônes, images, chiffres ou lettres |
| Navigation horizontale | Flèches, points, barre de fraction ou de progression, avec une barre de défilement en option |
| Sections de style | 10, y compris les cartes, les dates, la ligne et les points |
| Besoins | Élémenteur et maître Addons |
Chronologie personnalisée (gratuite) ou Chronologie de publication (Pro)
La Chronologie personnalisée est l'option gratuite Chaque élément obtient une date, que vous pouvez échanger contre une étiquette personnalisée comme “Phase 1”, une zone de contenu texte riche, une image et un lien facultatif pour l'ensemble de la carte Les éléments peuvent également avoir leurs propres paramètres de point et de couleur Post Timeline, qui fait partie de Pro, construit la chronologie à partir de vos publications : filtre par catégorie, balise ou auteur, exclure des publications spécifiques, définir l'ordre et le décalage, et choisir d'afficher le titre, l'image en vedette et l'extrait.
- Chronologie personnalisée : une date ou une étiquette personnalisée, un contenu, une image et un lien pour chaque élément.
- Style par article pour les couleurs de points, de cartes et de dates.
- Post Timeline (Pro) : filtres de catégorie, de balise et d'auteur, messages exclus, décalage et ordre.
- Les cartes postales peuvent afficher le titre, l'image en vedette, l'extrait et un lien en savoir plus.
Chronologie verticale dans Elementor
La chronologie verticale empile les cartes le long d'une ligne centrale Alignez-les à gauche, au centre, à droite ou en superposition, et inversez les positions des cartes avec un interrupteur L'espacement horizontal et l'espacement vertical définissent les espaces Sur les tablettes et les téléphones, les cartes se déplacent d'un côté de la ligne.
- Alignement horizontal : gauche, centre, superposition ou droite.
- Cartes inversées Positions bascule de quel côté vient en premier.
- Aligner vertical et deux curseurs d'espacement pour les cartes.
- Les cartes se déplacent d'un côté sur les tablettes et les téléphones.
Chronologie horizontale dans Elementor (carrousel)
Définir le style de chronologie sur la chronologie horizontale et une chronologie personnalisée devient un carrousel, avec les points sur une ligne au-dessus des cartes Sous Navigation, choisissez Flèches et points, Flèches et fraction, Flèches, points, Progrès ou Aucun, et ajoutez une barre de défilement si vous en voulez. Carousel Settings a une disposition standard ou Coverflow, Autoplay avec sa propre vitesse, Pause sur Hover, Loop et Diapositives à faire défiler.
- Six options de navigation, plus une barre de défilement en option.
- Disposition du carrousel ou du Coverflow.
- Lecture automatique, pause sur le survol, boucle et diapositive centrale.
- Disponible pour les chronologies personnalisées.
Voyez-le vivre dans le Démo de feuille de route horizontale.
Chronologie des publications : créez une chronologie à partir de vos articles de blog (Pro)
Post Timeline fait partie de Master Addons Pro. Passez le type de chronologie à Post Timeline et le widget répertorie vos publications publiées le long de la ligne, les plus récentes d'abord par défaut, de sorte que la chronologie augmente à chaque fois que vous définissez des publications par page, passez la commande et commandez par, filtrez par catégorie, balise ou auteur, sautez les publications avec des publications à exclure et utilisez Offset Post Count pour commencer plus bas dans la liste. Les chronologies des publications sont verticales.
- Requête : publications par page, commande postale, commande par et décompte des publications décalées.
- Filtres : Catégorie, Étiquette, Auteur et Posts to Exclude.
- Afficher ou masquer le titre, l'image, l'extrait et le bouton Lire la suite.
- Activer Liens fait de chaque carte un lien vers sa publication.
Pour une grille ou une liste de messages, utilisez le Widget blog.
Style de ligne et de point
Style la ligne avec une couleur d'arrière-plan, une couleur de progression, une épaisseur et une bordure Les points peuvent être des points simples, des icônes, des images, des chiffres ou des lettres, et chacun a des styles par défaut, Hover et Focused pour la taille, la couleur d'arrière-plan, la couleur des points et l'ombre du texte De cette façon, le jalon qu'un visiteur regarde se démarque des autres.
- Fond de ligne, couleur de progression, épaisseur et bordure.
- Cinq types de points : points, icônes, images, chiffres ou lettres.
- États par défaut, survol et focalisé pour chaque point.
Style de cartes et de dates avec animations
Les cartes obtiennent un remplissage, une marge, un remplissage de contenu, un rayon de bordure et une typographie séparée du titre et du contenu Leur couleur, leur arrière-plan, leur ombre de boîte et leur ombre de texte peuvent changer à travers les états Par défaut, Survoler et Focalisé Activez les cartes Animate pour révéler chaque carte lorsqu'elle défile dans la vue Les dates ont leur propre typographie, remplissage, marge, ombre de texte et couleurs pour les trois états.
- Contrôle de l'espacement des cartes, du rayon et de la typographie.
- Styles par défaut, Hover et Focused pour les cartes et les dates.
- Animer les cartes pour révéler les éléments lors de leur défilement.
Chronologie personnalisée par rapport à la chronologie de publication
Voici comment les deux types de Timeline se comparent.
| Chronologie personnalisée | Chronologie des publications | |
|---|---|---|
| Prix | Gratuit | Maître Addons Pro |
| Contenu | Articles que vous ajoutez dans le panneau | Vos publications publiées |
| Mises à jour | Lorsque vous modifiez les éléments | Chaque fois que vous publiez un post |
| Dispositions | Carrousel vertical ou horizontal | verticale |
| Chaque entrée montre | Date ou étiquette, contenu, image, lien | Titre, image en vedette, date, extrait, lire la suite |
| Meilleur pour | Histoires, feuilles de route, horaires | Archives des nouvelles, notes de publication |
Pour une grille de publication complète à côté de votre chronologie, utilisez le gratuit Widget blog. Pour afficher les chiffres derrière vos jalons, ajoutez Compter.
Exemples de chronologie
Le spectateur ci-dessous a 16 designs prêts Ouvrez n'importe lequel d'entre eux pour le voir en direct.
- Jalons pour une histoire d'entreprise.
- Dark Changelog pour les notes de sortie.
- Feuille de route horizontale pour les phases du produit.
- Publiez le blog de chronologie pour les articles dans l'ordre des dates.
- Images d'études de cas pour les étapes du projet avec photos.
- Étapes de superposition pour un processus.
- Ordre du jour de l'événement pour un calendrier.
Questions fréquemment posées sur la chronologie
Dois-je utiliser la chronologie des publications ou la chronologie personnalisée ?
Utilisez Custom Timeline, qui est gratuit, lorsque vous souhaitez contrôler chaque date et entrée, comme une page Notre historique ou une feuille de route Utilisez Post Timeline, qui fait partie de Master Addons Pro, lorsque la chronologie doit se mettre à jour à partir de vos articles de blog, comme une archive de nouvelles.
Comment fonctionne l'État « Focalisé » ?
L'état Focused stylise l'élément qui est actuellement actif lorsque les visiteurs font défiler la chronologie ou se déplacent dans le carrousel Donnez-lui un arrière-plan de carte différent, une couleur de date ou un point plus grand pour que l'étape actuelle se démarque.
Puis-je construire une chronologie dans Elementor sans plugin ?
Oui, un simple. Empilez les conteneurs dans une colonne, donnez à chacun une bordure gauche pour la ligne et placez un widget d'icône sur la bordure avec Position définie sur Absolu pour le point. Des côtés alternatifs, une mise en page horizontale et une animation de défilement nécessitent un CSS personnalisé ou un widget de chronologie.
Comment ajouter une chronologie horizontale dans Elementor ?
Ajoutez le widget Chronologie, conservez Type de chronologie sur Chronologie personnalisée et définissez Style de chronologie sur Chronologie horizontale, puis choisissez les flèches ou les points sous Navigation, et définissez lecture automatique et bouclez sous Paramètres du carrousel.
Le widget Elementor Timeline est-il gratuit ?
Oui. Timeline est un widget gratuit, comprenant le type Custom Timeline et les mises en page verticales et horizontales. Le type Post Timeline, qui crée des entrées à partir de vos articles de blog, a besoin de Master Addons Pro.
Puis-je lier une carte chronologique entière à une page ?
Oui. Chaque élément Chronologie personnalisée possède un champ Lien qui rend l'ensemble de la carte cliquable Les Chronologies de publication ont un commutateur Activer les liens qui relie chaque carte à sa publication Évitez les autres liens à l'intérieur d'une carte liée, puisque les liens à l'intérieur des liens ne sont pas autorisés.
La chronologie peut-elle extraire automatiquement les articles de blog ?
Oui, avec le type Post Timeline dans Master Addons Pro. Il lit vos publications publiées et vous contrôlez l'ordre, le nombre de publications et les filtres de catégorie, de balise ou d'auteur.
Pourquoi les cartes semblent-elles vierges jusqu'à ce que je fasse défiler ?
Les cartes Animate sont allumées Chaque carte reste cachée jusqu'à ce qu'elle défile vers la vue, puis elle glisse dans Désactivez les cartes Animate dans la section Cartes de l'onglet Style si vous voulez que chaque carte soit visible dès le début.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
![Modules principaux Extension de duplicateur de messages/pages pour le lien de ligne Elementor : MA Duplicator dans la liste des pages WordPress créant une ébauche de page de destination - [Dupliqué n° 128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicateur de messages/pages
