Editor Tool

Owned by Luis Madrid
Last updated: Nov 23, 2023 by Santiago Cuartas
4 min read

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

 

 

  1. The WebForce Page Editor tool is accessed through your: 

    • Emails 

      • Accessed by going to: 

        • Settings->Email Communication->Builder Tool

          • For Transactional Emails 

  2. Shop 

    • Accessed by going to: 

      • Settings->Shop->Appearance 

        • For: Design and Product Listings 

  3. Funnels 

    • Accessed by going to: 

      • Funnels->More Options/Edit->Clicking editor tool on individual pages 

        • For: Website and Sales Pages 

  4. Membership Site 

    • Website, Accounts, and Course Materials 

  5. 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

builder_1_.png
builder_2_.png

 

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: 

  1. Black- Section 

    1. Yellow- Row 

    2. Pink- Column 

    3. 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 versionsof 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