23

Funnel Editor

Last Update vor 9 Monaten

Introduction to the Funnel Editor Elements, Rows, and Settings: Understanding the Editor Sidebar Working with padding How do I select a row vs. content? Row Properties

Introduction to the Funnel Editor

Learn how to use the Funnel Editor

Kevin Penner

Last Update vor 9 Monaten

In this quick start guide, we'll briefly cover all of the features inside of the Funnel Editor.

When you open the editor, there are two primary sections:

  • Canvas, which is where you drop elements and rows while designing. This is the section on the left side of the screen.

Sidebar, which is where many of the design elements can be customized. This is the section on the right side of the screen.

To begin designing on the canvas, you must select a design element from the sidebar. The sidebar includes three tabs to help you create content.

Steps settings

Clicking on the pen icon above any individual step allows you to set defaults for your Step. When working with rows and content, those design elements inherit these settings.


You can use the settings tab to modify the following options:

  • Save step as preset
  • Content area width
  • Background color
  • Background image
  • Padding
Rows

Rows are the primary structural element for designs created in the Funnel Editor. Within your rows, you can customize the column structure. With a multi-column row, you can place content side-by-side in your design. Most importantly, rows act as a container for all of your elements.


The following options populate in the sidebar when working with rows:

  • Width and Height settings
  • Gap between columns
  • Do not stack on mobile
  • Row background image
  • Row position
  • Row content alignment
  • Row padding
  • Row background color
As mentioned above, rows can include columns as well. As a result, there is a second section called Customize columns. You can use this section to modify the column structure. There is an +Add new button you can use to insert new columns. A separator icon populates between each column. Click and drag the icon to change the column structure.


For each individual column, you have the following options:

  • Gap between elements
  • Column background color
  • Content Alignment
  • Content Justification
  • Padding
To toggle between columns, click on the column in the sidebar you want to modify. The selected column is highlighted in blue.


For more information, refer to the following articles:

  • Settings, Rows, and Content: How do they work?
  • How do I select a row vs. content?
  • How do I change the properties of a row?
  • Column management

Elements

There are many several elements you can use while designing in the Funnel Editor. All elements include padding settings and hide-on settings in the sidebar.


Below we've listed all the basic elements:

  • Headline
  • Text
  • Button
  • Form
  • Image
  • Input
  • Divider
  • Video
  • Container

And Advanced elements:

  • Booking
  • Product
  • Category
  • Invoice
  • Payment
  • HTML
Mobile Design Mode
By default, the editor canvas mimics what your design will look like on a desktop device. However, you can also use mobile design mode to build your content. This design mode uses a canvas that mimics what the design will look like on a mobile device.


Most of the edits you make in mobile design mode are reflected on both the desktop and mobile versions. However, certain elements are marked with a mobile icon in the sidebar. These settings will only apply to the mobile version of your design.


For further information on this design mode, please see Mobile design mode.

Was this article helpful?

0 out of 0 liked this article

Still need help? Message Us