Standard multi-column layouts in Elementor are static. If you have four columns on desktop, they typically stack on top of each other on mobile, creating a very long page. This often leads to excessive scrolling and a poor user experience.

To solve this, use Div Render Container Slider for Elementor to transform your multi-column section into a horizontal slider. This preserves your grid layout on desktop while turning it into a swipeable carousel on mobile.

Step 1: Setting Up the Container Layout

Create a parent Container and set the Direction to “Row” (Horizontal). Inside this parent, add your child Containers or Widgets (like Service Cards or Features). Ideally, create 4 distinct items to form a standard 4-column layout.

Ensure that your child items are styled completely before enabling the slider. It is easier to adjust padding, margins, and background colors while they are still in the standard Flexbox view.

Step 2: Activating Slider Mode

Select the parent Container and go to the Layout tab. Toggle Enable Slider Mode to “Yes”. The columns will immediately align horizontally in a slider format.

By default, it may show only one slide. You need to configure the view settings to match your original design intent.

Step 3: Configuring Responsive Settings

This is where the magic happens. You want the layout to look like a grid on desktop but behave like a slider on smaller screens.

  • Desktop: Set Slides Per View to 4. This recreates your original 4-column look. Users won’t even know it’s a slider unless you have more than 4 items.
  • Tablet: Switch the responsive control to Tablet and set Slides Per View to 2 or 3 depending on the content width.
  • Mobile: Switch to Mobile and set Slides Per View to 1.2. This fractional value (1.2) is critical because it shows the first full slide and a sliver of the second slide, giving users a clear visual cue that horizontal scrolling is available.

Pro Tips for Responsive Sliders

  • Gap Management: Use the Space Between setting in the Slider options (e.g., 20px) instead of Elementor’s native Gap between elements to ensure consistent spacing inside the carousel engine.
  • Hide Navigation: On desktop, if all 4 items are visible, you don’t need arrows. You can hide navigation arrows on Desktop but enable them for Mobile if desired, or rely purely on touch/swipe for mobile users.