Divi: How to display the Fullwidth Header module in full screen

Do you want to display the Divi Fullwidth Header module full screen?

Full-screen headers take up the entire screen, regardless of the screen size of the visitor. This is great for grabbing users’ attention. Fortunately, it's easy to create a full-screen header with the module FullwidthHeader of Divi.

In this article, we'll show you how to create a full-width header, customize it, and display it in full screen. You can use this approach to create any full screen hero section for your pages.

Let's start.

Preview

Let's see a preview of what we will design in this tutorial.

Office

Tablet

Divi Fullwidth Header module full screen

Phone

How to Make Your Divi Fullwidth Header a Fullscreen Header

Start by adding a full-width section to the page you're working on.

Then add a Fullwidth Header module to the full-width section.

The module settings open. Select tab Design. Activate the option called Make Fullscreen

We now have a full screen header. It's as simple as that.

Enable scroll icon

We can also add a button that tells the user to scroll down. However, we need to enable it. This button is always visible in the full screen option. The full screen header option always matches the screen height of the visitor.

Show Scroll Down Button: YES

Divi Fullwidth Fullscreen Header Example

Fullwidth Header Module Parameters

Here are the steps for each section of the Fullwidth Header module settings.

Read also: Divi: How to combine background masks and separators

texts

All first, add the text which will be visible in the full width header. This includes the title, subtitle, contents and the button text.

Title: Create your blog with Divi
Subtitle: Blogpascher
Burron #1: Summary
Button #2: Schedule
Body: (default)

Pictures

Then, add picture. This displays on the right side of the full-width header, shifting the text to the left.

Header Image: your choice

Background

Scroll to background and set the color to #f6f5ee.

Background Color: #f6f5ee

Disposal

Next, navigate to the Design tab.

Make Fullscreen: YES

Scroll down icon

Show Scroll Down Button: YES
Scroll Down Icon Color: #000000 (Desktop and Tablet), #ffffff (Phone)
Scroll Down Icon Size: 70px (Desktop), 60px (Tablet), 50px (Phone)

Title text

Next we will adjust the title text.

Heading Level: H1
Font: Inter
Font Weight: Bold
Text Alignment: Center
Text Color: #000000

Title Text Size: 75px (Desktop), 40px (Tablet), 24px (Phone)
Title Line Height: 1.2em

Description text

Then scroll down to BodyText.

Font: Open Sans
Alignment: Left
Color: #000000

Text Size: 16px (Desktop), 15px (Tablet), 14px (Phone)
Line Height: 1.8em

Subtitle

Then scroll down to Subtitle Text.

Font: Inter
Font Weight: Bold
Style: TT
Alignment: Center
Color: #ff5a17

Size: 14px
Letter Spacing: 1px
Line Height: 1.8em

Button #1

Then scroll down to ButtonOne.

Use Custom Styles For Button: YES
Text Size: 20px (Desktop), 18px (Tablet), 16px (Phone)
Text Color: #000000

Background Color: #ffffff
Border Width: 0px
Border Radius: 0px

Font: Inter
Font Weight: Bold

Icon: your choice
Icon Color: #000000
Placement: Right
Only Show Icon On Hover for Button One: NO

Finally, scroll down to options Button One Padding.

Padding:
- Desktop: 20px (Top and Bottom), 40px (Left and Right)
- Tablet: 16px (Top and Bottom), 40px (Left and Right)
- Phone: 12px (Top and Bottom), 40px (Left and Right)

Button #2

Finally, scroll down to Button Two.

Use Custom Styles For Button Two: Yes
Text Size: 20px(Desktop), 18px(Tablet), 16px(Phone)
Text Color: #ffffff

Background Color: #ff5a17
Border Width: 0px
Border Radius: 0px

Font: Inter
Font Weight: Bold

Choose your favorite icon.

Icon: your choice
Icon Color: #000000
Placement: left
Only Show Icon On Hover for Button Two: NO

Finally, scroll down to the options Button Two Padding.

Padding:
- Desktop: 20px (Top and Bottom), 40px (Left and Right)
- Tablet: 16px (Top and Bottom), 40px (Left and Right)
- Phone: 12px (Top and Bottom), 40px (Left and Right)