Clickfunnels WYSIWYG Editor

Etison editor

Table of Contents

How to use ClickFunnels Page Builder

Learn about the resources available to you that will assist you in building your first funnel in ClickFunnels. The Classic Funnel Builder allows you to choose a goal and select a funnel type and then select the page templates for the funnel. The Cookbook, allows you to narrow down a funnel type based on your industry, the type of funnel and your goal when using the Cookbook you will be provided with a number of narrowed down funnels and (free and paid) templates to choose from.

Before we dive into how the ClickFunnels Page Editor actually works it helps to actually have an existing funnel created which we can then modify thereafter. 

Prior to getting started, you will need the following:

Step 1. The Classic Funnel Builder

  • From your dashboard click + Build a New Funnel
  • On the next screen, you can choose to use the Classic Funnel Builder 
  • Choose a Goal (Collect Emails, Sell Your Product, Host Webinar).
  • Choose a Type (Name Your Funnel, Enter A Group Tag (optional))
  • Click Build Funnel.
Clickfunnels funnel builder

Step 2. The Funnel Cookbook

  • From your dashboard click + New Funnel
  • On the next screen, you can choose to use the Funnel Cook Book.
  • Select Industry.
  • Choose The Type Of Funnel.
  • Choose Your Goal.
  • Select The Template Suggestion
  • Choose Your Template Free or Paid.
  • Download or Purchase Your Template.
Clickfunnels Funnel Templates

Now for the ClickFunnels Page Editor part

Setting Button, Text, and Image Actions

Setting an action on your funnel page using buttons, text, and images will allow your customers to submit information, open or close pop-ups, and scroll to a specific section, row, or element. They will also be able to accept or reject OTO offers, as well as log out of your Membership Area, among other things.

