Why do design changes made on one page in Webflow's "lander" template affect other pages as well?
TL;DR
- Design changes may affect other pages due to shared classes, symbols, or global styles.
- Use unique or combo classes, unlink symbols before editing, and be cautious with global tag styles to limit changes to specific pages.
Design changes made on one page of Webflow's "lander" template may affect other pages due to shared classes or symbols. Webflow uses a style system where classes and components are reusable across pages.
1. Shared Classes Across Elements
- When you apply a class to an element, any styling changes you make to that class (like margin, font, or color) will automatically apply to all elements using that class on other pages.
- To avoid this, duplicate the class by creating a new class name or using a combo class (e.g.,
hero-text blueinstead of justhero-text).
2. Symbols (Reusable Components)
- If you're using Symbols (now part of Webflow’s Components system), edits made to content or structure within the symbol will apply to all instances site-wide.
- If you want to make content-specific tweaks, "Unlink" the symbol first by right-clicking and selecting Unlink from Symbol, creating an editable, unique instance.
3. Style Inheritance
- Webflow uses a cascade-based styling system, so styles assigned to a parent element or tag (like Body, All H1 Headings, or Sections) can cascade down to child elements on every page.
- Be aware when changing "All" styles (e.g., "All Links") as this affects every matching element site-wide.
4. Global Tags and Classes
- Global tags like Body (All Pages) or H1 (All H1 Headings) apply styles site-wide unless overridden.
- Check the Selector field in the Style panel to confirm whether you're editing a tag, class, or combo class.
5. Navbar and Footer Components
- Many templates use a shared Navbar or Footer component across all pages.
- If you edit their layout or content, those changes will appear wherever the same component is used.
Summary
Design changes on one page affect others because elements often share classes, symbols, or global styles. To prevent this, use unique classes, unlink symbols, and avoid editing global tag styles unless intentionally applying site-wide changes.
