Select Page
Creating Automation in your Business – Part 1

Creating Automation in your Business – Part 1

by | Aug 18, 2016 | Automation, Autoresponder, Business, Funnel

We get asked all the time about Automation in business, in Part 1 we will cover creating squeeze page/sales pages.

Getting Started #4- Using the Page Editor - ClickFunnels Support 2016-03-29 23-46-54

In this section will go over how to use the ClickFunnels Page Editor.

There are many aspects of the Page Editor, so it is crucial that you read through this entire lesson carefully.

The video below will give you a brief overview of the Page Editor and the article that follows will provide much more in-depth details.

Getting Started #4- Using the Page Editor - ClickFunnels Support 2016-03-29 23-53-46

Getting Started #4- Using the Page Editor - ClickFunnels Support 2016-03-29 23-57-33

The next step is to Open the Page Editor.

Below the thumbnail image of your page, there is a yellow button which reads “Edit Page“. Click this button to open the Page Editor.

Pro Tip: Ctrl + Click (PC) or Cmd + Click (Mac) will open the page editor in a new tab. Try it out.

Getting Started #4- Using the Page Editor - ClickFunnels Support 2016-03-30 00-01-03

(1) Page Editor Settings

In the page editor settings, you will manage almost all of the settings related to the design and implementation of your page.

(2) Email Integration Settings

In the email integration settings, you will manage the integration with your 3rd party email autoresponder or webinar service.

(3) Sections, (4) Rows, (5) Columns, (6) Elements

In these menus, you can see all of the sections / rows / columns / elements on the page. You can (A) Rearrange, (B) Hide, (C) Clone, or (D) Delete these page components using the buttons here.

You can also click on the desired page component to access its settings.

**Please note, that this is the only way to access the Columns Settings

(7) Save

Click this button to save your work. Remember to save your work often, there is no autosave.

(8) Preview

After saving your page, click the preview button to see how your live page will appear.

(9) Exit

Click here to exit the page editor. If you have not saved your recent changes, you will be reminded that you have unsaved changes on the page.

(10) Notices

Notices on the page will help you to know if page components have not been integrated correctly. Make sure you pay close attention to these page notices.

(11) Show Pop Up

This button is located on the lower-left-hand side of the page in the Editor. The pop up is another section of the page that has been specifically coded to “pop-up” for users based on certain page actions. You can access the pop-up here and edit it to your heart’s content.
**Please note, the popup is not available on all pages. 
Getting Started #4- Using the Page Editor - ClickFunnels Support 2016-03-30 00-07-03

(1) Meta Tags / Social Settings

The meta tags determine what will display when your page is shared on social networks as well as what is displayed on the Search Engine Results Pages (SERPs). This will also determine what text displays in the browser tab.

(2) Custom Domain

Select a custom domain for your page. (The custom domain must first be integrated in your Account Settings)

(3) ClickFunnels Affiliate Badge

Toggle the ClickFunnels Affiliate Badge On/Off

(4) Digital Assets / Downloads

If you have added digital assets to your account, you can email those assets to Contacts who visit your pages by selecting the appropriate asset here.

(5) Background Settings

Add background images, videos, textures, and colors here.

(6) Global Text Settings

Set the Default text settings for your page. Defaults can be override in the individual element settings.

(7) Tracking Codes

Add any page specific tracking codes to your page. You can also add javascript to the footer section of the page for 3rd party widgets.

(8) Redirect Override

Users will automatically progress to the next Funnel Step after opting in. You can send users to an external page by using the Redirect Override setting. This is also required when using the WordPress Plugin so that users stay on your WordPress domain as they progress through your funnel.

(9) Custom CSS

Advanced users can use their own CSS to stylize pages.

(10) Hide From Search Engines

Toggle this setting to Show or Hide your page in Search Engines

(11) Save Page As Template

Use this setting to save your page as a template to your account. This will allow you to use the same page in other funnels.
6Getting Started #4- Using the Page Editor - ClickFunnels Support 2016-03-30 00-11-16
Before you start designing your pages it is important to understand the Page Editor Hierarchy.
Pages are made of up Sections > are made up of Rows > are made up of Columns > contain Elements.
The following diagram (created in the ClickFunnels page editor) shows the page editor hierarchy.
7Getting Started #4- Using the Page Editor - ClickFunnels Support 2016-03-30 00-14-15
Sections are the largest component of a ClickFunnels page aside from the background of the page itself.
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.

(6) Background Image

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.

(8) Sticky Settings

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.

Style Settings

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

8Getting Started #4- Using the Page Editor - ClickFunnels Support 2016-03-30 00-17-57

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

  1. The name of your row
  2. Move the row up one. This will switch the position of the selected row and the row that is currently above it.
  3. Move the row down one. This will switch the position of the selected row and the row that is currently below it.
  4. Access the row’s settings
  5. Duplicate or clone the row. This will clone everything inside the row.
  6. Delete the row. This will delete everything inside the row. (There is no Undo for this action.)
  7. Add a new row. This prompt will only appear in a row where there are no elements.
  8. Add a new row below the current row.

Similar options are also available in the Rows menu in the sidebar.

  1. The section where the row is located
  2. The name of the row
  3. Drag and reorder the row
  4. Hide the row
  5. Clone/duplicate the row. This will duplicate the contents of the row as well.
  6. 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.  
9Getting Started #4- Using the Page Editor - ClickFunnels Support 2016-03-30 00-21-50
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. 
10Getting Started #4- Using the Page Editor - ClickFunnels Support 2016-03-30 00-23-33

Next week Part 2 will be creating an Attractive Character & selecting an autoresponder and Soap Opera e-mail sequence.

Get your Free 14 day trial below

11Getting Started #4- Using the Page Editor - ClickFunnels Support 2016-03-30 00-28-40