Créez une chronologie de contenu incroyable dans WordPress avec Elementor

La chronologie du contenu est un outil de craquage permettant d'afficher les informations séquentielles de n'importe quel événement, mais la création d'une telle chronologie sur votre site Web WordPress nécessite l'utilisation du bon outil avec une commande complète.

Si vous choisissez un outil WordPress aléatoire pour créer votre chronologie de contenu, il y a de fortes chances que l'outil soit inférieur à la moyenne, produisant un aspect de conception ringard.

J'ai effectué une analyse approfondie pour trouver un moyen optimal de créer une chronologie de contenu dans WordPress. Devinez quoi? Dans cet article, j'ai mis en place la méthode la plus simple pour créer une chronologie de contenu dans WordPress avec Elementor.

Comprendre la chronologie du contenu

Une chronologie de contenu représente les informations sous une forme chronologique. Il s'agit d'une méthode simple mais efficace pour partager des informations d'une manière visuellement frappante.

L'objectif principal d'une chronologie de contenu est de démontrer l'action d'un événement de manière séquentielle dans un intervalle de temps. Cela aide les lecteurs à obtenir plus d’informations en un clin d’œil.

Généralement, une chronologie de contenu contient une longue barre avec des points et des informations autour. Cette barre peut être à la fois verticale et horizontale. Quelle que soit la direction, assurez-vous simplement que la barre chronologique contient suffisamment de ressources. Vous pouvez améliorer la barre avec des images, des icônes, des chiffres, des textes cliquables ou d'autres éléments interactifs associés.

Où devriez-vous utiliser une chronologie de contenu ?

Une chronologie de contenu est un outil polyvalent. Vous pouvez utiliser cet outil presque n'importe où pour effectuer une tâche en douceur. Jetons un coup d'œil aux principaux secteurs dans lesquels ce calendrier fonctionne le mieux.

Comment créer une chronologie de contenu

Créer un calendrier approprié nécessite du temps et du dévouement. Voici un processus simple de création d’une chronologie.

Étape #1 : Analysez votre sujet

Dans un premier temps, choisissez votre sujet et rassemblez les informations requises sur ce sujet. Vous devez soigneusement choisir les informations que vous souhaitez afficher dans votre timeline.

Étape #2 : Nommez la chronologie

Soyez prudent lorsque vous choisissez le nom de votre timeline. Le « nom de la chronologie » doit représenter l'objectif de votre chronologie.

Placez toujours la chronologie en haut de la chronologie afin que le nom reste visible par tout le monde.

Étape #3 : Dessinez une chronologie approximative

À ce moment-là, dessinez une structure chronologique approximative sur une feuille de papier. Tracez simplement une ligne horizontale ou verticale avec quelques points. Chaque point indique une date ou une étape importante de votre projet.

Il est maintenant temps d'ajouter quelques textes ou autres informations connexes sur votre projet. Et c'est tout!

Étape #4 : Finaliser le sujet

J’espère que le calendrier approximatif est déjà entre vos mains. Maintenant, faites une pause et effectuez à nouveau des recherches approfondies sur votre sujet. Ainsi, vous pouvez découvrir les problèmes stupides et les résoudre.

Étape #5 : Personnaliser la chronologie

La personnalisation de la chronologie la rend facilement compréhensible et visuellement époustouflante. Vous pouvez ajouter des icônes ou des fichiers multimédias pour ce faire.

Comment ajouter la chronologie du contenu Elementor à votre site Web WordPress ?

Maintenant que vous avez une connaissance claire de la chronologie du contenu et de son application ainsi que du processus de création de la chronologie.  

Il est maintenant temps d'intégrer la chronologie du contenu dans votre site Web WordPress. Alors, comment pouvez-vous faire ?

D'accord!

Il existe principalement deux méthodes différentes pour créer une chronologie de contenu dans WordPress. Faites défiler vers le bas pour en savoir plus sur les processus.

Processus manuel (à la dure)

Le processus manuel est la manière traditionnelle de créer une chronologie de contenu sur votre site Web. Vous aurez besoin d'une image ou d'un fichier GIF pour créer une chronologie de contenu. Alors, comment pouvez-vous faire ?

Simple! Suivez simplement les étapes.

