4. Tools and properties functions

The Tools & Properties allows you to view the website in different screen sizes, view hidden content and add new content on the pages. Expand the Tools & Properties bar on the right hand side.

At the top of the Tools & Properties bar, the website can easily switch between different screen sizes; desktop, laptop, tablet and mobile.

The Tools & properties bar contains a function to be able to view hidden elements on the website. This is a very useful function when adding new content to an already published page, and being able to preview the changes. By clicking the eye icon in the top right corner of the section, hidden elements will show with a slight transparency. (4.2.1)

There are sections in the Tools & properties bar which are divided into the different types of content elements. The different sections can be expanded by clicking the section title or the arrow on the right hand side, and shows icons for the content types. To add a new content, grab the icon for the content type and drag it onto the page. Orange boxes will appear, where it is possible to place the content, and are highlighted green when you can drop the content. After dropping it, a popup will appear with the backend interface of the content. Simply fill out the necessary fields and Save and close. (4.3.1)

It is possible to do inline editing in the frontend editing interface, meaning that you can make changes in texts directly on the web page (1). In the case that you need to change images, the header type or other things not available in the inline editing, you can use the pen icon to open the backend interface (2). This panel also allow you to hide content, delete it add new content after and move content element up and down with the arrows (2). When editing text you can format it, just as in the backend, using the formating panel at the top (3). When changes are made inline on a page, they will be logged at the top left, and can be saved or discarded (4). If you navigate away from the page without saving, a promt will ask you if you want to save the changes or discard and navigate away from the page.