When we build some Tob sites, we often add a company’s development history in About Us. This can tell the visitor which year the company was founded and what it has experienced throughout its development process.
Introducing the WP Timeline plugin:
Some landmark events can actually increase users’ trust in the enterprise. This is what we call a timeline. Of course, in addition to this development process, such a timeline can also be used for some of our learning processes. You can use this timeline to present your service process, so the plugin we will use here is the wp timeline.
This plugin has a very high sales volume and a very high praise rate on Themeforest. Moreover, it is not particularly expensive, so if you need it, you can buy it yourself. However, we will also provide you with a GPL version. We have prepared this plugin for the desktop. Now, we will demonstrate its installation and use.
WP Timeline plugin installation:
First, we enter our backend, find the installation plugin, upload the wp-timeline plug-in we prepared, and click Install.
After the plug-in is installed successfully, we enable it. It is very simple if we want to know how to use this plug-in. Let’s install it. After success, there will be an additional function button like the timeline in our function button.
Let’s return to the demonstration case and examine the timeline module. In fact, you only need to master two parts of this timeline.
Introducing WP Timeline features:
The first is the display method of the timeline. For example, the wp-timeline we are using now has three display effects.
The first one uses a vertical display method. For example, we can click on the above Effect and change the display mode of the entire timeline. Now, another grid containing pictures is displayed, so this one is presented vertically, and the one on the right is presented horizontally.
You can also open one of them and take a look. Okay, this is its horizontal layout, and there is also a scrolling effect of the previous page and the next page; this is the vertical and horizontal layouts.
Then, there is another richer display effect, which is displayed in this path format. These are actually its three display formats.
So, when you create a timeline, you first need to learn how to modify it in this style.
The second one is that it needs to call data in this kind of timeline. Where does this data come from? This data comes from several places. The first is the timeline plug-in, which has a content update system. As we can see now, you can add a new timeline, and each one will look like a blog post. Add it in the same way. Of course, you can also create it into a category. This is the content he added himself.
Two ways to source WP Timeline content:
Another way is to call the default content of WordPress. For example, if we click to open an add-new, it can choose to add the articles to our entire page in addition to the timeline, which we create by default. Either our pages or some of our templates, including our products, are directly called into the content on our timeline, so these are the two modules for mastering the use of the timeline.
Let’s give you a detailed demonstration below.
How WP Timeline creates timeline content:
First, we need to understand how it creates the timeline’s content. We have just learned that the timeline can call what it added itself, and then it can also call products or our articles.
But many times, for example, on the About page, what we call is actually the history of our company, and this journey is actually not an article. It may be just a short description, a picture, or a video, so at this time, we need to update this content.
If you have multiple timelines, you can create multiple categories to call them separately. You don’t need to create a category if you only have one timeline. Here, we will show you how to create a category directory. For example, let’s name it about-us, create a category, and click Create.
Then, we will add a new timeline, which we will use directly here. Learn to build a website, look for content, and add it. For example, after opening it, we can copy the content here and then first add a title to it. Of course, you can write the content inside as you like. I use it in Chinese, and it’s the same as what you use in English.
WP Timeline creates a timeline:
Next, we go to find the plug-in settings. The first one is its release date. Because it is a timeline, if you have time, just write the time. If not, you don’t need to worry about it.
Here, we write a time, and then you can create the following time yourself, including its color, and add a link to it. We add a pound sign here, and you can write an alias below, which is its sub-name. You can also add content here. You can add any content at will because there is a reminder below it. This is just content for its decoding.
Next, you can upload an icon to it. There are also a lot of icons. We can add one at will. You can upload an image if these pictures are not enough for you. You can also add some additional information below. Let us write one here, and then we will look at it. Contents, plus some summaries here.
If everything is added, you can put it in the category and click Publish. The content of such a timeline has been created. Let’s add another one because if there is only one, the effect of the timeline cannot be displayed.
After the creation was successful, we created two timelines manually.
WP Timeline Shortcodes builder：
Now, we need to display this timeline on one of our pages, for example, the About page. Let’s edit this page. Then we need to call this timeline, so we now need to use the following tools to create a decode. Click the shortcodes builder, and then click Add. Here, we can give it a name, and then here is its horizontal style.
The first is vertical, the second is horizontal, and the third is the rich effect, which is path type. We will default it casually here, and then we will use timelines. Created, then you can also choose a category here. You don’t need to worry about this category if you only have one timeline. Then, we will default to other content first, and then we will create it.
Okay, after creating it, there will be a decode here. Let’s copy this decode and then open the About page. We can add it to WordPress’s default editor. We can use a shortcode here, or we can paste it directly. Just paste it directly. It’s better to update it after pasting it.
Now, browse our page again; it will display a timeline. Still, the effect of this timeline display is not particularly good, but because before the About page, it was using elemenor created, we can create a new page and then call this code again to see the effect timeline, and then we go directly to create it, add our decoding here, and we paste it in the same way, so that after pasting Update it, now let’s refresh our page with this effect, it will not have the masking effect on it, this is its timeline.
The two timelines we just created, let’s take a look at where the content we created is displayed.
Let’s go back to the timeline and edit it. We can see what content we just created. This is our title. Our title is displayed in this position, and our content is displayed below. In addition, we also added a small icon, which is displayed at this position.
Then the other thing is the time we added; this is its time, and its alias is the style it displays. Of course, you can also change this style at will. For example, we go back to Shortcode and click Edit. For example, we now choose to display it vertically, and you can modify its style for this vertical layout. For example, if we set it as a module, then click Save and refresh, it will display the module style. Of course, you can also make it appear horizontally.
Then, you can take a look at the other content here. For example, the timeline is displayed on the left, right, or in the middle. The following content is the content call. For example, if we are not calling his timeline, if we are calling him Articles, we check the articles. If you don’t add an ID or a category or limit the number, it will set all the articles as a timeline. Let’s save it and then refresh it.
All our articles will be displayed here. Of course, we only have two articles. The timeline plug-in can also use our products as timelines and so on. This is one of them. You can also add more timelines. This is through time. Axis decoding is used for display. These are also the two most important functions of the timeline plug-in. I have already explained them to you.
WP Timeline plugin settings:
Let’s take a brief look at its settings. This setting is very simple. The main color of its timeline is now gray. We see this gray now, so you can change this color to another color. Other things like font size, content font color, title font, title size, title color, etc., are all simple styles.
Then, let’s take a look at its advanced settings.
What kind of content can be called from which pages in the advanced settings? For example, under normal circumstances, all content can be called. After setting this content here, when you create a shortcode, it will be checked by default. The one you create is a default setting, and the other is a custom format for its date format. Then, the following are other display formats for their date, which modify some text. For example, we now see the timeline read more. To continue reading, we can change it to something else. For example, to read more, save it, and refresh it. , then it will read more, and its main color will also become the red we just modified. You can modify the other fonts below.
Then, there is another one for the content. For example, these calls on our timeline all belong to time nodes. Then, you can click on these titles to enter this article. So, how do the settings here handle these modules?
For example, if we choose yes for the first one, the user cannot click in. He will only be able to see the title and content. In addition, after clicking to enter, it will have a share. Of course, this is mainly for the timelines we created ourselves. Then, the other one is on its previous page. The next page is the same as our article, including whether it should display comments. The following is the custom code. You can modify its style for this timeline, and its GS file, the other is to add some performance optimization, then the performance optimization is mainly for the timeline plug-in, so normally we can select global by default.
Just leave everything else as default. The last one is the activation code for the plug-in. We don’t need to worry about it; we can use it normally. This is how to use the WP timeline plug-in.