• Tout d’abord, dessinez le contenu numériquement. Vous pouvez utiliser un logiciel de retouche photo comme Photoshop, Gimp ou Paint pour dessiner la chronologie. Une fois le projet terminé, enregistrez l'image ou le fichier gif.
• Deuxièmement, créez une page ou publiez sur votre site Web et placez le fichier image/gif sur cette page. Ajoutez ensuite le contenu requis et publiez. 

Boom! Ça y est, vous avez terminé !

Inconvénients de ce processus :

Le processus peut paraître assez simple. Mais ne vous détendez pas encore ! Vous serez confronté à de nombreux problèmes avec ce processus dans la vraie vie. Les inconvénients importants sont énumérés ci-dessous.

• Vous ne pouvez pas mettre à jour la chronologie publiée via le tableau de bord d'administration du site Web.
• Vous ne pouvez pas créer une chronologie interactive.
• La personnalisation des icônes et des images est un processus fastidieux.

Processus automatique (moyen le plus simple – ElementsKit pro)

Pour tirer le meilleur parti de la chronologie de votre contenu, vous pouvez utiliser ElementsKit. Il s’agit d’un module complémentaire Elementor premium qui peut être utile pour créer une chronologie de contenu sur votre site Web WordPress.

Dans cette section, je vais vous présenter le processus de création d'une chronologie de contenu Elementor en quelques minutes. Commençons.

Accéder au panneau d'administration du site Web

Comme pour la méthode manuelle, vous n'avez pas besoin de dessiner la chronologie dans un logiciel de retouche photo. Vous pouvez tout faire à partir du tableau de bord du panneau d'administration de votre site Web.

Connectez-vous simplement au tableau de bord du panneau d'administration. En général, l'URL du tableau de bord ressemble à ceci : Yourdomain.com/wp-admin

Installer Elementor et ElementsKit

Après vous être connecté à votre tableau de bord d'administration, il est temps d'installer Elementor et Module complémentaire Elementor ElementsKit. Vous aurez besoin des deux pour créer automatiquement la chronologie.

Ouvrir une page Web nouvelle ou existante

Après avoir activé Elementor et ElementsKit, il est temps de les utiliser dans un article ou une page. Alors, créez un nouveau message en cliquant sur Messages > Ajouter un nouveau.

Clique sur le "Ajouter un titre» bloquez et ajoutez votre titre. Vous pouvez également ajouter le texte brut et les images à la publication.

Lancer Elementor

Maintenant, cliquez sur «Modifier avec Elementor" et cela ouvrira votre tout nouveau message dans l'éditeur Elementor. L'éditeur Elementor est utilisé pour éditer la publication de manière plus professionnelle.

Lancer la chronologie d’ElementsKit

Faites défiler le panneau « Elementor » et recherchez le «Chronologie» module complémentaire dans la liste. Sinon, vous pouvez simplement rechercher « Timeline » dans le panneau Elementor.

Lancement de la chronologie ElementsKit

Maintenant, faites glisser et déposez le widget Timeline dans votre publication, et c'est tout ! Vous remarquerez un exemple de chronologie dans votre message.

Par défaut, il y aura trois points de chronologie. Vous pouvez supprimer tous ces éléments et commencer à créer votre propre chronologie. Sinon, vous pouvez également modifier le contenu de ces points existants et ajouter d'autres points si nécessaire.

L'étape suivante consiste à modifier le texte, l'icône ou le style de la chronologie de votre contenu.

Personnalisation du contenu de la chronologie

L'onglet « Contenu » vous permet de personnaliser le style de la chronologie, le style du contenu, le contenu de la chronologie, etc. Vous pouvez modifier plusieurs options à partir de l'onglet Contenu. Jetons un coup d'œil à ces options clés.

1. Style de chronologie

Il s'agit de la toute première section de l'onglet Contenu. Il vous permet de choisir soit la chronologie Elementor verticale, soit le style de chronologie Elementor horizontal. Par défaut, le style vertical sera sélectionné. Vous pouvez changer de style quand vous en avez envie !

2. Style de contenu

L'onglet Style de contenu vous permet de choisir votre camp. Vous pouvez afficher tout le contenu soit du même côté, soit des deux.

Les perspectives de la chronologie de votre contenu sont désormais terminées. Dans cette section, vous devez mettre à jour les textes, images ou icônes de la timeline.

3. Contenu de la chronologie

