Tutoriel sur le thème Avada : Comment créer une ligne de temps personnalisée sur la page d'accueil pour présenter l'histoire de la marque en profondeur en se basant sur la dimension temporelle.

Lors de la présentation de l'histoire de l'entreprise, de l'avancement d'un projet ou d'une étape importante, "calendrier"est un mode de présentation très intuitif et orienté vers le design. Dans cet article, nous allons vous apprendre à exprimer votre design par le biais de Avada Builder(math.) genrePas de code, pas de dépendance aux pluginsqui met en œuvre un système réactif,Ligne du temps personnalisée avec des éléments autocollants défilantsEffet.

Pourquoi devrais-je créer une chronologie personnalisée sur ma page d'accueil ?

La page d'accueil est le visage du site web, et la première impression que les visiteurs ont du site web provient souvent de la page d'accueil. Mettre "Calendrier personnalisé"Rejoindrefig. débutqui peut jouer plusieurs rôles importants :

1. raconter clairement l'histoire de la marque

Le calendrier peut prendreLinéaire pour montrer la croissance de l'entrepriseL'introduction, telle que l'année de fondation, les étapes importantes, les lancements de produits, l'expansion de l'équipe, etc. est plus lisible et plus structurée qu'un simple paragraphe d'introduction.Donnez aux visiteurs un aperçu rapide de votre expérience en matière de développement.

2. améliorer l'attrait visuel et le professionnalisme

La page d'accueil ajoute une ligne du temps qui peutRompre la monotonie des mises en page conventionnellesGrâce aux colonnes de gauche et de droite, à la coordination des images, à l'animation de défilement, aux éléments collants et à d'autres techniques, nous créons un bloc de pages soucieux de la conception pour renforcer le ton de la marque et l'esthétique générale.

3. l'augmentation de la durée de séjour des usagers

Un contenu bien structuré et rythmé incite les utilisateurs à rester et à lire, et les lignes de temps sont exactement ce type de contenu.police de caractères guidece qui permet d'allonger la durée de navigation de l'utilisateur et de réduire le taux de rebond.Améliorer les performances des moteurs de recherche.

Explication de l'affichage des effets

afin de Page d'accueil du modèle Avada InvestmentPar exemple, dans la section "Historique de l'entreprise", vous pouvez voir l'effet suivant :

• Horodatage à gauche pendant le défilementCollant en haut de l'écran. ;
• Le contenu de la période est indiqué à droite ;
• La mise en page responsive globale se convertit automatiquement en typographie adaptative sur les appareils mobiles.

Étapes de la création d'un calendrier

Étape 1 : Ajout d'un nouveau conteneur

• Ouvrez Avada Builder et allez sur la page où vous souhaitez ajouter une ligne de temps ;
• Cliquez "+ Container"créant ainsi un nouveau conteneur ;
• Une couleur d'arrière-plan ou des marges supérieures et inférieures peuvent être ajoutées aux conteneurs pour améliorer la séparation visuelle.

Étape 2 : Ajouter une disposition en colonnes avec 4 colonnes dans le conteneur.

Ajoutez une nouvelle ligne au conteneur et définissez une structure à 4 colonnes avec les largeurs de colonnes suivantes :

Étape 3 : Définition du contenu et du style de chaque colonne

Colonne 1 : ligne de temps verticale (bordure verticale)

• Aucun contenu n'est ajouté ;
• Définissez la bordure gauche dans l'onglet Design :
  • Largeur de la bordure gauche: 5px
  • Couleur de la bordureCouleurs personnalisées

• Masquer cette colonne dans les paramètres de réponse pour les appareils à petit écran (mobile).

Colonne 2 : lignes de liaison horizontales (bordure horizontale)

• Là encore, aucun contenu n'est ajouté ;
• Définir la bordure supérieure :
  • Largeur de la bordure supérieure: 5px
  • Couleur de la bordure: : Ibid.

Colonne 3 : Affichage de l'heure et du titre

• Ajout d'un module "Bloc de texte" ou "Titre

Régler l'adhésif :

• Ouvrez l'onglet Extras et activez l'option Collant ;

• Réglage de la valeur du décalage supérieur (recommandé) 50px) pour éviter de masquer le contenu principal ;

• Désactiver la fonction "collant" sur les appareils à petit écran (réglage via les options de réponse).

Colonne 4 : détails de l'affichage (graphique ou liste)

• Ajouter n'importe quel module de contenu, tel que des images, des paragraphes, des listes d'icônes, etc ;

• La colonne n'est pas paramétrée sur Sticky pour assurer un affichage déroulant normal ;
• Cette structure peut être répétée en fonction des moments pour montrer plusieurs étapes du contenu.

résumés

En utilisant de manière flexible les fonctionnalités de l'outil Avada Buildermise en page multicolonneetParamètres de bordureavec Caractéristiques de la colonne collanteLe module de chronologie peut être facilement intégré dans un module de chronologie réactif et clairement structuré sans avoir à écrire une seule ligne de code. Que vous souhaitiez présenter l'histoire de votre entreprise, le développement de votre marque, la chronologie d'un projet ou le récapitulatif d'un événement, cette mise en page de la chronologie offre une expérience visuelle plus respectueuse du design.

Pour plus de tutoriels et d'informations sur WordPress, suivez les liens suivantsRéseau de fluctuation des photonsavec les tutoriels WordPress les plus complets et les plus actifs.Communauté d'échange WordPress.