Chapter 2: A Quick Tutorial to build Page Structure
With different container types, JSN PageBuilder 4 gives users more flexibility to build their page layout.
Choose the container element wisely
JSN PageBuilder 4 provides three main containers which are Section, Row, and Column to design your page. These containers are made for specific purposes that you need to know before jumping into the editing page.
- Section is the biggest container which contains all content units dedicated to some topic
- Each section can have multiple rows.
- Row contains content dedicated to some sub-topic
- Each row can have one or multiple columns depending on the layout.
- Avoid creating multiple rows when unnecessary to reduce HTML code. Only create a new row if a complex layout with multiple columns is involved.
- Column contains content of the sub-topic which is arranged inside a row as a single layout.
Use the “Block” element only when necessary
“Block” element is designed to contain a series of elements for special layout arrangement and styling.
Normally, you will not need to use the Block element. Try to operate either with the container (section/row/ column) or directly with the element before deciding using Block.
Avoid using too many nested levels
When it is possible, you should create content in dedicated rows instead of nesting.
Avoid including many rows and columns in a single Row container
In a single Row container of JSN PageBuilder 4, you can have many rows & columns however it is not recommended.
Use default value if possible
If it is not necessary, you should keep the default value of elements.