Elements, Rows, and Settings: Understanding the Editor Sidebar

Learn about each of the tabs on the Funnel Editor Sidebar

Kevin Penner

Last Update hace 9 meses

The sidebar is composed of 3 tabs, Elements (images, text, buttons, etc., which also can be added, removed, copied, and moved), Rows (which can be added, removed, copied, saved, and moved), and Settings (Which allows you to customize the Funnel as a whole, Steps, Rows, and Elements).

Elements

This tab includes a series of tiles that represent the different elements you can use in your Funnel.


To use them, just drag one inside a column, it will auto-adjust to the column width.


Every content block has its own settings, such as granular control on padding. The right-side panel automatically switches to a property panel for the selected content element.

Rows

Here you can find different types of rows to insert into the design. You can also create your own custom Saved rows.


Rows are structural units that define the horizontal composition of a section of the design by using columns. A row can include one to twelve columns. Using more than one column allows you to put different content elements side by side.


You can add all the structural elements you need to your design, regardless of the template you selected when you started.


Every row has it's own settings, for example, you can select a background color for the entire row, only the design area, or a specific column within it.


Also see: How do I change the properties of a row?

Settings

Whether you're customizing a text element or button, row, step, or the whole Funnel, the settings are accessed in the Settings tab on the Editor Sidebar. Here we will take a quick look at the settings available for each and how to access them.

Funnel Settings

When you first open a Funnel or have nothing selected, the settings tab will display the settings for the entire Funnel where you can access settings such as custom code, Show Funnel Navigation, and Allow Modal Close

Step Settings

Access settings for an individual Step by clicking on the pen icon above the Step. The first option available is to Save Step as Preset which saves the step, with its Rows and Elements and associated settings, into the Rows Tab so you can drag that step into any place in any Funnel. The next setting is content area width, which sets a max width for all rows inside the step, which is important for designing a Funnel compatible with all screen sizes. You can also set a background color and image, and padding.

Row Settings

Row settings can be accessed by hovering over a row and clicking on the padding space (All rows have a default padding on the side to make it mobile compatible), or by clicking on the blue Row label.


Rows have 3 sections in settings that allow you to customize different aspects:

  • Row Options - Customize width/height, gap between columns, Whether columns stack on mobile, add a background image, and Change positioning (Relative, Sticky, Absolute).
  • Column Settings
  • Block Options - These are the options that all elements within a Step have, more details below in Element Settings

Element Settings

Each element is distinct and require their own unique settings in order to properly customize, but there are settings and categories of settings that are shared between all or most element types:

  • Element Options - This is an unlabeled section where most element settings exist, though most elements will have options for ID, name, Width/height, Text content, and text/border style options.
  • Label Settings - If an element has a label(s) this section will be present with options for font, size, color, and more.
  • Field Value - Any input has options for the Field Value, such as placeholder, value limits, increment settings and more.
  • Field Options - Input Elements also have Field options where settings such as background color, border settings, and focus states are compiled
  • Form Options - Form elements have a special section for selecting different input fields and if they are required to submit the form
  • Block Options - Every Element has a section for Block Options, where you can set Element alignment, Padding, and Break point visibility for mobile or desktop.

For more information on specific settings go here

Was this article helpful?

0 out of 0 liked this article

Still need help? Message Us