1. Home
  2. Docs
  3. Post Elements
  4. Post Timeline

Post Timeline EA Element

Post Timeline EA widget lets you build a vertical timeline for the contents of your website. As a result, this massively helps users to easily navigate through all your blog posts. Here in this tutorial, you’re going to learn how to use the Post Timeline element into Elementor Page Builder. So let’s get straight into it:


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Post Timeline Element

 

»Content

Post Timeline

⇒Source: Select the source post type to fetch posts in the timeline. If you choose a manual selection, you will get further options to choose posts manually. It can be post or page.

⇒Author: Select the name of the author whose post you want to display on the post timeline.

⇒Categories: Select the category whose post/page you want to view.

⇒Tags: To display posts associated with a particular tag.

⇒Include: If you want to display only certain posts, then you can define the include here.

⇒Exclude: If you do not want certain posts to appear, you can simply ‘Exclude’ those contents as well.

⇒Posts Per Page: You can restrict posts per page to display a specific number of posts on the timeline. It takes a numeric value which signifies the number of posts to be displayed at a time.

⇒Offset: Use this setting to skip over posts (e.g. “2” to skip over 2 posts)

⇒Order By: Order your post in a certain manner. You can use different options like Date, Title, etc to filter your post.

⇒Order: Sort your post in ascending or descending order based on the criteria selected in Order By option.

 

Layout Settings

⇒Show Load More: Show/hide the load more button from the post. If select Show, enter the label text.

⇒Show Image: Show/hide the image from the post. If select Show, customize the image size to fit in the container.

⇒Show Title: Show/hide the title from here.

⇒Show Excerpt: Show/hide the excerpt here. If the ‘Excerpt’ option is enabled, you will able to set the limit of excerpt words and add the expansion indicator.

Unable To Use or Found Bugs?

⇒Need Support: Are you in need of a feature that’s not available in our plugin or got some bugs? Feel free to do a Support request.


»Style

 

Post Grid Style

⇒Overlay Color: Add a custom color to the post overlay and customize the opacity. Leave blank or Clear to use default gradient overlay

⇒Timeline Bullet Color: Add a custom color to the timeline bullets.

⇒Timeline Bullet Border Color: Add a custom color to the timeline bullet border.

⇒Timeline Vertical Line Color: Add a custom color to the timeline vertical line.

⇒Border & Arrow Color: Add your preferred color to the post border and arrow.

: Customize the date background color and opacity.

⇒Date Text Color: Add a custom color to the date text and control the opacity.

 

Typography

⇒Title Style:

→Title Color: Add a custom color to the post title and customize the opacity.

→Title Alignment: Customize the title alignment.

→Typography: Set the typography options for the title.

⇒Excerpt Style:

→Excerpt Color: Add a custom color to the excerpt and customize the opacity.

→Excerpt Alignment: Customize the excerpt alignment.

→Excerpt Typography: Set the typography options for the excerpt.

 

Load More Button Style

⇒Padding: Set the padding value for the top, right, bottom and left around the load more button for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value for the top, right, bottom and left around the load more button for different dimensions. You can link the values together or customize them individually.

⇒Typography: Set the typography options for the load more button.

⇒Text Color: Add a custom color to the load more button text and customize the opacity for both normal and hover view.

⇒Background Color: Add a custom background color to the load more button and customize the opacity for both normal and hover view.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the load more button for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the load more button border.

⇒Border Radius: Increasing the border-radius will add circular corners to the container around the button. You can adjust the border-radius in pixels, % or em.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Button Alignment: Set the load more button alignment either left, center or right.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of Post Timeline Element.


Was this article helpful to you? Yes No

How can we help?