↓ Skip to Main Content
Cyberchimps Logo

Main Navigation

  • Templates
  • Features
  • Plugins
    • Responsive Plus
    • Starter Templates
    • Addons for Elementor
    • Responsive Blocks
  • Go Pro
  • Blog
  • Pricing
  • Login

Installation & Updates

1
  • How to Install & Activate the Responsive Addons for Elementor

Widgets

85
  • Image Gallery
  • Advanced Tabs
  • Archive Posts
  • Archive Title
  • Audio Player
  • Author Box
  • Banner
  • Breadcrumbs
  • Business Hour
  • Button
  • Contact Form 7 Styler
  • Call To Action
  • Custom Add To Cart
  • Content Switcher
  • Countdown
  • Facebook Feed
  •  Data Table
  • Divider
  • Dual Color Header
  • FAQ
  • FlipBox
  • Featured Image
  • Feature List
  • Fancy Text
  • Icon Box
  • Gravity Forms Styler
  • Google Map
  • Image Hotspot
  • LearnDash Course List
  • Lottie
  • Logo Carousel
  • Mailchimp Styler
  • Login & Register
  • Media Carousel
  • Menu Cart
  • Modal Popup
  • MultiButton
  • Nav Menu
  • OffCanvas
  • Portfolio
  • Post Comments
  • Post Content
  • Post Excerpt
  • Post Info
  • Post Navigation
  • Post Title
  • Posts
  • Post Carousel
  • Price Box
  • Price List
  •  Pricing Table
  • Product Carousel
  • Product Category Grid
  • Products
  • Progress Bar
  • Reviews
  • Search Form
  • Site Logo
  • Slider
  • Sticky Section
  • Sticky Video
  • Table of Contents
  • Team Member
  • Testimonial Slider
  • Theme Builder
  • Timeline
  • Twitter Feed
  • Video
  • WooCommerce Breadcrumbs
  • WP Forms Styler
  • One Page Navigation
  • Content Ticker
  • Woo Checkout
  • Back to Top
  • Particle Backgrounds for Elementor
  • Product Price
  • Product Image
  • Product Stock
  • Product Upsells
  • Product Meta
  • Product Title
  • Product Rating
  • Product Content
  • Product Short Description
  • Product Additional Information
View Categories
  • Home
  • Docs
  • Responsive Addons For Elementor
  • Widgets
  • Timeline

Timeline

Responsive Addons for Elementor (RAE) Timeline is a very useful widget that allows the user to show the timeline for any particular things such as order tracking, course roadmap, etc.

Timeline example

Content #

Timeline #

Customizing timeline
  • Gallery – Allows you to add images to the gallery to showcase them on the item’s content body.
  • Icon Type – Select whether to display an icon or image on the timeline tree for that item.
  • Image/Icon – You can add an icon or image for that item to display on the timeline tree.
  • Time – select the input method(calendar or text) for the time. The field below could be a calendar to set the date and time, or it could be a text field to manually enter the date and time.
  • Title – Add the title for the item.
Customizing timeline content

Icon Type – Allows the user to select whether to display an icon or image on the timeline tree for that item.

  • Image Size – Select the image size for images in the gallery.
  • Image Position – Set the gallery images’ position within the item’s content body. The images’ position could be set before the title or after the main content.
  • Content – You can add the item content through a WYSIWYG editor.
  • Button Text – Allows you to add the text for the item’ button. If the field is left empty then the button will not be displayed.
  • Button Link – Easily add the link for the button.

Style Tab #

customizing-timeline-style
  • Icon Box Background – Allows the user to set the background color for that particular item’s icon.
  • Icon Box Border Color – Allows the user to set the border color for that particular item’s icon. Border Color will be applied after setting the border from Style > Icon Box > Border Type and Border Width.
  • Icon Box Tree Color – Allows the user to set the color for the timeline tree of that particular item.
  • Alignment – Allows the user to set the alignment of the overall content within the item box.

Settings #

customizing-timeline-settings
  • Show Date? – Allows the user to show/hide the date of the timeline items.
  • Show Time? – Allows the user to show/hide the time of the timeline items.
  • Show Content Arrow? – Allows the user to show/hide the arrow of the item boxes.
  • Title Tag – Allows the user to choose a particular tag for the title of the timeline items.
  • Icon Box Alignment – Allows the user to set the vertical alignment for the icon box of the timeline items.
  • Tree Alignment – Allows the user to set the horizontal alignment for the timeline tree.
  • Show Scroll Tree? – Allows the user to show/hide the scroll tree animation effect.
  • Background Type – Allows the user to set the background type of the scroll tree, available types are classic and gradient.

