The Timeline Block shows events in order along a line. Each event has a date, a title and a short text, and can also have a subtitle, an icon and a photo. The cards can sit on both sides of the line or on one side, the markers on the line can be dots, icons or numbers, and the line can fill in as visitors scroll down the page.

Use it for a company history, the steps of a process, a project roadmap, an event schedule, the status of an order, a hiring process, release notes, a course plan, or any list where the order of things matters.

How to Add a Timeline Block

Follow these steps to add and set up the Timeline Block in the Gutenberg editor.

Step 1: Add the Timeline Block

1. Open a page or post in the WordPress Gutenberg editor.
2. Click the + button to open the block inserter.
3. Search for Timeline under ShapeBlock Pro.
4. Insert the block into your page. It starts with four sample events.
5. Select the block and change the events in the sidebar.

Step 2: Configure the Timeline Block

Select the Timeline Block and open its settings in the right-hand sidebar. The available tabs are:

• Settings: Add, edit and order the events, and choose the marker, the fill on scroll and the card pointer.
• Layout: Choose which side of the line the cards go on, and the space between events and from the line.
• Style: Style the line, the markers, the cards, the dates, the titles and the text.
• Advanced: Set the spacing, position and background of the whole block.

Settings Tab

The Settings tab contains the Events and Display panels.

1. Events

Each event has its own row, named after its date and title. Click it to open it.

• Date: Shown next to the marker, for example 2024, March 2024, Week 3 or 9:30 am. It can be any short text.
• Title: The name of the event.
• Subtitle: An optional short line under the title, for example a place, a role, a price or the person in charge.
• Text: A short description. Line breaks you type here are kept.
• Icon: Pick an icon from the icon library. This option appears when the marker is set to Icon, and the icon is shown in the marker on the line.
• Image: Click Add Image to pick a photo from the Media Library. It is shown at the top of the card, cropped to 16:9. Replace Image and Remove change it later.
• Move Up, Move Down, Duplicate, Remove: Change the order of the events, copy one, or take it out.

Click Add Event to add a new event at the end of the list.

2. Display

• Marker: Dot shows a small ring on the line. Icon shows each event’s icon in a circle. Number counts the events 1, 2, 3 and so on, which suits steps.
• Fill on Scroll: When it is on, the line fills in the accent color as visitors scroll down the page, and each marker takes the accent color once the line reaches it. When it is off, the whole line stays in the line color and every marker is shown in the accent color.
• Card Pointer: A small arrow on the side of each card, pointing at the line. It takes the card’s own background and border.
• Title HTML Tag: The HTML tag for the titles: H2 to H6, P or DIV. The default is H3. Pick the level that fits the headings around the timeline.

Note: The fill follows the scroll on the published page. In the editor the line and the markers are shown without it.

Layout Tab

• Cards: Both Sides puts the line in the middle and the cards on alternate sides, with the date across from each card. Right of the Line puts the line on the left and every card on its right. Left of the Line puts the line on the right and every card on its left.
• Space Between Events: The space from one event to the next, for example 40px. When empty, 40px (28px on phones). Responsive settings are available.
• Space from the Line: The space between the line and the cards and dates. When empty, 28px (18px on phones). Responsive settings are available.

Note: When the block is narrow, on a phone or in a thin column (640px or less), every card goes on the right of the line, whichever Cards option is chosen. Both Sides needs room for two cards side by side.

Style Tab

The Style tab contains the Line & Marker, Card, Date, Title and Text panels.

1. Line & Marker

• Accent Color: The color of the filled line, the marker rings and the dates. Filled icon and number markers use it as their background.
• Line Color: The color of the line before it fills, and of the ring of a marker the fill has not reached yet.
• Line Width: The thickness of the line, for example 1px for a hairline. When empty, 2px.
• Marker Size: The size of the markers. When empty, 16px for a dot, 44px for an icon and 36px for a number.
• Marker Background: The color inside the markers. Match it to the section background so the line does not show through a dot.
• Marker Icon / Number Color: The color of the icon or number inside a marker the fill has not reached yet. This option appears for the Icon and Number markers.

2. Card

• Background: A color or gradient behind each card. Make it transparent, with no border and no padding, for a plain list without cards.
• Border: The style, width and color of the card outline.
• Border Radius: Round the card corners.
• Box Shadow: A shadow under each card.
• Padding: The space inside each card. Responsive settings are available.
• Image Border Radius: Round the corners of the event photos.

3. Date

• Color: The color of the dates. When empty, the accent color.
• Typography: Customize the font family, size, weight, style, text transform, line height and letter spacing. Responsive settings are available for desktop, tablet and mobile.

4. Title

• Color and Typography: The color and font of the titles. Responsive settings are available.
• Subtitle Color: The color of the subtitles.

5. Text

• Color and Typography: The color and font of the text. Responsive settings are available.

Advanced Tab

The Advanced tab has the same panels as on every ShapeBlock block: Spacing (padding and margin per device), Position (place the timeline with Absolute or Fixed, with offsets, width and z-index), and Background (a color or gradient behind the whole block). They are explained in Advanced Tab: Spacing, Position and Background.

Tips

• Keep each text to one or two sentences. A timeline is read from top to bottom, and short events keep it moving.
• Use Number markers for steps and Dot markers for dates. Icon markers help when each event is a different kind of thing, such as a call, a delivery or a payment.
• Next to a heading or a short intro in a second column, make that column sticky in its Row, so it stays in view while visitors scroll the timeline.
• For release notes or a changelog, turn off the card background, border and padding, make the dates bigger and use a 1px line.

Live demo: see the Timeline Block in action on the Timeline demo page.