Work with Sections effectively
To get the smoothest experience using Sections, keep these tips in mind.
1. If you’re building a full page, stick to one collection
Mixing Evermind + Hollow + Forerunner works visually, but class naming and overrides will multiply quickly.
Staying within one collection keeps your project cleaner and more consistent.
2. When pasting into an existing project
If your project already includes classes with the same names, Webflow will generate variations such as heading-2 or section-3.
This is normal and expected.
The good part?
You can clean all of this extremely quickly while preserving the exact structure and design of the Section.
3. Class cleaning for users who want a clean system
If your project has global typography, spacing, containers, or button classes, here’s how to integrate Sections smoothly:
- Replace the Section’s main .section or .container classes with your own global equivalents
- Remove heading classes so they fall back to your project’s global typography
- Remove text classes to let your default body style take over
- Replace the button class with your global button
- Keep all structural classes (grids, wrappers, content blocks) because they shape the visual layout
- Optionally rename them to match your naming system
This gives you a clean, scalable result while still using the visual layout of the Section.
4. Use xSync to avoid unnecessary duplications
xSync significantly reduces duplicated classes when pasting, especially when working with multiple sections or frequently updating elements.
5. Remember: Sections are not a framework
They don’t enforce consistency, naming conventions, or system architecture.
They’re designed for speed, convenience, and visual quality.
If you need a scalable system powered by variables, use Skeletons.
