WordPress plugin for creating a timeline.

In our previous article, we have introduced the timeline and mentioned a few proven scenarios where creating a timeline on a website is more viewer engaging than creating an ordinary article. If a google search has dropped you here and you are unsure about what the timeline is and where you can use it. I encourage you to read the previous article first from here.

Now, let’s talk about some of the plugins we can use to create such beautiful timelines we already talked on our previous article. There are many plugins to create a beautiful timelines and every plugin has something unique to offer than the rest of the available plugins. We are going to cover few of such plugins and specifically tells you about their unique features which makes them different from others.

So, let’s starts with one of the cool plugins available in wordpress.org

Cool Timeline

Cool Timeline is one of the most downloaded timeline plugin in the wordpress.org. This plugin is actively trusted by more than 10K users and has more than 200K all-time downloads. There are four different layouts you can choose from to create a timeline and have smooth animation to make your content looks more interesting.

The WordPress itself has improved so much from its first release and that advancement bought us, Gutenberg. Well, the best part of the cool timeline is that its developers keep their users up-to-date with the technology. You can find a Gutenberg instant builder to create a timeline with a few clicks. You can check these Gutenberg specific demos to know more about it. But supporting the Gutenberg doesn’t mean that the famous classic editor is left behind the scene. The Cool Timeline still supports the Classic editor and you can use the shortcode builder in the classic editor to add a timeline on any post or page. The plugin also has a premium version packed with much-advanced functionality. The premium version; Cool Timeline Pro has already impressed more than 6K people on codecanyon.net. You may want to check that out too on codecanyon.net

Timeline Widget Addon for Elementor

As its name indicates, the Timeline Widget Addon for Elementor is actually an addon plugin for Elementor. It lets you create timelines while checking the preview at the same time. Updating the timeline preview in real-time enables you to create the best ever looking timeline without switching the page. The plugin already has different layouts you can select and different combinations of colour let you create a unique timeline every time for your website. If you have already setup your website with Elementor, installing Timeline Widget Addon for Elementor is the only thing you need to create a timeline. You can check here all the demos for Timeline Widget Addon for Elementor.

Why your website needs a Timeline.

You feel like home if you are already aware of what the timeline is and why people are using it on their websites. Even if you don’t know anything about the timeline, please keep reading and you’ll get a taste of it in no time.

The timeline is an attractive way to represent something with highlighted points only. There are different types of design layouts in which a timeline can be created but generally, a timeline has a main heading and multiple stories where each story has a title, a small description and navigation to navigate through stories. So, these are some common elements for every timeline. But of course, every timeline can have more or else elements according to the design. Now, you have a rough idea about a timeline. You must be thinking, how it’s different than the regular blog post. Let’s see some of the timelines before we start discussing its possible usage.

A vertical layout timeline.

A horizontal layout timeline.

Does it look interesting? of course, representing any vital information with such a graphical design will works like honey for your viewers. If you are still unsure about using the timeline on your website, let me explain you some of the benefits of the timeline.

  1. Engage more audience: Using a timeline on a website is a proven way of engaging more audience. whenever someone visits your site and gaze over something unique, they feel more welcomed on your site. They are people who don’t want to read the stuff in the old boring way. Crafting a website with such unique beautiful layouts will make people visit your site more often.
  2. Variety of designs: Will it be possible for you to redesign your site every time some important event occur? Obviously not, it takes an immense amount of time to redesign or even change the colour theme for specific content. Moreover, you can’t change the whole site for a single post. But what if you actually have an important upcoming event and you don’t want to write a boring article that only a few people reads. The timeline can assist you to create colourful content with fewer efforts. Each timeline can have its own colour theme or a different layout. You don’t have to be a designer to create a beautiful timeline, that’s the actual beauty of plugins like Timeline Builder Pro.
  3. Everything feels alive: With the advancement of web applications, there are tons of things we can do while writing an article or a blog. But it’s not easy to create attractive content. Well with the available options of animations and colour combinations, your content looks more alive. Unless you are not writing a serious article, dynamic moving stuff makes people feel more connected. We actually do not interact with an animation on the web, well not directly. But everyone loves it when you scroll the page and a piece of block fly-in on the screen. There are different kinds of animations available for different timeline layouts. Sometimes, even changing colour theme and animations makes the blog as fresh as new.
  4. Responsive designs: Everyone is familiar with a responsive design. In simple words, content on a website is viewable in different screen sizes without any loss of data or design. Now, an article on food is an article on food. What more you can possibly do with an article on different screen sizes? A timeline doesn’t look same on different screen sizes, so adding a timeline is a cleaver way of creating stylish and responsive content.
  5. Easy Navigation: Every website has an archive page and navigating through an archive page is not so easy. An archive page can have tons of posts and articles and even all those articles are sorted by date, it’s still not easy to navigate through those articles. Well, a timeline can make these tasks as a cakewalk. As you have already seen the timeline above, a timeline is an easy way to sort your articles and navigate through them. There are many timeline designs which actually enables you to sort the WordPress posts (articles) using categories. Such navigation with a premium looks to increase the viewer’s engagements.

