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 blocks underneath each other, to show where the header part, about part, testimonials, etc. will be placed. That’s exactly how coding works!
Good, consistent websites follow this structure:
A main body element
Then different sections to add structure
Then containers to organize content
Content elements
To help you structure your content in the best possible way we have a few elements to help you do so, these are:
Section
Container
Block
Separator element
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.
Container
Where sections take up the full width of a page, containers have spacing on each side. This makes them perfect to hold content elements.
Each element that is added inside a container will not touch the browser screen but has room to breathe.
Containers are div blocks, the only difference is that containers are already styled with preset properties (to save you time). The size automatically decreases as the screen gets smaller, so your content will always display nicely on tablets and mobile.
Block
Blocks or div blocks (div like division) are sections or containers—but without the styling.
A div block is a simple element that has no default styling. Therefore, you can turn it into whatever you need it to be, you can even put another div block inside a div.
Most commonly, they’re used to hold elements together.
Tip: Sometimes empty div blocks are used as dividers to create space between elements. Though this works, we recommend using padding/margin or the separator element rather than adding div blocks. You’ll achieve the same results and your Layer sidebar (and code) will be much neater.
Separator
The separator element is as the name indicates a divider between elements, it’s a simple horizontal line that helps you structure your website and split elements up!