Earthly

Earthly is a multi-layout sustainability and eco-tech website template designed for green energy companies, ESG consultants, and environmental service firms, featuring four distinct homepage options. It ships for Webflow, Astro Figma, Framer and HTML.

A sustainability website answers to more audiences than a customer. Corporate clients, institutional investors, regulatory bodies, environmental partners, and prospective talent all arrive at your website expecting something specific. Earthly is a multi-layout Webflow template built with that reality in mind. Four complete standalone homepage layouts, twelve individual CMS-powered solution pages, a projects system that carries real environmental impact data, and a variable-powered design system that keeps every layout visually consistent under one brand.

Each layout has one clear audience. All Solutions suit a large sustainability group presenting multiple verticals under one brand. Energy Solutions is built for solar, wind, battery storage and EV charging providers. ESG Consulting is built for advisory firms. Environmental Solutions is built for organizations working in net zero planning, climate risk, ESG compliance and waste management. Use one layout on its own or combine all four. Either way the CMS structure, the component library and the variable system are already unified.

Explore the live preview now.

Earthly at a Glance

Who Should Choose Earthly?

Earthly is built for green energy companies offering solar, wind, battery storage, EV charging or hydropower solutions, ESG consultancies providing strategy, carbon accounting, and sustainability reporting services, environmental service organizations working in net zero planning, climate risk and waste management, large sustainability groups, eco-tech startups and B-Corp certified businesses, environmental nonprofits and research organizations requiring a structured digital platform.

Key Features of Earthly

Four Complete Homepage Layouts: This is where Earthly works differently from every other sustainability template. Each of the four homepage layouts is a complete, standalone website demo with its own homepage, about page and contact page. Use Any One or Combine All Four. No redesign is needed between demos because the variable system does the work.

Twelve Individual CMS-Powered Solution Pages: Each of the twelve solutions in Earthly has its own dedicated inner page organized across three categories. Energy Solutions covers Solar Energy, Wind Energy, Battery Storage and EV Charging. Sustainability Services covers ESG Consulting, Carbon Accounting, ESG Strategy and Sustainability Reporting. Environmental Services covers Net Zero Planning, Climate Risk, ESG Compliance and Waste Management. Each page carries a solution description, methodology section, performance metrics and links to related case studies. Adding a new solution is a CMS entry, not a page rebuild.

CMS Powered Blog With Category System: A full CMS blog with category tagging across Carbon Markets, ESG, Renewable Energy and Climate Action keeps your audience connected and builds organic search authority over time. Adding a post in the editor makes it appear in the blog listing automatically without any changes in the designer.

Featured Projects With Real Environmental Impact Data: The projects section is built for organizations that want to show measurable environmental outcomes rather than describe services. Every project links to a full case study page with detailed impact reporting. Adding a new project is a single CMS entry.

Consultation Widget: Every homepage includes a prominently positioned consultation widget. It sits within the hero section, creating a conversion path at the point of highest engagement without interrupting the scroll.

Variable-Powered Customization Across All Four Layouts: Earthly is built on Webflow’s native variable system. Every color, font, spacing value and border radius across all four homepage layouts, all twelve solution pages and all inner pages is controlled by a single variable library. Updating brand colors means editing the variables once.

GSAP Animations and Micro-Interactions: Scroll-triggered reveals, smooth section transitions, entrance animations and micro-interactions across the UI create a premium browsing experience.

Purpose-Driven Sustainability Design: Earthly uses a refined corporate and modern visual style built around clean typography, structured white space and purposeful imagery that communicates environmental leadership.

Fully Responsive Build: Every page is designed, built and tested across desktop, tablet and mobile. The video hero, solution grids, project cards, consultation widget and blog listings all adapt fluidly at every breakpoint without compromise.

50 Plus Reusable Components: The component library covers navigation, hero sections, service cards, project cards, testimonial carousels, stat counters, process steps, team grids, blog grids, pricing tables, contact forms, newsletter signups and footer variations.

Utility Pages Included: Earthly ships with Style Guide, Instructions, Changelog, Licenses, a custom 404 Error page and a password-protected page. Everything your sustainability brand needs to launch a professional, legally complete, and fully documented website from day one.

