Using FrameWork Sites

Edit Mode

Edit Mode is one of the key features of FrameWork Sites and it's important to understand it before starting to build your site. When you first log in to your site, you'll be looking at it in Live Mode, i.e., you'll be seeing the public version of your site. To manage the elements on the page and to see content only visible to you as a site administrator, click 'Edit Mode' on the right side of your gray admin bar. 


Now that you're in Edit Mode, you have access to manage the elements on the page.

Managing Elements

When you switch from Live Mode to Edit Mode, you'll see that blue   and red   bars appear on the screen. The blue bar lets you add an element to the page. Click this icon Add Icon to add an element. Just give it a title, select the element type from the list and click the green arrow to add it to the page.


Each element on the page has its own red 'admin' bar containing 3 important icons that you'll see throughout the FrameWork Sites administration. Here's what they do:


  • Delete (Delete) - Click an element's delete icon to delete it. You will be asked to confirm deletion and, once confirmed, that element and the contents inside will be gone for good! Use with caution!
  • Properties (Properties) - Clicking the properties icon will open the options and settings for that element. Depending on the element type it will let you edit the title, edit the contents inside, move the element to another location/page and change its display settings. 
  • Lightbulb (On/Off) - Use this icon to toggle an element on or off. Elements with 'on' lightbulbs will be visible on the live site (and in Live Mode). If the lighbulb is off, the element will not show up on the live site and will only be visible to site administrators viewing the site in Edit Mode. 

Creating Your Site Map

Your site map is made up of the pages and sub-pages on your site. Use the 'Site Map' link in your gray admin bar to manage your pages. The popup that opens shows you a hierarchical view of your site. Each page is represented by a folder icon Folder. Click on the folder to show the sub-pages beneath that page. You'll also notice the same 3 icons described above (delete, properties and on/off) as well as a green arrow Green arrow that will take you straight to that page. 


To create a new page, just enter a title for it in the 'New Page Name' field and click the green arrow. You'll see it appear in the list of pages. To create a sub-page, follow the same steps but make sure you're creating your page 'underneath' the appropriate parent page in the hierarchy. 

Using the WYSIWYG Editor

One of the most commonly used element types on your site is likely to be the 'HTML Edit Box'. This is an element with a powerful WYSIWYG editor, allowing you to format text exactly how you want it, as well as adding tables, images and other media.


To add an HTML Edit Box, click on the 'manage elements' icon Manage elements on the blue bar  . In the popup, enter a title for your new element and select 'HTML Edit Box' from the element type menu. Click the green arrow Green arrow to add your new element to the page. When you see the new element show up in the list below, click the green arrow beside it to edit it. Clicking the 'Edit HTML Text' tab will open the WYSIWYG editor and allow you to enter your content. 


You'll be familiar with most of the formatting options from word processing applications like Microsoft Word and OpenOffice but try experimenting with the ones you don't recognize! When you have your content looking the way you want it, click the 'save' icon   in the top left corner to save your changes. To see your changes reflected on the site, make sure you refresh your browser window.