Section

If there was a blank piece of paper in front of you and you had to draw a quick mock-up of a website homepage structure, what would you draw?

Many of us will draw different sections underneath each other, to show where the header part, about part, testimonials, etc. will be placed. That’s exactly how coding works!

In web layouts, pages are structured using sections.

Good, consistent websites follow this structure:

• A main body element

• Then different sections to add structure

• Then containers to organize content

• Content elements

Adding sections

In the Ycode editor, you can add a new section via the top panel. Look for the Square icon, unfold and click Section.

Section elements span across the full width of the body and by default, don’t have any padding inside. If you want to add an image that doesn’t take up the entire width, you would first add a container within the section, and then add the image element.

Section heights

With sections, you don’t need to worry about the height—it automatically adjusts and grows taller when adding more elements (kind of like a Mary Poppins bag).

Specific height

If you do want to set a specific height, head to the Style sidebar on the right, click on the Design tab and unfold Sizing.

Auto height

Auto, as in automatically. This means that you can add as many content elements as you want, and the section height will be adjusted accordingly.

Height padding

When you add top and bottom padding to a section, this also affects the total height.

Tip: It’s best to add padding on the section element (versus on the separate containers inside).