I was curious to know how everyone manages sections of their page that share a common element? For example, on every page I have a banner. Within that banner I have a background image, headline, and subhead. I would like make that portion of the page a common element, but custom for each page. I realize I can just create these individual elements on each page, but it becomes cumbersome to make design updates when you have up to 10 different pages such as: home, about, contact, store, gallery, resources, privacy, terms, disclaimer, etc.
I understand that we have the CMS functionality, but there are portions of the page that are not shared such as a form on a contact page, images on a gallery page, and a cart on a store page. I assume you cannot drop these unique elements within the CMS template. Symbols won’t work because each banner has a unique headline and background image.
With all that said, is everyone stuck in a similar position where you have to touch every single page when you need to modify the page HTML? I understand how CSS works to maintain that styling, but there are instances where you have to touch the markup and I think that’s where the challenge is for me. Thoughts?
This is what’s called a symbol. You select the outer element of your section, turn it to a symbol, and from the symbol panel you drag it on all your pages. Double click a symbol to edit it and it will edit on all pages. Typically used for navbar, footers… Grab a coffee and check this page https://university.webflow.com/article/symbols
Thank you for the reply. I’m not sure if you saw my comment where I mentioned that I don’t think symbols will work. I need custom text and images on each page. Considering how symbols work, and that I’m currently using them for my nav bar and footer for consistency across all pages, symbols would not be the answer for custom banners. Maybe I’m misunderstanding something?
I think I understand the problem you’re facing.
For your particular case, I still recommend the use of symbols.
For example, I do it in such a way that I create a component site for each website as part of the style guide - as a draft (so that it is not indexed).
You could do the same: Create each box as an symbol, add all the boxes to the component site, and you have a central place to edit them all. This way you save time in editing, get an overview of all elements and still have the possibility to treat each box individually. I think this is the best workflow to achieve what you want to achieve.
Thanks for the reply. I wish I could say I knew what you were describing, but I don’t think I’m familiar with the process. If I create a symbol, I’m still facing the challenge of it being the same across all pages. You mentioned component, but I’m familiar with that in terms of how it’s built in Webflow. You also mentioned a central place to edit them, but that would suggest multiple instances if I’m understanding you correctly. Is there no way to create a unique template instance of just the banner area? That way whenever you make an update to the “markup” it’s reflected on all pages?
