▼
Streaming live at 10am (PST)

W-section class not added to section. section vs div

Community resources
#1

I’m trying really hard to figure out what the difference between a Section element and a Div Block element is. When adding either of them and publishing the page, I find a pure div - no classes, no styling, nothing. They are exactly the same.

I’ve read a bunch of places that a section will get a .w-section class. In my case it won’t. I just created a new blank project and tested. No .w-section.

The reason I ask is that I would really like to add some bottom margin on all sections by default (planning on doing this in Custom Code). For obvious reasons I don’t want to do this with all divs.

If it is possible to create a custom element, e.g. My Styled Section, that I can add without having to add classes every single time I add a new default element. It would also solve my problem.

#2

There is none. Internally in the designer a “section” element gets a visual enhancement but as you have seen that is not something affecting a published site. Personally I don’t use them and instead add a div with a class that layouts the element the way I want. When the element can be a semantic <section> element I just make it so in the designer.

If you use keyboard shortcuts, creating elements and adding classes is very fast. Symbols don’t work well for this IMHO.

#3

Hey @stianlp,

A Section is automatic - full width of the viewport; a Div is not. Div’s need a width size value and both need a vertical size value.

#4

So, I worked a bit more with Webflow today, and there’s a lot of weirdness going on. For instance styles you cannot see in the editor, that can only be seen when publishing the page and inspecting the elements. The container element, the one that gets class w-container, works this way.

It’s incredibly hard to teach non-technical people how to use Webflow with such hidden and inconsistent behavior. I highly recommend that you set the styles visible and editable on the default elements users pick from the Add Elements functionality. That means: When a user picks a Container it should be possible to reset ALL styles to make it a div. There’s no way, except for the container icon, to tell that it has container styling on different break points.

Not sure if anyone at Webflow reads this, but I guess some of the idea with this software is to give users who doesn’t know anything about DOM,html,css, etc to be able to build semantically correct and somewhat clean pages. By e.g. mixing Section with the <section> tag it gets incredibly confusing, and hard, for our developers to teach non-technical people about the web.

You should really aim to build this software much more like the element inspector in a browser and let users see the actual classes, styles instead of building a weird hybrid between Figma, PowerPoint and a webpage editor that use odd and confusing terminology. Your users aren’t stupid, even though they don’t know what a div is (yet). If you talk to them like smart people, they will quickly learn what a div is, and be able to communicate with more professional web developers.

Just my two cents…

#5

@garymichael1313 - Actually that is incorrect. A DIV is a block level element. A div by default will always take up the width of its parent container because it is a basic containing element for flow content. If there is no width set on a parent then it is the width of the viewport. What a div does not have is implicit height unless set. It expands to the height of its largest child element.

#6

Ah yes I see, you’re correct. Other than Sections can’t be nested. And Divs can be converted to Link Blocks.

They both are really the same. I do see they’ve changed the display settings to block now. The Div was set to Inline-Block when dropped in, I remember specifically. They have adjust that to Block now. But this was a while ago, years ago… I stand corrected.