The Divi Fullwidth Header 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 like freebies, podcasts, or important pages.
The module supports a title, subtitle, body text, two images, an icon, and two side-by-side buttons.
Add The Divi Fullwidth Header Module
When you load the Visual Builder, Divi automatically adds a Section.
Click on the Blue Plus
icon to insert a Fullwidth section.Click on the Fullwidth button.
Find the Fullwidth Header module and click on it to load it. Alternatively, you can use the Search option to find it.
{Gif here}
The Divi Fullwidth Header Module Use Cases
Building Engaging Hero Sections: Use the module to create a full-width hero area with a captivating headline, subheadline, and call-to-action buttons, perfect for landing pages or homepages.
Promoting Special Offers: Use a full-width header to highlight promotions or limited-time deals, ensuring they stand out and draw immediate attention from visitors.
Introducing Key Sections: Add a full-width header to mark the beginning of key sections, such as "About Us," "Services," or "Contact," providing a clear and bold introduction.
Fullwidth Header Module Settings Breakdown
Once you've added the Fullwidth Header module, the module settings automatically pop up. 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 allows you to add content to the Full-Width Header, such as the Title, Subtitle, button text, and more.
Text - Choose the module's title, subtitle, button text, and body text.
Images - Choose the Logo and the Header Images.
Link - Make the entire Fullwidth Header module clickable, creating a seamless way to direct users to another page, section, or external site.
Background - Choose the Fullwidth Header module's background styles.
Admin Label - Choose the Fullwidth Header 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 Fullwidth Header module are in this tab.
Layout - Choose the text and logo alignment and if the module should be fullscreen.
Scroll Down Icon - Choose to display a scroll-down icon, the icon type, color, and size.
Image - Choose the Image styles.
Overlay - Choose the module's overlay styles.
Text - Choose the overall Fullwidth Header module's text styles for this module.
Title Text - Choose the module's title text styles.
Body Text - Choose the module's body text styles.
Subtitle Text - Choose the module's subtitle text styles.
Button One - Choose the module's first button styles.
Button Two - Choose the module's second button styles.
Sizing - Choose the Fullwidth Header module's sizing.
Spacing - Choose the Fullwidth Header module's spacing.
Border - Choose the Fullwidth Header module's border styles.
Box Shadow - Choose the Fullwidth Header module's Box Shadow styles.
Filters - Choose the Fullwidth Header module's filters, such as hue shifts, saturation changes, and blending modes.
Transform - Choose the Fullwidth Header module's advanced design effects, such as scaling, rotating, skewing, and translating.
Animation - Choose the Fullwidth Header 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.
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.
Custom CSS - Allows you to add custom CSS code to fine-tune your Fullwidth Header module, enabling advanced styling that perfectly aligns with your vision.
Attributes - Choose the button's relationships.
Conditions - Allows you to create dynamic, personalized content, ensuring the right message reaches the right audience at the right time.
Visibility - Choose the Fullwidth Header's module visibility based on different devices.
Transitions - Choose how long Fullwidth Header's module animation takes, adding subtle, impactful animations that enhance user experience and make your modules stand out.
Position - Choose precise control of the Fullwidth Header's module placement and create dynamic, visually engaging designs.
Scroll Effects - Control how the Fullwidth Header 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:
Click on the Save button.
Click on the Exit button.
