Using Widgets

Using Widgets

After activating in-place editing using the “Edit” switch on the Scrivito panel, you can alter text and also add, remove, or rearrange page components. We call these components widgets. Think of widgets as boxes that are predefined with respect to the kind of content they are meant to contain (take a look at the gallery).

The image widget, for example, can be filled by clicking the drop zone of the widget or the image it contains. This opens the Content Browser for selecting an image from the ones already present in the CMS. You can also drag an image file from your desktop or your file system browser to the widget and drop it there.

For text widgets, it is usually sufficient to click the widget area in order to make the text editable (enable the editing mode via the Scrivito panel first). For simple, single-line text such as a headline, no formatting options are available, whereas text blocks can be formatted using an editing bar.

When hovering over a widget, a plus button appears at the top and bottom borders of the widget. Click one of them to insert a new widget above or, respectively, below the widget.

The widget menu

Every widget has a handle for opening its menu (and for moving the widget, see below). Using this menu, you can have the widget properties displayed (if it has any) or edit them in editing mode. Property views can be provided and enhanced by a website developer, so if you miss something, don't hesitate to ask.

The menu also lets you delete a widget or duplicate it. Note that the latter does not duplicate referenced content, e.g. images. So, after duplicating an image widget, you'll have two of them displaying the same image object.

After a widget has been altered, a menu item for discarding the changes is available. Note that for container widgets (e.g. a 2-column widget) this only reverts the changes made to the widget itself (e.g. the column widths), not those made to its content.

In editing mode, you can copy a widget. This places it onto an internal clipboard. Afterwards, you can paste the widget anywhere into the same or a different page. The copy is inserted at the position of the widget whose menu is used. Since pasting a widget doesn't remove it from the clipboard, you can paste it as often as required.

For moving a widget to a different page, simply copy it and then delete it from the source page. Then navigate to the destination page and paste the widget there.

Arranging widgets

You can arrange your content according to your or your website visitors' preferences.

Just grab individual widgets by their handle and drag them to the desired place on the page (within the editable area).