Academy: Getting Started: Lesson 5: Page Editor: Sections

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

Table of Contents:

• Introduction

• How to Add a Section

• How to Remove a Section

• How to Move a Section Between Your Page

• How to Edit the Style of a Section

Requirements: 

• An active ClickFunnels 2.0 account

• A page

Introduction:

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. 

The first building block you will find in the Page Editor are Sections; they are the upper level and represent the broadest building block, where everything else will be thrown inside it to create a page. They are segments that you can insert and design based on your specific needs.

Every section will have its own style, including background color, font color, button styles, borders, etc. A section represents a break in the structure of your page, and it’s recommended that you divide it into sections depending on the idea you are trying to communicate.

As you can see in the next example, the red section includes an opt-in form, and the next one at the bottom on a blue background it’s a footer section.

Back to Top

How to Add a Section:

As we mentioned before, the page editor works in content boxes. To add a new “box” or section, follow these steps:

1. Hover over between two sections, and a floating “Add Section” button will appear.
   

2. The elements menu will appear to your right. You can select an option from Sections and choose the section width size from Full Page, Wide, Medium, Small, or Extra Small.
   
   

3. The next step would be to select the style for your first 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.
   
   

4. Done. Up to this point, you can start adding elements to your Section.

Back to Top

How to Remove a Section:

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

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

Back to Top

How to Move a Section Between Your Page:

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

Back to Top

How to Edit the Style of a Section:

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

These are the Settings available for Sections:

Settings

• Top Margin

• Paint

• Size and Position

• Background 

• Border

• Shadow

• Corner

• Visibility

Advanced

• Animation

• Advanced CSS

• Custom Attributes

Logic

• Render Condition (article coming soon)

Visibility

• Visibility

Back to Top

Next Article:

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

Back to Top