Le contenu de la chronologie vous permet de modifier plusieurs options telles que le titre, la description, le lien, la date, l'adresse, l'icône, etc. Vous pouvez activer cette fonctionnalité en cliquant simplement sur le nom du titre.

Il y aura trois titres dans les paramètres par défaut. Vous pouvez ajouter ou supprimer ces titres. Après avoir cliqué sur le titre, les options d'édition du contenu vous deviendront visibles.

Dans la section Contenu de la chronologie, vous pouvez modifier les options suivantes :

• Titre
• Sous-titre
• Lien du titre
• Description
• Icône de titre
• Date
• Adresse
• Couleur des sous-titres
• Arrière-plan de la zone de contenu
• Couleur du texte de l'icône et
• Fond d'icône
  

4. Style d'élément de répéteur

Dans cette section, vous pouvez modifier la couleur de votre contenu et l'arrière-plan des textes et des icônes. Plus important encore, le style de survol peut également être modifié à partir de cette section.

Bravo aux développeurs !

5. Paramètres d'animation

Dans l'option Paramètres, vous pouvez modifier l'icône et l'animation de la date et de l'adresse. Ce widget de chronologie Elementor vous permet de choisir plusieurs styles de zoom, tels que fondu, zoom, rebond, glissement, rotation, tremblement, oscillation, gelée, roll-in, etc.

Il s’agit de personnaliser le contenu de votre timeline. Il est maintenant temps d'ajouter du style à votre contenu. Suivez la phase suivante pour obtenir des détails sur l’ajout de style.

Personnaliser le style de la chronologie

Dans l'onglet Style, vous pouvez personnaliser votre style de contenu, votre style de ligne et votre style de conteneur. Faites défiler vers le bas pour obtenir un aperçu détaillé de ces fonctionnalités.

1. Onglet Contenu :

L'onglet Contenu vous offre de nombreuses possibilités de personnalisation de votre contenu. Par exemple, vous pouvez contrôler l'alignement, le remplissage, le remplissage intérieur, le rayon de la bordure, la couleur du texte, les sous-titres, le style de la chronologie, etc.

Vous pouvez personnaliser tous ces paramètres pour chaque plate-forme, y compris les versions de bureau, de tablette et mobile. Consultez les images ci-dessous pour avoir une compréhension claire des fonctionnalités situées sous l'onglet Contenu.

Non seulement que! Vous pouvez également modifier plusieurs autres options telles que la couleur du texte, la couleur du texte d'ancrage, la couleur des sous-titres, l'espace de marge, la typographie, l'icône ronde, etc. L'icône et la couleur d'arrière-plan de cette icône ronde peuvent être modifiées à partir de cette section.

À présent, nous avons modifié plusieurs styles dans le texte de votre site Web. Cependant, le widget de chronologie ElementsKit Elementor peut faire encore plus !

Vous pouvez également modifier de manière transparente la couleur de la barre de chronologie, la taille de l'icône, la marge, la typographie, les adresses, etc.

2. Onglet Ligne

L'onglet Ligne vous permet d'ajouter quatre styles de personnalisation à la chronologie de votre contenu. Ceux-ci sont -

• ● Couleur de la ligne –changer la couleur de la barre de chronologie Elementor horizontale ou verticale
• ● Couleur de la broche – changez la couleur de votre épingle
• ● Couleur de la broche active – changez la couleur de votre code PIN activé
• ● Repérer la couleur – change la couleur précise

3. Onglet Conteneur

L'onglet conteneur vous permet de modifier l'espacement de votre contenu. Cela inclut la modification de l’espacement de l’adresse ou de la date et de l’espacement du bas des éléments.

Personnalisation avancée

Vous pouvez compléter la personnalisation de votre site internet uniquement en utilisant les onglets « contenu » et « style ». Cependant, si vous souhaitez effectuer une personnalisation plus avancée, vous devez utiliser l'onglet avancé.

Alors, qu’obtiendrez-vous dans notre onglet avancé ?

Dans l'onglet avancé, vous obtiendrez la condition ElementsKit, les effets, l'élément collant, les effets de mouvement, la réactivité, le type d'arrière-plan, le remplissage et la fonction de personnalisation des marges.

Laissez-moi vous présenter toutes ces fonctionnalités une par une.

1. Conditions du kit Elements

