Main website blocks
The main website blocks are elements that help structure a web page, group other elements and position them correctly relative to other elements. Most often they are parent elements that contain child elements (for more details, see: Block-based website model and element hierarchy).
The main website blocks are a Div Block, a Section, and a Container.
Div Block features
Div Block is the most basic and versatile element used in website building. Sections, Containers, Buttons, are Div Blocks with certain extra properties. By default, the width of a Div Block is 100%, and the height automatically adjusts to fit the content inside the block.
Div Blocks can be used:
- to create space between other blocks or as dividers
- to group other elements together
You can apply any style you need to a Div-block on the Styles tab, for example:
- Set display properties to properly position and align child elements inside a Div Block (for more details, see: Auto Layout (in Flex mode))
- Set necessary size to a Div Block (for example, minimal height) or margins and paddings (for more details, see: Sizing and spacing)
Section features
Section is an element with a 100% width that can be expanded to fit the full width of the browser window. By default, a Section automatically adjusts to fit its content. Section height changes when adding elements to it.
Using Sections
Sections are used to create independent content blocks and to divide the page into relevant segments. Sections can be used, for example, to create a header, ‘About’ block, ‘Our Services’ block, or a footer. To get a consistent site structure, add Sections onto the Canvas and then arrange content within them.
You can name Sections, describing their purpose, in order to create a convenient website structure. This can be done in the Navigator panel on the Layers tab by double-clicking on the element name or by right-clicking.
You can apply any style you need to a Section on the Styles tab, for example:
- Set display properties to properly position and align child elements inside a Section (for more details, see: Auto Layout (in Flex mode))
Minimum height
If you assign a fixed height to a Section, content will eventually overflow or be cut off when added. Therefore, it is recommended to set the Min Height property (for example, 500 pixels). In this case, the Section will be no less than the height set, but when content is added, it will extend and the content will not be cut off.
Full-screen height Section
In some cases, it is necessary to have a Section fitting the whole screen or a part of it, for example, a website header.
To do this, set the Section min height to 100vh (View Height) and it will fill 100% of the height of the browser window. If you set 50vh, then 50% of the browser window will be filled and so on.
Container features
- By default, Container max width is 960px. If you need a Container of a different width, you can change it in the Styles settings.
- Container is always centered in the parent element (with auto left and right margins).
Using Containers
Container is used to keep the content centered on the web page. It is recommended to put a Container inside a Section. It will be placed exactly in the center of a Section to conveniently put the content in it.
You can apply any style you need to a Container on the Styles tab, which is the same as for a Div Block or a Section.