Page Editor Builder

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 Thiio 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

Open

• Click the more options button on the right and click edit

Open

• 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