Page Structure within the Funnel and Website Builder

There is a specific structure for items within the funnel and website builder. The four structural components to building are sections, rows, column and elements. There is a specific order and features of each.

In This Article:

• Page Structure
  • Understanding Element Nesting
  • Sections
  • Rows
  • Columns
  • Elements
  • Visual Representation of Structure
• Prebuilt Sections
• Global Sections vs. Section Templates

Page Structure

All FG Funnels pages are made up of sections, rows, columns and elements. Sections are the base where rows are placed. Then columns make up rows and elements are placed in columns. You must have a section, a row and at least one column before placing an element.

You can add Sections, Rows and Elements from clicking the correct heading in the left sidebar of the panel that opens from the Add Elements icon. Then choosing the section style, number of columns or element that you want.

Understanding Element Nesting

Every element on a webpage requires a section. Within this section, you need to have at least one row. This row needs to have at least one column. Adding all three of these (Section > Column > Row) we are then able to add an element from the "+Add Element" bar. 

From largest to smallest, we have:

Sections (Green) > Rows (Blue) > Columns (Pink) > Elements (Orange)

About sections, rows, and columns...

1. You cannot add a section within a section. Nor can you add a Row within a row or a column within a column. You also cannot add an element within an element.
2. You can add multiple rows into a section. Within a row, you can add multiple columns. Within a column, you can add multiple elements.
3. You must have at least one section, one row, and one column to add an element.

Sections

Sections are the base of all other items. A page can have any number of sections.

Sections (except Global Sections) will be outlined in green when selected in the builder. Sections have styling options like backgrounds, borders, etc.

From the left hand side of the section when it is outlined in green:

• You can move the section above the section directly on top using the up arrow
• You can move the section below the section directly underneath using the down arrow.
• You can open the options/settings panel for the section from the gear icon
• You can use the save/floppy disk icon to save the section as a Global Section or a Section Template

From the right hand side of the section when it is outlined in green:

• You can use the 4 arrows pointing away from the center to drag the section to a different place on the page.
• You can use the two overlapping squares to clone the section and make an exact copy directly below the section.
• You can use the trash can icon to delete the section, as well as all rows, columns and elements inside.

Rows

Rows are one level down from sections.

• All rows must be placed in a section.
• Rows will be outlined in blue when selected in the builder.
• They have many of the same options as sections, including movement and backgrounds, but cannot be saved like sections can.
• You can add multiple rows within one section.

Columns

Columns are one level down from rows.

• All columns must be placed in a row.
• Likewise, all rows must have at least one column.
• Columns will be outlined in light purple when selected in the builder.
• They have many of the same options as rows, but cannot be dragged into place like rows can.
• You can have multiple columns side by side in one row.
• Columns have a dot at the side they share with another column. You can click that dot and drag your mouse to change the width of the columns.

Elements

Elements are the specific content and design pieces in the page.

• These are items like paragraphs and images.
• Elements will be outlined in orange on the page.
• Elements are placed within columns.
• A column can have multiple elements.
• Each element has it's own styling and options depending on the type of element.

Visual Representation of Structure

The image above shows the structures as they relate to each other. The section is outlined in green, the row in blue, columns in purple and elements in orange.

Prebuilt Sections

The funnel and website builder comes with a number of pre-built sections and pre-styled elements. These can be accessed through the Add Elements panel and are towards the bottom of the left menu.

Prebuilt Sections:

Prebuilt sections are sections that have been styled and placeholder content has been added to with the idea that you can place a section, swap out your images and text and add your own colors to quickly build a section without getting too caught up in the design.

Once you click on Prebuilt Sections from inside Add Element, a menu of different section types will appear so you can search by section type.

Pre-Styled Elements

Underneath the option for Prebuilt sections, there are options for pre-styled buttons, social media icons, images and a progress bar. Clicking on these options will show you the pre-styled options. You can always add the element from the Elements tab and style it yourself but these elements have some styling already.

Global Sections vs. Section Templates

Sections can be saved in one of two ways for re-use. They can be saved as Global Sections or Section Templates. More information can be found in the article Saving Sections: Global Sections and Section Templates.