Sections are incredibly powerful elements that shouldn’t be underestimated, in fact
[Grimur] Laughs
[McGuire] Grimur.
[Grimur] No, no no keep going.
[McGuire] The earth can tilt off its axis based on the power of the Section.
[Grimur] Come on...
[McGuire] We’re filming.
[Grimur] It’s just a section.
McGuire: No, Grimur. It’s more than that. In this lesson, we’ll talk, yes, about adding and styling a section (showing how its sized by the content we put inside), but we’ll also show how to create responsive layouts using pixel-based minimum heights, viewport heights, and even how to set up your section to act as a 3D camera.
Let’s start with adding and styling a section. On the canvas, we can drag a section anywhere onto the page. And when we do, two things to notice: by default, the Section takes up 100% of the width available. (And that’s a really common pattern — Sections are like chapters in a book...they neatly organize our content, and by default, they stack on TOP of one another.)
But the second thing to notice is that there’s some placeholder space (it looks like there’s some height). But when we go to Preview, notice how it collapses. (We get some space when designing so we can interact with it… but Sections are defined — they get their dimensions from real content we put inside.)
So as we put in something like a heading? It adds to the height of the section. Same thing with a Paragraph. Or a Button (we can just press Command + E to pull up Quick find and type the element we want). Press Return? Button added, and the section’s height increases.
But the name of this part is add and style a section. So how do we style? If we’re starting from scratch, a great technique is to create a class and set our styles — set something like a background color. And this is where the power of text inheritance works really well. Instead of going in and setting font color or other typography styles on each element, we can set them on the parent element (the Section).
Of course, everything’s going edge to edge. If we want to keep things neatly contained? We can add a Container. (Things we move inside a Container stay neatly organized towards the center of the viewport, because not only does it center stuff, but it sets a maximum width — a maximum boundary for our content.)
If we want to add some more breathing room? We can select our Section and add padding — some space inside the section on the top...and bottom. And when we add things like background images? (If we want to have a background image?) Generally that’s applied to the Section...so the image is full width.
Just keep in mind... later on? We can use that style we created somewhere else. And the changes we make will affect all Sections with that class applied. For now, let’s remove the background image so we have a clean starting point for our Sections.
But a LOT of people will create alternate versions of a section. For instance, if our Section here is dark, maybe we want a lighter variant. Let’s duplicate our Section here (again, because we have our class applied to both, a change on one section will affect the styling on the other).
But if we want to build new styling on top of what we just made? We can just add a combo class: we can click in and type Light (or name it whatever we want), and now we can modify those values. (Maybe we want a lighter background, and with that, we’d want darker text — a darker font color.)
Combo classes work this way. They’re based on the original section class but we can add on top of and override styles on the combo class. If we go back to the original section and make a change – as long as it’s not overridden on the combo class you’ll see that change pass along to all instances of that section. But if we want we can override on the combo class.
So any time we want, as we’re designing and developing another Section, we can add the section class we created originally. And on top of that, when we want to add that combo...we can add the Light version.
But those are the basics. Let’s talk more about height. With the plain height property, there’s a bit of a problem: set it too small? And it clobbers our content. (Sometimes we can eyeball it, but when we resize our viewport, it still just doesn’t work.)
This is where minimum heights come in. If we set a pixel value (a minimum height), it’ll never get smaller than that value, but if content in the section is creating more space, the Section’s going to respect that. This is why it’s a great practice (that is, if you are wanting to manually define a height on something that hold content) — it’s a good idea to use minimums.
But there’s another thing to consider: if we make our minimum height a larger number, our content is sort of chunked to the top there. How do we center it? This is where flexbox comes in handy. With our container in the Section, we can just select the Section, and set it to flex. When we do, we can vertically center it child elements (we’re vertically centering our Container). Of course, we can use all our flex options here, so if we want the content stuck to the bottom? Or the top? We have lots of options here.
And that style change leads us to VH. Same deal here. This is an incredibly common pattern, especially in hero sections — we want to set it to take up 100 percent of the viewport height. All we do? 100 VH (viewport height). And because it’s a minimum height, if there happens to be even more stuff inside, the Section will respect the space it creates.
50 VH? That’s 50 percent of the viewport height. 200 VH? That’s 200 percent of the viewport height.
And that’s the last part before we get to the 3D camera effect. This is the part Grimur’s been waiting fo–
[Grimur] Sorry, I need my Stand goal. I only have 12.
[McGuire] It’s 2 o’clock in the afternoon.
[Grimur] I got up super early to Theragun my IT band.
McGuire: If you have children of a Section (these are ANY elements inside a section, even if they’re in other stuff inside a section)...there are times where we want to add a rotation or a movement in 3D space. But in this example (each of these elements has the same class applied, so we’re styling all of them at once). And if we go down to add a 3D transform, any type of 3D move looks sort of flat. (It’s an isometric projection, when the effect we MIGHT be looking for is more of a perspective projection.) And the interesting thing about enabling– Grimur!
[Grimur] Sorry, my muscles are so tight!
To demo perspective projection, let’s leave our rotation like that for a second, and enable the 3D camera effect. With the section selected, all we need to do is go into our transform settings...and add a Children perspective (it’s called that because it adds perspective that affects children elements).
A higher value for Children perspective is a flatter effect, like a camera pointed at objects far away with a telephoto lens — and a lower value is like being closer to the objects… with a wide angle lens.
Again, Children perspective turns an element like a Section into a sort of camera...enabling 3D for ANY of its child elements — any children lower in the hierarchy.
But that’s it for our overview — there’s much more we can do with Sections as it relates to Containers, Div blocks, Grids, and even more advanced configurations like scroll-based interactions that you can APPLY to your sections...so check those out on Webflow University...if you haven’t already.
For this lesson, we covered quite a bit here in a short time with only a few mild distractions. We added and styled some sections (which were sized by the content inside). We covered setting minimum heights using pixels and VH (viewport heights), and we showed how to TURN a section into a 3D camera by setting children perspective...on the Section itself.
But that’s an overview of Sections...in the Webflow Designer.
