This theme includes a very unique custom module that allows you to load any background image into the hero section and then overlay a select color to help match the image to your site and make the hero text more readable. This prevents you from having to edit the image itself!
This module is built to work with any page within this theme, regardless of what module(s) you use as the hero section on the page. This color overlay will apply to the first section on the page IF you use a background image on the section.
Also, note that this module works a little differently than most modules in that it doesn't take up space on the page when you add it. You can just add it to the page under the hero.
Module Settings
After adding it to the page, you can access the settings by clicking the Contents tab on the left panel. You'll see the module "Colors Hero Overlay" in the list of modules on the page. Click on it to view the settings.
There is only one field to address in this module! While only one color field, there are two elements:
- Color. This is a hexadecimal value. You can manually enter a value, OR you can click the color circle on the right to get a color popup selection.
- Opacity. This percentage value affects how much the color overlay is applied. 0% would be not applied at all, and 100% is full overlay. You can play with this value and find the percentage that works for each instance. It will vary, of course, depending on the image used.