About the editor layout

You can use the website editor to make changes to your website, such as changing colors and layout and adding new pages and content.

The editor consists of the following areas:

Top Toolbar Area

The Top Toolbar area contains buttons to manage the pages of your website. You can add, view, save and delete pages. This toolbar also contains tools to format text in editable text areas, when the such an area has the focus. On the right side there is a close button (x) to close the editor.

Left Sidebar Area

The Left Sidebar area contains a hierarchical menu with options to configure the selected section in your page. The sidebar will automatically scroll and display the appropriate configuration as you click things in your page, but you can manually drill down to the section you want. The changes are immediately displayed on the page, but are only publicly visible when the Save button is pressed on the top toolbar.

Design Area

The Design area contains the current webpage to be edited. The content appears in editable format in places where editing is permitted. Dotted lines display how the various sections of the page are separated. Dashed lines separate the different editable areas of the page. Each page consists of 3 editable areas: the Site Header, the Page Content and the Site Footer.

The Header and the Footer are the same across all website pages. It doesn't matter which page you are currently editing. Changes to Header and Footer are visible in all website pages. The content in the Page Content is unique for each page. Not all pages have editable content. Only pages available in the View Page drop down button in the Top Toolbar are editable.

Rows and Sections

Each editable area (Header, Content, Footer) consists of rows and sections. A row can contain many sections. In large screens the sections of a row are displayed horizontally one next to another, while in smaller mobile screens they are displayed vertically.

You can add rows and sections to your page by clicking the round plus buttons. Choose a row or section from the menu to add it to the page. Once it is added, its configuration options are displayed on the left sidebar. A newly added row contains placeholders for its sections. Click the plus button in each placeholder to choose a section and configure it.

Each row and section have a label to identify and select it. The labels become visible when the mouse hovers over a row or a section. Clicking the label will display its configuration options and will also show a small menu with options to move or delete the element.

Remember, the Header and Footer are always the same in all pages, thus adding sections to the Header and Footer will be affect all pages.