--- title: Timeline Block (Pro) description: How to create vertical and horizontal timelines in WordPress with the Ultimate Blocks Timeline block (Pro), including connectors, scroll progress, opposite text and styles. url: "https://ultimateblocks.com/docs/timeline-block/" updated: "2026-11-07" category: "Content & Layout Blocks" --- # Timeline Block (Pro) 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. | **Block name in the editor** | Timeline | | --- | --- | | **Plan** | Pro | | **Best for** | Company history, project roadmaps, product release notes, event schedules and step by step processes | | **Live demo** | [See the Timeline block in action](https://ultimateblocks.com/timeline-block/) | ## 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. ![Adding the Timeline Block](https://ultimateblocks.com/wp-content/uploads/2024/10/Adding-the-Timeline-Block.webp) ## 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. ![Add content to the timeline block](https://ultimateblocks.com/wp-content/uploads/2024/10/Add-content-to-the-timeline-block.webp) ![Add image to the timeline block](https://ultimateblocks.com/wp-content/uploads/2024/10/Add-image-to-the-timeline-block.webp) ![Image uploaded](https://ultimateblocks.com/wp-content/uploads/2024/10/Image-uploaded.webp) 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. ![Configure General Settings of the Timeline Block](https://ultimateblocks.com/wp-content/uploads/2024/10/Configure-General-Settings-of-the-Timeline-Block.webp) ### 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. ![Customize the timeline type](https://ultimateblocks.com/wp-content/uploads/2024/10/Cutomize-the-timeline-type.webp) ### 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. ![Customize the connector](https://ultimateblocks.com/wp-content/uploads/2024/10/Customize-the-connector.webp) ## 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](https://ultimateblocks.com/pricing/) to use it. Every plan has a 30-day money-back guarantee. ## Extensions you can use with this block - [Visibility Control](https://ultimateblocks.com/docs/visibility-control/) (Pro): show the block only to certain users or on a schedule. - [Animation](https://ultimateblocks.com/docs/animation/) (Pro): animate the block when it comes into view. - [Responsive Control](https://ultimateblocks.com/docs/responsive-control/): hide the block on desktop, tablet or mobile. - [Custom CSS](https://ultimateblocks.com/docs/custom-css/): add your own CSS to this block only. - [Saved Styles](https://ultimateblocks.com/docs/how-to-save-a-style/) (Pro): save your design and reuse it on other posts. ![Configure responsiveness of the timeline block](https://ultimateblocks.com/wp-content/uploads/2024/10/Configure-responsiveness-of-the-timeline-block.webp) For example, you can use **Responsive Control** to show a horizontal timeline on desktop and a separate vertical timeline on mobile. ## Frequently asked questions **How do I create a timeline in WordPress?** Install Ultimate Blocks Pro with the free Ultimate Blocks plugin, add the Timeline block in the block editor, and add your content to each timeline item. Use Add Item to add more milestones. **Is the Timeline block free?** No. The Timeline block is a Pro block and needs Ultimate Blocks Pro. Everything described on this page is included with Pro. **Can I make a horizontal timeline?** Yes. Set Timeline Type to horizontal and choose how many items show at once with Items Per View for desktop, tablet and mobile. **Can I add images or videos to a timeline item?** Yes. Each timeline item can hold any block, including Image, Video, Gallery, Buttons and other Ultimate Blocks blocks. **Can I number the steps in a timeline?** Yes. Turn on Numbered Connector to show 1, 2, 3 and so on inside the markers on the line. ## Related docs - [How to install and activate Ultimate Blocks Pro](https://ultimateblocks.com/docs/how-to-install-and-activate-ultimate-blocks-pro/) - [Ultimate Blocks free vs Pro](https://ultimateblocks.com/docs/ultimate-blocks-free-vs-pro/) - [Styled List block](https://ultimateblocks.com/docs/styled-list-block/) - [Tabs block](https://ultimateblocks.com/docs/tabbed-content-block-2/) - [Responsive Control](https://ultimateblocks.com/docs/responsive-control/)