Comment créer une chronologie dans WordPress avec Elementor

Les délais fournissent un moyen visuel d'afficher des événements, des jalons ou des étapes dans un ordre chronologique. Ils aident à présenter des informations dans un flux linéaire qui permet aux visiteurs et aux utilisateurs de comprendre plus facilement la séquence d'événements ou de processus. En les utilisant, vous pouvez présenter le parcours de votre entreprise, une feuille de route du projet ou une histoire personnelle avec clarté.

L'ajout d'une chronologie à WordPress peut améliorer l'expérience utilisateur en rendant le contenu plus attrayant et plus facile à suivre. C'est pourquoi l'utilisation de chronologies est devenue une tendance sur de nombreux sites Web. Elementor est un plugin si convivial que vous pouvez utiliser pour créer et ajouter des délais à vos messages et pages WordPress avec un niveau de personnalisation extrême.

Dans cet article, nous vous montrerons un guide étape par étape sur la façon de créer une chronologie dans WordPress avec Elementor. Avant cela, nous couvrirons quelques parties théoriques concernant le sujet d'aujourd'hui.

Types de délais et leurs cas d'utilisation

Il existe deux types de délais - horizontaux et verticaux. Chacun a des cas d'utilisation spécifiques qui ajoutent de la valeur à un site Web différemment. Explorons-les et leurs cas d'utilisation dans la discussion ci-dessous.

1. Chronologie verticale

Une chronologie verticale affiche des événements et des informations de haut en bas, généralement le long de la gauche ou du centre de la page. C'est un format convivial par défilement qui fonctionne de manière transparente sur les appareils de bureau et mobiles. Au fur et à mesure que les utilisateurs font défiler la page, ils suivent l'ordre chronologique dans une disposition propre et lisible.

Cas d'utilisation pour les délais verticaux:

• Histoire de l'entreprise ou parcours de croissance
• Curriculum vitae ou carrière saillants
• Série de articles de blog ou progression de l'article
• Explications de processus étape par étape
• Jalons de développement de produits

2. Chronologie horizontale

Une chronologie horizontale affiche des événements de gauche à droite, suivant un format de défilement ou de glissement. Il est généralement utilisé là où l'espace est plus large que grand. Ce format est le meilleur pour les délais plus courts ou lorsque vous souhaitez afficher quelques événements importants dans une disposition large et facile à voir.

Cas d'utilisation pour les délais horizontaux:

• PROJECTS ROTALAPS OU PLANCE STAPES
• Horaires des événements
• Campagnes de marketing ou lancements de produits
• Présentations de portefeuille
• Touraux éducatifs ou aperçus historiques

Comment créer une chronologie dans WordPress avec Elementor

Comme nous l'avons déjà dit, Elementor est un plugin de générateur de page glisser-déposer. Mais la triste nouvelle est qu'il n'inclut aucun widget pour créer des délais. Cependant, le plugin dispose de nombreux addons par lesquels vous pouvez étendre les fonctionnalités du plugin Core Elementor.

HappyAddons est l'un d'eux. Il est livré avec plus de 130 widgets et 22+ fonctionnalités qui peuvent surmonter de nombreuses lacunes d'Elementor. Ainsi, en installant le plugin HappyAddons, vous pouvez activer plus de fonctionnalités de conception sur votre site. Dans de nombreux cas, vous n'aurez même pas besoin d'Elementor Pro si vous avez des HappyAddons.

Explorons maintenant comment créer des délais dans WordPress avec Elementor et HappyAddons.

Comment créer une chronologie horizontale dans WordPress

J'espère que vous savez déjà quelle est la chronologie horizontale. HappyAddons a un widget de chronologie horizontal , qui est entièrement libre à utiliser. Ainsi, vous avez besoin d'installer et d'activer les plugins suivants sur votre site Web.

• Élémentor
• Happyaddons

Une fois que les plugins ont installé et activé sur votre site, commencez à suivre les étapes expliquées dans le tutoriel ci-dessous.

Étape 01: Créez une section sur le toile Elementor

Ouvrez un message ou une page avec Elementor. Créez une section avec la structure de colonne FlexBox souhaitée pour créer une chronologie.

Étape 02: Ajoutez le widget de chronologie horizontal à la toile

Trouvez le widget de chronologie horizontal sur le panneau Elementor. Une fois que vous l'avez trouvé, faites glisser le widget sur la toile.

Vous verrez que le widget de chronologie horizontal a été ajouté à la toile avec une disposition par défaut.

Étape 03: Sélectionnez un préréglage pour le widget

Un préréglage est un style de conception prédéfini ou une mise en page que vous pouvez instantanément appliquer à un widget pour une personnalisation rapide. Si vous ne souhaitez pas concevoir le widget à partir de zéro, vous pouvez sélectionner un préréglage. Le widget de chronologie horizontal est livré avec six préréglages.

