Saasable Template: Guides | Certified Code Help Center

License:

All graphical assets in this template are licensed for personal and commercial use. If you'd like to use a specific asset, please check the license below

All graphical assets are taken from Wix media library, Unsplash via Wix media manager.

Style Guide:

You can view the style here:

Font source: https://www.fontshare.com/fonts/general-sans

Code usage disclosure:

Page Code:

This code is used to control the behavior of header. When the hero section (first section of home page) enter/leave the viewport, the header content will move outwards/towards horizontally respectively.

// API Reference: https://www.wix.com/velo/reference/api-overview/introduction
// “Hello, World!” Example: https://learn-code.wix.com/en/article/1-hello-world

$w.onReady(function () {
    $w('#heroSection').onViewportEnter(() => {
        if ($w('#header').effects.activeEffects.includes("Shrink Header on Scroll")) {
            $w('#header').effects.toggleEffects(["Shrink Header on Scroll"])
        } else {
            $w('#header').effects.removeEffects(["Shrink Header on Scroll"])
        }
    })
    $w('#heroSection').onViewportLeave(() => {
        if (!$w('#header').effects.activeEffects.includes("Shrink Header on Scroll")) {
            $w('#header').effects.toggleEffects(["Shrink Header on Scroll"])
        } else {
            $w('#header').effects.removeEffects(["Shrink Header on Scroll"])
        }
    })
});

/* Saasable Template by Certified Code: https://www.certifiedcode.us/templates */

CSS Code:

This code is used to apply border-radius to elements (video box on the second section on home page; "Boost your business" section's repeater's image's container) that can't apply natively to ensure the seamless design.

/* CSS reference: https://www.wix.com/velo/reference/$w/styling-elements-with-css */
 
/* These CSS styles will be applied globally to every page of this site. Write your CSS here, e.g.: */

/*  Change button background color to red: */
/* .button {
    background-color: red;
} */

.video-box {
  border-radius: 10px;
  overflow: hidden;
}

.radius36 {
  border-radius: 36px;
  overflow: hidden;
}

/* Saasable Template by Certified Code: https://www.certifiedcode.us/templates */

Freely Template: Guides