How I Built Noctis - A Premium Webflow Template for Digital Agencies

We analyzed more than 90 Webflow templates listed in the Portfolio & Agency Website Templates category on Webflow Marketplace.

Only 10 of them had a well-structured CMS system and were built using the Finsweet Client-First 2.1 methodology. Only 3 templates included a complete set of features and content elements needed for a detailed agency website.

Among the templates we analyzed:

• 75 templates were limited to only one CMS collection for projects.
• 57 templates did not have a complete CMS structure for their services.
• Many templates had limited fields for displaying tags, skills, descriptions, and other service information.

We found that this makes it harder to create a detailed agency website and properly present all of the services, projects, and expertise of a digital agency.

Based on this research, we decided to create Noctis, a premium Webflow template designed for digital agencies, startups, and portfolio websites.

Our goal was to create a template that offers more flexibility through its sections, CMS collections, and content structure.

We designed every page, planned the structure of each section, created the required CMS collections, and developed a complete Webflow template that is now available on Webflow Marketplace.

Noctis includes:

• 3 Home Page versions
• 3 CMS collections: Services, Projects, and Blog Posts
• About Us
• Services
• Projects
• Blog
• Contact
• 5 technical pages: 404 Error Page, Password Protected, Style Guide, License, and Changelog

The main idea was to provide a wide range of useful sections for presenting an agency's services, portfolio, projects, experience, and capabilities.

Because only 3 of the 90 analyzed templates had a more complete set of features for presenting agency content, we designed Noctis to provide a stronger foundation for showcasing services, portfolio projects, agency advantages, awards, and expertise.

This gives agencies more flexibility when building a professional website and adapting the template to their own content and business needs.

Noctis is fully built using the Finsweet Client-First 2.1 methodology.

Each page has its own clear structure and a consistent heading hierarchy. Every section uses clear class names, making it easier to understand which content belongs to each section.

The template is easy to edit and extend. You can create new sections or expand existing ones without rebuilding the entire structure.

Based on our research, this type of structured development system is missing from many Webflow agency templates.

You can learn more about the Finsweet Client-First 2.1 methodology and how we build Webflow websites in our detailed guide.

Unlike 87 of the 90 templates we analyzed, Noctis includes complete CMS collections for services and projects.

These collections provide dedicated fields for important content such as tags, skills, descriptions, and project information. The CMS structure can also be edited and expanded without relying on custom code.

The template includes:

• 3 versions of the Services CMS collection: services-v1_cms, services-v2_cms, services-v3_cms
• 3 Hero section versions: hero_component, hero-v2_component, hero-v3_component
• 3 Portfolio section versions: portfolio-v1_component, portfolio-v2_component, portfolio-v3_component
• 4 reusable Components: Header, Footer, Team, and Testimonials
• 3 Testimonials section versions: testimonials-v1_component, testimonials-v2_component, testimonials-v3_component
• 2 FAQ section versions: faq_component, faq-v2_component
• 30+ additional content sections

We created 2 or 3 versions of the most important sections so users can test different layouts and choose the version that works best for their content.

This can save time during customization because you do not need to design every section from scratch.

You can also combine 5–7 sections from the template to create your own homepage structure based on the needs of your agency.

Noctis includes 5 main Webflow Variables that make it easier to customize the design system from one place.

These Variables control:

• Colors
• Typography
• Border radius
• Margin and padding
• Gaps

This makes it easier to adapt the Webflow template to an existing brand identity.

Typography has its own settings for different breakpoints:

• 1920px
• 1440px
• Base
• Tablet
• Mobile L
• Mobile

You can customize the following properties for H1–H6 headings and body text:

• Font Size
• Font Family
• Line Height
• Font Weight
• Color

For example, you can change the padding from 3rem at the 1440px breakpoint while keeping a different value at another breakpoint.

This level of control makes it easier to experiment with typography and responsive layouts without manually editing every section.

We also use different border-radius Variables:

• Radius Small
• Radius Medium
• Radius Large

For example, you can change Radius Medium from 2.5rem to 1rem and update the appearance of multiple elements across the website.

I explained why we use a complete Variables system and how it helps with website scalability in this case study: How I Built Altuss — A Luxury Real Estate Webflow Template.

We analyzed 30 Webflow Marketplace templates with different approaches to Services sections. Most of them had good visual presentation, but 25 focused heavily on animations for content and images.

In some cases, the animations made the content harder to read and edit. This was especially noticeable on mobile devices.

For Noctis, we decided to prioritize content readability and customization.

Instead of using heavy animations, we use simple hover interactions where they add value without distracting from the content.

All three Services layouts are designed to display the most important information clearly:

• Title
• Description
• Button
• Skills
• Images

The layouts support different numbers of images:

• Version 1 supports 1 image.
• Version 2 supports 3 images.
• Version 3 supports 1 image.
• All versions are designed to keep the content readable across different screen sizes.

You can choose the layout that best fits your content and test different versions before launching the website.

The Services CMS collection includes 13 fields:

• Title
• Description
• Heading H1
• Summary Text
• Gallery Image Left
• Gallery Image Right
• Main Content
• Main Wide Image
• Intro Label
• Intro Description
• Link Text for Card
• Service Skill
• Service Images

All of this information can be managed from the CMS and displayed dynamically on individual service pages.

For better Webflow SEO, we also created separate CMS fields for the page Title and Meta Description.

This allows you to use a different SEO Title, Meta Description, and H1 instead of repeating the same text across the page.

We analyzed 20 Webflow Marketplace templates with different approaches to Projects and Portfolio sections.

Most of them used very similar layouts. For Noctis, we wanted to create a more flexible structure that could display more information about each project.

Each project can include up to 3 images and additional content for a detailed case study. We also added the option to include up to 6 FAQ questions and 6 answers for each project.

Each project FAQ section can also have its own H2 heading and description.

This Projects CMS structure is designed for detailed project descriptions, SEO optimization, structured content, and better content discoverability.

Each project can also include:

• Client
• Timeline
• Budget
• Industry
• Website

This makes it possible to create detailed project pages that clearly explain the work, client, industry, timeline, and other important project information.

Noctis includes a dedicated Blog Posts CMS collection for publishing articles, case studies, project updates, and company news.

We also created a separate Blog Categories CMS collection to organize content into different topics.

Each category has its own dynamic page where related blog posts are displayed.

For every category, you can manage:

• SEO Title
• Meta Description
• H1
• Open Graph Image
• 6 FAQ Questions
• 6 FAQ Answers

This structure makes it easier to organize content into topic clusters and create dedicated landing pages for different subjects.

It also provides a scalable structure for future SEO growth:

• Content organized into topic clusters
• Individual SEO settings for each category
• Dedicated pages targeting specific search topics
• FAQ content on category pages
• Rich Text fields for structured answers, lists, quotes, links, and text formatting

This type of content structure creates a stronger technical foundation for SEO and AI content discoverability.

Based on our research, we created Noctis — a premium Webflow template for digital agencies with a flexible structure for future customization, content management, SEO, and website growth.

The template combines:

• Finsweet Client-First 2.1
• Flexible Webflow CMS Collections
• Multiple layout options
• Webflow Variables
• Reusable Components
• Responsive layouts
• Structured project and service pages
• Blog Categories
• FAQ sections
• SEO-ready content fields

The goal was to create more than just a visual Webflow agency template.

Noctis is designed as a flexible foundation for digital agencies, startups, creative teams, and portfolio websites that need a professional website structure they can customize and scale over time.

The listed template price is $129, but a discount is currently applied at checkout, bringing the price to $79.