How to Use the Editor Tool
Purpose:
The purpose of this walkthrough is to help learn how to use the editor tool.
Pre Requisites:
Email
Shop page
Funnel page
Membership site
Blog
The WebForce Page Editor tool is accessed through your:
Emails
Accessed by going to:
Settings->Email Communication->Builder Tool
For Transactional Emails
Shop
Accessed by going to:
Settings->Shop->Appearance
For: Design and Product Listings
Funnels
Accessed by going to:
Funnels->More Options/Edit->Clicking editor tool on individual pages
For: Website and Sales Pages
Membership Site
Website, Accounts, and Course Materials
Blog
Accessed by going to:
Settings->Blog->Appearance
For: Blog Design and Blog Posts
For the purpose of this walkthrough, we are going through the page editor through Funnels
Navigate to Funnels on the left hand side menu
Click the more options button on the right and click edit
Click the editor tool on the page you want to edit.
Now you will be in the editor tool where everything can be individually edited. When you hover a section of the page, it will highlight like this:
Each place that can be edited will be surrounded by a colored box. The colors mean:
Black- Section
Yellow- Row
Pink- Column
Blue-Component
When you select an element there are 4 actions at the top of the box:
“Move” tool
“Edit”
Here you can update the style and content of your text, you also have the option to move the advanced tab and input coding if you are able.
“Duplicate”
“Delete”
Additionally you will see this tool which is your column editor tool:
Note: some components may not have every function, and some are programmed to always be present or cannot be edited.
Here you have a:
Move
Text editor
Add:
Here you have many options to add to your page. Once you pick what you want it will appear under the section you are working in like this:
If you do not want to element or decide to do in another direction, once you hit the trash can this warning will pop up:
Once you are confident you want to remove it, click OK.
There is an additional more options menu on the left side
When clicked, it will bring down a drop-down menu. This will be your Global Settings at the page level.
Here you can do all the same editing plus some extra things.
You can edit your SEO, Social Media Placements, and add Metatags
General appearance
Next you can add the elements such as social proof bubble, exit pop ups, blogs, etc.
CSS Code
Javascript Code
View previous versions of page
When you are getting close to be confident with your design, you can preview your layout on desktop, tablet, and mobile using this tool:
Preview your page without the tool menus using the eye tool and view it in a new tab with the icon on the right:
Quickly undo or redo changes using this tool at the top middle of the page:
In the upper right corner, you can choose from the drop-down to save as draft, save, and publish.
Once you are happy with your page, hit publish. You will see your changes immediately. Go back in anytime to make edits and hit save to see changes.
Checklist:
Email
Shop page
Funnel page
Membership site
Blog