Skip to main content

​
Add the Pagifye Style Guide to Webflow

Before adding any components, clone the Webflow Style Guide from webflow or the pagifye component page into your project. This includes:
  • Typography styles
  • Button styles
  • Spacing system
  • Color, schema & variable settings
  • Base layout structure
This ensures that every component you paste will use the same class names and design rules.

​
Install the Pagifye Sync Extension

To keep everything clean and connected, we recommend installing the Pagifye Sync Extension for your browser. The link to the Pagifye Sync is here. This tool helps:
  • Auto-connect class names
  • Avoid class duplication
  • Merge styles smoothly when pasting multiple components
It’s especially useful when building large projects with multiple pages.

​
Copy a Webflow Component

In the Pagifye Component Library:
  1. Find the section you want to use
  2. Click the Copy Webflow button
  3. The section is copied directly to your clipboard
You can choose from Light, Gray, Dark, or Wireframe versions depending on your style.

​
Paste and Adjust in Webflow

  1. Open your Webflow project
  2. Paste the copied section into your page
The layout, styles, and class names will align with the style guide you imported. You can now update the content, add animations, or rearrange sections without breaking the design system.

​
Reuse and Build Faster

Each component is built to be modular. You can:
  • Duplicate sections across pages
  • Mix components from different categories
  • Maintain a clean class structure throughout the project
That’s It! You’re now ready to build with Pagifye + Webflow. All components are designed to be:
  • Flexible
  • Scalable
  • Easy to integrate