Comment créer une chronologie dans Elementor (Vertical, Horizontal & Post Timeline)

Élémenteur n'a pas de widget de chronologie propre(en anglais), dans la version gratuite ou dans Pro. Pour mettre une ligne du temps sur une page Elementor vous en ajoutez une à partir d'un addon Ce guide utilise le widget Timeline dans le gratuit Additions maîtres plugin, qui couvre les mises en page verticales, les carrousels horizontaux et les chronologies qui se construisent à partir de vos articles de blog.

Chaque capture d'écran ci-dessous provient d'Elementor 4.2.4 avec Master Addons 3.2. Les chronologies personnalisées, les mises en page et l'onglet Style entier sont gratuits. Post Timeline a besoin de Pro, et il est étiqueté là où il apparaît.

Pouvez-vous faire une chronologie dans Elementor sans plugin ?

Techniquement oui, et c'est plus de travail qu'il n'y paraît Vous empileriez des conteneurs, vous en donneriez une bordure gauche pour simuler la ligne centrale, positionnez absolument un point sur chaque ligne et alternez l'alignement gauche et droit avec le CSS personnalisé Ensuite, vous écririez vous-même les règles réactives, car cette disposition alternée doit s'effondrer en une seule colonne sur les téléphones.

Il tombe sur la maintenance Ajouter un jalon au milieu signifie ré-alterner chaque ligne en dessous d'elle à la main Un widget garde la ligne, les marqueurs, l'alternance et les points d'arrêt comme paramètres, donc ajouter une entrée est un clic.

Recherchez dans le panneau du widget “timeline” sur une installation d'Elementor d'origine et exactement un résultat revient, le widget Master Addons.

Installez le plugin

Depuis le tableau de bord WordPress, rendez-vous sur Plugins → Ajouter un plugin, recherche de Modules complémentaires principaux pour Elementor, puis installez et activez Ouvrez n'importe quelle page avec Elementor et recherchez dans le panneau du widget chronologie.

Si rien ne se produit après l'activation, vérifiez Additions principales → Bibliothèque de widgets et assurez-vous que la Chronologie est activée Les widgets peuvent être désactivés individuellement pour garder le code inutilisé hors du front-end, ce qui vaut la peine de le faire de toute façon si vous vous souciez de Vitesse de la page de l'élémentateur.

Comment ajouter une chronologie dans Elementor, étape par étape

Étape 1 : Faites glisser le widget sur la page

Modifier une page avec Elementor, rechercher Chronologie(en), et faites-le glisser dans un conteneur Il arrive avec trois exemples d'entrées déjà remplies, afin que vous puissiez voir ce que chaque champ fait avant de changer quoi que ce soit.

Étape 2 : Choisissez le type de chronologie

Dans l'onglet Contenu, ouvrez le Chronologie section. La première baisse est Type de chronologie.

Chronologie personnalisée est le gratuit Vous tapez vous-même chaque entrée, ce qui est ce que vous voulez pour un historique de l'entreprise, une feuille de route de produit ou un calendrier d'événements, où le contenu est fixe et éditorial.

Chronologie des publications est une fonctionnalité Master Addons Pro. Il lit vos publications WordPress et construit la chronologie à partir d'elles, donc publier une publication ajoute une entrée par lui-même Il y a une section dessus plus bas.

Étape 3 : Choisissez verticale ou horizontale

La deuxième baisse est Style de la chronologie.

Vertical parcourt la page avec des cartes alternant à gauche et à droite d'une ligne centrale Horizontal dispose les entrées côte à côte comme un carrousel avec des flèches Les deux sont libres, et vous pouvez basculer entre eux à tout moment sans perdre vos entrées.

Une limite à connaître maintenant : Le style de chronologie n'apparaît que pour les chronologies personnalisées. Les chronologies des publications sont uniquement verticales et la liste déroulante disparaît lorsque vous changez de type.

Étape 4 : Modifiez vos entrées

Sous Articles[traduction], chaque entrée est une ligne de répéteur Cliquez-en une pour l'ouvrir.

Chaque ligne comporte un onglet Contenu et un onglet Médias Les champs qui comptent :

