Why do design changes made on one page in Webflow's "lander" template affect other pages as well?
In Webflow, when you make design changes on one page in the "lander" template, it can affect other pages as well. This is because the "lander" template is a single master template that is used as a blueprint for all pages within your website.
When you create a new page based on the "lander" template, it inherits all the styles, layout, and structure from the master template. This means that any changes you make to the master template will automatically propagate to all pages created from that template.
While this inheritance feature can be a time-saver, it can also cause unintended consequences if you're not careful. Here are a few reasons why design changes on one page in the "lander" template affect other pages:
1. Shared classes: Webflow utilizes a class-based system for styling elements. When you assign a class to an element, any changes you make to that class will be applied to all instances of that class across your website. So if you modify a class that is used on multiple pages, the changes will be reflected on all those pages.
2. Global styles: Webflow allows you to define global styles that affect the entire website. For example, if you change the font size or color of a global text style, it will be updated everywhere that style is used, including on other pages.
3. Linked assets: If you have linked assets, such as images or external CSS files, those assets will be shared across all pages. So if you make changes to an asset, it will be reflected on every page where that asset is used.
To avoid unintended changes, it's important to be mindful of these factors when making design modifications in Webflow. Here are some best practices:
a. Use unique classes: If you want to make changes to a specific element on one page without affecting others, give it a unique class. This way, the changes will only be applied to that particular element and not propagate to other pages.
b. Override styles: If you want to modify a shared class on a specific page without affecting other pages, you can override its styles. To do this, select the element, go to the Style panel, and make the desired changes. Webflow will create a new, unique class for that element, which won't affect the original shared class.
c. Use symbols carefully: In Webflow, symbols are reusable elements that can be placed on multiple pages. If you make changes to a symbol, it will be updated across all instances of that symbol on all pages. So be cautious when using symbols if you want to maintain different designs on different pages.
By understanding these concepts and employing best practices, you can have more control over the design changes you make in Webflow and ensure that modifications are applied only where intended.