Happy Holidays Sale - Get upto 30% OFF!

Grab the Deal

Documentation

Timeline Element Overview

Max Addons' Timeline element allows you to create interactive timelines on your WordPress site, featuring dynamic content (like posts and pages) and custom content using Bricks Builder.

Let's take a closer look at the Timeline element and see it in action.


Like every element of the Bricks Builder, the Timeline element has two main tabs: Content and Style.

We'll start with the options in the Content Tab.

Content Tab of the Timeline Element#

The Content tab of the Timeline element includes 6 sections:

  1. Timeline Items
  2. Layout
  3. Cards
  4. Marker
  5. Date
  6. Connector


Timeline Items#

In this section you can define the content of your timeline. You'll see four pre-added demo sections: Timeline Item 1, Timeline Item 2, Timeline Item 3, and Timeline Item 4. You can add new sections or delete the existing ones as needed.

timeline for brick builder

Options for each timeline item:

  • Date: Add the date for the timeline item.
  • Title: Add a title for the timeline item.
  • Content: Add the content for the timeline item.
  • Link: Add a link for the timeline item.
  • Show Images: Enable or disable images for the timeline item.
  • Custom Style: Enable or disable custom styles for the timeline item.

timeline content

Dynamic Content with Query Loop:

If you want your timeline to automatically pull in content from your WordPress posts or pages, enable the Query Loop toggle and define your queries.

enable query loop


Layout#

There are two timeline layout options: Vertical and Horizontal.

For Vertical Layout:#

  • Direction: Choose the alignment (left, center, or right).
  • Arrows alignment: Decide where you want the arrows (top, middle, or bottom).
  • Horizontal spacing: Set the spacing between items horizontally.
  • Vertical spacing: Set the spacing between items vertically.

timeline vertical layout

For Horizontal Layout:#

  • Horizontal spacing: Define how far apart the items are horizontally.
  • Vertical spacing: Define the vertical spacing between items.

timeline horizontal layout

Advanced Settings for Horizontal Layout:#

  • Columns: Define the number of columns.
  • Slider Speed: Set the speed of the slider.
  • Arrows: Enable or disable arrows.
  • Dots: Enable or disable dots.
  • Infinite Loop: Enable or disable infinite loop.
  • Center Mode: Enable or disable center mode.
  • Autoplay: Enable or disable autoplay.
  • Autoplay Speed: Set the speed of autoplay.
  • Pause on Hover: Enable or disable pause on hover.

advanced settings for horizontal layout


Cards#

  • Card Arrow: Enable or disable the card arrow.
  • Animate Cards: Enable or disable card animation.
  • Cards Padding: Define the padding for cards.
  • Text Align: Choose text alignment (left, center, right, or justify).
  • Background: Set the background for cards.
  • Border: Set the border for cards.
  • Box Shadow: Set the box shadow for cards.
  • Image Spacing: Define the spacing for images.

Title (Card):#

  • Title HTML Tag: Set the HTML tag for the title.
  • Padding: Define the padding for the title.
  • Typography: Set the typography for the title.
  • Background: Set the background for the title.
  • Border: Set the border for the title.
  • Spacing: Define the spacing for the title.

Content:#

  • Typography: Set the typography for the content.
  • Padding: Define the padding for the content.

Focused Card:#

  • Background: Set the background for the focused card.
  • Border: Set the border for the focused card.
  • Title Background: Set the background for the title of the focused card.
  • Title Typography: Set the typography for the title of the focused card.
  • Title Border: Set the border for the title of the focused card.
  • Content Typography: Set the typography for the content of the focused card.


Marker#

Markers highlight key points on your timeline. Here's how you can customize them:

  • Marker Type: Choose from an icon, image, number, or letter.
  • Marker Size: Define the size of the marker.
  • Marker Box Size: Define the box size of the marker.
  • Typography: Set the typography for the marker.
  • Background: Set the background for the marker.
  • Border: Set the border for the marker.
  • Box Shadow: Set the box shadow for the marker.

Focused Marker Styling:#

  • Color: Set the color for the focused marker.
  • Background: Set the background for the focused marker.
  • Border: Set the border for the focused marker.


Date#

Dates are crucial for timelines. Here's how to style them:

  • Padding: Define the padding for the date.
  • Typography: Set the typography for the date.
  • Background: Set the background for the date.
  • Border: Set the border for the date.
  • Box Shadow: Set the box shadow for the date.

Focused Date:#

  • Typography: Set the typography for the focused date.
  • Background: Set the background for the focused date.
  • Border: Set the border for the focused date.


Connector#

Connectors link your timeline items together. Customize them with these options:

  • Thickness: Set how thick the connector lines are.
  • Background: Choose a background color for the connectors.
  • Apply to: Decide if the background applies to the background, overlay, or text.
  • CSS Selector: Specify a CSS selector for custom styling.
  • Type: Choose the connector type.
  • Linear: Set the connector to be linear.
  • Angle in °: Define the angle for connectors.
  • Repeat: Set the repeat pattern for the connector.
  • Color: Choose a color for the connector.


This is the detailed overview of the Max Addons' Timeline element for Bricks Builder. Use this guide to make the most of the Timeline element's features and options.

Not the solution you are looking for?

Please check other articles or open a support ticket.