Timeline is a special type of block using which you can create beautiful timelines for Organizations History, Startup Storyline, Event/Program History, Step by Step Tutorials Timeline, and Lifetime Achievements, etc. This block depicts a complete history of a particular organization or an event in a visual way.

Pro tip
The most common examples where timeline block is used are listed above. But, we have one more to add to the list. Why not create a timeline for your travel/vacation stories?

How to use the Timeline Block of The Plus Addons For Gutenberg

The Timeline block comes in two different styles. Let’s understand how to use this block in the tutorial below. 

Table Of Contents

Setting Up

Gutenberg gives multiple ways to add Timeline into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Timeline after “/” sign, eg.“/Timeline”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks panel.

After placing the block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout



Select your preferred style from the dropdown.

Masonry Layout

Slide to enable the Masonry Layout.

Content Alignment

Set the Content Alignment here.

Add Timeline

You can add multiple Pin Hotspot here by clicking Add Item.

Icon: Select your icon here using the options provided. You can also add an image based icon.
Pin Title: Set the title of your Pin.
Pin Position: Set the position of your Pin.
Content: Add the content of your timeline.
Advance: Set the alignment and animation options here.

Pin Start/End Options

Pin Center Style

Select a preferred style of your pin.

Pin Start/End Options

Start Pin/End Pin
Select Icon – Select Icon or Image for start and endpin.
Icon Font – Select the Icon Font for start and endpin.
Icon Library – Select the Icon for start and endpin from the Icon Library.

2. Style

The Style tab is used for customizing the appearance of all the Timeline block components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Loop Pin Style

Set Margin, Alignment, Typography, and Text color for the Title here.

Title Style

Set Margin, Alignment, Typography, and Text color for the Title here.

Description/Content Style

Set Margin, Alignment, Typography, and Text color for the Description here.

Button Options

Set Margin, Padding, Alignment, Typography, Size, Radius, Background, Box shadow and color for the toggle button here.

Pin Start/End Style

Set the Border Color, Icon Size, and Color here.

Extra Options

Set the width of the divider gap content here.

3. Advanced

Advanced Tab Options are common across all the blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

4. Error 404 (Dynamic CSS)

In this tutorial, we have explained when this option will be needed.

View The Server Error Tutorial

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.