• Afficher: Date ou étiquette personnalisée. Date vous donne un sélecteur de date ; L'étiquette personnalisée vous permet d'écrire n'importe quoi, c'est ainsi que vous obtenez “Q3 2026” ou “Founded” sur la ligne au lieu d'une date calendaire.
• Date Format: préréglages plus Personnalisé. Personnalisé prend une chaîne de date PHP, donc F Y imprime “JuneJuin 2019” et empêche une chronologie d'étape de ressembler à un journal des modifications.
• Lien: rend toute la carte cliquable Laissez tomber si le texte de la carte contient déjà un lien, car un lien à l'intérieur d'un lien n'est pas valide HTML et les navigateurs en supprimeront un.
• La zone de contenu est un éditeur complet. Il n'y a pas de champ de titre séparé3, donc le titre de l'entrée entre ici sous la forme d'un titre 3.
• L'onglet Média ajoute une image à la carte et définit sa résolution.

Ajouter un élément crée une nouvelle ligne, l'icône de copie en duplique une et les lignes glissent pour être réorganisées.

Étape 5 : Publiez et regardez-le

Quatre entrées, dates formatées en mois et année, icônes de drapeau sur les marqueurs, le tout sur le plugin gratuit.

Les cartes alternent les côtés et les dates se situent en face de chacune d'elles sans que vous positionniez quoi que ce soit.

Pourquoi les cartes semblent vierges jusqu'à ce que vous fassiez défiler

Les cartes de chronologie commencent masquées et s'animent lorsqu'elles défilent dans la vue, et le point le plus proche de votre position de défilement prend un état focalisé, que vous stylisez séparément dans la section Points.

Ainsi, une chronologie placée sous le pli semble vide dans un outil de capture d'écran, dans une exportation PDF ou dans un audit de vitesse de page qui ne défile jamais Faites défiler la page et les entrées apparaissent.

Faire une chronologie horizontale dans Elementor

Définir Style de la chronologie vers la chronologie horizontale et la disposition tourne : les entrées sont côte à côte, les points se trouvent au-dessus des cartes sur une ligne horizontale et les flèches les parcourent.

Les flèches sont configurées dans l'onglet Style sous Navigation Deux commandes, faciles à mélanger :

• Placement est à l'intérieur ou à l'extérieur du carrousel.
• Position c'est là qu'ils s'assoient, du haut à gauche au bas à droite.

Définir la position sur une valeur appartenant au placement dépose les flèches dans le coin supérieur gauche, au-dessus de votre première entrée. Le centre inférieur avec placement extérieur est l'appariement sûr, et c'est ce qu'utilise la capture d'écran.

Horizontal convient à quatre à six jalons forts au-dessus du pli, comme une séquence de lancement de produit sur une page de destination Au cours des six dernières entrées, le lecteur clique plusieurs fois sur une flèche pour voir le contenu qu'il ne peut pas numériser, et la verticale est également la mise la plus sûre sur les téléphones, où la lecture de haut en bas est ce que les gens attendent, Quelle que soit la sélection que vous choisissez, vérifiez-la par rapport à votre points d'arrêt réactifs avant d'expédier, car les deux configurations s'effondrent différemment.

Coiffage de la ligne, des points et des cartes

L'onglet Style comporte onze sections : éléments de carrousel, disposition, images, messages, cartes, flèche, dates, ligne, points, navigation et modèles.

Ligne définit la couleur et l'épaisseur de la ligne centrale. Cartes gère l'arrière-plan, la bordure, l'ombre et le rembourrage. Dates et les contrôles de typographie font correspondre le texte d'entrée à votre système de polices.

Points la section vaut-elle la peine d'y passer du temps. C'est Type le contrôle sélectionne ce qui se trouve sur chaque marqueur et comporte trois onglets d'état : Défaut, Survole et Focalisé. Focalisé s'applique à l'entrée la plus proche de la position de défilement du lecteur, donc le laisser non stylé est ce qui fait qu'une chronologie est lue comme une liste plate pendant que le lecteur défile devant les trois.

