How to create a timeline with WordPress block editor + CSS

Discover in this tutorial how to create a timeline with the WordPress block editor and a little bit of CSS.

The WordPress block editor is getting more and more powerful and, if you combine it with custom styles, you can get very nice results.

In this tutorial you are going to see how to create a timeline that shows different milestones, goals or whatever you want.

This is the final result:

Interested? Here we go.

Steps to create a timeline with the WordPress editor

1. Create the block structure and add the CSS classes

First of all you have to create the block structure. The most important in this case are the group blocks, there is one that encompasses all the blocks and another one that encompasses the content.

The structure is as follows:

• 1 group block (CSS class = timeline)
  • 5 group blocks (CSS class = timeline-content)
    • 5 header blocks (H2)
    • 5 paragraph blocks

But you are going to see it even clearer with this screenshot:

In the first group block (which is the one that encompasses all content), go to the “Advanced” section and add timeline under “Additional CSS class(es)”.

Next, do the same but for the groups that contain the content (the header and paragraph), and in that case use the timeline-content class:

Once you have finished it, if you want you can convert it into a pattern directly in the block editor.

In fact, if you want to save time and import the reusable block directly, you can download this JSON file and import it into your WordPress installation.

You can do it from the block editor, in the top 3 points on the top right under Tools > Manage reusable blocks:

2. Customize the CSS of the timeline

Now you just need to assign the styles to make it look the way you want it to look.

To do this, insert this block at the end of style.css:

Thanks to these CSS lines you customize the timeline styles to be displayed as in the example.

It also includes the styles to adapt correctly to mobile devices:

Obviously, you can modify whatever you want from the CSS to suit your needs.

3. Customize the colors in the block editor

The advantage of using the block editor is that you can modify the background color and the text of the timeline-content group directly.

This is an example of the modifications you can make from the editor:

That would give this result:

Conclusions

Now you know how to create a timeline using the block editor and some CSS.

Any questions? I read you in the comments.

And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