Exploring Divi 2.4: Using The All New Full Screen Header Module

Earlier this month we introduced Divi 2.4, the biggest upgrade in Divi history and a giant leap forward for our most popular WordPress theme. There are so many great features to explore in this update that it was hard to describe them all on the release post, which is why we have decided to do a 2-week series of informational blog posts that will aim to teach you how to take full advantage of Divi 2.4 and its new options. In part eleven of this series, I will be exploring the upgraded Fullwidth Header module, complete with new Full Screen functionality!

Learn All About Divi 2.4 Here

The Fullwidth Header Module Gets A Huge Upgrade

Divi has always had a Fullwidth Header module. In Divi 2.4, however, this module has been greatly expanded with dozens of new options that make it one of the most versatile modules in Divi’s collection. There are over 20 different possible layouts that can now be created with this single module, and a myriad of new styling options that can be applied to each element (thanks to Divi’s new Advanced Design Settings). Where before you were limited to only two pieces of information in your header (Title and Subhead), the header has now been expanded to include various images, buttons and backgrounds (each of which can be arranged in different ways). To top things off, a new “Full Screen Mode” has been added to the header, which will force the header to extend the full height of the browser.

Exploring The New Options

There are a ton of new options available for the Fullwidth Header module. At first glance they can seem a bit overwhelming, so let’s go over each of the available options to better explain what they do.

When you add a new Fullwidth Header module to your page, you will be greeted with the following settings:

Title – Enter your header title here. This text will appear below your logo image and above your subhead text if defined.

Subheading Text – If you would like to use a subhead, add it here. Your subhead will appear below your title in a smaller font.

Text Color – Here you can choose the color value of your text. If you are working with a dark background, then your text should be set to light. If you are working with a light background, then your text should be dark.

Text & Logo Orientation – This controls the how your text is aligned within the module. You can choose between left, right or centered alignment.

Make Fullscreen – Here you can choose whether the header is expanded to fullscreen size. If this option is enabled, the header will always have a minimum height equal to the height of your browser window. This is a great way to add extra prominence to your header, making it idea for greeting new visitors on your homepage.

Show Scroll Down Button – Here you can choose whether the scroll down button is shown. When the scroll down button is clicked, it automatically scrolls users down to the next section on the page. It also gives an indication that more content exists below the header (since the “full screen” effect can often be deceiving).

Button Text – If you would like to display a button in your header, you can enter the text for your first button here.

Button URL – If you would like to display a button in your header, you can enter the URL for your first button here.

Background Image URL – Headers can have an optional background image applied, which will appear behind your text and header image.

Background Color – If you would like to give your header a background color, you can specify the color here.

Background Overlay Color – Choose a background overlay color, which will be placed on top of the background image and behind your text. Semi-transparent background overlays can create some interesting effects when placed above background images.

Use Parallax effect – If enabled, your background images will have a fixed position as your scroll, creating a fun parallax effect.

Logo Image URL – Logo images are displayed above your title text (if defined). As with all elements in the header, logos are optional.

Text Vertical Alignment – This setting determines the vertical alignment of your content. Your content can either be vertically centered, or aligned to the bottom.

Header Image URL – Headers can also have an optional header image. This is a larger image that is displayed separately from your title text and logo.

Image Vertical Alignment – This controls the orientation of the image within the module. It can be aligned independently of your logo and text, resulting in over 20 different possible layouts.

Creating Your Own Header Module

Now that we have familiarized ourselves with the new options available, let’s take a look at how these options can be combined to create some stunning headers. In this tutorial, I will be showing you how to create a header in the following style:

View The Live Demo

This configuration takes advantage of most of the new options added in Divi 2.4, and is a great example of how all of these elements can be successfully combined.

Getting Started – Selecting Your Images

In this example, I will be creating a homepage for a fictional bakery. At the top of the homepage, I want to quickly describe what our company is all about using some beautiful imagery and a bit of text. First things first, we need to decide on some great photos. Selecting images that go well together is the most important part of designing a beautiful header. The Fullwidth Header has 3 different images available to it:

