Funnel Styling
The Styling System lets you define your brand and design once and apply it across your entire funnel.
All settings in the Styling System are global. This means any configuration you make here automatically applies to every page and component in the funnel. When you create new pages or add new components, they will use the configured colors, fonts, styles, animations, and other visual settings by default.
Global styling does not lock you into fixed values. Every page and most components allow individual overrides, so you can customize specific pages or components when needed.
The Styling System is divided into four sections: Brand, Fonts, Style, and Colors.
Brand
The Brand page is used to manage shared brand assets.
Here you can upload:
A logo
A favicon
The logo is uploaded once and can then be toggled on or off per page without re-uploading it. Any component that displays a logo will automatically use the logo configured on this page.
Fonts
The Fonts page allows you to upload and manage custom fonts for your funnel.
Supported font formats:
TTF
OTF
WOFF
Fonts are organized into font families. A font family is a collection of related fonts with different weights and styles.
When uploading fonts, Zellify automatically detects and assigns font weights. After creating a font family, you can assign it as the Primary or Secondary font. You can use different font families for Primary and Secondary text.
Once configured, all pages and components in the funnel will use these fonts by default.
Style
The Style page controls global visual behavior and layout rules for the funnel.
From this page you can configure:
Global border radius
Page transition animations
The global border radius applies to all pages and components. Individual components can override this setting if a different radius is needed.
Page transitions work the same way. The transition configured here is used as the default for all pages, but each page can define its own transition if required.
Colors
The Colors page is used to define your funnel’s color system.
Zellify provides a set of predefined color roles that components use by default. On this page, you assign color values to each role, and those values are then applied across all pages and components.
Colors can still be overridden on individual pages or components if needed.
Why the Styling System Exists
The Styling System is designed to speed up funnel creation and keep your design consistent.
You configure your brand, fonts, styles, and colors once, then focus on building pages. Every new page and component automatically follows the defined design system, while still allowing full control when customization is required.
Last updated