Layout

Create spaces for content and design effect

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:

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.

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.

Click the plus (+) icon.
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.

Open the step.
Decide where to place a section on the canvas.
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.

Note You can add rows by dragging a Row widget to the canvas.

Opening the layout panel

Open the Editor page.
Make sure the Add new element is selected.

The panel displays Layout widgets.

The next step is to place a widget on the canvas.

We show you how to use containers in a separate article. See Containers.

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: