Since I’m still learning Webflow, it would be great to hear some tips from you guys. I’m having a hard time trying to do something “simple”.
Our previous designer created a landing page. I want to create another page based on that page with some modifications. However, once I duplicate that page and start to make some changes, those changes affect the original page and other pages on the website. I think it’s related to the classes that are shared among some pages, right? If that’s the case, how do I proceed? Because I want to keep the structure and some design elements from the original page, so I don’t have to redo everything.
Hi @Jonny, It doesn’t have to be.Just like any other cases when working with css/classes. Make sure you’re not modifying the properties of a class if you don’t want it to affect the other elements sharing it.
One way to avoid this is to duplicate the class and give it a unique name. Work off of that instead. Else the other option is to just add a modifier class, i.e. “Heading M” to “Heading M Modified”
Hi @dennyhartanto thanks for your quick answer. Let me see if I got it right. For example. If I have a page with those classes, which are shared with all my pages.
And I want to use that page with some modifications, should I create another class like “header-2”?
But I noticed that those properties came from the original class “header”, with one difference. Same values are in glowed in blue, awhile in the “header-2”, all values are glowed in orange.
Properties that are in blue are applied by the latest (most-right) class, in this case header-2. That means that you already have header-2 created previously.
My suggestion here is that you can add a more descriptive class, e.g. Container, Header, Contact Us
In your case, I would probably rebuild the element.
Only use combo classes when you know for sure the main class needs to be consistent throughout your site.
When I want to leverage styling from one element, knowing that I’m going to modify it for another purpose, I used the “duplicate class” feature. See screengrab.