Skip to main content

The Divi Hero Module (Divi 5)

Learn how to use the Divi Fullwidth Header Module to create impactful headers with customizable text, images, and design options.

Updated this week

The Divi Hero Module is a versatile tool for various website designs. It can display dynamic post titles in templates for posts, projects, or pages, or serve as a promotional element to highlight key content, such as freebies, podcasts, or important pages.

The module supports a title, a subtitle, body text, two images, an icon, and two side-by-side buttons.

Divi 5 - Fullwidth Header module

Add The Divi Hero Module

When you load the Visual Builder, Divi automatically adds a Section.

  1. Click on the Green Plus icon to insert a Row.

  2. Choose the Columns layout - Ideally, this module will be added inside a one-column Equal Column.

  3. Find the Hero module and click on it to load it. Alternatively, you can use the Search option to find it.

Divi 5 - Add the Hero Module

The Divi Hero Module Use Cases

  1. Building Engaging Hero Sections: Utilize the module to create a full-width hero area featuring a captivating headline, subheadline, and call-to-action buttons, ideal for landing pages or homepages.

  2. Promoting Special Offers: Utilize a full-width Hero to effectively highlight promotions or limited-time deals, ensuring they stand out and capture immediate attention from visitors.

  3. Introducing Key Sections: Add a full-width Hero to mark the beginning of key sections, such as "About Us," "Services," or "Contact," providing a clear and bold introduction.

Hero Module Settings Breakdown

Once you've added the Hero module, its settings will automatically appear. This is where this module's content and design styles are configured. These settings are organized into three groups via the tabs at the top of the module:

The Content tab

The Content tab enables you to add content to the Hero module, including the Title, Subtitle, button text, and more.

Divi 5 - Hero module's Content tab

  1. Text - Choose the module's title, subtitle, button text, and body text.

  2. Images - Choose the Logo and the Header Images.

  3. Link - Make the entire Hero module clickable, creating a seamless way to direct users to another page, section, or external site.

  4. Background - Choose the Hero module's background styles.

  5. Admin Label - Choose the Hero module's label text to assist you in keeping things organized and easy to understand in the Visual Builder.

The Design tab

All the design styles and options for the Hero module are in this tab.

Divi 5 - Hero module's Design tab

  1. Layout - Choose the text and logo alignment, and whether the module should be full-screen.

  2. Scroll Down Icon - Choose to display a scroll-down icon, the icon type, color, and size.

  3. Image - Choose the Image styles.

  4. Overlay - Choose the module's overlay styles.

  5. Text - Choose the overall Hero module's text styles for this module.

  6. Title Text - Choose the module's title text styles.

  7. Body Text - Choose the module's body text styles.

  8. Subtitle Text - Choose the module's subtitle text styles.

  9. Button One - Choose the module's first button styles.

  10. Button Two - Choose the module's second button style.

  11. Sizing - Choose the Hero module's sizing.

  12. Spacing - Choose the Hero module's spacing.

  13. Border - Choose the Hero module's border styles.

  14. Box Shadow - Choose the Hero module's Box Shadow styles.

  15. Filters - Choose the Hero module's filters, such as hue shifts, saturation changes, and blending modes.

  16. Transform - Choose the Hero module's advanced design effects, such as scaling, rotating, skewing, and translating.

  17. Animation - Choose the Hero module's animation styles, adding personality and interactivity while keeping a polished, professional feel.

The Advanced tab

The Advanced tab provides tools for experienced designers, including options for adding CSS IDs and Classes, controlling visibility, managing transitions, adjusting element positions, and creating scroll effects.

Divi 5 - Hero module's Advanced tab

  1. CSS ID & Classes - Allows you to assign unique CSS ID or reusable CSS classes, enabling advanced custom styling through your child theme’s stylesheet or Divi’s custom CSS settings.

  2. Custom CSS - Allows you to add custom CSS code to fine-tune your Hero module, enabling advanced styling that perfectly aligns with your vision.

  3. Attributes - Choose the button's relationships.

  4. Conditions - Allows you to create dynamic, personalized content, ensuring the right message reaches the right audience at the right time.

  5. Interactions - Create various types of interactions.

  6. Visibility - Choose the Hero's module visibility based on different devices.

  7. Transitions - Choose how long Hero's module animation takes, adding subtle, impactful animations that enhance user experience and make your modules stand out.

  8. Position - Choose precise control of the Hero's module placement and create dynamic, visually engaging designs.

  9. Scroll Effects - Control how the Hero module behaves and transforms during scrolling.

What's the next step?

Save your changes and exit the Visual Builder

To save the page design, you can type CMD + S on a Mac or CTRL + S on a PC.

You can also:

  1. Click on the Save button.

  2. Click on the Exit button.

Divi 5 - Save and Exit Visual Builder
Related Articles
The Divi Heading Module (Divi 5)
The Divi Number Counter Module (Divi 5)
The Divi Person Module (Divi 5)
The Divi Pricing Tables Module (Divi 5)
The Divi Post Carousel Module (Divi 5)
Did this answer your question?