Clickfunnels WYSIWYG Editor
Table of Contents
- How to use ClickFunnels Page Builder
- Setting Button Actions
- Available Shortcodes
- Page Editor Actions
- Adding a Shortcode to an Image
- Add Elements to Page
- How to Add Rows and Columns
- How to Save Sections and Rows as Templates
- Add Section and Row Templates to New Pages
- Adding a Popup to your Page
- How to Create a Split Test
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.
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.
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 (#).
This is a list of the shortcodes you can use in ClickFunnels.
#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.
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.
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/.
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.
2. Click on the Set Action button.
3. Choose the Go To Website URL option and add the code in the empty field.
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.
3. Paste the code in the Link URL field.
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.
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.
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.
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.
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.)
5. Give your template a name & Click Save Section or Row.
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.
2. Click My Sections or My Rows from the pop-up menu.
3. Drag and drop the template you want from your list of templates to where you would like it to appear on the page.
4. Save the page before closing the 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.
2. Click on the desired funnel step.
3. Click on Edit Page.
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.
3. Hover over ELEMENTS and click on ADD ELEMENT.
4. Drag and drop the desired elements into the row(s) in your pop up.
5. Click SAVE.
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
2. Click on the dropdown menu next to TRIGGER ON EXIT.
3. Close out of the Pop Up settings.
4. Click SAVE.
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.
Step 3: Declare Winner
- Hover your mouse over each split test variation.
- Click on Declare as Winner for your winning page.
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.