En activant la condition ElementsKit, vous pouvez publier des publications conditionnelles sur votre page Web. À propos, vous pouvez choisir d'afficher une partie particulière de votre page Web via les onglets de style WordPress Elementor en fonction de la condition. Vous pouvez appliquer différentes conditions en fonction du statut de connexion, du navigateur, du jour, de l'heure, etc.

2. Effets ElementsKit

La fonction d'effet ElementsKit vous permet d'ajouter des effets interactifs à votre texte. Il vous permet d'ajouter des chronologies interactives sur WordPress. Vous pouvez ajouter quatre styles d'effets différents, à savoir CSS, inclinaison, défilement et déplacement de la souris.

● Effets CSS

La fonctionnalité CSS vous permet d'ajouter une animation CSS à vos textes Web. Vous pouvez modifier le style d’apparence de l’animation, la vitesse de l’animation, la direction et le nombre d’itérations.

En activant la fonctionnalité CSS Transform, vous pouvez modifier quatre paramètres de transformation tels que les options Translate, Rotate, Scale et Skew. En cas de problème, vous pouvez cliquer sur le bouton « Retour aux paramètres par défaut » et tout reviendra à la phase précédente.

• ● Effets d'inclinaison

En activant les effets d'inclinaison, vous pouvez modifier les fonctions MaxTilt, les échelles d'image, les fonctions d'axe, etc.

• ● Effets de défilement

Les effets de défilement permettent au webmaster de modifier le style de parallaxe, la transition, la douceur, les paramètres de décalage, etc.

• ● Effet de mouvement de la souris

Les effets de déplacement de la souris vous permettent de contrôler la vitesse de déplacement et d'activer/désactiver l'animation en mode éditeur.

3. ● ElementsKit collant

Voici le contrôle du mouvement collant de l’élément de votre site Web. Vous pouvez choisir l’emplacement de votre contenu collant. Vous pouvez choisir parmi les options Haut, Bas, Colonne et Défilement vers le haut. Vous pouvez modifier le décalage collant, la couleur d’arrière-plan et le périphérique collant à partir de la mise en page.

4. Effets de mouvement :

La fonction d'effet de mouvement vous permet de sélectionner le style d'entrée, la durée et le retard de votre animation.

ElementsKit propose plusieurs styles d'animation d'entrée tels que le zoom, le fondu, le rebond, la rotation, le glissement, la secousse, la gelée, l'oscillation, le roll-in, etc.

5. Effets de fond

L'option d'arrière-plan de l'onglet avancé vous permet de transformer l'image d'arrière-plan dans les styles normal et de survol.

Dans la section d'arrière-plan « Normal », vous pouvez choisir de modifier la fonction Classique ou Dégradé. La fonction d'image classique permet également le style de changement d'image et de couleur ainsi que les vitesses de transition.

D'autre part, la section dégradé offre la possibilité de modifier le type d'arrière-plan, la couleur, l'emplacement, l'angle et le type d'arrière-plan liner ou radial.

Vous pouvez également effectuer toutes ces actions sur les options de survol.

6. Frontière

Nous avons déjà fait beaucoup de choses dans la section contenu. Ajustons les bordures du texte et des zones.

Vous pouvez choisir différents types de bordures, telles que pleines, doubles, pointillées, pointillées et rainurées. Après avoir sélectionné le type de bordure, il est temps de sélectionner le rayon. Le ElementsKit mis à jour permet également de modifier le style du rayon et l'ombre de la boîte !

Vous obtiendrez également toutes ces fonctionnalités dans la section Survol. À propos, vous pouvez également modifier la « Durée de transition » dans l'onglet de survol.

7. Positionnement

Principalement, vous pouvez modifier la « largeur » et la « position » de votre contenu.

Dans la section Largeur, vous pouvez conserver la largeur par défaut ou la modifier en section pleine largeur, en ligne, automatique ou personnalisée. Vous pouvez également choisir l’alignement vertical.

Après cela, il est temps de peaufiner la section position. Plutôt que l'option par défaut, vous pouvez modifier l'option « Absolue » ou « Fixe ». Quel que soit votre choix, la sous-section sera similaire.

Par exemple, vous obtiendrez une orientation horizontale et verticale avec une modification du décalage en pixels.

Prudence: N'utilisez pas la fonction de positionnement personnalisé à moins que vous en ayez vraiment besoin. Parce que cela affecte la réactivité de votre site. Même si c’est le cas, essayez de ne pas l’utiliser trop fréquemment.

