Guides

Solvane is a Webflow template built for consulting and professional services brands. It includes multiple homepage and inner page layouts, five CMS collections (Services, Case Studies, Articles, Team, and Legal), reusable components, and a variable-driven design system.

Use the pages in this template folder as reference: the Style Guide covers typography, colors, buttons, and forms; Licenses lists image, font, and icon sources.

This guide walks through the basics so you can customize the template without breaking the layout or motion system.

Follow these steps to set up the template in your workspace:

1. Clone the template into your Webflow account and publish once to confirm the site works.
2. Open the Style Guide to review typography, colors, buttons, and forms before making changes.
3. Choose a homepage — Home, Home B, or Home C — and set it as your site homepage in Page Settings.
4. Update brand colors in the Variables panel (Brand Colors collection). Changes flow across every page.
5. Replace placeholder copy, logos, and images on your key pages.

CMS content — services, case studies, articles, team members, and legal pages — is managed in the Collections panel. Edit collection items there; template pages pull content in automatically.

Solvane uses custom attributes for scroll-based motion, powered by GSAP. Smooth scrolling is handled by Lenis.

Smooth scroll (Lenis)

Lenis runs site-wide through two registered scripts in Site settings → Custom code → Scripts:

• LenisSmoothScroll — loads the Lenis library
• LenisInit — initializes Lenis and smooths anchor-link navigation

To change scroll feel, open LenisInit and edit the options inside new Lenis({ ... }):

• lerp — smoothing strength. Default is 0.1. Lower feels snappier; higher feels heavier. Try 0.05 to 0.2.
• smoothWheel — set to true for smooth mouse-wheel scrolling, or false for native scrolling.
• autoRaf — leave as true so Lenis runs its animation loop automatically.

Publish after saving script changes. Anchor links (sidebar jumps, hash links) are routed through lenis.scrollTo() so in-page navigation stays smooth.

To disable smooth scroll, set smoothWheel to false in LenisInit, or remove both Lenis scripts from Site settings.

animation="scroll"

Add this to any element you want to reveal on scroll. Common targets include headings, paragraphs, cards, badges, and image wrappers. The attribute is already applied across most pages — copy the pattern when building new sections.

animate-parallax

Add this to featured images, cards, and large visual elements for scroll-linked depth. Set the value to control intensity:

• subtle — Light movement for testimonial cards and secondary images. Used as the default across the template.
• medium — Noticeable depth for hero images, case study photos, and featured media.
• strong — Pronounced parallax for full-width visuals and statement sections. Use sparingly on one or two elements per page.

You can combine both attributes on the same element — for example, a hero image with animation="scroll" and animate-parallax="medium".

Best practices

• Carry attributes over when duplicating sections to keep motion consistent.
• Animate the container, not nested children inside an already-animated parent.
• Prefer subtle parallax on cards in grids; reserve medium and strong for standalone visuals.

The Webflow MCP server connects AI agents directly to your Webflow projects. Describe changes in natural language to update CMS content, edit pages, manage assets, and modify the design system — without writing API calls yourself.

Agents work within your existing Webflow permissions. Changes are recorded in the site activity log.

Before you start

• A Webflow account with access to the site you want to edit
• For Designer-specific tasks: open the site in Webflow Designer and launch the MCP Bridge App from the Apps panel

Cursor

Recommended — use the Webflow plugin

1. Install the Webflow plugin from the Cursor Marketplace
2. Click Add to Cursor and authorize your Webflow account
3. Select the sites and Workspaces to connect

Manual setup: Add a webflow entry with URL https://mcp.webflow.com/mcp to your project .cursor/mcp.json file. Then go to Settings → MCP & Integrations and click Connect to complete OAuth. See the Cursor setup guide for details.

Claude Code

1. Install Claude Code and verify the installation
2. Run claude mcp add --transport http webflow https://mcp.webflow.com/mcp
3. Start Claude Code and run /mcp to authenticate via OAuth
4. Select the Webflow sites to authorize and install the MCP Bridge App

To scope configuration to a single project folder, add the -s project flag when running the add command. See the Claude Code setup guide.

Codex

OpenAI Codex uses the same remote MCP server. Add a [mcp_servers.webflow] entry with url = "https://mcp.webflow.com/mcp" to ~/.codex/config.toml or your project .codex/config.toml file.

Then run codex mcp login webflow to complete OAuth. Use /mcp in the Codex TUI to confirm the server is connected. See the Codex MCP documentation.

What you can do with this template

• Update CMS items — services, case studies, articles, team, and legal content
• Add animation attributes, fix SEO metadata, and rename assets in bulk
• Audit pages for missing alt text, broken links, and incomplete meta descriptions
• Edit elements, styles, and variables through natural language prompts

Limitations

• Webflow Interactions (IX3) cannot be created or edited via MCP
• Some Designer features require the Bridge App to be open
• Each authorization connects to one workspace — re-authenticate to switch

Full documentation: developers.webflow.com/mcp