Page Editor Builder

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

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

  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

 

  • 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