Why do design changes made on one page in Webflow's "lander" template affect other pages as well?
TL;DR
- Design changes apply across pages due to shared classes, symbols, and global styles.
- Use unique or combo classes and detach symbols to localize edits and avoid unintended global changes.
When using the "lander" template or any Webflow template, design changes on one page can affect others due to shared classes and symbols.
1. Shared CSS Classes
- Webflow uses global CSS classes across the entire project. If you modify a class (e.g.,
.heading-large), the change applies to all elements using that class on any page. - This means if a text element on Page A and Page B both use
.hero-title, styling changes (such as font size or color) on Page A will reflect on Page B.
2. Symbols
- Symbols are reusable components (e.g., navbars, footers) that remain synced across all pages.
- Edits made inside a symbol (like changing a logo or link) will update all instances of that symbol site-wide.
3. Inheriting Base Styles
- Elements often inherit styles from parent tags or base tag selectors, like Body (All Pages) or H1 (All H1 Headings).
- Changing base styles will cascade those changes globally unless individually overridden.
4. Instance vs. Class Confusion
- If you duplicate a section or page, it retains the same classes; modifying the duplicated version will impact the original unless you create a new class (or combo class).
Summary
Design changes in the "lander" template affect multiple pages because of shared classes, symbols, and global styles. To localize changes, use unique classes or combo classes and detach symbols when needed.