Explaining a complex process (e.g., “How It Works”) is often done with a vertical list. A “Wizard” style slider—where you move from Step 1 to Step 2—can be more engaging and digestible.

To solve this, use Div Render Container Slider for Elementor.

Step 1: The Process Steps

Create your slides (child containers). Each one should contain:
– A large “Step Number” (e.g., 01).
– An illustration or icon.
– Explanatory text.

Step 2: Slider Settings

Enable Slider Mode.

  • Slides Per View: 1. We want the user to focus on one step at a time.
  • Loop: No. A process has a start and an end; it shouldn’t loop back to step 1 automatically.
  • Pagination: Set to Fraction. This displays “1 / 4”, “2 / 4”, etc., clearly indicating progress through the steps.

Pro Tips for Wizards

  • Navigation Labels: If possible via CSS, style the “Next” arrow to look like a button or place a button inside the slide that triggers the “Next” action (requires advanced JS).
  • Linear Flow: Ensure users can’t skip steps if the order matters by disabling the scrollbar or dots, forcing them to use the arrows.