Search All In One Carousel for Divi Documentation
Search for answers or browse our knowledge base.
DE Hero Slider Module
The Hero Slider module is a premium, fully responsive slider module built specifically for the Divi 5 framework. It allows you to create high-impact, stunning hero sections containing individual slides with rich text, double call-to-action buttons, and side-by-side media (images or oEmbed videos).
How to add module on page
- Open your page in the Divi 5 Visual Builder.
- Click on the gray (+) button to add a new module.
- Search for DE Hero Slider in the module library.
- Click on it to insert it into your layout.
- In the parent module, click the (+) button under the Content tab to insert individual Hero Slider Item slides.
Content settings (Parent and child items)
The settings are divided between the parent slider container and the individual slide items (children).
Parent slider content settings
- Content: Add, duplicate, delete, and re-order individual slides (Hero Slider Items).
Individual slide (Hero slider item) Content settings
- Title: Enter the main heading for this specific slide.
- Subtitle: Enter a subheading to display above or below the title.
- Body content: The main descriptive text area for the slide content.
- Button one and Button two:
- Show Button: Toggle ON to show the action button.
- Text & Link: Enter the button text and URL.
- Link Target: Set the link to open in the same window or a new tab.
- Image/Video:
- Use Video: Toggle ON to show a video instead of an image.
- Video URL: Input an oEmbed link (YouTube, Vimeo) or a direct MP4/WebM URL.
- Image: Upload the image if Use Video is turned off.
Display settings
These settings are managed inside the parent Hero Slider module to control the Swiper slider logic:
- Content Position: Set the vertical alignment of the text content inside the slide (Top, Center, or Bottom).
- Slide Effect: Select the transition effect between slides (Slide, Fade, Cube, Coverflow or Flip)
- Slider Loop: Toggle ON to enable continuous loop scrolling.
- Autoplay and Autoplay Speed: Enable automatic slide transitions and define the delay speed in milliseconds (default:
3000). - Pause on Hover: Pause the autoplay slider when a visitor hovers their mouse over it.
- Transition Duration: Set the speed of the slide transition animation in milliseconds (default:
1000). - Slider Navigation (Arrows & Dots):
- Show Navigation Arrows: Toggle ON to show previous and next arrows. Custom icons can be selected.
- Arrows Position: Set the arrows to appear Inside or Outside the slide area.
- Show Control Dots: Toggle ON to show navigation pagination dots at the bottom.
- Control Dot Style: Choose from multiple dot shapes/styles.
- Enable Dynamic Dots: Condense pagination dots dynamically on smaller screens.
Design settings
Fine-tune the appearance of each element of the Hero Slider:
- Title and Subtitle Typography: Configure HTML heading levels (H1-H6), font family, weight, style, color, size, line height, and text shadow.
- Body Text Styling: Customize font weight, text alignment, color, size, and letter spacing.
- Button One and Button Two Custom Design: Use custom styles for buttons to define unique background colors, borders, font weights, custom icons on hover, and padding.
- Image and Media Styling: Adjust image border radius, box shadow, and filters (brightness, contrast, blur).
- Arrows and Dots Styling: Change the navigation arrows’ size, background, and icon color. You can also customize the active and inactive colors of the pagination dots.
Frequently Asked Questions (FAQs)
Can I display both an image and a video in a single slide?
No. Each slide item allows you to choose either an image or a video to display adjacent to the text. However, you can add inline images or links inside the body content description box.
Does the Hero Slider support swipe gestures on mobile devices?
Yes. The slider is built using the Swiper engine for Divi 5, which natively supports touch-swipe gestures on mobile devices and tablets for smooth slide transitions.
Can I have different transition effects for desktop and mobile?
No. The slide transition effect (e.g., Slide, Fade, Cube) applies globally to all screen sizes to ensure layout consistency. However, you can customize fonts, sizing, and spacing independently for desktop, tablet, and mobile.