Principaux points à retenir
- Ces huit exemples de chronologie Elementor sont tous construits avec un widget, le widget Master Addons Timeline, et chacun possède une page de démonstration en direct que vous pouvez ouvrir.
- Six des huit modèles de chronologie sont verticaux et deux sont des carrousels horizontaux, ce qui correspond à la manière dont les mises en page sont utilisées : verticales pour les longues histoires et horizontales pour les courtes séquences.
- Les exemples verticaux utilisent trois des quatre alignements du widget Chronologie : Centre pour cartes alternées, Gauche pour une liste unilatérale et Droite pour une liste unilatérale en miroir.
- La majeure partie de la différence visuelle entre les huit modèles provient de quatre sections Style du widget Chronologie : Cartes, Dates, Ligne et Points.
- Elementor et Elementor Pro n'incluent pas de widget de chronologie, donc tout modèle de chronologie Elementor dépend de l'installation d'un addon.
Les exemples de chronologie Good Elementor sont difficiles à trouver, car la plupart des démos sont trois cartes grises avec lorem ipsum Les huit modèles ci-dessous utilisent des histoires réelles : une reconstruction d'orgue, une travée de pont, un essai clinique, la première année d'une boulangerie Tous sont construits avec le Widget de chronologie Master Addons et chacun a une démo live.
Pour chaque exemple, vous obtenez ce pour quoi il est bon, ce qui fait fonctionner la conception et les paramètres qui la sous-tendent, afin que vous puissiez l'utiliser comme modèle pour votre propre page Si vous n'avez pas construit de chronologie auparavant, commencez par comment créer une chronologie dans Elementor.
Table des matières
Les huit exemples de chronologie en un coup d'œil
Choisissez d'abord par mise en page, puis par humeur. Ce tableau montre quelle conception de chronologie Elementor correspond à quelle tâche.
| # | Conception | Disposition | images | Bon pour |
|---|---|---|---|---|
| 1 | Reconstruction alternée | Verticale, centre | Non | Journaux de projet, restaurations |
| 2 | Champ d'image Arch | Vertical, un côté | Oui, arqué | Notes saisonnières ou annuelles |
| 3 | Enquête bien alignée | Vertical, droite | Non | Chronologies, dossiers |
| 4 | Fabrication horizontale | Carrousel horizontal | Oui | Étapes de production |
| 5 | Semaine des cartes divisées | Verticale, colonne unique | Non | Horaires semaine par semaine |
| 6 | Supports Arch alternatifs | Verticale, centre | Oui, arqué | Histoires de marques et de fondateurs |
| 7 | Essai de cartes légères | Vertical, un côté | Non | Jalons de la recherche et des processus |
| 8 | Année horizontale | Carrousel horizontal | Non | Histoire par année |
1. Chronologie de reconstruction alternative
Il s'agit de la chronologie verticale classique d'Elementor : les cartes alternent à gauche et à droite d'une ligne centrale, avec un point numéroté et une date pour chaque étape La démo raconte l'histoire d'un orgue à tuyaux reconstruit sur trois ans.
Utilisez-le pour des restaurations, des journaux de construction ou tout projet avec des étapes claires Les chiffres donnent l'ordre avant même de lire une date Pour le construire, utilisez Horizontal Align set to Center, une fine ligne, de petits points et un fond de carte à peine plus léger que la page.
Ouvrez la démo Alternating Rebuild
2. Chronologie du champ d'image Arch
Une chronologie unilatérale sur fond crème, où chaque entrée a une photo en forme d'arc à côté du texte La démo suit dix hivers de haie posée sur une ferme.
Utilisez-le pour des notes de terrain, des travaux saisonniers, des journaux de voyage ou tout ce qui est photo-led La culture en arc donne l'impression que les photos ordinaires sont délibérées Pour le construire, utilisez un alignement unilatéral et un grand rayon dans les coins supérieurs uniquement en style, images, rayon frontalier.
Ouvrez la démo Arch Image Field
3. Chronologie d’enquête alignée sur la droite
Ici la ligne descend sur le bord droit et les cartes se trouvent à sa gauche, avec un texte aligné à droite C'est le miroir de la mise en page habituelle La démo est la chronologie d'une demande d'information de deux ans.
Utilisez-le pour des enquêtes, des chronologies juridiques ou de conformité, ou des études de cas Un alignement inhabituel donne à une chronologie uniquement textuelle l'air conçu Pour le construire, utilisez Aligner horizontal défini sur Droite, Points avec une bordure et aucun remplissage.
Ouvrez la démo de Right Aligned Investigation
4. Chronologie de la fabrication horizontale
Le premier des deux exemples horizontaux Les étiquettes de mois se trouvent au-dessus des points vert lime, et les cartes image glissent en dessous avec des boutons de flèches rondes La démo couvre une travée de pont fabriquée en cinq étapes.
Utilisez-le pour les étapes de fabrication ou de production, ou un processus en cinq étapes Les photos portent chaque étape, et le texte reste sur trois lignes Pour le construire, utilisez le style de chronologie défini sur la chronologie horizontale, le paramètre de navigation sur les flèches et une image dans l'onglet Médias de chaque élément.
Ouvrez la démo de Fabrication horizontale. Les commandes du carrousel sont expliquées dans comment créer une chronologie horizontale dans Elementor.
5. Chronologie de la semaine des cartes divisées
Une seule colonne centrée de cartes blanches Chaque carte est divisée en deux : une bande étroite avec la semaine à gauche et le contenu à droite La démo est un rehang de musée prévu semaine après semaine.
Utilisez-le pour les horaires, les plans de sprint ou les contours de cours La colonne d'étiquettes s'aligne sur la page, afin que vous puissiez scanner les semaines sans lire les cartes Pour le construire, utilisez une étiquette personnalisée sur chaque élément (“Week 1 · 6 January”) au lieu d'une date, cartes lumineuses avec une ombre douce.
Ouvrez la démo de la Split Card Week
6. Chronologie alternative d'Arch Media
Cartes alternantes encore, cette fois avec des photos en noir et blanc recadrées sur une arche au-dessus de chaque carte La démo est la première année d'une boulangerie, à partir d'un four et d'un prêt bancaire.
Utilisez-le pour Des pages, des histoires de fondateurs ou une chronologie d'histoire d'Elementor pour une petite entreprise Une couleur d'accent et des photos monochromes font ressembler les images de qualité mixte à un ensemble Pour le construire, utilisez Horizontal Align set to Center, une image par élément, le même accent dans Dates et Points.
Ouvrez la démo Alternating Arch Media
7. Chronologie des essais de cartes lumineuses
Cartes lumineuses sur fond violet foncé, le tout d'un côté de la ligne, avec des points ambrés La démo suit un essai clinique depuis le financement jusqu'à un amendement de protocole.
Utilisez-le pour les étapes de recherche, les cycles de financement ou les processus d'approbation Le contraste entre la carte et l'arrière-plan fait le travail, donc les cartes n'ont besoin d'aucune bordure ou ombre Pour le construire, utilisez l'alignement horizontal défini sur la gauche, un fond de cartes claires, de petits points remplis.
Ouvrez la démo Light Card Trial
8. Chronologie de l'année horizontale
La deuxième conception horizontale met de grandes années au-dessus de la ligne (1982, 1986, 1989) avec une courte carte sous chacune La démo est seize ans d'automatisation de phare, et elle associe la chronologie avec une table avant et après.
Utilisez-le pour l'histoire de l'entreprise par année, générations de produits ou anniversaires L'année est le plus gros texte à l'écran, ce que les gens recherchent dans une histoire Pour le construire, utilisez Horizontal Timeline, une étiquette personnalisée contenant uniquement l'année et une typographie à grandes dates dans une couleur d'accent.
Ouvrez la démo de l'année horizontale
Vous voulez tous les seize ? La visionneuse de démonstration sur le Widget Élémenteur Chronologie page détient ces huit plus huit autres, dont un journal des changements, une feuille de route et un agenda d'événement.
Comment les utiliser comme modèles
Vous pouvez reconstruire n’importe lequel d’entre eux Élémenteur modèles de timeline en quelques minutes, car les différences sont toutes dans les paramètres Pour une page complète à mettre un, voir le Modèles de pages d'éléments.
- Ajoutez le widget Chronologie et entrez vos propres éléments : une date ou une étiquette, un en-tête, une brève description et une image facultative.
- Choisissez la disposition Choix de style chronologique vertical ou horizontal, et le style, la disposition et l'alignement horizontal choisissent les choix gauche, centre, superposition ou droite.
- Faites correspondre les couleurs Définissez d'abord la page ou le fond du conteneur, puis les cartes, les dates, la ligne et les points.
- Vérifiez l'état Focalisé Chaque exemple donne à l'entrée en vue une carte ou un point légèrement différent afin que le lecteur garde sa place.
- Regardez-le sur un téléphone Les chronologies verticales se déplacent d'un côté sur les petits écrans, et les horizontales affichent moins de cartes.
Afficher les publications sur une chronologie a son propre guide : comment afficher les articles de blog sur une chronologie dans Elementor.
À lire aussi: 20 modèles de curseurs d'éléments(en), qui incluent un curseur de chronologie avec un espacement réel entre les années.
Questions fréquemment posées
Elementor est-il livré avec des modèles de chronologie ?
No. Elementor et Elementor Pro n'ont pas de widget de chronologie, donc leur bibliothèque de modèles n'a pas non plus de véritable chronologie Les modèles de chronologie pour Elementor s'appuient toujours sur un widget d'addon ou sur un CSS personnalisé.
Quelle disposition de chronologie est la meilleure pour l’historique d’une entreprise ?
Une chronologie verticale alternée convient à une longue histoire avec des photos, comme l'exemple 6. pour une courte histoire de cinq ou six années principales, une chronologie d'année horizontale comme l'exemple 8 prend moins de place.
Puis-je utiliser ces conceptions de chronologie avec n'importe quel thème ?
Oui. Les designs sont réalisés dans l'éditeur Elementor avec les propres commandes de style du widget Timeline, ils ne dépendent donc pas d'un thème Les polices suivent la typographie globale de votre site à moins que vous ne les définissiez dans le widget.
Combien d'éléments une chronologie devrait-elle comporter ?
Quatre à huit est une fourchette confortable Sous quatre, une liste simple est plus claire Sur dix, divisez la chronologie par année ou par décennie, ou raccourcissez chaque carte à un titre et une ligne.
Réflexions finales
Ces huit exemples de chronologie Elementor couvrent les mises en page dont la plupart des sites ont besoin : deux conceptions alternées, trois unilatérales, un programme à une colonne et deux carrousels horizontaux. Ils proviennent tous d'un seul widget et les différences se répartissent en quatre sections de style : cartes, dates, ligne et points.
Ouvrez les démos, choisissez la plus proche et construisez votre version avec le Widget Chronologie.
Lecture connexe
