Are you looking to show your content in a cool, easy-to-read timeline? A timeline is a great way to share events, milestones, or steps in a neat, straight line.
With the GeneratePress theme and GenerateBlocks plugin, you can build a fully responsive timeline right in your WordPress site without any extra plugins. This method is fast, lightweight, and even good for SEO.
In this guide, I’ll show you step by step how to make a timeline that looks awesome on desktop, tablet, and mobile.
Why Use GenerateBlocks for a Timeline?
Creating a timeline with GenerateBlocks has lots of benefits. It is fully responsive, which means it will look great on any device—whether it’s a computer, tablet, or phone. No matter the screen size, your timeline will adjust automatically to give your visitors a smooth experience.
You don’t need to write any extra CSS because everything can be done directly in the Block Editor. This makes the process super simple! Plus, the timeline is fast and lightweight, so it won’t slow down your website. You can even look at the code to see how efficient it is.
And if you want to change the colors, icons, or content, it’s very easy to customize so that it matches your website’s style perfectly.
Step-by-Step Guide: How to Add a Timeline in WordPress Using GenerateBlocks and GeneratePress
Step 1: Add the Main Container
- Open the WordPress Block Editor.
- Add a Container Block to your page.
- Inside this main container, add inner Container Block and call it “Timeline Container.”
- Set the padding for this container:
- Desktop: 30px on both side Tablet & Mobile: 15px on both sides
Step 2: Add Timeline Blocks
- Inside the Timeline Container, add another Container Block and name it “Timeline Block.”
- Within this Timeline Block, add three smaller containers:
- Timeline Content: This is where you’ll add your text, images, or description of the event.
- Timeline Icon: This container will hold an icon to represent the event.
- Timeline Date: This is where the date of the event will be displayed.
Step 3: Arrange and Style the Timeline
- Set the Timeline Block to use Flexbox and choose the Row direction.
- Set the width of both the Timeline Content and Timeline Date containers to 50% each.
- Inside the Timeline Content container, add another container. Give this new container 15px of padding and set a background color.
Note: Inside this container, you can add any text or images as needed. However, do not modify the timeline content container, as it may cause issues. The same applies to the date container—just add another container inside it and place the required date or text
- In the Timeline Icon container, add a Text Block and configure it to show only the icon. And set the display to flex, align the items to the center, and justify the content to the center. Also, set the flex direction to column so the elements stack nicely.
- For the Timeline Date, create another container inside it and set the items to align (to the left or right) depending on your timeline design.
Step 4: Make It Responsive for Mobile
- On mobile devices, you need to change the order of the elements:
- Set the Timeline Icon to Order 0.
- Set the Timeline Content to Order 1.
- Hide the Timeline Date on mobile by using a special class like hide-on-mobile.
- Instead, show the date inside the Timeline Content container using a simple text block.
Note: You also need to hide this text date block on desktop and tablet using the hide-on-desktop and hide-on-tablet CSS classes.
Step 5: Duplicate and Adjust
Now that you’ve set up your first timeline block, you can duplicate it to add more events.
- For every second timeline block on desktop, set the flex-direction to row-reverse. This creates a cool zig-zag effect.
- Important: For mobile devices, always set the flex-direction back to row. If you keep the row-reverse setting on mobile, the order of your elements might get mixed up.
- Make sure there is 20px spacing between each timeline block for a neat look.
Step 6: Add the Vertical (Middle) Line
Great job—you have now successfully created the timeline! Now it’s time to add the middle line that connects all your events.
- Select the Timeline Container (second inner container)
- Click on the More button and choose + New, then pick the Before Pseudo Element option.
- Set the following styles for the vertical line:
- Position: Absolute
- Content: ”
- Left: 50% (This centers the line in the middle of the container)
- Transform: translateX(-50%) (This helps to perfectly center the line)
- Width: 3px (This is how thick the line will be)
- Height: 100% (The line should cover the full height of the container)
- Background: #dd5903 (Or choose any color you like)
- Z-index: 1 (This makes sure the line appears above other elements)
- For mobile devices, adjust the left value to somewhere between 35px and 40px, so the line stays centered.
Note: If you’re using the free version of GenerateBlocks, there is no option for adding pseudo-elements directly. However, you can still create the vertical line by adding the following CSS manually.
In the Block Editor, select the Timeline Container and add the class timeline-container to it.
Next, go to WordPress Customizer > Additional CSS and add this CSS:
.timeline-container {
position: relative;
}
.timeline-container::before {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 3px;
height: 100%;
background-color: #dd5903;
z-index: 1;
}
@media (max-width: 768px) {
.timeline-container::before {
left: 40px; /* Adjust as needed */
}
}
If you don’t want to add the CSS manually, you can download the free ready-made timeline code and paste it into your Block Editor. This method works even in the free version of GenerateBlocks.
Download The Timeline Block Code Free
And that’s It! You have now created a beautiful, fully responsive timeline using GeneratePress and GenerateBlocks—without needing any extra CSS or plugins!
You can also create a timeline with a cool line scrolling effect —I’ll share more about that in my next blog post.