How to Add Timeline in Bricks Builder Using BricksFly

BricksFly Timeline Element lets you display events, milestones, or product journeys in a clear chronological layout. You can customize the style, alignment, indicators, images, icons, dates, titles, content, and links for each timeline item.

Requirement 

Make sure you have installed:

• Bricks Theme 
• BricksFly Pro

Activate Timeline in BricksFly

1. Go to your WordPress Dashboard. 
2. Click on BricksFly. 
3. Head to the Elements tab. 
4. Under General, toggle On Timeline.

Step 1: Adjust the Timeline Layout

Style: Selects the visual design of the Timeline Element. Each style changes how the timeline line, items, images, icons, and content are displayed. Available options include One and Two. In this example, Two is selected, but you can choose either option based on your preference.

Title HTML Tag: Selects the HTML tag used for timeline item titles, such as H2, H3, H4, or another available tag. Choose the tag based on your page heading structure. For this example, the title HTML tag is set to H2.

Date Icon: Sets the icon displayed beside the date of each timeline item.

Image Size: Selects the resolution used for timeline images, such as thumbnail, medium, large, or full size. In this example, Full Size is selected.

Image Position: Controls where the image appears in relation to the timeline item content. Available options include Top and Aside. In this example, Top is selected, but you can choose either option based on your preference.

Alignment: Controls the overall alignment and positioning of the timeline items. In this example, the alignment is set to Center. However, you can choose any alignment based on your design needs.

Indicator: Shows or hides the visual indicator that marks or connects the timeline steps. For this example, the Indicator option is enabled, but you can enable or disable it based on your preference.

Step 2: Add and Configure Timeline Items

Step Type: Selects whether the timeline step displays an icon or text. In this example, the Icon option is used, but you can select the alternative when needed.

Step Icon: Sets the icon displayed for the timeline step when the icon option is selected. In this example, the option is left blank. However, you can choose any step icon based on your design needs.

Choose Image: Allows you to upload or select an image for the timeline step when the image option is selected.

Date: Sets the date, year, or time label displayed for the timeline item.

Title: Sets the main heading of the timeline item.

Subtitle: Adds supporting text below the main title.

Content: Adds the description or detailed information displayed within the timeline item.

Link: Adds a clickable link to the timeline item or related page. However, no links are added in this example.

+ Add Item: Adds another item to the timeline. Each item can have its own step type, icon, image, date, title, subtitle, content, and link. In this example, three product items are added, but you can add as many as needed.

Final Result