Exploring sections
Much like elements, sections are essential blocks that build up your page. See Anatomy of a project for a refresher. Otherwise, let’s tinker with some sections.
Click the Section button in the Top Bar
Click where you want the section to be placed Now, it may seem like you did nothing because everything is still white on the canvas, but if you look at the Page Panel (Layers Panel) on the left, you’ll see you have two items, each called “Section”.
You can double-click a section in the Page Panel (Layers Panel) and give it a name. It’s good practice to name sections so you can easily manage them as your project grows.
Change the background color in the Style Panel
See Styling Elements for a lot more about how styling works.
Drag the inner edges at the top or bottom to adjust height OR
Set height value directly Note that you can use pixels or percentage, “px” and “%”. Percentage here is in relation to the height of the viewport, i.e. height of the browser window a visitor will see your content through. OR
Use one of the shortcut buttons (100%, 50%, 900px)
Set a minimum height (Optional) This is useful if you use a percentage value for the height but want to ensure the section doesn’t get too small if the viewport shrinks in size below a certain threshold. For example, you want the section to be 100% in height as long as the viewport isn’t shorter than 500px, in which case you want the section height to stay at 500px.
A section always has 100% width of entire viewport. In fact that’s one of the things that make a section a section.
Drag the section above or below other sections in the Page Panel (Layers Panel) Note that you can only move sections up and down.
A blank section is so simple there isn’t much to configure (!), but many sections will have some options you can set. You can manage those options (if they exist) by double-clicking the section placed on the canvas.