Hero Images: Custom Color Bands
Our child theme automatically creates a gray color band behind the title text of hero images.
In general, changes to this band should be made centrally by editing styles for the entire site. (Geek note: You do that either by editing global.css directly or—preferably, if SASS is available—by editing SCSS file _design-patterns.scss)
However, if needed it’s possible to change the color of the band for an individual page. Just bear in mind that page-specific edits will make it much harder in the future to implement site-wide hero style changes, since each of these manually edited pages will have to be edited manually to match the new hero style.
To change the band’s color for a specific page:
- Edit the page using Divi’s visual builder
- Click the module’s properties gear (the gear in the gray controls) for the text module that has the hero’s title
- Go to the Advanced tab
- Open the Custom CSS section
- Add something like the following CSS to the Main Element section
background-color: rgba(20, 0, 40, 0.7) !important;
This is a CSS color code—and is actually the code used for the hero at the top of this documentation page, specifying a purple bar that’s a little darker than normal. The rgba means you’re numerically specifying the Red, Green, and Blue color components, as well as the Alpha (transparency) weight.
The default color code being used for all pages as of launch is gray with medium opacity:
background-color: rgba(0, 0, 0, 0.5) !important;