Sélectionnez un préréglage que vous aimez pour le widget.

Étape 04: Ajouter du contenu au widget de chronologie horizontal

Développez la section chronologique . Ici, vous obtiendrez des options pour ajouter du contenu au widget. Par défaut, vous obtiendrez quatre onglets. Cliquez sur n'importe quel onglet pour l'étendre. Cela ouvrira de nombreux champs où vous pouvez placer et ajouter les informations souhaitées.

Une fois un onglet élargi, vous pouvez ajouter la date de l'événement, l'icône, l'image, la résolution d'image, le titre et la description dans l'onglet respectif.

Vous pouvez voir que nous avons ajouté du contenu à la section respective du widget horizontal.

De la même manière, ajoutez du contenu à tous les onglets de la chronologie. Vous pouvez voir que nous l'avons fait dans l'image ci-dessous.

Pour ajouter plus d'onglets au widget, cliquez sur le bouton + Ajouter un élément sous l'onglet Timeline.

Étape 05: Configurer les paramètres du widget de chronologie horizontal

Une fois la pièce de contenu terminée, développez la section Paramètres sous l'onglet Contenu. Vous pouvez configurer l'onglet HTML de titre, l'alignement de contenu, masquer la flèche de contenu, activer la lightbox, la vitesse d'animation, le nombre de diapositives à afficher, l'icône, etc.

Celles-ci sont si faciles à configurer. Nous espérons que vous pourrez les faire seuls vous-même.

Étape 06: styliser le widget de chronologie horizontal

Pour styliser le widget, accédez à l' onglet Style du panneau Elementor.

Développez d'abord la section chronologique .

Vous obtiendrez des options pour personnaliser l' épaisseur de la ligne, la couleur de ligne, l'espacement des dattes, la typographie de la date, la couleur, l'icône, le rayon de bordure, le type de bordure, la largeur de bordure, la couleur d'arrière-plan, etc.

Explorez-les et faites les personnalisations nécessaires nécessaires.

Vous pouvez voir que nous avons apporté quelques modifications à la chronologie horizontale.

Ensuite, développez la section des flèches . De là, vous pouvez personnaliser les icônes de flèche, leurs positions, tailles, largeur de bordure, rayon, etc.

De la même manière, développez la section de contenu de l'onglet Style. Vous pouvez personnaliser le rayon de bordure, le rembourrage, l'espace entre le contenu, le type de bordure, la largeur de bordure, la couleur, l'ombre, la typographie et plus du widget.

Effectuer les changements nécessaires.

Étape 07: Aperçu du widget de chronologie horizontale

Accédez à la page Aperçu et vérifiez si tout fonctionne bien ou non. Vous pouvez voir que notre chronologie horizontale de démo fonctionne bien sans aucun problème.

Comment créer une chronologie verticale dans WordPress

Alors que HappyAddons vous permet de créer gratuitement une chronologie horizontale, vous devez passer à la version premium du plugin pour créer une chronologie verticale. Assurez-vous donc que les plugins suivants sont disponibles sur votre site.

• Élémentor
• Happyaddons
• Happyaddons pro

Une fois disponibles sur votre site, commencez à suivre le tutoriel expliqué ci-dessous.

Étape 01: glisser-déposer le widget de la chronologie sur le canevas Elementor

Tapez la chronologie dans la zone de recherche. Sélectionnez le widget de chronologie autre que la chronologie horizontale. Glisser-déposer sur le canevas Elementor.

Une chronologie verticale sera créée sur la toile avec une disposition par défaut.

Étape 02: Sélectionnez un préréglage pour le widget de chronologie verticale

J'espère que vous savez déjà ce qu'est un préréglage, car nous en avons déjà discuté ci-dessus. Sélectionnez un préréglage si vous ne souhaitez pas concevoir la chronologie verticale à partir de zéro.

Étape 03: Ajouter du contenu à la chronologie verticale

Développez la section chronologique . Par défaut, vous verrez deux onglets. Développez n'importe quel onglet en cliquant dessus comme nous vous l'avons montré ci-dessus.

J'espère que vous n'avez pas besoin de parler beaucoup ici. Parce que vous pouvez ajouter presque le même type de contenu à la chronologie verticale que vous pouvez le faire dans le cas de la chronologie horizontale.

Vous pouvez ajouter une icône, modifier le type d'icône, définir le temps, définir un titre, ajouter une image, etc., pour chaque section de chronologie. Faites vous-même les choses.

Terminez l'ajout de contenu à la chronologie. Vous pouvez même ajouter plus d'éléments à la chronologie en cliquant sur l' élément + Ajouter comme indiqué ci-dessus.

Étape 04: Configurer les paramètres du widget de chronologie verticale

