Scrims & Overlays
These modular elements can be readily used and customized across pages and in different blocks.
Explore all of Stack’s modular elements
at the Element Index Page →
login_enqueue_scriptshooks. This notice was triggered by the
contentstudio-dashboardhandle. Please see Debugging in WordPress for more information. (This message was added in version 3.3.0.) in /home/www/francisco/wp-includes/functions.php on line 5229
Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/js_composer/include/autoload/vc-shortcode-autoloader.php on line 64
Overlays are useful for ensuring that text overlaying an image will remain readable.
Elements using an image background can be overlayed with a tint by adding the data attribute data-overlay=“#“. The strength of the tint can be controlled by assigning a number between 1 and 9 to the data attribute. 1 being a light tint, 9 being a heavy tint.
Similar to overlays, scrims add a gradient tint to the bottom or top of an element to ensure that overlaying text remains readable — without tinting the entire image.
Elements using an image background can be scrimmed by adding the data attribute data-scrim-top=“#“ or data-scrim-bottom=“#“. The strength of the scrim can be controlled by assigning a number between 1 and 9 to the data attribute. 1 being a light ting, 9 being a heavy scrim.