About In-Place Editing

Scrivito offers powerful editing utilities directly on the website – content can be edited where it is shown to its audience. There is no need to switch to a separate back end. We call this in-place editing.

In-place editing requires a modern web browser that supports HTML 5 and CSS 3. We recommend using the latest version of Firefox, Chrome, or Safari.

After logging in to your Scrivito application, the Scrivito panel appears at the top of the browser window.

The Scrivito panel

The Scrivito panel consists of the working copy indicator, a Publish button, view mode switches, and the page menu button. Clicking the working copy indicator opens or closes  the working copy section of the sidebar on the right hand side.

Publish button The Publish button on the top panel opens the changes view for optionally reviewing the changes made to the working copy – and publishing it.
View mode switch The view mode switch lets you preview a page, or activate in-place editing. The switches are toggles. Only one of them can be activated at a time.
Preview lets you look at a page with the eyes of a website visitor. However, the Scrivito panel remains visible.
Edit puts the website in editing mode. Click an element to change its contents. You can use the context menu of the browser to open links in a new tab.

Page menu
The page menu offers items that refer to the current page as a whole, e.g. for editing its properties (depending on the mode), or for duplicating or deleting it. See Working with Pages for details.

The sidebar


Sidebar

The sidebar accommodates four main buttons each of which represents a distinct set of functions: working copies, the Content Browser, notifications, and display sizes. The Content Browser is opened directly, but clicking one of the other buttons opens the sidebar, revealing the functions included in the corresponding set. Clicking the button once more minimizes the sidebar again.

This button opens the Content Browser for working with resources such as images or other binary data.  
Sidebar button for opening the working copies section.
If there are warning messages related to the current page, this sidebar button opens the notifications section that lets you view them.
Use this button to select one of several common screen sizes, e.g. of mobile phones, to preview your pages.
This hides the Scrivito panel and the sidebar, giving you more space for editing content. To unhide the controls, click the little flap that appears at the top edge of the browser window.

Widgets

Widgets The frames on a page indicate content that can be edited. In editing mode, hovering over a frame activates the controls for modifying its content. Yellow frames indicate widgets meant to contain other widgets. Green frames are used for widgets containing the actual content, and blue frames indicate navigation lists. Widgets can be freely arranged using drag and drop. Think of them as the building blocks of your pages. Read more about using widgets.
Handles The handles Scrivito displays when editing content or viewing changes are for working with widgets and lists (e.g. navigations). Clicking a handle opens the menu of the element. In editing mode, a widget can be grabbed by its handle and dragged to a different place on the page.

Live updating

For boosting collaboration, Scrivito supports multiple editors working on the same page in the same working copy. The edits made by any of the coworkers are reflected in the respective browser windows of the others, enabling the participants to progress faster and complete their work earlier. Read more in our latest blog post on live updating.