Pages Included in Earthly

• Homepage layouts
• Home A – All Solutions (corporate sustainability, full service range)
• Home B – Energy Solutions (solar, wind, battery storage, EV charging)
• Home C – ESG Consulting (strategy, carbon accounting, sustainability reporting)
• Home D – Environmental Solutions (net zero, climate risk, ESG compliance, waste management)
• About pages
• About A – All Solutions
• About B – Energy Solutions
• About C – ESG Consulting
• About D – Environmental Solutions
• Contact pages
• Contact A – All Solutions
• Contact B – Energy Solutions
• Contact C – ESG Consulting
• Contact D – Environmental Solutions
• Static pages
• Solutions listing
• Projects
• Team
• Pricing
• Careers
• Blog
• CMS collection templates
• Blog post template
• Blog category template
• Project case study template
• Solution inner page template
• Utility pages
• Style Guide
• Instructions
• Changelog
• Licenses
• 404 Error
• Password Protected

How to Use Earthly

Setup is straightforward. Here are the steps.

• Purchase Earthly from the widget on this page
• Duplicate it to your Webflow workspace
• Choose the homepage layout that fits your business model
• Update your brand colors through the variable panel in Webflow Designer, the entire template updates instantly
• Add your solutions, blog posts, blog categories and projects to the CMS collections
• Update the video hero, consultation widget and process section with your own content and calls to action
• Preview across desktop, tablet and mobile, then publish

What a Sustainability Website Has to Prove

Sustainability buyers check providers more closely than most B2B categories. Every claim on your site will be read by a procurement team, a compliance officer, or a board member who has seen greenwashing before and wants proof of real results.

The homepage must build trust in the first scroll. Earthly does this with a video hero that shows environmental scale, a partner logo strip that confirms market presence, and a mission section with real numbers like team size, countries, years active, and awards.

The solutions section must show technical depth. Twelve solution pages, each with its own method, performance metrics, and project references, prove real expertise in each service area.

The projects section must show measurable impact. Annual energy output in MWh and carbon reduction in tCO2 are the metrics buyers ask for. Every project card shows these figures with location and category data, turning the portfolio into credible proof.

The consultation widget must make outreach easy. Because sustainability buying starts with a discovery talk, the widget on every homepage gives the right buyer a simple way to take the first step without visiting a contact page.

Frequently Asked Questions

Can I use just one of the four layouts without the others?

Yes. Each layout is a complete, standalone website demo. Launch with any single layout and the template works as a full site. The other layouts remain available inside the template whenever you need them.

Can I combine multiple layouts under one domain?

Yes. All four layouts share the same design system, variable library and CMS structure. A sustainability group offering energy, ESG and environmental services can use multiple layouts together with no visual inconsistency between them.

How are solutions organized?

As a CMS collection grouped across three categories: Energy Solutions, Sustainability Services, and Environmental Services, each solution has its own dedicated inner page. Adding a new solution is a single CMS entry.

How are projects organized?

As a CMS collection with fields for project name, location, category, annual energy output and carbon reduction figures. Each project links to a full case study page.

Are the GSAP animations editable?

Yes. All animations are built inside Webflow using GSAP and Webflow Interactions. They can be adjusted, disabled or extended inside Webflow Designer without any external tools or third-party libraries.

Is Earthly suitable for a non-sustainability brand?

No. Earthly is purpose-built for sustainability, green energy and environmental organizations. The design language, the section structure, the CMS fields and the content hierarchy were all designed around how sustainability buyers evaluate providers. If you need a general corporate or business template, other TNCFlow templates are better suited to that purpose.

What Webflow plan do I need to use Earthly?

Because Earthly uses Webflow CMS for blog posts, blog categories, projects and solutions, you will need at least a Webflow CMS site plan to use all features. The template works on a Basic plan without the CMS collections, but the blog, projects and solutions functionality requires CMS access.

Is the Figma file included with the template?

No. The Figma file is a separate product, and you can buy it on its own from the purchase widget on this page. You do not need to message us for it after buying the Webflow or HTML build.

When you choose Earthly, you get support direct from the TNCFlow team. So if a section will not behave, just ask us.

Check out other Webflow templates by TNCFlow.