Principaux points à retenir
- Elementor et Elementor Pro n'ont pas de widget de chronologie, donc une chronologie horizontale Elementor a besoin d'un widget d'addon ou d'une rangée de conteneurs fabriqués à la main avec CSS personnalisé.
- Le widget Modules complémentaires principaux La chronologie passe de la verticale à l'horizontale avec une commande, Style de la chronologie, qui se trouve dans l'onglet Contenu sous la section Chronologie.
- Une chronologie horizontale dans le widget Master Addons est un carrousel et son contrôle de navigation propose six options : flèches et points, flèches et fraction, flèches, points, progrès et aucun.
- Les paramètres du carrousel dans le widget Chronologie incluent une disposition Carrousel ou Coverflow, une lecture automatique avec une vitesse par défaut de 5 000 ms, une pause sur le vol stationnaire, des diapositives pour faire défiler, une diapositive centrale et une boucle.
- La mise en page horizontale fonctionne uniquement avec les éléments de chronologie personnalisée, car une chronologie de publication construite à partir de articles de blog reste verticale.
Une chronologie horizontale Elementor définit vos dates de gauche à droite, avec un point sur la ligne au-dessus de chaque carte et des flèches pour le parcourir. Élémenteur n'a pas de widget de chronologie propre, donc ce guide utilise le Widget de chronologie dans Master Addons: où la disposition horizontale est une seule baisse.
Les six étapes ci-dessous partent d'une chronologie verticale ordinaire et se terminent par un carrousel en état de marche Chaque capture d'écran provient de l'élémenteur 4.3 avec le widget sur une page de test Si vous n'avez pas encore placé de chronologie, le tutoriel complet sur la chronologie couvre les bases d'abord.
Table des matières
Lorsqu'une chronologie horizontale est le meilleur choix
Utilisez une chronologie horizontale lorsque vous avez une courte série de pas et un espace vertical limité Une chronologie verticale avec trois cartes peut prendre plus qu'un plein écran de défilement Les trois mêmes cartes côte à côte s'insèrent dans une rangée, c'est pourquoi des mises en page horizontales apparaissent sur les pages d'accueil et les pages de destination, tandis que les verticales conviennent aux longues pages À propos.
| Facteur | Chronologie horizontale | Chronologie verticale |
|---|---|---|
| Meilleure longueur | 3 à 8 articles | Toute longueur |
| Espace dont il a besoin | Une rangée | Croît avec chaque article |
| Comment les visiteurs se déplacent | Flèches, points ou glisser | Faire défiler la page |
| Utilisation typique | Étapes du processus, feuille de route du produit, faits saillants annuels | Histoire de l'entreprise, changelog, longue histoire |
| Source dans Master Addons | Éléments de chronologie personnalisés | Articles personnalisés ou articles de blog |
Une chronologie horizontale est une sorte de carrousel Si vous ne savez pas lequel des deux termes correspond à votre conception, carrousel vs curseur dans Elementor explique la différence.
Comment créer une chronologie horizontale dans Elementor
Vous avez besoin d'Elementor et Master Addons installés, puis six étapes dans l'éditeur Rien ci-dessous n'a besoin de CSS personnalisé.
Étape 1 : Ajoutez le widget Chronologie
Ouvrez votre page avec Elementor, recherchez dans le panneau du widget Chronologie et faites-le glisser sur la page Elle arrive sous forme de chronologie verticale avec trois exemples d'éléments Partir Type de chronologie sur Chronologie personnalisée: parce que la disposition horizontale n’est proposée que pour les articles personnalisés.
Étape 2 : Passez du style de chronologie à horizontal
Dans l'onglet Contenu, ouvrez le Chronologie section et changement Style de la chronologie de la chronologie verticale à Chronologie horizontale. Les cartes se déplacent en rangée, la ligne traverse le haut et chaque point se trouve au-dessus de sa carte avec la date dessus. Deux nouvelles sections apparaissent dans le panneau : Paramètres de navigation et de carrousel.
Étape 3 : Modifier les éléments
Cliquez sur une ligne ci-dessous Articles pour l'ouvrir Chaque élément comporte trois petits onglets : Contenu, Médias et Style.
- Afficher décide de ce qui se trouve au-dessus du point : une date ou une étiquette personnalisée telle que “Phase 1”.
- dater et Date Format définissez la date et la façon dont elle est écrite.
- Lien rend la carte entière cliquable.
- L'éditeur de contenu contient le titre et la description. Il n'y a pas de champ de titre distinct, donc la première ligne est le titre.
- Le Médias tab ajoute une image à la carte.
Les images larges fonctionnent mieux que les grandes ici Trois photos hautes poussent le texte loin sur l'écran.
Étape 4 : Choisissez la navigation
Ouvrir le navigation sectionnez et choisissez la façon dont les visiteurs se déplacent dans la chronologie. La liste déroulante Navigation propose six options.
| Option navigation | Ce que les visiteurs voient | Bon pour |
|---|---|---|
| Flèches et points | Flèches précédente et suivante plus un point par diapositive | La plupart des chronologies |
| Flèches et Fraction | Flèches plus un compteur tel que 2 /6 | Longues chronologies où les points sont bondés |
| Flèches | Flèches uniquement | Aménagements propres |
| Points | Points seulement | Dessins touch-first |
| Progresser | Un bar qui se remplit au fur et à mesure que le carrousel avance | Étapes du processus |
| Aucun | Balayez ou lecture automatique uniquement | Bandes décoratives |
En dessous du dépôt, vous pouvez allumer Des balles dynamiques?, ajoutez une barre de défilement avec Afficher la barre de défilement?(,) définissez la position, et échangez les icônes Suivant et Précédent. Cacher Arrow sur Mobile ? est activé par défaut, ce qui laisse aux visiteurs du téléphone un balayage et des points.
Étape 5 : Définissez le comportement du carrousel
Ouvrir Paramètres du carrousel pour contrôler comment la chronologie se déplace.
- Disposition: Carrousel pour une rangée plate, ou Coverflow pour un effet 3 D avec des commandes Rotate, Stretch et Depth.
- Lecture automatique et Vitesse de lecture automatique: la vitesse par défaut est de 5000 ms, donc une nouvelle diapositive toutes les cinq secondes.
- Pause sur Hover: arrête la lecture automatique pendant que le pointeur est sur la timeline.
- Diapositives à faire défiler: combien de cartes se déplacent par clic, défini par appareil.
- Diapositive centrale, Grab Cursor et Mode sans glisser pour la sensation du drag.
- Boucle: retourne au premier élément après le dernier.
- Vitesse d'animation (ms): combien de temps prend chaque transition de diapositive, 500 par défaut.
Pour une vraie chronologie, pensez à deux fois à la lecture automatique Les dates ont une commande, et une carte qui glisse pendant que quelqu'un la lit est ennuyeuse La lecture automatique avec Pause on Hover est un juste milieu.
Étape 6 : Stylez les flèches, les points et les cartes
Passez à l'onglet Style Il comporte dix sections : Articles de carrousel, Mise en page, Images, Postes, Cartes, Flèche, Dates, Ligne, Points et Navigation.
- Cartes: remplissage, rayon de bordure, couleurs de titre et de contenu, plus un look séparé pour la carte focalisée.
- dates: typographie et couleur de la date ou de l'étiquette au-dessus de chaque point.
- Ligne: la couleur et l'épaisseur de la piste.
- points: un point uni, une icône ou une image, avec taille et couleurs.
- navigation: couleurs et tailles pour les flèches, les points et la barre de défilement.
Publiez la page et testez-la sur un téléphone Les cartes par ligne tombent sur des écrans plus petits, alors vérifiez que le texte correspond toujours.
Vous voulez également la disposition verticale ? Le Widget Élémenteur Chronologie page répertorie chaque option de mise en page, d'alignement et de style en un seul endroit.
Tutoriel vidéo
Cette vidéo construit une chronologie à partir d'une page vide et la bascule vers le carrousel horizontal à 3h44.
Quatre choses qui tournent mal
La plupart des problèmes liés à une chronologie horizontale proviennent du fait de la traiter comme une chronologie verticale.
- Trop d'articles. Au-delà de huit heures environ, les visiteurs arrêtent de cliquer. Utilisez une chronologie verticale ou divisez l'histoire par année.
- Hauteurs inégales des cartes. Une longue description étire la rangée Coupez le texte ou allumez la hauteur automatique dans les paramètres du carrousel.
- Flèches sur la première carte. Si les flèches se trouvent au-dessus du contenu, modifiez la position dans la section Navigation.
- Attendre des articles de blog. Le type Post Timeline est vertical Pour les messages d'une ligne, utilisez le Widget blog en mode carrousel.
À lire aussi: 20 modèles de curseurs d'éléments(qui incluent une conception de curseur de chronologie).
Questions fréquemment posées
Puis-je faire une chronologie horizontale dans Elementor sans Elementor Pro ?
Oui. Elementor Pro n'inclut pas non plus de widget de chronologie, donc Pro ne fait aucune différence ici Ajouter un widget de chronologie à partir d'un addon tel que Master Addons, définir Timeline Style sur Horizontal Timeline, et les éléments deviennent un carrousel.
Comment ajouter des flèches à une chronologie horizontale dans Elementor ?
Ouvrez la section Navigation dans l'onglet Contenu et choisissez Flèches et points, Flèches et fraction, ou Flèches Vous pouvez ensuite définir la position de la flèche et remplacer les icônes Suivant et Précédent de la même section.
Une ligne temporelle horizontale peut-elle être diffusée automatiquement ?
Oui. Activez la lecture automatique sous Paramètres du carrousel et réglez la vitesse de lecture automatique en millisecondes La valeur par défaut est 5000, soit cinq secondes par diapositive La pause sur Hover l'arrête pendant qu'un visiteur lit.
Une chronologie horizontale est-elle réactive ?
Oui. C'est un carrousel, donc il montre moins de cartes sur les tablettes et les téléphones et les visiteurs glissent pour se déplacer Les diapositives pour faire défiler ont des valeurs distinctes par appareil.
Puis-je afficher les articles de blog dans une chronologie horizontale ?
Pas avec le type Post Timeline, qui est vertical seulement Ajouter les messages à la main comme éléments de la Chronologie personnalisée, ou utiliser un carrousel de poste.
Réflexions finales
Une chronologie horizontale Elementor se résume à un paramètre et deux sections : Style de chronologie réglé sur Chronologie horizontale, puis Navigation avec ses six options et Paramètres du carrousel pour la lecture automatique, la boucle et la vitesse Gardez-le à trois à huit cartes courtes et testez-le sur un téléphone.
Le Page du widget de la chronologie a des démos en direct des deux mises en page, y compris un démo de feuille de route horizontale.
Lecture connexe
2 réponses
Le point que la disposition horizontale ne fonctionne qu'avec les éléments de la Chronologie personnalisée, pas avec la Chronologie des publications, est facile à manquer et briserait une construction tard Avant de changer de Style de Chronologie, confirmez que chaque élément est un élément personnalisé, puisque les chronologies pilotées par les articles de blog restent verticales Un ajustement pratique : définissez Navigation sur Flèches et points, puis testez sur une largeur de téléphone étroite, car les flèches du carrousel peuvent encombrer les cartes et les points rendent le balayage plus clair pour les lecteurs.
Merci d'avoir partagé ces conseils utiles ! 😊 Vous avez tout à fait raison de dire que vérifier le type d'élément de la chronologie et tester la mise en page sur des écrans plus petits peut aider à éviter les problèmes inattendus Nous apprécions que vous le souligniez et que vous aidiez les autres utilisateurs de Master Addons à construire des chronologies meilleures et plus réactives Merci d'avoir fait partie de notre communauté !