Overlay options

The Overlay controls allows to govern the overlay of blocks. To apply an overlay, you have to select a Overlay Type first, by clicking on the appropriate control.

Color overlay

Color palette

The Color control allows you to choose a preset from a globally-defined colors via theme support or to define a custom one.

If you are not using a theme.json file to define colors, or if you need to customize the output of the color scheme in your project, you can utilize the advanced-columns.colors filter.

You can refer to the official ColorPalette field documentation for the data structure of colors.

To filter colors or gradients in your project, you need to create a JavaScript file and enqueue it in the admin area using the admin_enqueue_scripts hook. Then, in the file, use the wp.hooks.addFilter function to filter the data.

Color opacity

This control allows you to control the opacity of the overlay color relative to the rest of the page, with values ranging from 0 to 100.

Color gradient

Gradient palette

The Gradient control allows you to choose a preset from a globally-defined gradients via theme support or to define a custom one.

Like colors, gradients can also be customized using the advanced-columns.gradients filter. Refer to the GradientPicker field documentation for the correct data structure.

Gradient opacity

This control allows you to control the opacity of the overlay gradient relative to the rest of the page, with values ranging from 0 to 100.

Updated