Hi Guys,
I’ve just purchase a template from the store, so I can drill in and take a look at how its put together so cleanly.
In the Navigator I keep seeing instances of “Wrapper” and I can’t for the life of me see a component called “Wrapper” so I can’t figure out how the designer has put it all together.
Not sure I’m being a num nuts, but can someone shed some light on it for me please?
Many thanks
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
It’s just a div (section) that typically encloses the entire component, so you can manipulate the entire component if needed. Good call-out though!
Thanks for the reply.
So can we still add them? If so, where can we select them from?
I’m sure this is a dummy question, but new to Webflow and just cutting my teeth on the basics…
(I’m loving it though - a real pleasure to work with compared to Muse)
Could be a class name.
“Wrapper” is how a template’s author decided to call their div. It is not a html syntax if that’s what you are asking.
Just to clarify further - a wrapper isn’t one of the Webflow pre-formatted components you might be thinking of like navbar, section, container.
It’s purely a box to contain some other boxes - and gets it’s name from you, the designer - you could call it a container or a holder - but very common to call them a wrapper. 
But to clarify even more: use the component ‘div’, that’s what the designer of the template did. After that he gave it a class name ‘wrapper’ which can enclose all other kinds of divs, components, text blocks, headings etc. The component ‘div’ is actually an unstyled component (just like a ‘frame’ in InDesign) with no margins or padding or even unvisible styling
The section-component is also a div but has some styles given to it, just like a ‘container’ and a row.
Tom
Thanks chaps,
I think that helps 
I’m having all kinds of fun and games getting things to align, whilst the designer had everything aligned perfectly using his “wrappers”
Only my second day playing and learning, but starting to understand.
Thanks for the help, it’s appreciated.
Great way to learn - picking apart - reverse engineering!
If you can’t get an element to behave how you want - always look to see if it has a parent element that is controlling it’s styles - that often solves things.
Presumably you’ve had a look through the videos at university.webflow.com too?
Ask away - happy to help 
Spent the last few days watching videos and looking at templates.
It’s a curve, but to learn anything takes a bit of time 
Here is an example of a wrapper.
https://preview.webflow.com/preview/rcc-project?preview=2eada9259a0a28d266b24c8a12f74145
Just amny I am sure but have a few cool things going on in there probably a few things wrong but eh learning on the fly is fun.
Nate
I see this used in every template I look at, with it being named some variation of Wrapper, Page Wrapper, or Content. The thing I’ve yet to understand is what this is actually used for. Why not just add everything to Body?
@EricBerglund - You will know when you need one when you do. “Wrappers” help you break the structure up to overcome design challenges so you can deal with containers separately. You will see similar use on many internal repeating elements like cards.
Hey Jeff,
Thanks for the response! I realize I wasn’t clear in my original post. I’m familiar with wrappers and the use cases you mentioned. I was referring though to the special, top-level wrapper that I see in every template I’ve come across that contains the entire page’s content as seen here 
I can think of a few use-cases for this where maybe one wants to adjust overflow settings or something, but in general, I’ve just been using it since I see it in all these templates, assuming there must be a good reason but without having a deeper understanding as to its purpose. 
One use case is copying an entire page content without duplicating the page.
Ahhh clever. It’s weird that this is such common practice but the Webflow University tutorials never talk about these kinds of things.