Développez la section Paramètres . Vous pouvez configurer s'il faut afficher la date, l'heure, la flèche de contenu et l'arborescence de défilement . Vous pouvez également modifier la balise de titre, l'alignement de la boîte d'icône, l'alignement des arbres et la couleur d'arrière-plan .

Faites vous-même les nœuds. Mais pour nous, l'alignement par défaut semble bon. Donc, nous nous y tiendrons pour le tutoriel.

Étape 05: styliser le widget de chronologie verticale

Venez à l' onglet Style du panneau Elementor. Vous pouvez personnaliser tous les types de contenu et d'éléments visuels sur le widget à partir de cet onglet.

Développez d'abord la boîte de contenu . Vous pouvez personnaliser la typographie, la couleur, la couleur de la flèche, le type d'arrière-plan, le type de bordure et la largeur des bordures d'ici. Faites cela.

De la même manière, développez la section de la boîte d'icônes . Vous pouvez modifier la largeur, la hauteur, l'espace de la boîte et d'autres options liées aux icônes du widget d'ici. Si vous êtes satisfait de la stylisation par défaut, ne touchez rien.

Stylisez le titre du widget si cela se sent nécessaire. Vous pouvez voir que nous avons changé notre typographie.

De la même manière, personnalisez l'apparence de l' heure et de la date . Nous avons changé sa couleur, son poids et sa typographie.

Enfin, développez la section des boutones . Vous pouvez styliser sa couleur d'arrière-plan, copier la typographie et autres .

Étape 06: Aperçu du widget de chronologie verticale

Venez à la page Aperçu et vérifiez si la chronologie des verticales fonctionne bien ou non. Faites-le en faisant défiler le widget. Nous espérons que cela fonctionnera bien de votre côté comme le nôtre.

Ainsi, vous pouvez créer différents types de sections de chronologie sur votre site Web pour présenter à merveille divers contenu.

Des choses que vous pouvez faire plus avec happyaddons

HappyAddons est honnêtement un plugin complet. Vous êtes sûr de tomber amoureux de ce plugin juste après l'avoir utilisé pour une fois. Jetez un œil aux choses suivantes que vous pouvez faire avec le plugin.

un. Utilisez un générateur de thème gratuit

Elementor a également un constructeur de thème. Mais il est réservé uniquement aux utilisateurs premium. Mais dans le cas de HappyAddons, il est entièrement gratuit. En utilisant le constructeur de thèmes HappyAddons, vous pouvez créer des en-têtes, des pieds de page, des modèles de billet de blog et des pages d'archives. Vérifiez comment créer un modèle de billet de blog avec HappyAddons gratuitement.

né Woocomerce adapté

HappyAddons est livré avec neuf puissants widgets conviviaux pour améliorer votre site de commerce électronique. Ces widgets sont la grille de produits, le carrousel de produit, la grille de catégorie de produits, le carrousel de catégorie de produits, le produit unique, le mini panier, le chariot, le paiement et la barre d'expédition.

c. Posaïque de copie inter-domaine

Avec cette fonctionnalité, vous pouvez copier directement les mêmes widgets, sections et pages d'un site Web vers un autre domaine. Cela peut vous faire gagner un temps précieux car vous n'avez pas toujours à repartir de zéro. La vidéo suivante explique la fonction de copie de copie croisée du plugin.

d. Conception de contenu créatif

Avec ses widgets comme Image Hover, Animated Link, Fun Factor, Image Stack Group, Photo Stack, Creative Button, Text Scroll et Lord Icon, vous pouvez créer du contenu créatif engageant pour accrocher les utilisateurs.

e. Afficher les informations statistiques

Contrairement à de nombreux autres modules complémentaires Elementor, ce plugin propose plusieurs widgets de graphique par lesquels vous pouvez présenter des informations statistiques et créer des publications et des pages infographiques. Apprenez à créer une page d'infographie avec Elementor.

En plus de tout cela, il y a beaucoup plus de choses que vous pouvez faire avec le plugin HappyAddons.

Réflexions finales!

La création de chronologies n'est pas une chose obligatoire pour tous les sites Web. Mais ils peuvent devenir nécessaires car ils pourraient être une option idéale pour présenter certaines informations et contenus. Ainsi, chaque fois que vous ressentez le besoin de créer une chronologie, nous espérons que ce message de tutoriel arrivera à votre utilisation.

Si vous avez adoré ce post, nous vous demandons de nous le faire savoir via la zone de commentaire ci-dessous. En outre, si vous avez des requêtes concernant le plugin HappyAddons, vous pouvez laisser un message dans la boîte de discussion. Notre agent de soutien en direct viendra vous répondre dès que possible.

Merci d'être avec nous jusqu'à la fin. Nous vous souhaitons une bonne journée à venir.