Comment construire une ligne de temps à deux colonnes avec Avada

Dans la conception de sites webChronologie d'AvadaC'est un moyen idéal pour montrer la séquence des événements et le processus de développement. Dans certains cas, comme pour montrer la progression parallèle de deux projets, comparer les nœuds de travail de deux départements ou marquer l'état d'avancement de plusieurs catégories de tâches, une seule ligne du temps est limitative. Dans ce cas, la fonction "chronologie à deux colonnes"La conception peut améliorer considérablement la lisibilité et l'expression d'une page.

I. Qu'est-ce qu'une ligne du temps à deux colonnes ?

Définition d'une ligne de temps à deux colonnes

Une ligne du temps à deux colonnes est une présentation côte à côte de deux processus temporels, les côtés gauche et droit représentant généralement des catégories, des projets ou des départements différents. Par rapport à une ligne du temps traditionnelle à un axe, une ligne du temps à deux colonnes peut.. :

Affichage synchronisé de deuxthématiqueLes voies du progrès
Permettre des contrastes plus clairs et des récits parallèles
Éviter l'empilement d'informations et rendre la page plus organisée

Scénarios d'utilisation typiques

Affichage des horaires de travail des deux départements de l'entreprise
Comparaison des progrès simultanés de la conception et du développement de produits
Arrangements en ligne et hors ligne pour les cours d'éducation et de formation

Comment construire une ligne de temps à deux colonnes avec Avada

Approches architecturales supportées par Avada Builder

Avada Builder ne fournit pas directement un module de "ligne de temps à deux colonnes", mais une mise en page similaire peut être obtenue de la manière suivante :

Utiliser"Conteneur + colonne"Modules
Contrôler l'espacement et le style des modules pour donner l'impression qu'il s'agit de deux lignes temporelles parallèles.

Recommandations pour la conception de la structure des pages

page webLa structure suivante peut généralement être utilisée :

Domaine du titre supérieurLes questions relatives à l'évaluation : Décrivez le thème du contenu d'un tableau chronologique à deux colonnes, par exemple, "Marketing vs. développement de produits".
Chronologie à deux colonnesun pour la gauche et un pour la droite ConteneurChaque colonne correspond à une catégorie

III. cas pratique : démonstration des "progrès en matière de marketing par rapport aux progrès en matière de développement de produits".

Contexte du projet

Une entreprise souhaite montrer les progrès du marketing et du développement de produits en parallèle avant la mise en service d'un produit, afin que les équipes internes puissent rapidement comprendre le rythme de travail sur les deux lignes.

Détails du processus d'opération

Étape 1 : Construire la structure du conteneur de la page

Cliquez sur la page "Ajouter un conteneur" boutons
Dans la fenêtre contextuelle, sélectionnez "1/2 - 1/2"(c'est-à-dire la moitié de la largeur de la gauche et la moitié de la largeur de la droite), ce qui convient le mieux à l'outilbilinéaireLa façon dont l'affichage est structuré.

Étape 2 : Ajouter un module de chronologie

Ajouter le module Timeline à la colonne de gauche

Cliquez sur la zone de la colonne de gauche et cliquez sur "+ Élément"TrouverStudio, recherche pour ajouter un Module chronologique

Cliquez "+ Élément" Sélectionnez le module "Titre" et nommez le titre "Marketing Progress".

Ajoutez les nœuds suivants à tour de rôle :

Lancement de la planification de la marque
La conception du matériel de marketing est achevée
Publicité de pré-lancement

Ajouter un autre module de ligne de temps dans la colonne de droite

Cliquez sur la zone de la colonne de droite, ajoutez également le module Timeline, nommez-le "Product Development Progress" et définissez les nœuds suivants :

Fonction du produit Congélation
La version interne du test est en ligne
L'emballage de la version live est terminé

Étape 3 : Améliorer les styles et les icônes des nœuds

Définir le style de couleur de l'icône individuellement
Utiliser des couleurs d'arrière-plan/de bordure différentes des deux côtés pour mettre en évidence la différence entre les deux.

Étape 4 : Ajouter des remarques finales

Ajouter un résumé sous la ligne de temps à deux colonnes, avec une couleur de police réglable pour le faire ressortir.

Ajoutez un mot d'encouragement (par exemple, "Les deux fronts avancent côte à côte, alors restez à l'écoute pour le jour de la publication !)

IV. suggestions d'optimisation et questions fréquemment posées

Comment faire pour que les deux colonnes restent bien alignées ?

Contrôlez la longueur de la description de chaque nœud afin d'éviter une accumulation trop importante de contenu graphique.
L'alignement peut être ajusté manuellement à l'aide du module "Blank Spacing".

Comment s'affiche-t-il sur les téléphones portables ?

Si vous souhaitez faire une distinction claire, vous pouvez insérer des catégories en haut de chaque colonnelégende(par exemple, "Calendrier marketing")
Veiller à ce que les icônes et le texte ne soient pas comprimés et déformés sur un petit écran.

Comment ajouter des effets interactifs ou animés ?

Utilisation du défilementeffet d'animationLaisser la ligne de temps se charger progressivement
Définissez le nœud "Popup Modal Box" pour afficher les détails.

V. Résumé

existentAvada La construction d'une ligne de temps à deux colonnes est une manière pratique et esthétique d'afficher une page web, en particulier pour les scénarios où deux types de progrès doivent être comparés en parallèle. Cela est possible grâce à l'utilisation flexible de la fonction Conteneur vs. Chronologie La combinaison des modules permet d'obtenir un effet de contraste évident.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : [email protected]
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.