No results found. Try again with different words?

Search must be at least 3 characters.

    Advanced Timeline Module

    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; 
    UABB Advanced Timeline Module - Posts Timeline
    1. 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); 
    UABB Advanced Timeline Module - Timeline Layouts
    1. Orientation Options in the Vertical Layout: You can align your Advanced Timelines with vertical layout on the Left, Right, or Center
    UABB Advanced Timeline Module - Timeline Orientation
    1. Powerful Query Filters: you can filter your posts and chose which ones you wish to include or exclude based on categories, tags, etc.;
    2. Infinite Load for Pagination: if you enable this option, your Advanced Timeline will automatically load further posts when scrolled down;
    3. 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.
    4. 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.

    Note:

    If you don’t see the “Advanced Timeline” in your UABB module list, please make sure that this module is enabled at Dashboard > Settings > UABB > Modules.

    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.

    UABB Advanced Timeline Module - Timeline Settings
    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.
    UABB Advanced Timeline Module - Item Labels

    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

    Was this article helpful?

    Did not find a solution? We are here to help you succeed.

    Related Docs

     

    Grab this rare opportunity to save up to 50%

    WOAH, HOLD ON THERE!

    Don't Miss Our Biggest Discount

    00
    Months
    00
    Days
    00
    Hours
    00
    Minutes
    00
    Seconds

    You are backed by 100% risk-free money-back guarantee.

    Grab Our Biggest Discount Of All Time. Don’t Miss Out!

    00
    Months
    00
    Days
    00
    Hours
    00
    Minutes
    00
    Seconds

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Scroll to Top