> For the complete documentation index, see [llms.txt](https://docs.funnelish.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.funnelish.com/start/funnel-builder/layout.md).
# Layout
This article shows you how to use layout tools, the building blocks of your funnel. Use layout tools to create empty spaces in rows and columns on a step. Once you have a structure in place, add containers to hold content elements (e.g. text, images, links) and spacers to create separation between elements.
Your layout work should take place inside a **Section widget**. Sections are like boxes. They hold components and design elements. You can have more than one section on a step.
To design your funnel step layout, we show you how to add:
* [sections](#adding-a-section)
* [rows and columns](#adding-rows-and-columns)
* [spacers](#adding-a-spacer)
## Adding a section
There are two ways to place a Section widget on a step.
### Starting with a blank step
If you start with a blank step, Funnelish displays a plus (+) icon. Click the icon to create your first section on the canvas.
{% hint style="info" %}
**Note** Sections are the foundation of step design. The first element on a step should be a section. All the elements and content go inside the section.
{% endhint %}
1. Click the plus (+) icon.
2. Choose full width, wide, or half-width.
3\. Choose the number of columns in the section.
### **Working with an existing step**
Use this option if you're editing a template or a step that you already created.
1. Open the step.
2. Decide where to place a section on the canvas.
3. Drag the widget to the canvas.
4\. Release the mouse.
* Funnelish places a blank section on the step.
## **Adding rows and columns**
Content and elements sit inside rows and columns. When you add a Section widget to the canvas, click the **Add New Row** button to start creating structured space.
1\. Click an image to choose the number of columns for the row.
* In this example, we add two columns to the row.
2\. Hover the mouse over the row to see the widget hierarchy. In this example, a row is inside a section. Each widget has a separate toolbar.
3\. Click the icons to edit, clone, or delete the widget.
4\. To add a row, click a blue circle with a plus (+) icon. You can add rows above or below the current row.
{% hint style="info" %}
**Note** You can add rows by dragging a Row widget to the canvas.
{% endhint %}
### Opening the layout panel
1. Open the Editor page.
2. Make sure the **Add new element** is selected.
* The panel displays Layout widgets.
### Adding a Container widget
The next step is to place a widget on the canvas.
* We show you how to use containers & repeaters and carousels in a separate article.
{% hint style="info" %}
See [Containers](/start/funnel-builder/containers.md).
See Repeaters.
See Carousels.
{% endhint %}
## **Adding a spacer**
The **Spacer widget** places a line between elements on the canvas. Spacers are fully customizable. You can configure margins, padding, width, color, border style, and more.
Like every Funnelish feature, spacers are responsive to phones, tablets, and desktops. If you want to hide an element on a specific device, simply untick that device from the side buttons.
To add a Spacer widget:
1. Drag the Spacer widget to the canvas.
2. Customize settings.
3. Click **Save changes**.
4. Preview the step.
