I dont really understand. If i make a symbol of the big blue background section,
isnt a problem because it has a huge height for one page, but needs a small height for another page.
Editing a symbol causes it to change for all pages it is on. So if i want to make symbol smaller on ‘About Company’
page, then suddenly the BG color is too small on the ‘Team’ page.
You know?
Is this right?
Am i stymied?
Do i need to just make no symbol, and re-produce items 3 and 4 for each page?
Webflow support answers:
My name is Nelson and I’m happy to help with this question. What you can try is not making your gradients a symbol, but making each one different for each page. While keeping your navbar in tact.
Me:
To summarize, Am i correct:
I should recreate the gradient background color; and the white box that holds the text"
Correct?
Webflow:
That could be one way. But let’s get the community’s help on this as well. Can you please post this issue on the forum and send me a link to it?
Please note that this support channel is only for account, billing or technical related issues. For more information, please refer to our Statement of Support: What we support | Webflow University
Symbols are carried out through out the whole site. I don’t know why you would want for example a Navbar to be 10vh height on the home hero and 15vh height on the about page. It would look weird in my opinion. But basically symbols are to make it easy to edit something once and all the other things marked as this symbol change as well. So you won’t have to go on every page and change every Navbar for example. If you don’t want the symbols to be the same simple explode the symbol with the explode icon. Hope this clears things out for you.
Vlad, what i am referring to is the container block of the website that holds all of the content. Instead of a typical white canvas, I created a special container that floats on top of a background color.
All website content rests on top of this special container.
Some pages have more content; other have less.
Depending on the amount of content for the webpage, the
Height of the container must changed
Height of the Background color gradient must be changed
I want to make symbols of the background color gradient and special container, so i dont have to re-make them for every page.
But, editing a symbol effects every symbol across the website, so i can’t do this.
I need some of these special containers larger on some pages, etc.
Oh, I see now, in this case you could just press the container and then do Command+C and it will copy the whole container and everything inside, and then go to a new page or wherever you need to have it and press Command+V to paste it. All the material will be the same and whatever you want to change you can change.
These features are part of the structure of the website. If i make it a symbol then if i increase its size for one page its too big for one page, if i make it smaller then it doesnt work.
One size doesnt fit all.
So, to save me hours, i need help getting this down. Some solutions offered include:
Oh, I see now, in this case you could just press the container and then do Command+C and it will copy the whole container and everything inside, and then go to a new page or wherever you need to have it and press Command+V to paste it. All the material will be the same and whatever you want to change you can change.
To mr. Jmw, that didnt work. Yes i copy pasted it all but then when i changed this gradient and container, suddenly it changed all the other page’s container. Its 'cuz they share a class. If i drop the class, other pages are not affected; but when i have to re-create the gradient and container.
next person says: You can also unlink Symbols in the Symbols panel. Once you do that, you can edit the unlinked instance without affecting others.
I don’t know how to do that.
Webflow Support:
Should you move forward in assisting me with what ‘next person says’ recommended, or should you invent a new solution to give me?
Or , declare this to be a null and void request, and say 'you gotta re-make it every time, buddy. "
Hey Elliot, I think you are mis understanding what the use of the Symbol is intended for. The Symbol is to allow you to easily have the same content throughout a site. What makes the symbol easy to use is the fact that if you do change something it changes throughout the whole page allowing it to be very useful for something like navbars that are located in different pages.
What I think you want is a Section that is similar though contains a couple differences. For this I would for example make a class called TILE for a section that Is red, after that for the next page I want the same section TILE just in a green color background. I would then add a subclass called GREEN. I would do this for every different color so on. So it would look like: TILE GREEN, then for example purple section TILE PURPLE. Hope this helps.
Don’t be afraid to ask if you have any more questions.
What Vlad said is exactly correct. Symbols are like styles for content. Styles only affect the look of an element but not what’s in it. Example would be a paragraph that is in a certain font color. The style controls the color but making a symbol will make the actual text that is in one change in another instance of a symbol as well. Styles also cascade down to it’s subclasses until they are modified. So if you set your gradient background in one color the way you want in one style. Copy it onto the other pages. Then on those pages create subclasses for that background element that ONLY change the color, nothing else. Then if you change the size or anything on the master class, it will change on the rest EXCEPT for the color. Sorry if any of this was redundant to Vlad’s post.
What you can try is not making your gradients a symbol, but making each one different for each page. While keeping your navbar in tact.
