CSS Variables that can be used for the Hero Loader Effect

    
    --hero-title-color: var(--primary-color);
	--hero-title-font-family: var(--title-font-family);
	--hero-title-font-size: 4vw;
	--hero-title-font-size-mobile: 7vw;
	--hero-title-text-shadow: 3px 3px 3px rgba(0,0,0,.15);
	--hero-title-left-position: 6%;
	--hero-title-right-position: unset;
	--hero-title-top-position: unset;
	--hero-title-bottom-position: 5%;

	--hero-text-color: var(--primary-color);
	--hero-text-font-family: var(--body-font-family);
	--hero-text-font-size-desktop: 1vw;
	--hero-text-font-size-mobile: 2vw;
	--hero-text-text-shadow: 3px 3px 3px rgba(0,0,0,.15);
	--hero-text-left-position: 6%;
	--hero-text-right-position: unset;
	--hero-text-top-position: unset;
	--hero-text-bottom-position: 5%;

	--hero-img-height: 24vw;
	--hero-img-height-mobile: 30vw;

	--hero-opacity: 0.35;
	--hero-object-fit: cover;
	--hero-object-position: center;

Steps Needed to add Hero Loader to a website

• Create a Custom Module named "Hero - Grid Pages" that is set to display on all pages and in the hero position. In the Module add the line:

  <div id="hero-grab"><img id="grid-hero" src="//shared.solutiocdn.com/content/shared/defaults/hero-default.png" alt="" /></div>

• Add the id and the class "hero" to the Hero Particle in the Base Outline
• Add this javascript to the base outline

document.addEventListener("DOMContentLoaded", function() {
 runHeroLoader();
heroTitleOverlay(titleClass = "hero-title-design", textClass = "hero-text-design", defaultHero = "//shared.solutiocdn.com/content/shared/defaults/hero-default.png");
sideMenuActive();
});