I purchased the “lander” template and created two pages, I am noticing if I make design changes, saying “padding” changes on one page, the same change is happening on other pages as though their tide together?
if I make changes on this page: https://www.insuremymedicare.com/medicare-supplement-plans/cigna
So…if an element has a class and you give it padding - any other element which shares that class will also change. This is really useful for let’s say styling a button, or ensuring all your H1 headings share styles.
You might however want to style them separately - in which case they will either need a different class name, or you can also add combo classes, or duplicate classes.
To explain those a little more:
Combo - creates it’s own styles, but if the original class is changed, it inherits the changes. (Eg your Buttons have a base original class of ‘button’, and then also a combo class of ‘hero button’ and in the case of the blue button another ‘2’.
Duplicate - inherits the original styles, but once duplicated is then ‘free’ of the original and keeps any further styling you give it, to itself.
More details on it here: Classes | Webflow University - in particular the final paragraph with some clarity between combo or duplicate.
So after watching the video and reading the other link you provided, it seems there isn’t a way to quick duplicate pages or templates without worrying about the class?
I’m fairly new and my desired pages will be pretty simple, I had the idea of making one page, then turning around and duplicating it making minor changes to each one.
Is there an option for “quick” duplicating of pages without worrying about which classes will be effected?
“Duplicate - inherits the original styles, but once duplicated is then ‘free’ of the original and keeps any further styling you give it, to itself.”
Maybe I’m having this problem because I am still working on the original pages that came in the theme, if I now duplicate one of them, the changes should stick and not effect each other anymore?
Duplicating a page and duplicating a class are two different things…
So if you duplicate a page, it is literally a carbon copy of the original, you then have two pages with the exact same class names on each. (the class names need to be manually duplicated/replaced in order to give them their own style ‘freedom’)
To make those minor changes you described, let’s use a button as an example and two use cases:
Combo: (adding another class on top/after the original one) - many sites will want to keep button sizing, padding, text consistent across the site - so adding a combo class means keeping a live link to the original:
Page 1 Home - ‘button’ has blue background and white text, padding of 5px
Page 2 About - ‘button’ class brings those styles to page 2, but adding a combo means you could change to a red background without it affecting the original button. However make a change on page 1’s original button to padding 10px and it will feed through to page 2’s button.
Duplicate: Another way to look at this is that it takes a snapshot of the styles so far, but at the point you duplicate class, you can then change it and the original won’t be affected - it’s no longer a ‘live’ link.
Page 1 Home - ‘button’ has blue background and white text, padding of 5px
Page 2 About - duplicating the ‘button’ class keeps those styles, but then frees the class from the original so you can make any changes you like thereafter - eg doubling the size of the button, boldening the text etc.
Essentially you could use either combo or duplicating classes for your site with minor changes:
Combo is going to be better if there is a chance you want to reset some original styles - so you decide later you want 8px padding on your buttons across the site - instead of changing each one - you edit the original ‘button’ only class.
Duplicate is perhaps better for other elements where you want some styling to be inherited but each duplicate will have it’s own unique styles going forward. You’ll need to change each one though…
- Let us know when you have your first page styled and know which specific elements you would want to change on new pages and we can guide you through.
Or if those are pre-built pages - again let us know which specific things are changing on each page, that you want to ‘free-up’ or behave independantly and we can help you with the best approach
Okay so I understand how this works now that have been working with it.
I do a have another question, do I have to create a differant combo class on each page that is sharing an element?
Like page 1 would be “combo class 1” and then page 2 would “combo class 2” ? This would be on a “section”, so have 2 different “section” names on each page, if that makes sense lol.
If it’s just actual text changes - no problem, literally just change the text and the element can be shared - no need to combo it. If you were changing a font or a font weight (styling) that’s where combo comes into play.
It’s where you want to add styling on top, that a combo would help - inheriting from the original, but given it’s own unique features, without altering the original.
I’ve used the example previously about a button - so those green buttons, say on this third page you want to change the hover colour - add a combo class - and the hover will only affect that instance of the button, if you then changed font it would’nt change the previous original buttons…
So - no need to make a combo for each duplicate page - just those elements where you want to change the ‘style’ settings as opposed to the content.
but if I go in and duplicate the page to create a 3rd state page i can’t seem to figure that part out. How do I give each page its own unique image in the “Browser Block” ?
I seem to be creating combo classes where they may not be needed or vise versa.
As it’s a background image, you will need to use different class names - either ‘duplicating’ the class and adding TX or MI to it, or adding a ‘combo’ of TX or MI.
Both of those will give you the option to change the background image without affecting previous pages.
Orrrrr…(maybe another time!) you could just use an ‘image’ element instead of the block!
If you did that, give the image a class like ‘tab image’ and set dimensions/ styles etc
Then any time you drop in an image give it the ‘tab image’ class and it will match dimensions, styles, but will keep the actual image you have used.
- Let us know when you have your first page styled and know which specific elements you would want to change on new pages and we can guide you through.