About In-Place Editing

Scrivito offers powerful editing utilities directly on the website, meaning that 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. Watch this introductory video:

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 the demo or your Scrivito Rails application, the Scrivito panel appears at the top of the browser window.

The Scrivito panel consists of the working copy indicator, 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.

View mode switches	The view mode switches let you control the content displayed on 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. Changes helps you to identify the components of a page that have been added to it, deleted or altered.
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.

View mode switches

The view mode switches let you control the content displayed on 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.
Changes helps you to identify the components of a page that have been added to it, deleted or altered.

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.

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	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.

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.

Learn more about using widgets

About In-Place Editing

About In-Place Editing

The Scrivito panel

The sidebar

Widgets