Skip to content

WP Vibes | Manage Account

Elementor Addons
Elementor Addons
  • Home
  • Products
    • AnyWhere Elementor Pro
    • Elementor Addon Elements
    • Anywhere Elementor
    • Form Vibes
  • Blog
  • Contact Us
Elementor Addons
  • Home
  • Products
    • AnyWhere Elementor Pro
    • Elementor Addon Elements
    • Anywhere Elementor
    • Form Vibes
  • Blog
  • Contact Us

Display Content In Timeline Using Elementor

April 24, 2020
/
Akanksha Soni

Table Of Contents
  • Introduction
  • Step 1: Install & Activate Plugin
  • Step 2: Add EAE - Timeline widget
  • Step 3: Content tab Customization
  • Step 4: Style Tab Customization
  • Live Demo

Introduction

Timelines are an effective way to showcase events and time-based content. They are useful in depicting historical events, displaying blog posts, tracking project development events, etc in a chronological manner. EAE - Timeline widget allows you to create beautiful and interactive Timelines for your WordPress websites. 

Therefore by using the Timeline widget of Elementor Addon Elements, you can create timelines for Posts, Custom Post type, or Custom text content.

Step 1: Install & Activate Plugin

In order to use EAE - Timeline Widget, you have to first install and activate Elementor Addon Elements Plugin. 

Step 2: Add EAE - Timeline widget

To begin with first create a page or a template where you want to add the Timeline widget and edit the page with Elementor. Then just drag and drop the EAE - Timeline widget in Elementor. You will see a timeline appear with default settings.

Step 3: Content tab Customization

Skins: In this section, you can select the layout of the Timeline, from the different pre-build layouts. After that, you have to choose the timeline Source like Custom or Post. Select Custom to add custom content in the timeline cards. If you want to display the blog posts in your timeline, then choose Post in the source option. When creating a post timeline, you will get options to filter your post based on categories and tags.

EAE- Timeline widget

Timeline: In this section, you will see a stack of item boxes. By clicking on these boxes, you can add date, title, image, and content to each card. Here, you can also customize the styling of each card individually by setting different style options for image, card, and icon. You can easily add text content and media files to your timeline cards.

Further, you can also add more items to the timeline, by clicking on the Add Item button.

Global Icon: Here you can also set a global icon to all your timeline cards. Insert an icon from the icon library or an image or a text.

EAE- Timeline

Step 4: Style Tab Customization

The Style tab gives you various setting options to customize the timeline layouts, cards, date, timeline icon, and connectors. Here you can style each timeline element individually.

Under the Layout setting section, you can change the alignment of the timeline like the left, center, or right. You can also adjust the vertical and horizontal positioning between the cards. Set the timeline responsiveness for the mobile and tablet.

Next, there is a Card setting option that allows you to customize the card settings. Here you can also adjust the image size and spacing. More setting options are available to set the background color, typography, and alignment.

Then in the Date setting section, you can customize the date, you can change the font color, adjust the border-radius, padding, and margins.

Similarly, there are more styling options available to style different sections like  Connector, and Icon. 

EAE- Timeline

Live Demo

Check out the Demo setup of the EAE - Timeline widget.

PrevPrevious
NextNext

Leave a Reply Cancel reply

  • About Us
  • Terms of Service
  • Contact Us
© 2021 WebTechStreet
  • Home
  • Products
    • AnyWhere Elementor Pro
    • Elementor Addon Elements
    • Anywhere Elementor
    • Form Vibes
  • Blog
  • Contact Us
  • Timeline
  • Info Circle
  • Comparison Table
  • Thumbnail Slider for Elementor
  • Content Switcher
  • Filterable Gallery
  • Flip Box
  • After Before Image Compare
  • Particle Background
  • Animated Gradient Background
  • Background Image Slider
  • Dual Button
  • Modal Popup
  • Animated Text
  • Google Map
  • Post List
  • Price Table
  • Shape Separator
  • Split Text
  • Text and Icon Separator
  • Twitter feed
  • Progress Bar
Menu
  • Timeline
  • Info Circle
  • Comparison Table
  • Thumbnail Slider for Elementor
  • Content Switcher
  • Filterable Gallery
  • Flip Box
  • After Before Image Compare
  • Particle Background
  • Animated Gradient Background
  • Background Image Slider
  • Dual Button
  • Modal Popup
  • Animated Text
  • Google Map
  • Post List
  • Price Table
  • Shape Separator
  • Split Text
  • Text and Icon Separator
  • Twitter feed
  • Progress Bar