How to Create Color Overlays for Divi Sections

[et_pb_section fb_built=”1″ custom_padding_last_edited=”on|desktop” admin_label=”section” _builder_version=”3.22″ custom_padding=”0px|||||” custom_padding_tablet=”50px|0|50px|0″ custom_padding_phone=”” transparent_background=”off” padding_mobile=”off” make_fullwidth=”off” use_custom_width=”off” width_unit=”off” custom_width_px=”1080px” custom_width_percent=”80%”][et_pb_row padding_mobile=”off” column_padding_mobile=”on” _builder_version=”4.4.8″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” width=”100%” max_width=”100%” custom_padding=”0px|||||” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” custom_width_px=”1080px” custom_width_percent=”80%”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_video src=”https://www.youtube.com/watch?v=EfhzmIvwpDQ” image_src=”//i.ytimg.com/vi/EfhzmIvwpDQ/hqdefault.jpg” _builder_version=”3.0.47″][/et_pb_video][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”off” column_padding_mobile=”on” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” width=”100%” max_width=”100%” width_unit=”off”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Divi Background Plus” _builder_version=”3.27.4″ text_font=”|on|||” text_font_size=”18″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” module_alignment=”left” border_style=”solid”]We now offer a plugin that brings this feature to Image Backgrounds, Parallax Backgrounds, and Video Backgrounds.  It’s much easier and quicker than writing code.  It’s also a lot easier to update code.  In fact, no code is needed.  =)

Demo:  http://madebysuperfly.com/divi-background-plus/
Purchase:  https://besuperfly.com/product/divi-background-plus/
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”off” column_padding_mobile=”on” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” width=”100%” max_width=”100%” make_fullwidth=”off” use_custom_width=”off” width_unit=”off” custom_width_px=”1080px” custom_width_percent=”80%”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text _builder_version=”3.27.4″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” module_alignment=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]The Fullwidth Header section in Divi gives you the option to create a background overlay. However, for standard sections (or any other location) that option is not available. This means you have to create the overlay on your photo using Photoshop or something similar. This makes it very difficult to change and test…

This tutorial will show you how to create a background overlay where it is not available in Divi. This overlay makes reading the text easier.

This doesn’t just make it easier to change and adjust using the Inspect Element tool, but also provides ease in adjusting photos and colors.

Check out the video above to learn how to implement the overlay effect in Divi today! We use ANTHEM in the video for demo purposes, but this will work on any Divi site.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_2,1_2″ padding_mobile=”off” column_padding_mobile=”on” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” width=”100%” max_width=”100%”][et_pb_column type=”1_2″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”before the overlay” _builder_version=”3.27.4″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” module_alignment=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

before the overlay

[/et_pb_text][et_pb_image src=”https://superfly-storage.s3.us-east-2.amazonaws.com/wp-content/uploads/2017/01/22135120/before-overlay.png” align=”center” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” _builder_version=”3.23″ animation_style=”fade” animation_duration=”500ms” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation=”fade_in” sticky=”off” always_center_on_mobile=”on”][/et_pb_image][/et_pb_column][et_pb_column type=”1_2″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”after the overlay” _builder_version=”3.27.4″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” module_alignment=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

after the overlay

[/et_pb_text][et_pb_image src=”https://superfly-storage.s3.us-east-2.amazonaws.com/wp-content/uploads/2017/01/22135119/after-overlay.png” align=”center” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” _builder_version=”3.23″ animation_style=”fade” animation_duration=”500ms” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation=”fade_in” sticky=”off” always_center_on_mobile=”on”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”off” column_padding_mobile=”on” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” width=”100%” max_width=”100%” make_fullwidth=”off” use_custom_width=”off” width_unit=”off” custom_width_px=”1080px” custom_width_percent=”80%”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text _builder_version=”3.27.4″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” module_alignment=”left” border_style=”solid”]

step 1: watch the video.

Go for it… it’s just a few minutes. It will save you time in the end since you’ll know how it all works!

step 2: go to “before” area in the section custom CSS

For this tutorial, we put all CSS in the section CSS itself. NOT in the Divi Custom CSS section in General Settings.

step 3: the trusty ol’ CSS.

Add the snippet of CSS below. Adjust colors as needed.

(step 3.5: if using parallax…)

Add the snippet of CSS below marked “if using parallax” into the “before” section. Then change the section class to “greyOverlay”.

[/et_pb_text][et_pb_toggle title=”gimme that code!” open_toggle_text_color=”#ffffff” closed_toggle_background_color=”#ec008c” admin_label=”Gimme that code!” _builder_version=”3.0.87″ title_text_color=”#ffffff” body_text_color=”#ffffff” background_size=”initial” background_position=”top_left” background_repeat=”repeat” use_border_color=”off” border_color=”#ffffff” border_style=”solid”] 

 /* PLACE IN THE BEFORE AREA */
content:"";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(58, 60, 69, .6);

 /* IF USING PARALLAX */
.greyOverlay .et_parallax_bg:before, .greyOverlay:before {
  content:"";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(58, 60, 69, .6);
}

 
[/et_pb_toggle][et_pb_text _builder_version=”3.27.4″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” module_alignment=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

step 5: tweak.

Feel free to play around with changing the CSS class to a few of the other options to find out which style works best for you!

Stay Fly,
Superfly Squad

You can use this trick on any Divi site! But if you like the demo we used, it’s called “ANTHEM” and it’s pretty fly if we may say so ourselves…

[/et_pb_text][et_pb_button button_url=”https://besuperfly.com/product/anthem-child-theme/” url_new_window=”on” button_text=”Buy the ANTHEM Theme” button_alignment=”center” _builder_version=”3.16″ custom_button=”on” button_text_size=”15px” button_bg_color=”#000000″ button_border_color=”#000000″ button_border_radius=”0″ button_letter_spacing=”0″ button_use_icon=”off” background_layout=”dark” button_border_color_hover=”#ec008c” button_border_radius_hover=”0″ button_letter_spacing_hover=”0″ button_bg_color_hover=”#ec008c” button_text_size__hover_enabled=”off” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_text_color__hover_enabled=”off” button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_border_width__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_border_color__hover_enabled=”on” button_border_color__hover=”#ec008c” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_border_radius__hover_enabled=”on” button_border_radius__hover=”0″ button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_letter_spacing__hover_enabled=”on” button_letter_spacing__hover=”0″ button_one_letter_spacing__hover_enabled=”off” button_two_letter_spacing__hover_enabled=”off” button_bg_color__hover_enabled=”on” button_bg_color__hover=”#ec008c” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off”][/et_pb_button][/et_pb_column][/et_pb_row][/et_pb_section]