Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

Version 1 Current »

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_.pngbuilder_2_.png

Click the more options button on the right and click edit

builder_3_.png

Click the editor tool on the page you want to edit.

builder_4_.png

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: 

builder_5.png

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:

builder_6_.png

  • “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.

builder_8.png

  • “Duplicate” 

  • “Delete” 

Additionally you will see this tool which is your column editor tool:

builder_9_.png

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:

builder_10_.pngbuilder_11_.png

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:

builder_12.png

Once you are confident you want to remove it, click OK.

There is an additional more options menu on the left side

builder_13.png

When clicked, it will bring down a drop-down menu. This will be your Global Settings at the page level.

builder_14.png

Here you can do all the same editing plus some extra things. 

builder_15.png

You can edit your SEO, Social Media Placements, and add Metatags

builder_16.png

General appearance

builder_17.png

Next you can add the elements such as social proof bubble, exit pop ups, blogs, etc.

builder_19_.png

CSS Code

builder_20_.png

Javascript Code

builder_21_.png

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:

builder_22.png

Preview your page without the tool menus using the eye tool and view it in a new tab with the icon on the right:

builder_23.png

Quickly undo or redo changes using this tool at the top middle of the page:

builder_25.png

In the upper right corner, you can choose from the drop-down to save as draft, save, and publish.

builder_24_.png

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

  • No labels