Définir Type aux icônes et au marqueur prend une icône, ce que les captures d'écran ici utilisent Vérifiez-la immédiatement sur le frontal : si le marqueur se présente sous la forme d'un cercle vide, l'icône n'a pas chargé, et le retour de Type à Par défaut vous donne un point de couleur unie qui fonctionne toujours.

Construire une chronologie à partir de vos articles de blog

Basculer le type de chronologie vers Chronologie des publications et le panneau change complètement Au lieu de taper des entrées, vous décrivez les publications à tirer, et le widget construit la chronologie à partir d'elles.

Les contrôles méritent d'être définis :

• Afficher le titre, Titre Lien et Étiquette de titre. Définissez la balise de titre sur H2 ou H3 afin que les titres de publication se trouvent sous le H1 de la page dans l'ordre de titre Il s'agit de la même règle d'ordre de titre qui compte lorsque vous créez une page de blog dans Elementor.
• Afficher l'image et Résolution d'image mettez l'image en vedette sur la carte.
• Date Format et Temps Format. La valeur par défaut imprime l'heure à côté de la date, qui se lit bizarrement sur une chronologie d'étape Définissez le format d'heure sur aucun, ou utilisez un format de date personnalisé.
• Messages par page, Compte de postes décalés, Post-commande et Commandez par.
• Catégorie, Filtrer par balise, Auteur et Messages à exclure réduisez la requête, afin qu'une chronologie puisse être l'“ tout dans News” et une autre un ensemble trié sur le volet.
• Activer les liens rend l'ensemble de la carte cliquable Même avertissement que la version personnalisée : éteignez-la si le contenu de la carte a ses propres liens.

Parce qu'elle lit les publications directement, cette version tombe parfaitement dans un Constructeur de thèmes archive ou modèle unique, et il se met à jour lorsque vous publiez Post Timeline fait partie de Maître Addons Pro.

Chronologie personnalisée ou postale : laquelle

Si la publication d'un message doit ajouter une entrée, utilisez Post Timeline Si les entrées sont une histoire que vous avez écrite une fois, utilisez Custom.

Où une chronologie vaut la peine d'être utilisée

• À propos des pages. Une histoire verticale de l'entreprise, avec un Compter ligne au-dessus pour les numéros de titre.
• Pages produits. Une feuille de route horizontale des fonctionnalités expédiées et de la suite Quatre à six entrées, pas plus.
• Notes de publication. Une chronologie de publication filtrée dans une catégorie, à côté d'une Journal des changements widget.
• Portefeuilles et études de cas. Entrées datées avec images en vedette, c'est là que l'onglet Médias est payant.
• Horaires des événements et des cours. Étiquettes personnalisées au lieu de dates, la ligne indique donc 1 Jour 1, Jour 2, Jour 3”.

Sept choses qui améliorent la lecture d'une chronologie

1. Maintenez chaque carte à deux ou trois phrases Une chronologie est un format de numérisation et les paragraphes complets la battent.
2. Utilisez des étiquettes personnalisées pour les jalons.“2019” battes“17Jun 17, 19” lorsque le jour exact n'a pas d'importance.
3. Gardez un niveau de titre à l'intérieur des cartes La zone de contenu n'a pas de champ de titre, définissez donc le cap de chaque entrée sur la même balise au lieu de mélanger H2 et H4.
4. Passez à la verticale au-delà de six entrées, car le défilement horizontal devient fastidieux rapidement.
5. Style l'état Focalisé C'est celui qui indique au lecteur où il se trouve.
6. Vérifiez vos marqueurs sur le front-end après avoir choisi une icône Un cercle vide signifie que l'icône n'a pas chargé, et les points par défaut sont la solution de secours sûre.
7. Vérifiez-le sur un téléphone La disposition alternée s'effondre sur une colonne, et les longues étiquettes personnalisées sont la première chose à mal envelopper.

Questions fréquemment posées

Lecture connexe

• Widget Élémenteur Chronologie, la page de fonctionnalités avec chaque contrôle répertorié
• Documentation du widget de chronologie
• Comment créer une page de blog avec Elementor
• Pratiques de référencement pour les pages Elementor
• Modules complémentaires principaux sur WordPress.org