About In-Place Editing

Scrivito offers powerful editing utilities directly on the website – content can be edited where it is shown to its audience.

In your browser’s address bar, first make sure that you’ve added “/scrivito” to your website’s URL: www.example.com/scrivito/. After logging in, the Scrivito panel shows up at the top, and the sidebar on the right-hand side of the window. Next, click “Edit” on the top bar to create, select, or use an existing working copy. If initially no working copy exists, Scrivito will automatically create one for you. You can then start editing, or navigate as usual.

The Scrivito panel

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


The Publish button on the top panel opens the changes list for optionally reviewing the changes made to the working copy – and publishing it. If you aren’t permitted to publish the working copy, either the “Request publish” button or no such button is available here.


The view mode switch lets you preview a page, activate in-place editing, or view the changes made to the page. 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.
Changes lets you view the changes made to the page compared to its most recently published version.


The top 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. Additionally, the menu includes more general items such as “Open dashboard”. The menu can be customized, so further or less items may be present.


The sidebar

The sidebar accommodates several buttons each of which represents a distinct set of functions: SearchHierarchy Browser, Content Browser, working copies, publishing historynotifications, and display sizes. The Content Browser is opened as a dialog, while clicking one of the other buttons opens the corresponding sidebar panel, revealing the functions included. Clicking the button once more minimizes the sidebar again.


The search panel lets you instantly find non-binary content in the CMS, i.e., first and foremost, pages containing the search term. The search results list is updated as you type, and every result includes the page type as well as the date the page was last changed.


The Hierarchy Browser lets you browse your website along the hierarchy formed by the pages and subpages of your site. Click an item to open the corresponding page. Using an item’s menu to the right, you can create a subpage, open the properties of the page, or delete it.


This button opens the Content Browser for inspecting and managing all CMS content, especially resources such as images and other binary data.


Sidebar button for opening the working copies panel. It lets you select a working copy and, depending on your permissions, publish the current one, create a new one or rename or delete the current working copy, open the current working copy’s list of changed content, and manage its collaborators.


If the published content is selected, this button opens the history panel containing the publishing history (“All content”) and lets you compare the current page with a previously published version (“This page”).


If there are warning messages or hints related to the current page, this sidebar button opens the notifications section that lets you view them. Click a notification to view its details or fix its cause.


Use this button to select one of several common screen sizes, e.g. of smartphones, 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


The colored 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, finally, indicate automatic navigations. Using drag and drop, Widgets can be freely arranged in the areas provided for them. Think of them as the building blocks of your pages. Read more about using widgets.

The small handles Scrivito displays at the top right of the colored frames when working with content are menus by means of which the properties of the respective widget can be changed, or, with navigations, new elements can be inserted, for example. 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 blog post on live updating.