• The Logo Image – This image is placed above your title text, and is typically a small logo to represent your company.
• The Background Image – The background image is placed behind your header content. It’s best to think of the background image as a textural element. We don’t want something too overpowering. It should compliment the rest of your header, but it’s not the main subject of the module.
• The Header Image – This is a larger image that is placed adjacent to your title text and logo. It can be placed to the left, right or below your text content.

To get things started, I have selected a background image that goes well with my baking theme. This image is not too cluttered, and the lack of depth also makes for a more subtle appearance.

I have also uploaded my company logo image. This will be placed above my title text. It has been saved as a transparent PNG image so that the background image will be visible within the negative space of logo.

Next, I have selected an image to be placed below my text content. This is my main “Header Image.”

Since this image will be placed on top of my background image, I have decided to turn this photo into a transparent PNG as well (just like our logo). I used Photoshop and the eraser tool to fade out the edges so that the transparency can take full effect. Here’s what the image looks like after I finished fading it in Photoshop:

Now that we have our basic elements in place, we can start constructing our header!

Putting The Pieces Together

First of all, we need to add a new Fullwidth Header module to our page. To do that, add a new Fullwidth Section and click the “insert module” button. Locate and select the Fullwidth Header module.

This will bring up the Fullwidth Module settings that we went over earlier. To start things off, I input some title text (“Better Tasting Bread”) and enabled the “Fullscreen Header” option. I also changed my text color to “light” since the background image I chose earlier is rather dark. We need to make sure that our text will be readable.

Next I added my background image by uploading the image that I chose earlier.

After saving, you can see what our header looks like so far. We have only a title and a background image, and the header has been set to extend the full height of the browser.

Things are looking pretty good so far! However, I am noticing that as I scroll down the page, the white color of the flour is clashing with the white color of the text. This is a very common problem with background images. It’s often difficult to find a background image that has a low enough contrast to never compete with your text. Luckily, we implemented a new featured called “Background Overlay” that solves this problem by adding a semi-transparent color on top of your background image to help tone it down. It can also be used to colorize your photos.

Since I am going for more of a brown color scheme on the page, I have chosen to place a semi-transparent brown overlay on top of my background image.

Once we save and apply the overlay color, you can see that overall color of the background image has now taken on a brown hue. Since only part of the background image can be seen through the new overlay color, it also lowered the contrast of the image and toned down the white of the flour.

Now things are starting to come together! Let’s continue to add the rest of our content to the header. Next up, I uploaded the logo image I chose earlier. I also filled in the “button text” and “button URL” settings. Buttons are placed below your header title, while the logo image is placed above it.

The logo, title, subhead, and buttons are always placed together (and in that order). All of these elements are optional. If you don’t want to use any of these items in your header, simply leave their setting fields blank. After uploaded our new logo and adding our two buttons, you can see the end result below. Since our logo image is a transparent PNG, the background image and overlay color are shown through the negative space. This is a great effect, and something you should consider using in your own designs.

There is only one piece of the puzzle left, the header image of the piece of bread we chose earlier. This is an important part of our header, since it will quickly let our visitors know exactly what our company does. Together with our title text and logo image, all of the important information necessary to understand what our website is about can be seen right away.

As mentioned earlier, I have used Photoshop to fade out the edges of the image and saved it as a transparent PNG (just like our logo). When combined with a background image and parallax affect, we can create the illusion that these two elements exist in the same space. With this finishing touch completed, our Fullwidth (and Full Screen) Header has been finished.

This Is Just One Example Of Countless Possibilities!

This example is just one of many different ways that the Fullwidth Header module can be used. By choosing different image and text orientations, the layout of the header can be drastically changed. Here is a spreadsheet of all the different layout possibilities just to give you an idea:

As you begin to experiment with different text and image orientations, combined with different styles of photos, you will start to see just how versatile this module has become.