After activating in-place editing using the “Edit” switch on the Scrivito top 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 can contain.
Using Widgets and Editing Their Properties
Using Widgets and Editing Their Properties
Adding widgets to a page
There are several ways to add a widget to a page. If you are happy with duplicating or copying and pasting an existing one from the current or any other page, you can do so using the menu of the widget concerned (see below for details).
Otherwise, just click the plus button at the top or the bottom edge of a widget to open the widget selection dialog, and pick the type of the new widget you wish to insert above or, respectively, below the existing one.
In case you prefer adding widgets via drag and drop, there’s also a widget sidebar panel that lets you grab the desired widget, drag it to where you want to position it on the page, and drop it there.
Note that it may not be possible to unconditionally insert some widget anywhere on the page. The Scrivito Example App, for instance, requires standard pages to be made up of section widgets. Widgets of this type are styled containers that can be filled with any kind of other widgets. Every page can hold up to 1,000 widgets.
Editing a widget’s content
With most widgets, their most relevant pieces of content can be edited directly on the pages.
The contents of an image widget, for example, can be provided 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, or for uploading further images and using them.
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 toolbar.
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.
Using 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. In addition to the ones built into Scrivito, 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.
In editing mode, you can copy a widget. This places it onto an internal clipboard. Afterwards, you can paste the widget anywhere to 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 needed.
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.
As is usual with drag and drop, just grab a widget by its handle, drag it to the desired place on the page (within the editable area), and drop it there.
