The Timeline block in Ultimate Blocks lets you show events, milestones or steps in order along a vertical or horizontal line. Each timeline item can hold any blocks, such as headings, text, images, videos or buttons. The Timeline block is a Pro block, so you need Ultimate Blocks Pro to use it.

What you can use it for #

• Tell your company story on an About page, year by year.
• Show a product roadmap or a list of releases with dates.
• Lay out an event schedule or agenda.
• Explain a process step by step with numbered connectors.
• Present history or biography content in a clear, visual order.

How to add the Timeline block #

1. Make sure Ultimate Blocks Pro is installed and active, together with the free Ultimate Blocks plugin.
2. Open the post or page in the WordPress block editor.
3. Click the + (Block Inserter) button.
4. Search for Timeline and click the block to add it.

Add content to timeline items #

A timeline is made of timeline items. Click inside an item and use the + button to add any block, for example a Heading for the date or title, a Paragraph for the details and an Image. Use Add Item to add more items to the timeline.

Each item also has its own style options: Content Color, Content Background, Border, Border Radius and Padding, so you can highlight one milestone. With Opposite Text turned on, each item also has a text field shown on the other side of the line, which is handy for dates.

Settings tab #

Select the Timeline block and open the block sidebar on the right. The Settings tab (gear icon) holds the timeline options below, plus the extension panels at the bottom.

Timeline Type #

• Timeline Type: choose a vertical timeline (items go down the page) or a horizontal timeline (items sit side by side, like a slider).
• Items Per View (horizontal only): how many items are visible at once. You can set a different number for desktop, tablet and mobile. By default it shows 2 items on desktop and tablet and 1 on mobile.
• Show Arrows (horizontal): show previous and next arrows so readers can move through the items.
• Enable Dragging (horizontal): let readers drag or swipe to move through the items.

Layout #

• Timeline Position: place the line on the left, on the right, or in the center with items on both sides.
• Items Starting Position: when items are on both sides, choose which side the first item starts on.
• Timeline Progress (vertical): fill the line with a progress color as the reader scrolls down. You see this effect on the live page, not in the editor.
• Opposite Text: show extra text, such as a date or year, on the other side of the line from each item.

Connectors #

• Show Connectors: show a marker on the line for each item.
• Connector Position: set where the marker sits next to each item.
• Numbered Connector: show numbers (1, 2, 3 and so on) inside the markers. This works well for step by step processes.
• Icon Connector: show an icon inside the markers instead.
• Connector Size and Connector Icon Size: set the size of the marker and of the icon inside it.

Styles tab #

Switch to the Styles tab (half-circle icon) to change the colors and item design:

• Line colors: Line Color, Progress Line Color and Arrow Color.
• Connector colors: Connector Color, Connector Background and Connector Icon Color.
• Opposite Text Color: color of the opposite text.
• Item content: Content Color, Content Background, Border, Border Radius and Padding for all items. You can override these on a single item.

Note: The Timeline block is part of Ultimate Blocks Pro. Get Ultimate Blocks Pro to use it. Every plan has a 30-day money-back guarantee.

Extensions you can use with this block #

• Visibility Control (Pro): show the block only to certain users or on a schedule.
• Animation (Pro): animate the block when it comes into view.
• Responsive Control: hide the block on desktop, tablet or mobile.
• Custom CSS: add your own CSS to this block only.
• Saved Styles (Pro): save your design and reuse it on other posts.

For example, you can use Responsive Control to show a horizontal timeline on desktop and a separate vertical timeline on mobile.

Frequently asked questions #

Related docs #

• How to install and activate Ultimate Blocks Pro
• Ultimate Blocks free vs Pro
• Styled List block
• Tabs block
• Responsive Control