Using Cool Timeline you can easily create and customize beautiful story timelines directly inside the Bricks Builder.
You can add timeline stories, images, videos, icons, dates, navigation, pagination, animations, and more without using shortcodes. All timeline settings are available directly from the Bricks Builder panel.
Add Story Timeline Widget
Follow these steps to add your timeline in page built inside Bricks Builder:
- Edit your page with Bricks Builder.
- Click the + button to add a new element.
- Search for Story Timeline.
- Drag and drop the Story Timeline element onto your page. Once added, you will see a default timeline structure appear on your page.
- You can now replace the default stories with your own content and customize the timeline using the settings available in the Content and Style tabs.
Content Settings
Under the Content tab, you will find the following settings:
- Timeline Stories
- Layout Settings
- Navigation / Menu
- Pagination
Timeline Stories Settings
The Timeline Stories section lets you customize the content of each timeline story individually using separate content and style settings.
Content Settings
- Open the Timeline Stories section.
- Click on the story you want to edit. Each timeline story includes the following options:
- Year / Label (Top): Enable this option to display a year or custom label above the story.
- Year / Label Text: Enter the year or label text for your timeline story. For example,
2000,2020, orour Beginning. - Label / Date: Add the main date, step, or label for the story.
- Sub Label: Add an additional label below the main date or label.
- Title: Enter the title of the timeline story.
- Choose Media: Choose to display an image, video, or slideshow for your timeline story and set the media size according to your preferences.
- Description: Add the main content or description for the story.
- Icon Type: Choose the icon type for your timeline stories from icon, text, image, dot, or none.
- Read More Button: Enable the “Read More” link if you want to provide extra details or direct users to another page.
Style Settings
Customize the appearance of each timeline story individually using Style tab.
- Background Color: Set the background color of the story content box.
- Border Color: Change the border color of the story box.
- Title Color: Set the color of the story title.
- Title Background: Set a background color for the story title.
- Description Color: Customize the color of the story description.
- Description Background: Set a background color for the description box.
- Label / Date Color: Change the color of the primary label or date.
- Sub Label Color: Set the color of the sub label.
- Icon Color: Customize the color of the story icon.
- Icon Background: Set the background color of the story icon.
- Year / Label Color: Change the color of the year or top label.
- Year / Label Background: Set a background color for the year or top label.
- Connector / Arrow Color: Customize the connector or arrow color for the selected story.
Add a New Story
To add more stories to your timeline:
- Open the Timeline Stories section.
- Click the + Add Story button.
- A new story will be added to the timeline.
- Enter the required content and customize its style using the available options.
Layout Settings
The Layout Settings section lets you control the layout, alignment, icons, connectors, media, and animation of your timeline.
- Layout: Choose the timeline layout from Vertical (Right / Left), Vertical (Right Only), or Vertical (Left Only).
- Preset Style: Select from multiple predefined timeline designs to change the visual appearance of your timeline.
- Initial Alignment: Choose whether the first story should appear on the Right or Left side when using the Vertical (Right / Left) layout.
- Content Alignment: Set the alignment of the timeline content to Left, Center, or Right.
- Icon / Labels Position: Adjust the position of the timeline icons and labels using the available control.
- Display Icons: Choose whether to display Icons, Dots, or None for the timeline story markers.
- Default Story Icon: Set a default icon that will be used for all stories.
- Connector Style: Choose the connector style between timeline stories from Arrow, Line, or None.
- Media Position: Choose whether the story media should appear Below Title or Below Description.
- Image Outside Box: Enable this option to display the story image outside the main content box.
- Content In Popup: Enable this option to display the story content inside a popup.
- Animation: Choose an animation effect for your timeline stories, such as Fade, Slide, Zoom, or Flip effects.
- Image Popup: Enable this option to open timeline images in a popup when visitors click on them.
Navigation/Menu Settings
Enable Navigation / Menu to create timeline navigation using the values entered in the Year / Label (Top) field of your stories.
- Navigation Style: Choose from the available navigation styles to change the appearance of the navigation menu.
- Navigation Position: Choose whether to display the navigation menu on the Left or Right side of the timeline.
Pagination Setting
Enable this option to add pagination to your timeline.
- Story Per Page: Set the number of stories you want to display on each page.
- Page Text: Customize the text displayed for the current page.
- Of Text: Customize the text displayed between the current page and the total number of pages.
Style Settings
From the Style tab, you can customize fonts, colors, spacing, and padding for timeline elements.
- Line: Customize the appearance of the main timeline line, including its width, color, border, and filling.
- Icon Box / Dot: Customize the timeline icons or dots, including their size, color, background, border, radius, and spacing.
- Labels / Date / Year Box: Customize the appearance of the story labels, dates, sub labels, and year/label boxes, including their typography, colors, size, background, and spacing.
- Content Background / Border: Customize the background, border, spacing, radius, and shadow of the timeline story content box.
- Title / Description: Customize the typography, colors, background, spacing, and other styling options for story titles and descriptions.
- Image / Media: Customize the size, spacing, border, radius, and other styling options for images and other story media.
- Button [Read More]: Customize the appearance of the Read More button, including its typography, colors, background, spacing, border, and hover effects.
- Floating Effect: Add and customize a floating effect for the timeline elements to create a more dynamic appearance.