New report: How growing companies lose momentum. Read

Contact

Get in touch

Help

Probably less confusing than your utility provider

Overview

Template Variables

CMS Structure

Customization

1. Overview

This template is built entirely with native Framer features — no custom code, no external libraries, no scripts. Everything is editable directly in the Framer Designer. The template includes multiple page layouts, CMS-driven content, scroll-based navigation switching, component variants, and a full responsive system.

What's included:

3 homepage layouts (Home A, B, C)
3 blog layouts
3 contact layouts
CMS collections for Solutions, Stories, Blog, People, and Testimonials
About page
Why Switch page
Testimonials page
Coming soon page
404 page
FAQ pag
Privacy Policy page

What's included:

3 homepage layouts (Home A, B, C)
3 blog layouts
3 contact layouts
CMS collections for Solutions, Stories, Blog, People, and Testimonials
About page
Why Switch page
Testimonials page
Coming soon page
404 page
FAQ pag
Privacy Policy page

2. Template Variables

The template uses a Layout Template to maintain consistent site-wide elements. The Layout Template contains the navigation, marketing banner, footer, and CTA section — these appear on every page that uses this template without needing to edit each page individually. When you update something in the Layout Template, every page using it updates automatically.

The content slot inside the Layout Template defines where each page's unique content appears.

Layout Template
Selects which Layout Template to use. The default is "Main" which includes navigation, banner, CTA section, and footer.

Layout Template
Selects which Layout Template to use. The default is "Main" which includes navigation, banner, CTA section, and footer.

Default Desktop Navigation
Sets the navigation variant on page load. Options: Desktop/Light, Desktop/Dark. Choose based on whether the first section of your page has a light or dark background.

Default Desktop Navigation
Sets the navigation variant on page load. Options: Desktop/Light, Desktop/Dark. Choose based on whether the first section of your page has a light or dark background.

Default Mobile Navigation
Same for mobile. Options: Mobile/Light/Closed, Mobile/Dark/Closed.

Default Mobile Navigation
Same for mobile. Options: Mobile/Light/Closed, Mobile/Dark/Closed.

CTA Version
Switches between different versions of the call-to-action section that appears above the footer. Two designs available.

CTA Version
Switches between different versions of the call-to-action section that appears above the footer. Two designs available.

Mobile CTA Version
Same for the mobile breakpoint.

Mobile CTA Version
Same for the mobile breakpoint.

Change Nav to Dark / Light (1–3)
These control the navigation color switching on scroll. The navigation component has a Scroll Variant effect that listens for scroll sections. When a scroll section enters the viewport, the navigation switches to the assigned variant.

Change Nav to Dark / Light (1–3)
These control the navigation color switching on scroll. The navigation component has a Scroll Variant effect that listens for scroll sections. When a scroll section enters the viewport, the navigation switches to the assigned variant.

How to set up nav color switching:

Select a section on your page where the nav theme should change.

In the section's properties, assign a unique Scroll Section name (e.g. "dark-01").

In the page's Template settings, assign that name to the matching slot (e.g. Change Nav to Dark 1: dark-01).

The navigation will switch to the dark variant when that section scrolls into view.

3. CMS Structure

The template includes 5 CMS collections. All field names follow the order content appears on the page.

Solutions (4 items)
Used for service pages — Solar Systems, EV Charging, Battery Storage, Heat Pumps. Each solution has a main title, subtitle, hero image, "Why choose" section content, problem points, and a Setup Type field used to match related Stories on the page.

Solutions (4 items)
Used for service pages — Solar Systems, EV Charging, Battery Storage, Heat Pumps. Each solution has a main title, subtitle, hero image, "Why choose" section content, problem points, and a Setup Type field used to match related Stories on the page.

Stories (5 items)
Customer case studies with full article content. Each story has 6 article sections (#1–#6), key results with labels/values/differences, client details, and a within-article image. The Featured toggle controls which story appears in the hero on the stories listing page. Stories appear on Solution pages by matching Setup Option to the Solution's Setup Type.

Stories (5 items)
Customer case studies with full article content. Each story has 6 article sections (#1–#6), key results with labels/values/differences, client details, and a within-article image. The Featured toggle controls which story appears in the hero on the stories listing page. Stories appear on Solution pages by matching Setup Option to the Solution's Setup Type.

Blog (11 items)
Articles organized by Article Category (Home Energy, Energy Costs, Grid Reliability). Each article has 6 content sections with titles and paragraphs, a within-article image with caption, and Featured/Favourite Story toggles for listing page behavior. The Date field controls sorting.

Blog (11 items)
Articles organized by Article Category (Home Energy, Energy Costs, Grid Reliability). Each article has 6 content sections with titles and paragraphs, a within-article image with caption, and Featured/Favourite Story toggles for listing page behavior. The Date field controls sorting.

People (6 items)
Team member profiles with portrait, name, position, description, and social links (LinkedIn, X, YouTube).

People (6 items)
Team member profiles with portrait, name, position, description, and social links (LinkedIn, X, YouTube).

Testimonials (12 items)
Simple collection with rating, quote, name, and localization. Used on the testimonials page and in various sections across the site.

Testimonials (12 items)
Simple collection with rating, quote, name, and localization. Used on the testimonials page and in various sections across the site.

Managing content

All collections are designed to be self-explanatory — field names follow the order content appears on the page, so adding, editing, or replacing items is straightforward. When adding a new item, duplicating an existing one is the fastest way to preserve the correct structure. If a field connects to another collection (like Stories appearing on Solution pages), matching values need to be exact, including capitalization.

4. Customization

Colors
All colors are defined as Framer color styles. To change the color scheme, edit the color styles in the Styles panel — every element referencing that style updates automatically across the entire site. Do not override colors with hard-coded hex values on individual elements, as they won't update globally.

Colors
All colors are defined as Framer color styles. To change the color scheme, edit the color styles in the Styles panel — every element referencing that style updates automatically across the entire site. Do not override colors with hard-coded hex values on individual elements, as they won't update globally.

Typography
Fonts and text styles are managed through Framer's text styles. To change fonts, update the text styles in the Styles panel. All headings, body text, and labels reference these styles, so a single change propagates everywhere.

Typography
Fonts and text styles are managed through Framer's text styles. To change fonts, update the text styles in the Styles panel. All headings, body text, and labels reference these styles, so a single change propagates everywhere.

Logo
The logo is an SVG mask - replace the SVG file in both the navigation and footer components to update it across the site.

Logo
The logo is an SVG mask - replace the SVG file in both the navigation and footer components to update it across the site.

Images
Replace images by selecting the image element and uploading a new file in the properties panel. For CMS-connected images, update them directly in the CMS collection.

Images
Replace images by selecting the image element and uploading a new file in the properties panel. For CMS-connected images, update them directly in the CMS collection.

Sections
Every section on every page can be removed independently — no section depends on another. To remove a section, select it and delete it. If the section had a Scroll Section name assigned for navigation switching, remove the corresponding reference from the Template Variables panel.

Sections
Every section on every page can be removed independently — no section depends on another. To remove a section, select it and delete it. If the section had a Scroll Section name assigned for navigation switching, remove the corresponding reference from the Template Variables panel.

THE BAILEY HART BRIEF