Post timeline

The Posts Timeline Widget allows you to display posts or any other custom post type in a timeline format. It’s perfect for creating visually appealing timelines for your blog, news articles, or any other content type.

Activate the widget

This widget is part of the aThemes Addons for Elementor plugin. To activate it, go to your admin area, visit the aThemes Addons dashboard, search for the widget, and click on the switch to activate it. It will now be available in your Elementor interface.

Widget options

Layout section

  • Marker position: Choose the position of the marker on the timeline (left, center, right).
  • Marker style: Select the style of the marker (circle, date, icon, featured image).
  • Marker icon: Choose an icon for the marker. This option is available if the “Icon” marker style is selected.
  • Date format: Set the format for the date marker. This option is available if the “Date” marker style is selected.

Query section

  • Query Type: Choose between “Main Query” and “Custom Query” to define how posts are selected.
  • Post Type: Select the post type to display in the timeline (available when “Custom Query” is selected).
  • Taxonomy Filters: Include or exclude posts based on taxonomy terms (e.g., categories, tags).
  • Posts Filter: Include or exclude specific posts.
  • Number of posts: Set the number of posts to display.
  • Order by: Choose the order criteria (date, title, random).
  • Order: Select the order direction (ascending or descending).
  • Ignore Sticky Posts: Toggle to ignore sticky posts in the query.
  • Offset: Set the number of posts to skip from the beginning.

Elements section

  • Show title: Toggle to display or hide the post title.
  • Title tag: Choose the HTML tag for the title (e.g., h2, h3).
  • Show featured image: Toggle to display or hide the featured image.
  • Show date: Toggle to display or hide the post date.
  • Show author: Toggle to display or hide the post author.
  • Show categories: Toggle to display or hide the post categories.
  • Category display: Choose how to display categories (link or label).
  • Show excerpt: Toggle to display or hide the post excerpt.
  • Number of words: Set the number of words to display in the excerpt.
  • Read more text: Enter the text for the read more link.
  • Enable Pagination: Toggle to enable pagination for the posts timeline.
  • Page Limit: Set the maximum number of pages for pagination.
  • Next/Prev Strings: Toggle to show or hide the next/previous page strings.
  • Previous Page String: Set the text for the previous page link.
  • Next Page String: Set the text for the next page link.

Style tab

Customize the appearance of your posts timeline under this tab. You can adjust various settings, including card padding, border radius, background color, box shadow, and more. You can also style the marker, post titles, post meta, and pagination to match your website’s design.

Card Style

  • Padding: Adjust the padding of the card.
  • Border radius: Set the border radius of the card.
  • Background color: Choose the background color of the card.
  • Box shadow: Add a shadow effect to the card.

Marker Style

  • Background color: Set the background color of the marker.
  • Text color: Choose the text color for the marker.
  • Typography: Adjust the typography settings for the marker text.
  • Border radius: Set the border radius of the marker.
  • Line color: Choose the color of the line connecting the markers.
  • Line width: Set the width of the line connecting the markers.

These style options ensure that your posts timeline looks professional and integrates seamlessly with your site’s overall design.

Usage tips

  • Use high-quality featured images for better visual appeal.
  • Set a suitable number of posts to display to maintain a clean layout.
  • Utilize the pagination feature for long timelines to improve user experience.

Conclusion

The Posts Timeline Widget is a versatile tool for displaying posts in a timeline format on your website. With extensive customization options, you can tailor the appearance and functionality to match your needs and provide an engaging user experience.