If you want to craft a visually appealing timeline for your events to transform an ordinary website into an engaging experience for your visitors, you must follow today’s tutorial, “How to Create a Beautiful Event Timeline in WordPress.”
To create a timeline event, we will use the Ultimate Blocks, a block library that enhances the functionality of the Gutenberg Block editor. It comes with 22+ custom blocks, and Timeline is one of them.
Why Use Event Timeline in WordPress?
The Timeline is a robust tool that helps you to showcase the historical journey you’ve been through.
It lets you detail your product launches or outline a series of milestones that grab the readers’ attention. It presents information in a more captivating and chronological flow.
Moreover, complex data or event sequences can be challenging to convey in regular formats. Timelines simplify this by presenting information step-by-step, making it easier for readers to understand key moments and their relevance.
How to Create a Beautiful Event Timeline in WordPress
Today’s guide will walk you through some easy steps to create an amazing timeline event that stands out, capturing each moment with clarity and style.
The Timeline Block is a premium block that will unlock if you purchase the pro version of the Ultimate Blocks. Learn how to activate the pro version from here and follow the first step.
Step 1: Go to Your Post or Page
Navigate Posts/Pages(1) > All Posts (2) and edit that post or page (3) to go to your post or page.
Step 2: Insert the Timeline Block
Go to your post or page where you want to add your slideshow. Click the + icon (Add Block) in the editor (1) and type “Timeline” in the search box (2). Click on the Timeline to insert it into the editor(3).
You’ll see a vertical timeline has been created with dummy content. You’ll see edit and customization options on the right sidebar.
Step 3: Customize Your Event Timeline
First, I want to add a title for my timeline by clicking on the title, removing the text, and typing my title after that.
Next, add an image by clicking the “+” (Add Block) and insert the image block. You can also select an image from your website’s media library.
You can resize the image display size according to your needs.
You can also adjust the image alignment if you like. I have aligned my image to the center.
Now, add your description of the event here.
You can also enable the Opposite text to add the date or any other text. To do that, select the whole Timeline block and navigate to the Settings (1) > Block (2) > Settings (3).
Scroll down a bit and navigate to the Timeline Type. Enable the Opposite text. When enabled, you will see the new “Text / Label” option to add a date or any other specific text at the opposite of the event.
You can also add icons to the connectors in the timeline progress line; you must enable the Icon Connector option (1). You can either enable the Icon connector or the Numbered Connector.
Scroll down a bit more and select the Icons Settings (1), click on the Select Icon button to select any icon from the library (2), and adjust the connector icon size (3).
Here are the settings that I modified for my event timeline.
The full timeline is below. Hope you will like it.
2016
WP Coupons & Deals
WP Coupons & Deals is the first plugin developed in 2016, which was a massive success for us and still makes money for us.
2019
Ultimate Blocks
In 2019, we created the Ultimate Blocks, a Gutenberg Block Editor Add-on that enriches the functionalities of the Gutenberg Block Editor.
2020
WP Table Builder
Next, we have released the most versatile table builder that lets you create any table without coding for any page builder.
2023
GroundWP
Created a dedicated WordPress Block Editor theme that loads a website faster than any other theme.
2024
Tableberg
After 4 long years, we have created another table builder that lets you create beautiful responsive tables just of Gutenberg Block Editor.
There are lots of other customizations available. Feel free to check them out and customize the Event Timeline.
Final Thoughts!
Timelines are a versatile tool, turning static information into dynamic storytelling that resonates with readers, making them ideal for business websites, portfolios, blogs, and more.
It is a versatile tool, turning static information into dynamic storytelling that resonates with readers, making it ideal for business websites, portfolios, blogs, and more.
Now that you’ve seen how easy it is to craft an eye-catching, interactive timeline, it’s time to add that extra touch of professionalism to your site and let each event shine.
Feel free to comment below to learn more about the event timeline. Also, share this post on your social media and let others know about it.
Read More!
Leave a Reply