Skip to content

Understanding Section, Row, and Column In Systeme IO Builder

If you want to have the ability to create or customize the layout more effectively, you need to understand how the section, row, and column work in the Systeme website builder.

What are Sections, Rows, and Columns?

Section = The outermost layer of elements. It holds the rows and all other elements. In Systeme, the section is labeled in green.

This image has an empty alt attribute; its file name is Section-3-1024x272.png

Row = Row is the layer right above the Section. It holds columns, and other elements such as buttons, images, videos, etc. In Systeme, Row is labeled in blue.

This image has an empty alt attribute; its file name is Row-1-1024x225.png

Column = A row can split into multiple columns using the column elements.

This image has an empty alt attribute; its file name is Lowest-Element-2-1024x234.png

The Section and Row = The King and the Queen?

When you insert or drag and drop any element to the canvas, Systeme will automatically insert the section and the row underneath the element that insert. In other words, sections and rows hold all other elements on the canvas. It is the foundation of elements.

If I were to insert the checkbox element. notice how both the section and row followed suit.

This image has an empty alt attribute; its file name is checkbox-section-1.png
This image has an empty alt attribute; its file name is Section-1024x272.png

Elements Are Standalone

All elements are independent and can be managed individually, except the column. (for columns, the settings are inaccessible on the canvas). Elements have their own settings where you can set the margin or colour for example without affecting other elements. To change the settings of the element, just hover over the element and click on the gear icon, the settings panel will appear on the left.

This image has an empty alt attribute; its file name is element-settings-2-1024x339.png

Let’s say I want to change the background color of this section to green. All I have to do is hover over the section and click on the gear icon to open up the settings panel and make the changes accordingly.

This image has an empty alt attribute; its file name is Section-4-1024x272.png

I changed the background color to green. Look cool.

But I notice the whole column color also changed to green. What if I want to maintain the original white column background? I can make use of the Text background to accomplish that.

This image has an empty alt attribute; its file name is column-color-2-1024x241.png

Let’s see how it works. Select the text element and click on the setting (or gear icon)

On the Text settings, scroll down and select the Text background color. This is where you can change the color that appears behind the text.

And voila… Now I have a white background. And I just repeat the same process for the rest of the text elements.

This image has an empty alt attribute; its file name is row-with-column-2-1024x259.png

Once you understand the relations between section, row, and column, managing the layout and other elements will become easy.