[ Last Updated: June 2026 ]
Welcome to the GLOWLAB Fitness Webflow template.
This document will help you safely edit, customize, and manage your website while preserving animations, CMS functionality, and the Client-First structure.
1. Site Structure
The template includes the following pages and CMS collections.
Main Pages
- Home
- Programs CMS Template
- Blog CMS Template
- Privacy Policy
- Utility Pages
- 404 Page
- Password Page
CMS Collections
Programs
Used for:
- Program pages
- Program cards
- Quick preview navigation
Blog Posts
Used for:
- Blog articles
- Related articles
- Featured content sections
2. Client-First System
This template is built using the Finsweet Client-First framework.
Benefits include:
- clean class naming,
- scalable structure,
- reusable components,
- easier editing and maintenance.
Global Rich Text Class
Use the following class for all text-based pages:
text-rich-text
This class automatically applies:
- typography,
- spacing,
- paragraph styling,
- heading hierarchy,
- list formatting.
Recommended for:
- blog articles,
- privacy policy,
- terms & conditions,
- long-form content.
3. Style Guide & Global Variables
The template includes a complete Style Guide page for editing global styles and components.
Style Guide Location
/utility-pages/style-guide
Use the Style Guide to:
- edit typography,
- update colors,
- preview components,
- manage spacing systems,
- test button states.
Global Variables
Main brand colors:
- Pink
- Midnight Violet
- Dark Violet
Editing global variables automatically updates styles across the entire website.
4.SVG Icon Colors
All SVG icons inside the template inherit their color through the Text Color property inside Webflow.
To change an icon color:
- Select the icon wrapper or parent element.
- Open the Style panel.
- Change the Text Color property.
The SVG icon will automatically inherit the selected color.
This setup simplifies:
- hover effects,
- global color updates,
- combo class styling,
- Client-First workflow consistency.
5. Components
Several sections are built as reusable Webflow Components.
Important Components
- Navigation Bar
- Footer
- Pricing Cards
- Global Popup
- Call To Action
Always review changes before publishing.
6.Hiding the Utility Pages Column in Footer
The Utility Pages column inside the Footer is controlled through Webflow Component Properties.
To hide the entire Utility column:
- Select the Footer component.
- Open the Properties panel on the right side.
- Find the setting:
Show Column 3 (Utility)
- Change the option from:
Visible → Hidden
The Utility Pages column will automatically disappear across the entire website.
⚠️ Because the Footer is a reusable Webflow Component, this change affects all pages where the Footer component is used.
7. Hidden Modal Windows
The template contains hidden modal windows controlled through the GSAP Engine.
Review Modal
Class
.global-popup → .modal_card.is-review
Trigger
.review-button
Support Modal
Class
.global-popup → .modal_card.is-support
Trigger
.support-button
Editing Hidden Modals
To edit modal content:
- Open Navigator
- Find:
.global-popup
- Temporarily change:
Display: None → Display: Flex
- Edit content
- Return:
Display: None
⚠️ Always restore Display: None before publishing.
8. Blog System & Finsweet Attributes
The blog system includes Finsweet Attributes functionality.
Features
- CMS filtering,
- dynamic loading,
- load more functionality,
- CMS search support.
Included Attributes
- CMS Filter
- CMS Load
These systems are already configured and require no additional setup.
9. Forms
The template contains three functional forms:
- Newsletter Form
- Review Form
- Contact Form
Managing Forms
Go to:
Project Settings → Forms
From there you can:
- update notification emails,
- connect integrations,
- manage submissions.
10. SEO & Performance
The template includes:
- Open Graph tags,
- Responsive images,
- Lazy loading,
- Optimized asset structure,
- Social sharing metadata.
Recommended Image Format
Use:
- WEBP images,
- compressed assets,
- optimized thumbnails.
Recommended blog image ratio:
16:9
11. Before Editing the Template
Before making major changes:
- Duplicate the project
- Test edits on the duplicate
- Publish to staging
- Publish to production
This helps prevent animation or CMS issues.
12. Important Notes
Modal Windows
Always return hidden modals to:
Display: None
Components
Editing components affects all pages.
Animations
Avoid removing animation classes unless necessary.
Client-First
Preserve the naming structure for easier maintenance.
13. GSAP Engine Animations
This template uses the new GSAP Engine inside Webflow.
All animations are visually editable directly inside the Designer.
Animation Types
- page load animations,
- scroll-triggered animations,
- hover interactions,
- modal transitions,
- text reveal animations.
Editing Animations
To edit animations:
- Open the Webflow Designer
- Select the animated element
- Open the GSAP panel
- Modify:
- timing,
- easing,
- opacity,
- movement,
- scale,
- triggers.
Important Notes
⚠️ Many animations are connected to specific class names.
If you duplicate or create new elements:
- preserve the original animation classes,
- or reconnect the animation manually inside GSAP Engine.
16. Useful Links
Webflow:
https://webflow.com
Finsweet Client-First:
https://finsweet.com/client-first
GSAP:
https://gsap.com