Advanced Timeline Widget

The Advanced Timeline Widget from RTM Elements allows you to present events, milestones, or step-by-step processes in a clear and engaging timeline on your Elementor website. It’s perfect for showcasing company history, project roadmaps, or customer journeys.

With the Advanced Timeline Widget, you can add your timeline items, choose a layout, and customize its style to match your website’s design.

Step 1 — Make Sure RTMKit & RTMElements Activated

The Advanced Timeline Widget is part of the RTMElements Addon, which is available with a Rometheme PRO subscription. Before you begin, make sure you have:

1. Installed and activated RTMKit on your WordPress website. (Go to Plugins → Add New Plugin, search for RTMKit, then click Install Now and Activate).
2. Subscribed to Rometheme PRO and connected your account to RTMKit.
   📘 Getting Started with Rometheme PRO
3. Activated the RTMElements Addon from WordPress Dashboard → RTMKit → Features → Addons → Install & Activate RTM Elements.
   📘 How to Activate Addons

Step 2 — Add the Advanced Timeline Widget

• Open the page with Elementor.
• Find RTM Elements → Advanced Timeline.
• Or search for Advanced Timeline in the Elementor widget panel.
• Drag and drop the widget into your desired section or container.

Step 3 — Setting the Advanced Timeline Widget

• In the Content tab, you will find several sections to set up your timeline.
• Layout: Choose the timeline style: Horizontal, Vertical, or Graphic Line.
• Then set the content position, the marker type (such as numbers with a leading zero like 01, 02), the marker alignment, and where the image appears on each card.

• Items: Add, duplicate, or remove your timeline items, such as each year or milestone. You can also switch the source to Dynamic to build items automatically from your posts or products.

• Scroll & Animation: Controls how the timeline moves as visitors scroll.
• Set when an item becomes active, how the cards appear (for example, rising from below), the animation speed and delay between items, and whether the animation replays when scrolling back.

Step 4 — Custom Style the Advanced Timeline Widget

• Go to the Style tab to customize the timeline’s appearance to match your website’s design.
• Container: Set the background, padding, and corner radius of the timeline, plus the spacing between items, the gap between the markers and the cards, and the width of each item.

• Line: Customize the timeline line, including the accent color for the progress and active marker, the track and progress colors, line style (such as dashed), thickness, and an optional glow effect.

• Marker: Adjust the marker size, number font, border, and corner radius, with separate colors for Upcoming and Reached markers.

• Card: Style each card’s padding, text alignment, background, border, and shadow. You can also show a pointer arrow that points to its marker and adjust the image height and corners, with separate Normal and Current styles.

• Content: Set the colors and fonts of the label (such as the year), title, description, and highlight text, plus the spacing between them. The title also has its own color for the current item.

Step 5 — Publish the Template

• Once your design is complete, click Publish to save your changes and make your Advanced Timeline live on your website.