Divi’s Fullwidth Header module can be used to create an attention grabbing section at the top of a page, like the one above that we created for Tom McGee. But when an image is placed in the background, the text can be hard to read. Divi provides an option to specify an overlay, but that places an opaque layer over the entire image.

To create something more eye-pleasing, we added an smoked glass layer as a background for the module’s container element.

Adding the Smoked Glass Background to the Containter

All that is required is a bit of CSS. Here are step-by-step instructions.

First, in the Fullwidth Header Module’s Settings:

  • Under the General tab, set your Text Color to Light
  • Under the Custom CSS tab, in the CSS Class field add: fwhdr-smoked-glass

Image showing Fullwidth Header Custom CSS Panel

Then add this CSS to the page:

.fwhdr-smoked-glass .header-content {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 10px;
padding: 25px;
width:100%;
}

Our Recommended Way to Add the CSS Code

There are a number of different ways to add the CSS code. This is how we do it in situations like this.

Add a Code Module to the section, so it looks like this:

Divi Fullwidth Header and Code Module together in a section

Open the Code Module and add the code to the content field. You will need to enclose it in an HTML style tag like this:

Iamge showing Divi Code Module with CSS Code for Smoked Glass container

Why do we add our CSS using a Code Module? Because we can save the section to the Divi Library and reuse it on another page or export it for use on another website. Doing it this way allows us to store the module and the code together as a unit.

If you add the code to the child theme’s stylesheet or the theme’s custom CSS field or the page’s custom CSS field, then if you want to use it on another website, you’ll have to find the code and copy it separately.

Summary

If you want the smoked glass darker, increase the opacity portion of the background-color setting from 0.4 to 0.5 or higher.

If you have a dark image, you might want to use a frosted glass background instead of the smoked glass. All that’s required is to change the background color to rgba(255,255,255,0.4). You’ll also want to set your Text Color to Dark in the Fullwidth Header Module Settings.

Good luck. If you have questions or suggestions for improvements, please leave them in the comments below.

Join our email list

Join our email list

Join our mailing list to receive the latest tech tips from our team.

You have Successfully Subscribed!

Pin It on Pinterest

Share This