2. The interface for FE Edit

The interface for the frontend editing is located as a top bar on the front.

At the top left corner you can switch to the Backend interface (1). Below this you will find a toggle button to expand the Site tree (2) and on the opposite side a toogle button to expand Tools & properties (3). On the top right hand corner you have the Admin section to Logout (4), a button to save any changes made to the page (5), a button to discard changes (6) and finally a toggle button to hide and unhide the FE Edit interface (7). (2.1)

By toggeling the Site tree, you will have access to add new pages, edit page properties and filter functions (1). The entire page tree is visible for easy navigation (2) and you can refresh the page tree (3). Collapse the Site tree section by clicking the arrow icon (4). (2.2)

Tools & Properties allows you to view the website in multiple screen sizes, like mobile, tablet, small desktop and large desktop (1) and you are able to preview hidden content elements by toggeling the eye icon (2). There is a listing of content elements type to be able to create new content on the page (3). The section 'Elements on page' list all created elements on the page, and by hovering an element in this list, you will automatically scroll down to that element on the page (4). Finally you can collapse the Tools & properties section by clicking the arrow icon (5). (2.3)