Avada Theme Tutorial: How to create a custom timeline on the homepage to introduce the brand story in depth based on the time dimension

When presenting company history, project progress or milestones, "timeline" is a very intuitive and design-oriented way of presentation. In this article, we'll teach you how to visualize your design through Avada Builder(math.) genusNo code, zero plugin dependenciesthat implements a responsive,Customizable timeline with scrollable stickyEffect.

Why should I create a custom timeline on my home page?

The home page is the face of the website, and the first impression visitors have of the website often comes from the home page. The "Home" page is the first impression of your website.Customize Timeline"Joinfig. beginning, which can play several important roles:

1. Clearly tell the brand story

The timeline can be expressed in terms ofLinear way to show the company's growthThe introduction, such as the year of foundation, important milestones, product releases, team expansion, etc., is more readable and structured than a plain paragraph introduction.Give visitors a quick overview of your development backgroundThe

2. Enhancing visual appeal and professionalism

The home page adds a timeline that canBreaking the monotony of conventional layoutsThe design of the page is based on the use of left and right columns, pictures, scrolling animation, and sticky elements to create a design-oriented page block that enhances the brand's tone and overall aesthetics.

3. Increasing the length of stay of users

Well-structured and paced content entices users to stay and read, and timelines are exactly this kind ofguide typefacerepresentatives, which helps to extend the user's browsing time and reduce the bounce rate.Improve SEO PerformanceThe

Explanation of effect display

in order to About page of Avada Investment templateFor example, in the "Company History" section, you can see the following effect:

• Left timestamp during scrollingSticky at the top of the screen.;
• Time period content is displayed on the right;
• The overall responsive layout automatically converts to adaptive typography on mobile devices.

Steps to create a timeline

Step 1: Add a new Container

• Open Avada Builder and go to the page where you wish to add a timeline;
• Click "+ Container", creating a new container;
• Background color or top and bottom margins can be added to containers to enhance visual separation.

Step 2: Add a Column Layout with 4 columns to the container.

Add a new row to the container and set it to a 4-column structure with the following column widths:

Column number	use	Width recommendation
Column 1	Left vertical line	2%
Column 2	point-in-time connection line	8%
Column 3	Time + Title Text	35%
Column 4	Right side content display	55%

Step 3: Setting the content and style of each column

Column 1: vertical timeline (vertical border)

• No content is added;
• Set the left border in the Design tab:
  • Left Border Width: 5px
  • Border Color: Custom Colors

• Hide this column in Response Settings for small screen devices (Mobile).

Column 2: Horizontal connecting line (horizontal border)

• Again, no content is added;
• Set the top border:
  • Top Border Width: 5px
  • Border Color:: Ibid.

Column 3: Display time and title

• Adding a "Text Block" or "Title" Module

Set Sticky:

• Open the Extras tab and enable Sticky;

• Setting the top offset value (recommended) 50px) to avoid obscuring the top content;

• Disable Sticky on small-screen devices (set via Response Options).

Column 4: display details (graphic or list)

• Add any content module, such as images, paragraphs, icon lists, etc;

• The column does not set Sticky to ensure a normal scrolling display;
• This structure can be repeated according to time points to show multiple stages of content.

summarize

By making flexible use of the Avada Builder'smulticolumn layout,Border settingstogether with Sticky Column FeaturesThe timeline module can be easily built into a responsive, clearly structured timeline module without writing a single line of code. Whether you're showcasing your company's history, brand development, project timelines or event recaps, this timeline layout delivers a more design-oriented visual experience.

For more WordPress related tutorials and information, follow thePhoton fluctuation network, has the most comprehensive WordPress tutorials and the most activeWordPress Exchange CommunityThe

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off