Theme Settings — Overlay tab

Overview #

Figure 1 (above). View of the Overlay option settings for the Default Theme.

The Overlay option tab controls the styling of the popup overlay layer. This layer covers the entire screen and surrounds the popup container. ( It’s actually a layer that’s positioned between the screen content and the popup. ). The Overlay option has two properties; color and opacity.

Property Descriptions #

• Color styles the color of the overlay layer. 
• Opacity styles the density of the applied color.  An opacity of 100% is a fully saturated color, while a value of 0% is fully transparent. 

The Overlay Theme Settings in Action #

The overlay layer can be used to limit visitor access to the page content, and focus visitor attention on the popup itself.  The example above uses a semi-transparent red overlay that draws attention to the popup contents.  

For those that prefer  not to display the overlay layer, see the following related article.

Related article: ‘Display – Advanced’ option settings

Overlay Option Settings #

When editing the Overlay option settings, use the customizer located to the right of the Theme Settings box to preview your changes. . 

Color #

Set the background color for the popup overlay layer. Click on the button labeled ‘Select Color’ to display a colorpicker. Each custom color targeted within the colorpicker is represented by a unique hex number. 

The overlay color field also accepts any specific hex number as input. This feature assists users who want to apply a custom color palette on a site. 

Table 1. Overlay Layer Background Color — Default Settings by Theme

Opacity #

Range: 0 – 100%.  Set the color opacity (density) of the overlay layer.  

Edit the opacity value either by:

1. moving the range slider horizontally; or
2. changing the percent value directly, or 
3. selecting the ‘- / +’ buttons to increment changes to percentage.

Table 2. Overlay Background Opacity — Default Settings by Theme

Replace the Overlay Color with a Custom Image #

The overlay color can be replaced with a custom background image using the Advanced Theme Builder extension to Popup Maker.  The plugin requires a paid license which is valid for a term of 1-year.  Licensees are eligible to receive support and upgrades during the license term.