Streaming live at 10am (PST)

What is a wrapper?


#1

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)


#2

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!


#3

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)


#4

Could be a class name.


#5

“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.


#6

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. :slightly_smiling_face:


#7

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


#8

Thanks chaps,

I think that helps :grinning:

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.


#9

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 :+1:t2:


#10

Spent the last few days watching videos and looking at templates.

It’s a curve, but to learn anything takes a bit of time :+1:


#11

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