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:

• sections

• rows and columns

• spacers

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.

1. Click the plus (+) icon.

2. Choose full width, wide, or half-width.

Choose a section width

3. Choose the number of columns in the section.

Set number of columns

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.

Place a Section widget on the canvas

4. Release the mouse.

• Funnelish places a blank section on the step.

Blank section

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.

Choose a column option

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.

Widget hierarchy

4. To add a row, click a blue circle with a plus (+) icon. You can add rows above or below the current row.

Manage rows

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

Opening the layout panel

1. Open the Editor page.

2. Make sure the Add new element is selected.

• The panel displays Layout widgets.

Layout widgets

Adding a Container widget

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:

1. Drag the Spacer widget to the canvas.

2. Customize settings.

3. Click Save changes.

4. Preview the step.

Spacer widget below a heading