Display WordPress Posts Chronologically Using the Timeline Widget for Elementor

Wanted to display your WordPress posts in chronological order using the Elementor Timeline widget?

If yes, then you’ve landed on the right page.

Timeline widgets allow you to showcase your site content in timelines to the proper date and time.

Let’s say you’re a freelancer and want to display your best posts chronologically on your website, or if you’re going to list your most popular posts for your audience, you can use the Timeline widget.

In this article, we’ll provide detailed information about how to display WordPress posts in a timeline format using Elementor and PowerPack Elementor Addons.

Why Use Timelines to Display WordPress Posts?

Timelines contain information within the separate clickable bars following a time sequence. It is used to list historical events, achievements, or some important tasks in chronological order.

It would be best if you considered adding timelines to your website because it can benefit you in a variety of ways:

• You can display your WordPress posts with the date and time, and you can use timelines to showcase your old & new posts, achievements, branding history, etc.
• It’s an effective way to tell your story to your visitors in a systematic step-by-step manner resembling the events by listing the time and date in it.
• Using timelines for your website posts, you can involve your visitors in your past blogs, increasing engagement on your older posts that have already lost interaction.
• It can help increase user experience on your website content.
• With the help of these timelines, you can easily show off your business history.
• Showcasing timelines can help build trust with your audience.

So, that’s how showing your WordPress posts in chronological order can benefit your website.

Best Timeline Widget for Elementor – PowerPack Elementor Addons

Timelines allow you to display WordPress posts in chronological order using Elementor. However, Elementor free or pro version both don’t include any widget to display timelines.

So you must go for a third-party add-on to make all these happen.

Recommending you the PowerPack Addons for Elementor that’s one of the best Addons for Elementor page builder.

More than 80 impressive widgets and 150+ pre-designed templates provided by PowerPack will give your website a fresh, engaging experience every time you create something new using them.

PowerPack Timeline Widget for Elementor

PowerPack Timeline widget is the best solution for creating timeline posts for your WordPress website using Elementor page builder.

The Timeline widget by PowerPack is a feature-packed Elementor widget that allows you to flaunt your important webpage contents, such as your company history, step-by-step guides, blogs, etc., along with the date and time stamps.

Features of PowerPack Timeline Widget

• Supports both custom and dynamic content types.
• Allows multiple customizations and styling options like card arrow, card animation options, etc.
• Provide options to style the content typography in all possible aspects.
• Choose between timeline bar directions.
• Gives you the flexibility to create timelines in both vertical and horizontal formats.

Let’s see PowerPack Timeline widgets functionalities in detail.

Display Your WordPress Posts in Timeline Format Using Elementor

To display the WordPress post timelines on your website, first, you need to install and activate the Elementor page builder and PowerPack Elementor Addons.

Now, open the page using the Elementor editor, type Timeline in the search bar, and drag & drop the widget on the page.

Don’t forget to check for the PowerPack PP sign on the top-right corner of the widget.

Once you drag and drop the widget on the page, navigate to the Content Tab.

Customize and Configure The Content Tab of the Timeline Widget

The Content Tab of the timeline widget includes four sections:

1. Settings
2. Query (This section will display only if you choose the timeline source as “Posts”)
3. Posts (This section will show only if you select the timeline source as “Posts”)
4. Timeline

Let’s see each of these sections in detail.

Settings

Let’s look at the available features in this section:

• Layout: Choose your timeline layout, either vertical or horizontal.
• Source: Since here we’re talking about how to display WordPress posts chronologically, you need to choose the source type as Posts. Selecting the posts option will allow the Timeline widget to fetch your existing website contents (whether any existing posts, templates, saved sections, etc.) and list them in the timeline format.
• Title HTML Tag: With the help of this feature, you can set an HTML tag for the content title for each post.
• Post Count: Using this option, you can set the number of posts you want to display in the timeline.
• Date: Enable this feature to display the posts’ published dates.
• Date Type: Choose a date type using this option.
• Date Format: With this option, you can choose the date format.
• Card Arrow: Enable this option to display a card-like pattern for each content post.
• Animate Cards: Apply this feature to enable the card animation for the timeline.

Query

Let’s look at the available features in this section:

• Query Type: You must choose a query type and a custom query as the query type using this option.
• Post Type: Several options for choosing post types are available here, such as pages, posts, saved templates, etc. Choose a post type accordingly among these options.

• Include/Exclude category options for various filter types such as categories, tags, authors, posts, etc.

Posts

Let’s look at the available features in this section:

• Post Title: Toggle on this option if you want to show a post title on your timeline posts.
• Post Image: Enable the post image option if you want to display an image along with the content in the timeline.
• Image Size: This option allows you to select the image size for the timeline posts.
• Post Content: Toggle on this option if you want to display post content in the timeline.
• Content Type: Using this feature, we can choose the posts’ excerpts or limited content options.
• Link Type: Choose a link type where you want to drop the link, whether the title, button, or card.
• Post Meta: Enable this option if you want to display other post categories such as post author, post terms, etc.
• Meta Items Divider: If you’ve enabled the post meta option, you can allow a meta items divider to display a divider between the post items displayed on the timeline posts.
• Post Author: Enable this option if you want to display the post author on the timeline post.
• Post Terms: Enable this option if you want to display the post terms on the timeline post.
• Select Taxonomy: You can add categories and tags of your choice using this option.

However, you can also customize the timeline post using a custom source. By choosing this option, you can manually customize the timeline posts, add its content, media, and many more.

Timeline

So this was all about customizing the Content Tab of the PowerPack Timeline widget. Now let’s move to the next part, i.e., the Style Tab.

Customize and Configure The Style Tab of the Timeline Widget

The content tab of the advanced tabs widget includes five sections:

1. Layout
2. Cards
3. Marker
4. Dates
5. Connector

Let’s see each of these sections in detail.

Layout

Let’s look at the available features in this section:

• Direction: Set the timeline bar direction using this option.
• Arrow Alignment: Select an arrow alignment with this option.
• Items Spacing: Adjusting this option will allow spacing between the posts included on the timeline.

Cards

Let’s look at the available features in this section:

• Cards Padding: This option will let cards create spacing between them.
• Content Padding: This option will create spacing between the content and the cards.
• Text Align: Use this option to set the text alignment.
• Background Color: Text background color can be changed using this option.
• Border Type: This option can display a border on the card. Choose borders from available types such as solid, dotted, doubled, dashed, and groove.
• Border Radius: Apply border radius to display fine edges to the borders.
• Box Shadow: This feature allows you to display a shadow border. Customize color and weight accordingly.

Marker

Let’s look at the available features in this section:

• Type: Choose Marker type as icon, image, number, or text.
• Choose Icon: If you’ve selected an icon as marker type, then choose an icon and upload one from the icon library.
• Choose Image: If you’ve selected an image as marker type, then choose an image and upload one from the media library.
• Marker Size: Set marker size using this option.
• Marker Box Size: Use this option to set marker size.
• Marker Color: Select a marker color using this option.
• Background Color: Customize marker background color with this option.
• Border Type: Choose a border for the marker from options such as solid, dotted, doubled, dashed, and groove.
• Border Radius: Apply radius to provide smooth edges to the radius that you’ve applied.
• Box Shadow: Configure the box shadow option to enhance marker appearance by displaying a shadow.

Dates

Let’s look at the available features in this section:

• Typography: Customize the entire date text typography using this option.
• Background Color: Customize the date text background color with this option.
• Color: Choose a date text color using this option.
• Border Type: Choose a border for the date text from given options such as solid, dotted, doubled, dashed, and groove.
• Border Radius: Apply radius to provide smooth and clean edges to the radius that you’ve applied.
• Padding: This option will create enough spacing between the date text and its border.
• Box Shadow: Configure the box shadow option to enhance the date text appearance by displaying a shadow.

Connector

Let’s look at the available features in this section:

• Spacing: This option will allow spacing between the connector and the content cards.
• Thickness: Using this option, you can adjust the connector’s thickness.
• Background Type: Customize the connector background type with this option.

So this was all about creating a stunning timeline for your WordPress website. Once you apply all these changes to the Content & Style tab of the PowerPack Timeline widget, you’ll get something like this.

Get the Best Timeline Widget for Elementor

We hope this tutorial blog helped you create incredible “timelines” for your website using the PowerPack Timeline widget.

Click here to get the PowerPack timeline widget, attract new customers to your website, and increase sales.

If you’ve enjoyed reading this article, you’d also love to experience our other PowerPack elements.

Please feel free to drop your comments here; we’d love to receive your replies.

Also, join us on Twitter, Facebook, and YouTube.