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

Content Timeline EA Element

Content Timelines are a great way to show the content of your website. EA Content Timeline widget allows you to add interactive timelines on your website pages without having to wrangle with the code. You can create a horizontal and vertical timeline layout with various styling options and animations. Here in this tutorial, you’re going to learn how to use the Content 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 Content Timeline Element

»Content

 

Timeline Content

⇒Content Source: This section allows you to select the timeline source. Select either ‘Dynamic’ or ‘Custom’ source. You will be able to configure the timeline based on your chosen type.

 

Dynamic Content Settings

If you select the content source as Dynamic, then customize the following items:

⇒Source: You can select any of these 2 as your source: Post or Page.

→Other Options: After selecting the source, you have the flexibility to show only certain posts based on the tags, authors & categories. If you want, you can even exclude certain posts or pages as well. Besides, you can set the number of contents that you want to display on your Content Timeline as well. You can also sort out the contents as well by modifying ‘Order’ & ‘Order By’ options.

 

Custom Content Settings

If you select the Content Source as Custom, then customize the following items:

⇒Adding the Custom Contents: With Custom Content, you can easily insert your own contents and insert a link to them if you wish to. When you move the mouse over the content, you will be able to view the link. From here fill up the Title, content, Post Date fields. Choose an image from the drop-down list. And last assign any link to the button. This way you can link actual blogs to the timeline custom blocks. Simply click on the ‘+ Add Item’ button to insert more custom contents.

 

Layout Settings

⇒Layout: Here, you can change the layout position of the Timeline: left, right or center.

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

⇒Show Excerpt: Show/hide the excerpt here.

⇒Excerpt Words: Set the excerpt word number.

⇒Expansion Indicator: 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

 

Timeline Style

⇒Line Size: Customize the line size of the timeline here.

⇒Position From Left: Customize the position from the left. Use half of the Line size for perfect centering.

⇒Inactive Line Color: Add custom color to the inactive line.

⇒Active Line Color: Add custom color to the active line.

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

 

Card Style

⇒Background Color: Add a custom background color to the card and customize the opacity.

⇒Padding: Set the padding value for the top, right, bottom and left around the card 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 card for different dimensions. You can link the values together or customize them individually.

⇒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 card for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the card border.

⇒Border Radius: Increasing the border-radius will add circular corners to the container around the card. 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.

 

Bullet Style

⇒Bullet Size: Customize the bullet size of the timelines for different dimensions.

⇒Icon Font Size: Customize the icon font size of the timelines for different dimensions.

⇒Position From Top: Customize the timeline bullet position from the top.

⇒Position From Left: Customize the timeline bullet position from the left. Use half of the Icon Circle Size for perfect centering

⇒Bullet Border Width: Customize the bullet border width.

⇒Bullet Color: Add a custom color to the bullet icons and customize the opacity.

⇒Bullet Border Color: Add a custom color to the bullet border and customize the opacity.

⇒Bullet Font Color: Add a custom color to the bullet font and customize the opacity.

⇒Active State (Highlighted):

→Bullet Color: Add a custom color to the bullet icons and customize the opacity for the active state.

→Bullet Border Color: Add a custom color to the bullet border and customize the opacity for the active state.

→Bullet Font Color: Add a custom color to the bullet font and customize the opacity for the active state.

 

Color & Typography

⇒Title Style:

→Title Color: Add a custom color to the timeline 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.

 

⇒Date Style:

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

→Date Color: Add a custom color to the date text and customize the opacity.

→Typography: Set the typography options for the date texts.

 

Read More Button Style

⇒Padding: Set the padding value for the top, right, bottom and left around the read 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 read more button for different dimensions. You can link the values together or customize them individually.

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

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

⇒Background Color: Add a custom background color to the read 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 read more button for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the read 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.

 


»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 Content Timeline Element.


Was this article helpful to you? Yes No

How can we help?