Instructions

This page will help you understand how the ZynqeHouse template is structured and how to customize it for your own project.

We recommend reading this guide before making major changes, especially to the Style Guide, CMS, and GSAP animations.

ZynqeHouse uses a simple design system built with global classes and variables. All main typography, colors, spacing, and buttons are defined in the Style Guide page and in the Webflow Variables panel.

• Headings (H1–H6) and paragraphs are connected to typography variables.
• Brand colors, neutrals, and accents are stored as color variables.
• Common components such as buttons, sections, and containers use reusable classes.

This template utilizes the, allowing you to effortlessly modify all colors, which will be promptly updated across the entire site.

To adjust a color, navigate to the Variables panel, then choose the color you wish to modify.

In order to change the color of SVGs, Download .svg file from Assets and open it to any text editor. Change HEX color code with color of your choice and replace updated .svg file with the current file.

To adjust the font family, navigate to the Variables panel, then choose the font family you wish to modify.

If you want to change fonts, you can always go toSite Settings > Fonts.There, you will be able to upload custom fonts, use Google Fonts, or even connect your Adobe Fonts account.

Once you've uploaded a font fromSite Settings, navigate to the Variables panel, then choose the font family you uploaded.

The “Starter Page” template provides a solid foundation for building your pages. It includes a pre-designed header, footer, and a blank section with a container to help you get started quickly.

If you want to change fonts, you can always go toSite Settings > Fonts.There, you will be able to upload custom fonts, use Google Fonts, or even connect your Adobe Fonts account.

We'll be glad to help you out with your queries. Please contact us at theWebflow template support pageand you shall hear back very soon.

Duplicate the Starter Page and start editing or adding sections from other pages.

• ‍Add Animation: just apply Animation class like "card", "card-wrapper"
• ‍Remove Animation: simply delete that class from the element.
• ‍Disable Animation: You can also disable animation completely by removing the GSAP script or commenting it out.

<div class="card-wrapper">
    <div class="card">
        Card One
    </div>

    <div class="card">
        Card Two
    </div>

    <div class="card">
        Card Three
    </div>
</div>

<div class="stats">
    <div class="stat">
        <span class="counter" data-target="120">
            0
        </span>
        <p>
            Projects
        </p>
    </div>

    <div class="stat">
        <span class="counter" data-target="95">
            0
        </span>
        <p>
            Clients
        </p>
    </div>
</div>

• These classes auto-hook into the template’s GSAP: no extra scripting needed.
• Use lightweight images/SVGs inside marquees for smooth motion.
• Animations respect the user’s Reduced Motion preference automatically.
• If something doesn’t animate, confirm the wrapper class names match exactly.