There are many reasons to use a timeline on your website and I have only mentioned a few of the above. If you are still not convinced about using the timeline, let me tell you all the wonderful things where you can use the timeline.

  1. Company Timeline: Every company wants to showcase its achievements. It’s hard to engage people by only telling them about all you have done so far. A timeline with highlighted company’s events is a much better way to show the company’s progress. Imagine, all the achievements of the company with dates and pictures of the events. Graphics make more mental impression than text alone. A timeline is more about showing the achievements rather than just telling it.
  2. Achievements Timeline: You may be a blogger, a freelance developer or a story writer. Well, the timeline is a creative way of showing your achievements. A horizontal timeline for your travelling blog is a great fit. Each timeline story will have a picture of a different place and the timeline itself represents all the miles you have travelled so far. As a freelance developer, you can showcase all the projects you have finished or the reviews of your client. A website with full of stories can also use the timeline to navigate in different books or chapters of a book.
  3. Timeline as website navigation: It is not easy to navigate a website with many categories and sections. A timeline can be used to navigate through a website. A timeline can be created to navigate between sections or categories. Often, there is a menu to navigate through sections but a button title doesn’t tell much about the section. A timeline is a cleaner and more robust way to create a section navigator and its actually doesn’t bother your viewer if the timeline has so many stories until you keep using good images to provide some infographic about the sections.
  4. Timeline of team members: A usual way of creating a team or about us page is straight forward. You create a new page with the name of a team member, her photo and a short description. Now, this approach is so old that you’ll find 6 out of 10 websites using the same page layout. Almost same if not exact same. But the point is; there is nothing new. You won’t read an About us or Our Team page unless you actually want to know the people working there. And to be honest, there is actually nothing much one can do with the design and colours. But a timeline is a more creative approach to this old stuff. It’s true that beauty attracts the tourist and in this case, a timeline can be your Great wall of china or the TajMahal that attracts the viewer. Visitors actually spent more time on your website when they see such interactive stuff.

You’ll often notice that viewer love spending time on your site just to see how certain things operate on your website. So the more interactive stuff you provide, the more engagement and returning viewers you’ll see on your website. Now there are many different plugins with different functionality and features to achieve this goal but we’ll discuss those available options in our next article.

So that’s all folks for now!

if you have also created a timeline or have different views about it, please leave your thoughts in the comment section and I’ll be happy to discuss it with you.

Create Workflow Timeline using Timeline Builder Pro

Creating a user engaging content is a must for any blogging website but even if you are not running a blogging website, you may still want to show your company’s achievements or history in a cool and appealing way.

Displaying your website’s content in a timeline is one of the most appealing way these days. Before we get into all the technical stuff of creating the timeline, let’s consider some example where creating a timeline is more appealing than the regular blog content.

  • A history of a company: Creating a Timeline to showcase the company’s history is much more attractive and readable than the regular essay type of content. Anyone will consider gazing over a vertical timeline that showcases the achievements and milestones of a company in chronological order than reading a lengthy post.
  • Official Workflow: Every company has a specific workflow for how they operate and do all their daily stuff. Creating a point-to-point or step-by-step guide is a story of old age. Timeline is a modern way of displaying regular stuff in more stylish ways. Not only the official workflow but even creating a project workflow in a timeline is more appealing than the regular post.
  • Team Members: I’m sure you already get an idea. There are already plugins out there for showcasing team members but a timeline representation of the team members not only showcase the members itself but it is useful in showing the hierarchy of the team.
  • Event Planning:

the list can goes on and on…

There are dozens of reasons you can find to create a timeline instead of a regular post. I’m sure you’ll find more than one reason, why you should create a timeline. If you have already decided to create a timeline, let me guide you step-by-step to create a timeline with the minimal configuration in no time.

Plugin Name: Timeline Builder Pro.
Difficulty Level: None.

Now, we’ll create a timeline to understand its working. We are going to create a timeline about project workflow. Just follow along me and you are good to go.

I am assuming that you have already downloaded and activated the plugin on your WordPress website. As soon as the Timeline Builder Pro is activated on your WordPress site, you’ll see a menu “Timeline Addon” menu in the WordPress admin menu bar.

Navigate To the Timeline Addons > Timeline Builder and you’ll land on a page where all your timelines will be listed. This page does not contain any timeline as we just did a fresh installation of the plugin. (Fig 1)

(Fig 1)

Click on the button “Add New Timeline” button to create a new timeline and it will add a new timeline post and navigate you to the newly created timeline post. As you can see (fig 2) a new timeline is created and we have given it a title: Project Workflow. Obviously, you can give any name to your timeline that you like.

(Fig 2)

As it’s visible in the screenshot, timeline builder pro plugin has added some default stories for you with some random content. You must change this to something more useful for your website.

Let’s take a quick look to all the required stuff we should change or add.

Title: This is the title of your story, each should have a unique title according to the story. Let’s change this to:- Initial Discussion.
The title can be long but just don’t make it too long that it took away the overall grace of the timeline design.

Description: You can add descriptive content here. For example: while creating a project workflow, you can write about the steps in details here. For the sake of this tutorial, just add the following lines in the description:- Discuss the project requirement with the client and finalize all terms and conditions. The discussion field has a rich text box. You can actually format all the text or add HTML content here. This field actually allows you to add as much text as you want but here is my advice for creating a good timeline; keep it short and simple.

Primary Label: You can think of it as a small section in a chapter you would like to highlight. For a project with deadlines, you probably write the date of starting the project here. Let’s change this to:- 1 Jan.

Sub Label: Sublabel is more like a subheading. Just change this to:- 2021 and move ahead.

Choose Media Type: Each story contains media. There are three options available to add media. A media can be an image, a youtube video link or an image slider. We are going to add an image of handshake here by selecting media type as image and upload the image by clicking on the button upload. This is straight forward I guess, this is same as uploading a featured image in the WordPress post.

Now click on the Layouts tab at the top bar and this will brings the layout related option. We are not going to keep the layout and design as the default selection which is ‘Both Sided’ layout and ‘default’ design. Just reach to the ‘timeline animation ‘option and we’ll change this to ‘flip-up’. if you don’t see this option, you might have changed the layout to something else. Only a few layouts have this option so you may want to change it back to the both-sided or one-sided layout.

Everything is straight forward right? Now change to another tab by clicking over the ‘General / Design’ tab at the top bar. You’ll see a lot of typography and colour settings. The different combination of these settings can change the overall colour theme of each timeline. We’ll be changing the ‘Label’s Background Color‘ to red and ‘Timeline Midline Color’ to blue in a lighter shade. You may need to scroll a little bit to find this option below. You may want to change the other settings to find the best colour theme for your timeline.

We only have added a single story and you actually have to repeat these steps for other stories too. But for now, just hit the ‘Publish’ button to publish this timeline and add this timeline on any page by using the shortcode provided in the ‘Shortcode’ sidebar widget. You can also use the ‘Preview Changes’ button to preview the timeline on the front end without using it on your website right now. Let’s have a look at our timeline on frontend:-

See, how super easy it is to create a timeline using the Timeline Builder Pro plugin by coolplugins.net. Now before you do a google search for all the available (other) plugins to create a timeline, let’s see why should you consider using the Timeline Builder Pro plugin.

  1. Easy to setup: The Timeline Builder Pro is super easy to use and creating a timeline requires the time you takes to create the content. A timeline can be created as quickly as you can be ready with the content to publish. In a nutshell, creating a timeline with Timeline Builder Pro is similar to creating a post in WordPress. It’s easy and it’s fun.
  2. Easy to customize: It only takes a few clicks to customize everything and its all optional. You can decide what you want to change and what you want to keep as default. The customization settings are created in such a way that a beginner with zero experience can configure the timeline like a pro.
  3. Advanced Design: Most of the timeline plugin only has simple timeline designs. The Timeline Builder Pro plugin is equipped with advanced layout with multiple designs and it only takes few clicks to change the design. The plugin keeps updating with new designs and as soon as you’ll change a design, everything looks fresh again.
  4. The vast variety of combination: The timeline builder pro offer so many configurations to customize the timeline that you can create almost endless colour designs with different combinations. You can create multiple timelines with a different colour scheme. For example; you can create a timeline for your Christmas events with a Christmas theme.
  5. Responsive designs: All the designs in the Timeline Builder Pro are responsive and it is the most important factor for any website. An advanced design is of no use if it’s not responsive for the different devices in use these days.

Final Words

There are a lots of themes and page designing plugins to make an appealing website but some content must stands out from the rest of the website. A history of the company, achievements, ongoing project and goals etc, are some of the few examples of the content that should standout and must be visible clearly to the visitors. There is a reasons why not all the stones in our ways aren’t consider as a milestones. A timeline is one of the best way to create a unique and appealing design for such milestones of your company. So next time when you want some content to be stands out from the rest, try the Timeline Builder Pro to create such a unique content. The best part of using this plugin is, its developed and supported by the experts and codecanyon’s elite author. The plugin is developed with the best coding standard implemented by the WordPress itself. So, if you are using a plugin like Timeline Builder Pro, you are always in good hands.