How To Build a Timeline Page With Blocks – WP Tavern

Up subsequent in our Building with Blocks collection is a fast tutorial on the right way to construct a timeline web page. Timelines give manufacturers and organizations a visible approach to introduce themselves and have highlights from their histories. The block editor makes making a timeline simpler than it ever was with legacy plugins.

For this instance, I chosen the Timeline Block For Gutenberg by Cool Plugins, which is on the market on WordPress.org. It’s considered one of only a handful of plugins that provide timeline blocks. It makes it simple to create a responsive timeline that may be personalized to match the group’s model, with stay previews throughout the creation course of.

I used the comparatively new Blockpress theme from MotionBlocks, which helps full website enhancing so customers can customise all the things straight on the web page. I discovered the theme simple to work with when creating my instance web site for this undertaking. It additionally has compatibility with WooCommerce, when you’re promoting one thing in your website. The Timeline Block for Gutenberg plugin will work with any theme that helps the block editor, however I wished the possibility to mess around with Blockpress.

This video demonstrates how one can create a timeline in underneath 5 minutes.

Step one is to put in the theme and plugin. As soon as each are activated, create a brand new web page that can home the timeline. Click on on the block inserter and choose Timeline Block.

One handy function in regards to the plugin is that it’ll insert some placeholders, so it’s simple to see the right way to add new timeline gadgets (“tales”). The best factor to do is exchange the textual content and pictures which are already there and add extra tales on the finish when you want an extended timeline.

The plugin helps you to customise the story heading, description, and first label colours, and even the road, icon colour/background, and story border. This makes it doable to match the colours to a website’s branding. On the person story settings, you possibly can change the picture measurement and customise the story icon by deciding on from the Font Superior icon assortment. The tales can even hyperlink to different posts, so it’s versatile for use for a wide range of completely different functions along with your customary company timeline.