How To Build a Timeline Page With Blocks

Up next in our Building with Blocks series is a quick tutorial on how to build a timeline page. Timelines give brands and organizations a visual way to introduce themselves and feature highlights from their histories. The block editor makes creating a timeline easier than it ever was with legacy plugins.

For this example, I selected the Timeline Block For Gutenberg by Cool Plugins, which is available on WordPress.org. It’s one of just a handful of plugins that offer timeline blocks. It makes it easy to create a responsive timeline that can be customized to match the organization’s brand, with live previews during the creation process.

I used the relatively new Blockpress theme from MotionBlocks, which supports full site editing so users can customize everything directly on the page. I found the theme easy to work with when creating my example website for this project. It also has compatibility with WooCommerce, if you’re selling something on your site. The Timeline Block for Gutenberg plugin will work with any theme that supports the block editor, but I wanted the chance to play around with Blockpress.

This video demonstrates how you can create a timeline in under five minutes.

The first step is to install the theme and plugin. Once both are activated, create a new page that will house the timeline. Click on the block inserter and select Timeline Block.

One convenient feature about the plugin is that it will insert some placeholders, so it’s easy to see how to add new timeline items (“stories”). The easiest thing to do is replace the text and images that are already there and add more stories at the end if you need a longer timeline.

The plugin lets you customize the story heading, description, and primary label colors, and even the line, icon color/background, and story border. This makes it possible to match the colors to a site’s branding. On the individual story settings, you can change the image size and customize the story icon by selecting from the Font Awesome icon collection. The stories can also link to other posts, so it’s flexible to be used for a variety of different purposes in addition to your standard corporate timeline.

3

3 responses to “How To Build a Timeline Page With Blocks”

  1. That looks really nice. I haven’t really heard of Blockpress before. I should take a look at it.
    Thanks especially for the video, it was really detailed and helped me out when I tried this out myself.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: