Introduction to the Cool Timeline plugin:
Of course, we want to share with you a PRO version, which is the same as the one we shared with you before, WP Timeline It’s the same; it’s also to realize a timeline, but this tool has an earlier time, and the effect it produces will be cooler. We can take a look at its demo. This is one of them.
When we turn the page down, we see that it will have a very cool effect. The one we used before, WP Timeline, does not have such dynamic effects, so you can use it according to your needs. If you want your site to be cooler, use the plug-in we will discuss below.
Cool Timeline plugin installation:
First, we enter our backend, install the plugin, and upload it to the desktop. We are ready. The current highest version of the PRO version is 4.5.6. Click to open and install the plug-in.
After the installation is successful, we enable the plugin. Then, there will be a very eye-catching Timeline Addons function button in our WordPress function button. Let’s take a look at its functions. The first is its dashboard.
In addition to the PRO version of the plug-in we have installed now, this plug-in also has some other plug-ins, such as for elementor components. However, it doesn’t matter whether we use them or not because we still need to purchase other components separately. In fact, we only use this PRO version to achieve that cool timeline effect.
The second is its activation code. Our plug-in is currently in a cracked state, so it has not been activated for you. Don’t activate it; it just has an extra reminder.
The remainder has no impact on us. Because there is a kind of plugin, for example, it is not sold on some e-commerce platforms, such as Themeforest. It is only sold on its own independent website. If a plug-in like this is basically available, it is difficult to get it. GPL version, so we can only use its cracked version.
The third feature is the added function of the PRO version. In fact, it has a free version. You can also directly install the cool timeline plug-in, but it is a free version. The free version has many functions. However, for example, you cannot set up some node content in the timeline separately, and only the PRO version can use it.
Cool Timeline uses:
The cool timeline is similar to the wp-timeline we used before. It can also generate different types of timelines. The first is its style, and the second is its content. There are also three calls to this content.
First, you can directly use it in the PRO version. You can create a category directory and then add some story content to the category directory.
Cool Timeline creates story content:
For example, let’s add a story now and copy it from the website. For the content here, we add a title and a paragraph, and then here are some settings for its timeline. The first one is that you can set a time. Because of the timeline, it needs a time period.
The second one is customization. It is very simple. You can directly set its sorting method. If you want to add the effect of the timeline and the above content is sorted by time nodes, then you can use order. Sort. We use time nodes by default here. For example, on the first day, we set it to the 20th, and then there are three types of content on the timeline below. The first one is that you can add a picture. This picture is what we are waiting for. You can set a featured image here called the featured image.
The second way is to add a video, but if you want to upload this video to YouTube or a foreign video server, you can upload it. After uploading, it will have a link. You put this link. Just stay in this position.
The third way is to upload multiple images and then form a slideshow carousel. However, these three are side by side. If you use the first method, you cannot use it later, so you can only choose one method. Next, add a small icon to it. The first one is to add a font icon to it. Add anyone you like, but you can also upload an icon of your own and add another one. If the link doesn’t exist, don’t add it. This is the first one.
Cool Timeline story categories:
Then, we put it in the category and call it later.
Well, I have also created several others separately and in chronological order.
Cool Timeline Shortcodes:
After it is created, let’s call it. How to call it is actually very simple. It uses a shortcode, just like this shortcode.
Of course, we don’t need to copy such shortcodes individually. You can also follow its official instructions. If you want this effect, you can copy this effect.
Cool Timeline page is displayed:
Another way is to display it on our page, so here we create a page, then enter a title for it, and then how to call it; it is very simple. Here, you click the plus sign to see that it has three modules. The first module and another module are below the second module. There are three modules in total. So, what are the differences between these three modules?
Cool Timeline style settings:
We see here that it is calling our post, that is, our article. It can directly use the content of our article as our timeline, so we directly click on it to add it in. After adding it, you can Edit it and click on it. On the right side, we are now modifying it in Gutenberg, and on the right side of it, you can modify whether it is sorted vertically or horizontally.
Cool Timeline content source settings:
Then the next one is its many styles, the next one is its skin, whether it is dark or normal setting, do not modify the following one, it calls our post, that is, calls our article.
Then, the next one is our main category directory. Here, you can enter the alias of one of our categories. We find our article and open the category. Here is our slug and our alias. If you want to call it If it is a certain category directory, then you copy the alias of the category directory and add it here.
If there are multiple entries, separate them with English commas. Then, you can fill in many entries at once. If you do not enter them here, it will call out all your articles.
The next one is how many articles are displayed on each page of your article because if you have a lot of articles, it supports page turning. We can see this effect, and it can turn pages.
Then we will look at the sorting method in the advanced, the way the time is displayed, and the style of the small font icon among us, which is to modify some of its styles, so we don’t need to modify it here first, and then Let’s publish it first. After it’s published, we’ll open this page to see the effect.
After opening it, we can see that it has called out all our articles, but we only have a few. We can close the sidebar of the sidebar page and then refresh it. This is a pure timeline effect. Why is it not dynamic? It’s because in the advanced, we click this shortcode again, and then in the advanced, we can set some trends for it, click update, and then refresh it. Now, when we scroll, it will have a dynamic effect. All its dynamic effects are added in this way. This is the first one.
Call our articles as content in our timeline.
Cool Timeline content story display:
Let’s take a look at another one. Let’s delete it first, and then we’ll add another one. The other one is to call our story, which we just updated. Click to join. In the same way, you click on this shortcode. It can also be modified in exactly the same way, except here, we put a style on it and click Update.
Let’s refresh it again. Okay, it now displays another style. What is called here is the content of some stories we added. It is independent of our article.
Cool Timeline customized content:
The third way of adding it is more unique. It directly treats it as a module. After you add this module, you can modify it. For example, for each module, you can add its title, content, pictures, and time. There is a default one; you can add as many as you want.
For example, we can add more, so we can update it similarly after setting it up. After the update is completed, we can refresh it, and it will show the content we added, but the pictures inside will not be displayed. Because the picture we used is not authorized, we can delete it entirely.
Then, we still use the second kind of story because the company’s development history that we often add is basically our story, which we wrote. Okay, then we will refresh it. Just now, I will add these few. During this process, I used several methods. The first one was a thumbnail, and the second one was a YouTube video, so this video can be played.
The third one I use is the following one. I use a slideshow, which can be used in many ways. This is a Cool timeline, one of the ways to use the timeline plug-in.
Cool Timeline plugin settings:
Then, let’s take a look at its settings. They are very simple. The first thing is to modify them. If a read-more is in our timeline, we will add it here. If it is an article, then there will be a read more in it, or if you add a hyperlink, it will have a read more, and then you can modify the text.
The next one is for our picture material. For example, if we click on this picture now, it has a lightbox effect. For the first type of light box here, you can use the one that comes with the plug-in, and for the second type, use your theme. The third type opens the link, and the fourth type closes the link. Then, if it is a carousel image, you can set a carousel time to rotate automatically. Do you need to call the CSS style of this font? Generally, we need to display it.
The second is whether to display Google fonts. If you are making a foreign website, you must turn on Google yourself to meet your needs. If your theme comes with fonts, you can turn it off. Lose.
The next one is how the carousel is displayed. The second one is to set its style according to your own needs. For example, the first module is the first module we see now. It starts from the right. You can switch it to the left, then save and refresh. The first module starts from the left, and then you can modify its background color and font color and add some custom CSS styles.
Then the third one is about the font size and the font used to measure its font thickness. You can modify it. The last one is that it provides some video tutorials. Well, this is how to use the Cool Timeline plug-in.