In order to set a button, text, and image action you need to add a shortcode. A shortcode is an abbreviated code that you can insert in the Page Editor to create actions on your page without using a programming language. In other words, it is a tag that calls a script to run whether you put it in a button, text, or image. Shortcodes work like HTML tags, with the difference that instead of using the lesser and greater than symbols (<>), they usually begin with a hashtag (#).

Available Shortcodes

This is a list of the shortcodes you can use in ClickFunnels.

General Codes:

#submit-form – Used on any page a form is being submitted. This will submit the form and send visitors to the next step in the funnel. Please note, an email field is always required for form submissions in ClickFunnels.

#open-popup – Used on any page to open the popup on that page. Please note, you will need to set up the popup on your page for this to work properly. 

#close-popup – Used on any page to close the popup. You will need to place this somewhere within your popup for visitors to use it properly. 

#scroll-title – This requires you to review the title of a section, row, or element on your ClickFunnels page.

1. You can find the title by clicking the gear icon of the section, row, or element you wish to scroll to, and then click on the hashtag icon to access the CSS Info.

2. After clicking on the hashtag icon, you will access the CSS Info, where you can view the title. You would then insert the code as #scroll-title and replace title with the title of the section, row, or element. It is recommended that you copy and paste the title to ensure it is exact.

Clickfunnels CSS Editor

tel:+1234567890 – Used on any page to create a click-to-call button, text, or image. You would replace the numbers in this method with the phone number you wish to have members call.

mailto:email@domain.com – Used on any page to create an email button, text, or image. You would replace email@domain.com in this example with the email address you wish to use.

Order Form and OTO Pages Only Codes

#yes-link – Used on OTO pages to add the OTO product to a visitor’s order. This will also submit the page, sending the visitor to the next step in the funnel.

#no-link – Used on OTO pages to skip the OTO product offer. If there is a downsell page next in the funnel, it will send the visitor to that page. Otherwise, they will land on the next step in the funnel.

#yes-link-multi-(product id) Used on OTO pages to add a specific OTO product to a visitor’s order when multiple are available. This will also submit the page, sending the visitor to the next step in the funnel. To find the Product ID, Open the product editor for the product and locate the number in the Page URL after the product/.

Clickfunnels Add Product

Membership Area Code

/members/sign_out – Used to log a member out of a Membership Area.

Setting Up Actions

Adding a shortcode to a Button

1. Hover over the button element and click on the gear icon to access the button settings.

ClickFunnels Button One Time Offer

2. Click on the Set Action button.

ClickFunnels Set Action Button

3. Choose the Go To Website URL option and add the code in the empty field.

ClickFunnels Website button

Adding a Shortcode to a Text

This option will allow you to use all of the available shortcodes in ClickFunnels.

1. Click on the text element and highlight the text you want to add the shortcode to.

2. Click on the link icon.

Clickfunnels special offer button

3. Paste the code in the Link URL field.

clickfunnels open popup button

Adding a Shortcode to an Image

This option will allow you to use all of the available shortcodes in ClickFunnels, with the exception of the #scroll-title shortcode. If you want to use an image to scroll, you can use the CSS ID Selector, instead of the shortcode.

1. Hover over the image element and click on the gear icon to access the image settings.

2. Paste the shortcode in the Link URL field.

You can also select a shortcode after clicking in the Link URL field.

After making any changes on your page, please don’t forget to click on the Save button.

ClickFunnels Save Button

copy this next https://help.clickfunnels.com/hc/en-us/sections/360001443934-Page-Editor

 

How To Add Elements in your ClickFunnels page

Step 1: Add New Element

  • Click on Add New Element from within a row or click on the “+” below an existing element.
  • Search or Select your element from the list.
  • Click on the element to edit the settings.
Add Clickfunnels Element

How To Remove An Existing Element

  • Hover your mouse over the existing element that you would like to replace.
  • Click on the trash icon on the orange border to delete the element.
  • Repeat the process above to add a new element.
Clickfunnels remove element

How to Add Rows and Columns

Step 1: Add New Row

1. Click on Add New Row from the section drop-down menu or click on the “+” below an existing row.

2. Select the number of columns to add in your row.

3. Hover your mouse over the row (blue border) and click on the Gear icon.

4. Adjust additional row settings as desired.

ClickFunnels How to Save Sections and Rows As Templates

Page elements such as sections and rows can be saved as templates to be used in other pages. Templates save time by allowing users to reuse previously created content without having to recreate it from scratch every time.

Step 1: Save Sections and Rows As Templates

1. Select the funnel you want.

Clickfunnels funnel selection

2. Click the funnel step containing the sections and rows you wish to save.

3. Click The Edit Page button to open the page editor.

4. Hover over the section or row you want to save and click the disk icon. (Hovering over this icon will cause the word Save to appear.)

ClickFunnels Saving Sections & Rows As Templates

5. Give your template a name & Click Save Section or Row.

Clickfunnels Save as template

Step 2: Add Section & Row Templates To New Pages

1. From within the page editor, hover over the Sections or Rows tabs and click either Add Section or Add Row.

Clickfunnels Saving Sections as templates

2. Click My Sections or My Rows from the pop-up menu.

Clickfunnels my row

3. Drag and drop the template you want from your list of templates to where you would like it to appear on the page.

Cliickfunnels drag and drop template

4. Save the page before closing the page editor.

Clickfunnels Close Page Editor

Important Note: Some sections and rows may contain elements that are exclusive to specific page types. Templates containing exclusive elements cannot be added to page types other than the one(s) for which they were intended.

For example, A credit card (checkout) element can only be added to Order Form pages. A section or row template containing this element could be added to other Order Form pages, but it could not be added to Optin pages or Sales pages.

ClickFunnels Adding a Pop Up To Your Page

A pop up is a small window that appears while browsing a website. Marketers mainly use pop-ups for advertising and generating leads. In this article, we will be covering how to add a pop up to your ClickFunnels page.

Step 1: How to Add A Pop Up To Your ClickFunnels Page:

1. Find the desired funnel you wish to add a pop up to and click on its name.

Clickfunnels add popup

2. Click on the desired funnel step.

3. Click on Edit Page.

Clickfunnels new popup step

4. From within the page editor, hover over Pop Up and click on Show Pop Up.

Step 2: Add Elements To Your Pop Up:

Just like the page editor, you can drag and drop elements to build and design your pop up.

1. Hover over ROWS and click on ADD ROW.

Clickfunnels Popup - Add row
2. Choose how many columns you would like to have on your row and drag and drop the row into the blue rectangle found in the pop up. You can add as many rows as you need.

3. Hover over ELEMENTS and click on ADD ELEMENT.

4. Drag and drop the desired elements into the row(s) in your pop up.

Clickfunnels Popup - Drag rows

5. Click SAVE.

ClickFunnels Save Button

Step 3: Set A Trigger For Your Pop Up:

Show when a user tries to leave your page:
This option will detect your visitors’ mouse movement towards the X close icon.

1. Click on EDIT POP UP SETTINGS

Clickfunnels popup - Edit popup settings

2. Click on the dropdown menu next to TRIGGER ON EXIT.

3. Close out of the Pop Up settings.

4. Click SAVE.

ClickFunnels Save Button

How to Create a Split Test in ClickFunnels

Step 1: Create a Split Test Variation

  • From within your funnel, select the step in the funnel for your split test.
  • Click on Create Variation. 
  • Select Create Duplicate Page or Create New Page from Template. 

Step 2: Edit Split Test Variation

Important Note: Any email integrations and page settings that you are using on your control page must be added to your variation page as well.

  • Edit the page as desired.
  • Adjust the slider to add weight (traffic) to either page variation.
  • Click on Apply Changes.
Clickfunnels - Split testing Edit Variation

Step 3: Declare Winner

  • Hover your mouse over each split test variation.
  • Click on Declare as Winner for your winning page.
Clickfunnels - split testing - declaration of winner

Important Note: When your split test is launched, the confidence score states 50/50 (the confidence score may start off showing less than 50% if the split test is added to a funnel that has already had traffic on it such as opt-ins & page views whether they were simply tests run by you or live traffic opt-ins & page views). Once the pages start getting traffic, the confidence score can change. Based on the number of sales or opt-ins, the system then calculates the chance of the variation outperforming the control and you will see a difference in the confidence score. 

To achieve the most accurate results, we recommend running your split test for at least 30 days. This will allow the system enough time to return the desired split percentage between your control and variation pages.

Recent Articles

Lavish Marketing