8. Sensible

L'onglet responsive vous permet de choisir l'apparence de vos éléments. Vous pouvez modifier les paramètres sur chaque plate-forme, telles que les sections Bureau, Tablette et mobile.

9. CSS personnalisé

Tout comme son nom l'indique, vous pouvez insérer du CSS personnalisé dans votre publication via cette fonctionnalité. Cependant, vous aurez besoin du Version ElementsKit Pro pour insérer du CSS ou des attributs personnalisés dans votre page Web.

C'est tout ce que vous obtiendrez dans le widget « Content Timeline » d'ElementsKit – Module complémentaire tout-en-un pour Elementor Page Builder.

Pourquoi devriez-vous utiliser la chronologie du contenu d'ElementsKit ?

D'accord! J'espère que vous avez parcouru toutes nos fonctionnalités dans la section précédente. Alors, devriez-vous utiliser ElementsKit ou vous en tenir à la méthode traditionnelle du stylo et du papier ?

Eh bien, je pense que vous devez utiliser la chronologie du contenu d'ElementsKit. Concentrons-nous sur quelques principales raisons d'utiliser ce produit.

• Convivial

Vous n'avez besoin d'aucune compétence en codage ou en conception pour créer une chronologie de contenu avec ElementsKit. Ainsi, il devient totalement convivial.

• Gain de temps

Créer une nouvelle chronologie et la personnaliser manuellement est un processus qui prend du temps. Espérons que ce plugin polyvalent vous permette de créer ou de personnaliser une chronologie en quelques minutes.

• Dispositions intégrées

ElementsKit contient plusieurs styles de chronologie intégrés. Si vous êtes en situation d’urgence et n’avez pas le temps de concevoir un calendrier, nous sommes là pour vous. Choisissez simplement l’une de ces mises en page intégrées, personnalisez les textes et publiez !

• Ajustement avancé

Le module de chronologie vous permet d'effectuer quelques ajustements avancés pour créer une chronologie plus simple et accrocheuse pour votre site Web. Nous avons déjà discuté de la fonctionnalité de réglage avancé dans la section « Personnalisation avancée ».

• Rapide et réactif

Le module Timeline d'ElementsKit est extrêmement léger et se charge rapidement. Étant un produit réactif, il s’adapte également à n’importe quel appareil en ce qui concerne la taille de l’écran.

Éléments à ajouter dans une chronologie de contenu

Créer une chronologie n’est pas un gros problème. Mais construire une chronologie ingénieuse et accrocheuse est une tâche assez créative !

Eh bien, l'ajout des options suivantes rendra votre calendrier plus ingénieux et satisfera toutes vos requêtes. Jetons un coup d'œil rapide aux options qui pourraient être incluses dans votre chronologie.

• Date

Pouvez-vous imaginer une chronologie sans date ?

Non!

C'est pourquoi vous devez ajouter des dates appropriées dans la chronologie de votre contenu. Sinon, ce ne sera qu’une perte de temps. Une chronologie sans date n’a aucune valeur pour son public.

• Titre pertinent

N'oubliez jamais de nommer votre chronologie. Un titre approprié permet aux utilisateurs de comprendre rapidement le but de votre chronologie.

• Icône graphique

L’utilisation d’images illustrées saisissantes, d’icônes ou d’autres éléments graphiques rendra votre chronologie vivante et très attrayante.

• Conception

Choisissez un design accrocheur qui correspond à votre présentation chronologique. Cela ajoute de la clarté et simplifie la perception.

• Brève description

Les courtes descriptions permettent aux utilisateurs de comprendre les étapes de votre projet de chronologie.

Derniers mots

La chronologie du contenu est l’élément parfait pour représenter les étapes d’un projet. Même s'il couvre un long intervalle de temps, ne l'encombrez pas de descriptions excessives. Essayez plutôt de rester simple en utilisant des images, de courtes descriptions, etc.

Ce widget de chronologie Elementor peut considérablement aider les utilisateurs à créer et personnaliser une chronologie sans aucun problème.

Si vous avez encore des questions sur la chronologie du contenu Elementor, postez votre requête dans la section commentaires. Je répondrai à votre requête dès que possible !

Il est temps de commencer à créer votre chronologie de contenu sur votre site WordPress !