Sections have many different settings that allow you to customize how they look and behave on your page.
(1) Section Name
You can give a unique name to your section. This isn’t required, but it can help identify sections when you are looking through the sections menu.
(2) Section ID
The section ID cannot be edited. This is how the section is identified in the system code. The section ID can be useful for advanced CSS customization.
(3) Visibility Settings
You can set whether you would like a section to display on All Devices, Desktop Only, or Mobile Only. This can help make your pages more mobile friendly.
(4) Section WidthThe section width can be set to Full Page, Wide, Medium, Small, Extra Small. The content inside of the section will be resized accordingly
(5) Background Color
You can set a different background color and background transparency for each section of the page.
A) Color Display: Displays the currently selected color.
B) Color picker: You can use this to pick any color you like.
C) Color Code: You can paste any HEX color code or RBG color code here.
You can have a unique background image for each section on the page as well. You can upload an image using the image uploader (Click the blue “+” symbol to access the image uploader). You can also paste in the URL for an image from another source.
**Please note that if the url for the source image is not https, your page will display an insecure content warning.
(7) Background Image Position
A) Full Center Fit: This will center your image to the section and fill the width. The image will also remain static as the page scrolls.
B) Fill 100% Width: This will stretch your image to fit the width of the section. The image will scroll with the page.
C) No Repeat: The image will be aligned to the top-left of the section and will not dynamically resize to fill the width of the section. The image will scroll with the page.
D) Repeat: The image will fill the section both horizontally & vertically. The image will scroll with the page.
E) Repeat Horizontally: The image will fill the section horizontally only. The image will scroll with the page.
F) Repeat Vertically: The image will fill the section vertically only. The image will scroll with the page.
Using the sticky settings, you can set a section to stick to the top when the page is scrolled, or to stick to the bottom of the page when the page is loaded.
There are various style settings that will allow you to style how your section looks. You can adjust the padding (space inside the section), margin (space outside the section), the borders, shadows, animations, and position.
Rows and Columns have most of the same settings as sections.
Moving, Adding, and Removing Sections
There are different ways to manage your sections on the page.
(1) The name of your section
(2) Move the section up one. This will switch the position of the selected section and the section that is currently above it.
(3) Move the section down one. This will switch the position of the selected section and the section that is currently below it.
(4) Access the section’s settings
(5) Duplicate or clone the section. This will clone everything inside the section.
(6) Delete the section. This will delete everything inside the section. (There is no Undo for this action.)
(7) Add a new row. This prompt will only appear in a section where there are no rows.
(8) Add a new section below the current section.
Similar options are also available in the Sections menu in the sidebar.
(1) Drag to reorder section
(2) Hide section
(3) Clone/duplicate section
(4) Delete section (there is no Undo for this action)
(5) Add new section
Rows and Columns are the next components to a ClickFunnels page.
You can have multiple rows inside a section, and multiple columns inside of a row.
Most of the same style settings that are available for sections, are available for rows
and columns as well.
The only tricky aspect of Columns is that you can only access column settings from
the Columns menu button on the right hand side of the editor.
Moving, Adding, and Removing Rows
- The name of your row
- Move the row up one. This will switch the position of the selected row and the row that is currently above it.
- Move the row down one. This will switch the position of the selected row and the row that is currently below it.
- Access the row’s settings
- Duplicate or clone the row. This will clone everything inside the row.
- Delete the row. This will delete everything inside the row. (There is no Undo for this action.)
- Add a new row. This prompt will only appear in a row where there are no elements.
- Add a new row below the current row.
Similar options are also available in the Rows menu in the sidebar.
- The section where the row is located
- The name of the row
- Drag and reorder the row
- Hide the row
- Clone/duplicate the row. This will duplicate the contents of the row as well.
- Delete the row. (This is permanent. There is no Undo action for this).
When you add a new Row to a page, you will be prompted to select how many columns you would like to have inside that row, up to six.
In order to move a Row, you can use the Arrow Icons near the top left corner when you hover your mouse over the row.
Elements are the smallest component of the
ClickFunnels page. Elements can only be placed inside of a column/row.
Elements are the most versatile of page components. They can be Dragged and Dropped anywhere on the page inside of an existing column/row.
Element style settings are different for each element, depending on what it does and doesn’t do.
It is also important to note that certain elements are only available on certain pages. For example, credit card elements are only available on the order page type and affiliate elements are only available when using the affiliate page type.
You can learn about each element’s settings by adding that element to your page. There are also articles in the helpdesk to help you learn about each element.
Next week Part 2 will be creating an Attractive Character & selecting an autoresponder and Soap Opera e-mail sequence.
