Unit 1: The Basics

1.2 Rows, Columns & Modules

Rows, Columns & Modules

When creating websites in the Editor it's important to be familiar with the three building blocks that make up all your pages and contain your content: rows, columns and modules.

0) overview

To make it easy for you to differentiate between rows, columns and modules, they are indicated with different tab colors in the Editor.

  • Rows have yellow tabs.
  • Columns have green tabs.
  • Modules have blue tabs.

What is a row?

A row is a horizontal section on your page that contains content, for example images, text, a contact form, etc. When you open your website and want to edit it for the first time, it already contains some rows with content. If you want to add more rows to a page, hover on an existing row and click Add row on the blue bar.  

1) what is a row p1

You can also add rows to the header and footer of your website in which cases the Add row button will show in magenta color.

It's easy to modify, rearrange, copy and delete rows - and to adjust their width, add animations to them, hide them on specific viewports, and more. 
A quick way of adjusting spacing between rows is to drag on the bottom edge of a row. Hover on the row and drag on the blue bar that appears at the bottom. 

 

Row adjust spacing drag

What is a column?

Columns are vertical "pillars" within a row that contain modules (your content). Inside a row you can have up to 12 columns for organizing your content.

2) What is a column p1

You can adjust the width of any column by hovering on it and dragging on the blue bar that appears.

column expand

If you want to add one more column next to an existing one, hover on the column and select Add column from the dropdown. 

Similar to rows, you can make a number of adjustments to columns, add animations, hide them on specific viewports, etc.

What is a module?

Modules are placed inside columns and contain your content. You can add different types of modules depending on your content. Text goes in the Text module, images in the Image module, contact forms in the Form module, etc. 

You add a new module by hovering either on an empty column or on an existing module on your website and selecting Add module. 

Rearranging Content

After you've added some content to your website, you may at one point want to arrange it differently, move it around, delete some of it, etc. 

 

You can easily duplicate, copy or delete rows/columns/modules from their respective dropdown menus.

 

If you want to move rows/columns/modules to other places on your page, you can drag them using the dotted symbol next to the colored tabs.

column expand

Example

column move