Style #

Content Box #

customizing-timeline-style
  • Typography – Allows the user to set the typography for the Content Box.
  • Color – Allows the user to set the color for Content Box text.
  • Arrow Color – Allows the user to set the color for the Content Box arrow.
  • Background Type – Allows the user to set the background styles for the Content Box using background type controls.
  • Border Type – Allows the user to set the border styles for the Content Box.
  • Box Shadow – Allows the user to set the box shadow for the Content Box.
  • Border Radius – Allows the user to set the border radius for the Content Box.
  • Padding – Allows the user to set the padding for the Content Box.
  • Margin Bottom – Allows the user to set the margin bottom for the Content Box.

Icon Box #

Styling-Icon-box
timeline example
  • Width – Allows the user to set the width of the icon box for all items.
  • Height – Allows the user to set the height of the icon box for all items.
  • Box Space – Allows the user to set the spacing between the timeline tree and the content box.
  • Tree Space – Allows the user to set the spacing between the timeline tree and the widget’s edge. This setting will be available if Tree Alignment is set to either Left or Right.
  • Background – Allows the user to set the background color of the icon for all the items.
  • Border Radius – Allows the user to set the border radius of the icon for all items.
  • Border Type – Allows the user to set the border styles for the Icon Box for all items.
  • Icon Color – Allows the user to set the icon color for all the items.
  • Tree Width – Allows the user to set the timeline tree width.
  • Tree Color – Allows the user to set the timeline tree color.

Title #

styling-title
timeline example

This section consists of three controls Typography, Color, and Margin for the title of all items.

Time & Date Typography #

These controls for date and time will be available based on the Show Date? and Show Time? Controls.

styling-button
timeline example

This section consists of three controls Typography, Color, and Margin for the date and time of all items.

Button #

editing button
timeline example
  • Typography – Allows the user to set the typography for the button text.

The following two controls will be displayed for both the Normal state and Hover state:

  • Color – Allows the user to set the color of the button text.
  • Background Type – Allows the user to set the background styles for the button.
  • Padding – Allows the user to set the padding for the button.
  • Margin – Allows the user to set the margin for the button.
Updated on April 14, 2025

What are your Feelings

  • Happy
  • Normal
  • Sad
Share This Article :
  • Facebook
  • X
  • LinkedIn
  • Pinterest
Theme BuilderTwitter Feed

Powered by BetterDocs

Table of Contents
  • Content
    • Timeline
      • Style Tab
    • Settings
  • Style
    • Content Box
    • Icon Box
    • Title
    • Time & Date Typography
    • Button

Our Products

Responsive Paid Plan

Responsive Addons for Elementor

Starter Templates

Responsive Blocks

WP Legal Pages

WP Adcenter

GDPR Cookie Consent

Powered by Responsive WordPress theme

RESOURCES

Responsive Platform

Learn Elementor

Download Free Theme

Brand Assets

Testimonials

Compare Astra/Kadence

TrustPilot

CCPA

Video Tutorials

FEATURES

WooCommerce

Header Footer Builder

Company

About

Pricing

Blog

Affiliate Program

Contact Us

Terms of Service

GDPR Privacy Policy

GDPR Cookie Policy

Support

Login

What’s New

Documentation

Request Support

Video Tutorials

Refund Policy

Service

Discount Coupon

Bug Bounty Program

Copyright © 2010-2025 CyberChimps  

Top
  • Constructive Blocks
    • Advanced Heading Block
    • Section Block
    • Advanced Columns Block
    • Pricing List Block
    • Pricing Table Block
    • Flip Box Block
    • Info Block
    • Image Slider Block
    • Post and Page Grid Block
    • Post Carousel Block
    • Icon List Block
    • Table of Content
    • Team Block
    • Shape Divider Block
    • Masonry Block
    • Portfolio Block
    • Accordion Block
    • Divider Block
    • Video Popup Block
    • Card Block
    • Spacer Block
    • Google Map Block
    • Block Quote
    • Expand
    • Image Hotspot
    • Instagram Feed Block
    • Image Boxes Block
    • Testimonial Block
    • Advanced Text Block
    • Testimonial Slider Block
    • Feature Grid Block
    • Inline Notice Block
    • WP Search Block
    • Social Share Block
    • Tabs Block
    • Progress Bar Block
    • Call/Mail Button
    • Anchor Block
    • Gutenberg Image Block – Responsive Block
    • Contact Form 7 Styler
  • Timelines
    • Count Up
    • Gutenberg Countdown Block
    • Content Timeline
    • Post Timeline Block
  • CRO
    • Multi Buttons Blocks
    • Call To Action Block