Timeline

The Timeline Widget allows you to showcase chronological steps, processes, or journeys in a vertical layout with elegant animation and clear content boxes. Follow the steps below to create a stunning timeline section.

🧩 How to Enable the Widget

1. Go to your WordPress dashboard.
2. Navigate to Topper Pack > Widgets.
3. Toggle the switch to enable the Timeline widget.
4. Once enabled, it will be available inside the Elementor editor under the Topper Pack section.

🔧 Step 1: Add the Timeline Widget

• From the Elementor editor, search for “Timeline”.
• Drag and drop the Timeline widget into your section.
• This opens the widget settings with Content, Style, and Advanced tabs.

🎨 Step 2: Choose a Timeline Style

Location: Content > Team Styles > Choose Style

• Select from available styles (e.g., Style 1, Style 2, etc.).
• Each style offers a different design layout (boxed, card, plain).

✅ Tip: Choose a style that best matches your site’s branding and structure.

🧱 Step 3: Add Timeline Items

Location: Content > Timeline Content > Timeline Items

• Click Add Item to create new timeline steps.
• For each item, you can:
  • Animation: Choose how the content enters (Left, Right, Zoom, Fade, Rotate, Flip, etc.).
  • Enable Image: Toggle ON to add an image.
  • Image: Upload or select an image from the media library.
  • Badge Text: Add labels like “Step One”, “Phase 1”, etc.
  • Title: Add a descriptive title for the timeline point.
  • Description: Provide detailed content explaining that step.

🖌️ Step 4: Customize Content Box Style

Location: Style > Content Box

• Width: Set the width of the content boxes.
• Content Box Even Position: Adjust vertical spacing.
• Content Alignment: Align text (left, center, right).
• Border Type & Radius: Style the border of the content box.
• Padding & Margin: Fine-tune spacing inside and around the box.
• Hover Effects: Set different styles for hover states (color, shadow, background).

📏 Step 5: Customize Timeline Line and Dots

Location: Style > Timeline Line and Style > Timeline Dots

• Timeline Line:
  • Set the thickness and color of the vertical timeline line.
• Timeline Dots:
  • Customize size, color, border, and spacing of the timeline markers (dots).

💡 These dots serve as connectors between timeline points. Make sure they contrast well with the background.

🧑‍🎨 Step 6: Adjust Content Style

Location: Style > Content Style Option

• Control typography for badge text, title, and description.
• Set spacing, line height, and font size for consistency and readability.

⚙️ Step 7: Advanced Tab (Optional)

Location: Advanced Tab

• Use Elementor’s built-in advanced settings like:
  • Motion Effects
  • Responsive visibility
  • Custom CSS
  • Z-index, positioning, and more

🔚 Final Result

Once configured, your timeline widget will:

• Display steps in a clean vertical structure
• Use entrance animations for modern interactions
• Provide full control over styling, spacing, and layout
• Work across devices with responsive design options