Arranging elements is an important skill when using the editor. This guide briefly describes how the platform's content is arranged and how to use rows and columns to ensure your site looks the way you want it to.
How is a site organized?
Our sites are organized into rows, columns, and elements. Each row defines a horizontal section of your site, each column a vertical section within that row, and each element a content section within that column, like this:
Rows are horizontal areas of your site in which columns and elements exist. They look like this:
Rows can be created by dragging elements into the editor where you'd like the row to be and letting go once the blue line stretches all the way across the site inside a grey "New Row" field.
Rows can be deleted by clicking the row bar and choosing the delete option.
Columns are vertical areas contained in columns of your site in which elements exist. They look like this:
Columns can be created by clicking the row bar of the row in which you'd like to create your column and selecting the Add Column button, or dragging in the 2, 3, or 4 columns elements into a row.
They can be deleted by first emptying them of all elements and then pressing the red X icon at their top right corner.
You can also copy and paste columns into rows. To learn more about this, click here.
Elements are features of your site that contain content, like paragraphs or buttons.
Elements can be created by dragging and dropping them from the sidebar into your site.
Elements can be deleted by pressing the red X that appears when they're hovered over.
What happens to rows on my smartphone?
When viewing your site on a smartphone, there may be too much content in a row to display horizontally. The platform automatically floats the columns in a row down in these cases, adapting content that displays in rows on desktop devices to display in columns on mobile devices.
Using this example, the "In The First Column", "In The Second Column", and "In The Third Column" columns marked with a 1, 2, and 3 below are all in the same row:
When viewed on a smartphone, they automatically display beneath each other instead of beside each other: