Adding Sections, Rows and Columns

Step by step

Build your first structure

Most layout trouble comes from the structure underneath. Build it in this order.

1

Add a section

Click Add Section and pick a width. Full width stretches edge to edge, which suits color bands. Wide keeps content in a neat centered area.

2

Add a row

Click Add Row inside your section. Your software shows column layouts such as one, two, or three columns.

3

Pick your columns

Choose a two-column layout. Now you have a section holding a row holding two columns, ready for content.

4

Move things around

Drag a row into another section and watch for the drop line. It shows where the row will land.

5

Style the section

Click the section and use the right sidebar. Set a Background color or image, then add padding at the top and bottom.

6

Duplicate it

Hover over the section to see its small toolbar. Duplicate copies it, and delete removes it. Build one good section, copy it, then swap the words.

Handy moves

Habits that save time

These small habits keep a page easy to manage.

🧱

One row, one job

Use one row for your headline, another for photos and text, and another for your button. Small rows are easy to move.

🪆

Nest a layout

Nesting puts a layout inside another one, like a box in a box. Keep it to three or four levels so the page stays fast.

📋

Fix drops in Layers

If an element lands in the wrong place, open Layers and drag it to the right spot in the list.

🔖

Name your sections

Call them Hero, Benefits, or Footer. With ten sections on a page, names save you from hunting.

Key terms

Definitions

Tap any term to expand it.

Space inside a section, between its edge and your content.

Space outside a section, between it and the sections next to it.

Placing one layout inside another, like a two-column page with a mini grid in one column.

A section width that stretches from one edge of the screen to the other.

Help me do it

Things To Do

Finish these before moving to the next lesson. They only take a few minutes.

0 of 3 done

Build one section with a two-column row.

Give that section a background color and add padding at the top and bottom.

Duplicate the section, then change the words in the copy.

⚡ Tips

Pick wide for most content and full width for bold color bands.
Some drag and drop features may need to be switched on in your account. If you do not see them, that is why.
Drop an element on an empty part of the canvas and many accounts build the section, row, and column for you.
Hover over a row and look for Add Column to add a column on the spot.

Check yourself

Quick Knowledge Check

Answer a few quick questions to lock in what you just learned. Miss one and we'll show you the right answer.

0 of 4 answered

Which section width keeps your content in a neat centered area?

What is the quickest way to fix an element dropped in the wrong spot?

Space inside a section, between its edge and your content, is called ____.

Placing a layout inside another layout is called ____.

Help me apply it

Try This With Your Favorite AI

Copy a prompt below and paste it into ChatGPT, Claude, Gemini, or whatever AI tool you use. Fill in the bracketed details and it'll help you write your own version for your business.

📐 Sketch my page layout

You are a page layout planner helping me plan the structure of a page in my page builder. My context: - [the page's job, such as collecting emails or showing services] - [the content I already have, such as a headline, photos, and a button] - [how many sections I think I need] Give me: - A section-by-section list with a row and column layout for each - A suggested name for every section - Where a nested layout would actually help Keep it to five sections or fewer and use plain words. Finish by asking me: "Which section would you like me to break down further?"

📏 Choose my spacing plan

You are a friendly visual spacing coach helping me set padding and margin on my sections. My context: - [the background colors I plan to use] - [whether the page feels crowded or too empty right now] - [the device my visitors use most] Give me: - A simple padding plan for top and bottom of each section - A rule of thumb for when to use margin instead - A quick check I can do on mobile view Explain each tip in one sentence without design jargon. Finish by asking me: "Does the page feel crowded or too empty after you try this?"