Academy: Getting Started: Lesson 5: Page Editor: Rows & Columns

Modified on Tue, 2 Apr at 1:39 PM

Welcome again to our ClickFunnels 2.0 Getting Started Training. We will continue learning about the Page Editor, specifically about Rows and Columns.

Introduction:

As mentioned in our past lessons, a core part of the Page Editor lies in its ability to nest content inside “boxes”. It allows you to represent web design concepts graphically, easily, and without using code.

In contrast to our previous article, where we went over Sections as a separate element, we will cover Rows and Columns in this same article because they are bonded together. When you add a new Row to your Page, you will have to select the number of Columns this particular Row will have, and you can’t change that configuration later.

Important Note: This will not apply to a Flex Container, which is a more dynamic container, and does not use columns.

Before adding elements to our page, we must add Rows and Columns inside a Section. Every Row will have its own style, including background color, font color, button styles, borders, etc. A Row represents a break in the structure of a Section, and it’s recommended that you divide a Section into many Rows depending on the idea you are trying to communicate. The Row space is represented with a navy blue border and floating menu; as you can see in the image below where a 2-column row is represented:

How to Add a Row:

As mentioned, the page editor works in content boxes, and Rows go inside Sections. To add a new Row, follow these steps:

Hover over an existing Row or a Blank Section and click under Add Row.
The next step would be to select the number of columns for Row. Depending on the type of content and your business design style, you can select from a 1-column row up to a 6-column row or select a Flex Container instead.
Done. Up to this point, you can start adding elements to your Row.

How to Remove a Row:

Removing a Row is a simple process; you just need to hover over the current Row, particularly under the top-right corner of it. This will display the Row floating menu (color blue).

Click under the Delete button, and this will remove the whole Row.

How to Move a Row Between a Section:

Like the Delete process, moving a Row Up or Down through your Section layout is done with just one click. Hover over your Row, specifically in the top-left corner, and you will see the Move Up and Move Down buttons. Click on it as desired, moving the whole Row to the selected location.

How to Edit the Style of a Row:

To customize the Row settings, you need to click under Settings from the floating menu at the top-right corner of your Row.

These are the Settings available for Rows:

Settings

Top Margin
Paint (article coming soon)
Size and Position
Background
Border
Shadow
Corner
Visibility

Advanced

Animation
Advanced CSS
Custom Attributes

Logic

Render Condition (article coming soon)

Visibility

Visibility

How to Edit the Style of a Column:

To customize your Column settings, you need to hover over the desired column; once you see the navy blue border, you will also see a floating Column Settings button at the top-right section of your column. Click on it to access the Column Settings, which includes styling.