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.

PageBuilder 4 containers
PageBuilder 4 containers
  • 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 example
Block element example

“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

Nested Level example
Nested Level example

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

Row container example
Row container example

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

Default settings
Default settings

If it is not necessary, you should keep the default value of elements.

Previous chapter:

Chapter 1: Prepare Assets- What you need to prepare before creating a page 

Next chapter:

Chapter 3: How to add Content to Joomla page


Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.

Rate this article
(0 votes)