How to Use the Timeline Block

Timelines are a visual representation of information and events that happen over time.

Stackable’s Timeline block can be used to display a timeline of events, stories, or any sequential content on your WordPress website.

When to Use the Timeline Block

You can use the Timeline block to present chronological information, historical events, project progress, product roadmaps and step-by-step processes.

In educational websites, you can use the Timeline block to present historical events, scientific discoveries or literary movements in an interactive and engaging format.

Adding a Timeline Block

Add the Timeline block from the block library.

When you add a Timeline block, you will see a single Timeline entry. By default, you will see a date on the right, and a Text block in an Inner Column on the left.

To start building your Timeline, add another Timeline block or duplicate the previous Timeline block.

Customizing the Timeline

Layout Settings

In the Layout tab, select Left or Right for the Content Position.

Then adjust the Timeline Gap to set the space between the timeline and the content.

Accent Anchor Position

In the Timeline panel of the Style tab, you can set the Accent Anchor Position.

If you stack Timeline blocks on top of each other, a vertical line will connect the blocks. As you scroll down, color gradually fills up the line.

The Accent Anchor Position determines the starting position of the Accent Color.

If it is set to a lower value, the Accent Color will partially fill up the line. If it is set to a higher value, the color will continue to fill up the line.

When you add another Timeline block, the succeeding timeline block will also use this value.

Dot and Line Settings

Adjust the Dot Size to change the size of the dot, and the Dot Border Radius to define the roundedness of the dot’s corners.

You can adjust the Line Thickness, and use Horizontal Offset to adjust the length of the horizontal lines.

Customizing the Timeline Colors

The Timeline Accent Color is the active color in the timeline. This color fills the line as you scroll down the page.

The Timeline Background Color is the background color of the timeline. This color is static and is filled by the Timeline Accent Color.

Customizing the Content

You can replace the date, which is the default content in the Timeline block, with your own text. Then you can further customize the Typography settings.

You can also replace the default Text block in the Inner Column with Headings, Images and other Stackable blocks to enhance the visual storytelling of your timeline.

In the example below, we’ve added and customized the Icon Box block.

Adding Space Between Timeline Blocks

In the Layout tab, under the Block Size & Spacing panel, you can apply Top and Bottom Paddings to adjust the space between your Timeline blocks.

Responsive Settings

For mobile screens, the Timeline block collapses into a more compact and mobile-friendly form.

The Timeline block provides a range of customization options that empower you to tailor the timeline's appearance to match your website's design, and simplify lengthy information into a visually compelling sequence.