Advanced Timeline module is your perfect solution to display historical events or processes. This module comes with both horizontal and vertical layouts and a bunch of design and customization options. Also, you can display text, media, and links as your Advanced Timeline items or add posts or pages instead.

This article will show how to create and design your Advanced Timelines with UABB’s Advanced Timeline module. 

Key Features

You can do great things with the Advanced Timeline module. For instance, you can show the evolution of your project or your company milestones. Likewise, you can use the module to explain the membership sign-up process on your website or explain other processes. Most importantly, the Advanced Timeline is very flexible and comes with a large number of features: 

1. Content Type: the Timeline item content can be added as Custom (text and media), or as Posts, Pages, CPTs; 

2. Horizontal and Vertical layout: you can choose your Advanced Timeline to use a vertical (each item is added beneath the previous one) or the horizontal layout (each item is added on the side); 

3. Orientation Options in the Vertical Layout: You can align your Advanced Timelines with vertical layout on the Left, Right, or Center

4. Powerful Query Filters: you can filter your posts and chose which ones you wish to include or exclude based on categories, tags, etc.;
5. Infinite Load for Pagination: if you enable this option, your Advanced Timeline will automatically load further posts when scrolled down;
6. Design & Customization: You can add spacing, choose connector designs, and set fonts, colors, and icons. In short, you can create your Timeline just the way you want. Furthermore, you can design and customize each Advanced Timeline item or apply changes for the whole Advanced Timeline.
7. Presets: This is a collection of different ready-made designs for Advanced Timeline. 

Let’s show you how to add and design an Advanced Timeline on your website.

Create Your Advanced Timeline

You can add an Advanced Timeline to your page or a post by following these steps:

Step 1 – Start editing your post or page with Beaver Builder. In the upper right corner, click on the “+” icon, and click on the “Modules” tab, to open your module list;

Step 2 – In the “Group” dropdown, select the “UABB Modules”. You will find the “Advanced Timeline” module under the “Content Modules”, or you can use the search option;

Step 3 – Next, drag and drop the module to the desired position to add it to your page or post.

Content & Design

Once you add the Advanced Timeline module, you’ll see several tabs with options:

General Tab

• Presets: you can choose one of the premade designs that come with this module – choose the one you like, and all the design settings will be applied to your Advanced Timeline items;
• Content: choose “Custom” to add item content yourself, or “Posts” to use your existing website content (posts, pages, or CPTs);

Depending on the content option you choose, you will see additional options.

How to create an Advanced Timeline with posts/pages?

Step 1 – Start editing your Advanced Timeline module. In the Timeline Settings, navigate to General Tab;

Step 2 – Scroll down to the “Content” section and choose the “Custom” option. Beneath the “Content” section, you will now see the “Timeline Items” section;

Step 3 – Click on the “Add Timeline Item” button to add a new item;

Step 4 – Click on “Edit Timeline Item” to edit your new item. Under the “Content” tab, choose the “Label Type”:

• You can chose your item label to be a “Date”, and select the date in using the date picker below – this date will be shown on your timeline. 
• On the other side, if you select your label to be a “Text”, you will be able to type in the custom label text in the next field. This text will be shown istead of the date.

Step 5 – Further add “Heading”, “Description” and link (optional) for your timeline item;

Step 6 – Click on the “Style” tab. If you wish to style this item specifically, under “Override Global Settings”, select “Yes” and add your settings;

Step 7 – Click “Save” to save this item.

Step 8 – Repeat steps 3 to 7 for all items you wish to add to your timeline.

How to create an Advanced Timeline with custom text and media?

Step 1 – Start editing your Advanced Timeline module. In the Timeline Settings, navigate to General Tab;

Step 2 – Scroll down to the “Content” section and choose the “Posts” option. Beneath the “Content” section, you will now see the “Pagination” and “Posts” sections. 

Step 3 – Click on the “Pagination”  and under “Infinite Load” choose if you wish to set the infinite load for your timeline posts or not;

Step 4 – Click on the “Posts” section to set how you wish your posts to appear in the Timeline.

Query Tab

You will see this tab only if you choose “Posts” for your content. Here you can:

• Choose the post type you wish to add as your items;
• Select the number of posts to be displayed;
• Add the sorting parameter and set order in which post should be displayed;
• Set filters

Style Tab

Here you can style your Advanced Timeline. You will be able to set the following:

• Layout
• Responsive Layout
• Spacing
• Advanced Timeline Items
• Dates
• Connector

The settings you do in this tab will be applied globally for the whole Advanced Timeline.

Typography Tab

You can set the typography for your Advanced Timeline in this tab. The available options are:

• Heading Typography
• Description Typography
• Date Typography

Advanced Tab

The last tab holds the following options:

• Spacing > Margin
• Visibility
• Animation
• HTML Element
• Export/Import the module

Once you added content and designed your Advanced Timeline, click the “Save” button to save the changes. Once you publish/update the page or post, your changes will be applied to the front-end of your website.

FAQs