Editing Page and Widget Properties

Editing Page and Widget Properties

Main menu at the top right

Pages and widgets may have properties that cannot be seen or altered directly on the page being edited. If, for example, it is optional to have a breadcrumb navigation at the top of a page, you as an editor should be given a means to switch this navigation on or off. Web developers usually make such options available in the page or widget properties that are presented and can be edited in a dialog or on a sidebar panel.

Widget properties sidebar

With widgets, click the “Widget properties” menu item for opening the properties dialog or sidebar panel. You can switch between these two modes using the corresponding option in your user menu at the bottom right. By the way, you can navigate to the widget whose properties are being displayed on the sidebar panel by clicking the widget type name (e.g. “Headline”) on the top bar of the panel.

With pages, you can open their properties dialog via the main menu at the top right. If you would rather edit page properties on the sidebar, click the gear button to open the “Properties” panel. Should you have used this panel for editing widget properties directly before, click the back button at the top left of the panel to have the page properties displayed again.

Widget properties

Properties of a widget displayed in a dialog

The properties of a widget like the ones shown here for a “Button” widget often include display options, e.g. colors, embedding, alignment or widths, but also other kinds of data that cannot be entered in place: the address to show on a Google map, the link an image points to, etc.

Web developers can make almost any desired “behavior” of a widget configurable on its property view.

Changed properties are indicated by a  icon.

[New in 1.27.0]Hovering over a changed property causes a “Discard” button to appear for letting you restore the property’s value from the published content, if needed.

Page properties

Page properties displayed in a dialog

Page properties refer to a page as a whole. They often also include display or layout options, like with widgets, but the main focus usually lies on meta aspects such as good findability. Then it is important to be able to assign tags and keywords, for example, so that searches performed using search engines lead to optimal hits, especially if you want to be found on the web via your website, for example by potential customers.

Property types and their editing tools

There are various types of content, some of which can be edited in place on the pages themselves, others on property dialogs. Every type of content Scrivito supports out of the box has its dedicated editor, e.g. for single or multiline text, images, permalinks, single or multiple selection options, etc. On the screenshot above, the permalink editor, two single-line input fields and a multiple selection editor can be seen.

The reason why some of the built-in editing tools are not suitable for WYSIWYG editing (e.g. the “linklist” editor or the “enum” editor) is that in order to utilize them, their editing controls need to be always visible. This is why a ”linklist” editor or a background color selector is made available on a property dialog of a widget or a page.

Using the built-in tools

All of the built-in tools for editing content or adjusting settings can be used intuitively: Click anywhere inside a text box and start typing, or click an image to select a different one using the Content Browser.

With some tools, however, their potential isn’t obvious at first sight, so a few explanatory words might be useful.

  • All changes you make using the Scrivito editing tools are saved automatically in the background. The only exception to this rule are tools that require validation which currently only applies to the permalink editor.

The text editor 

Scrivito includes a text editor for formatting pieces of text in-place and at the click of a button.

Simply select the text you want to format or link. This causes the formatting bar to show up. Choose the styles you want, then click inside the text again to continue writing.

For creating a link, select the text to be linked, then click the chain button on the formatting bar and enter or paste the target URL into the input field that appears. Click the folder button to the left to locate an internal link target using the Content Browser. For specifying the link’s rel attribute values, click the gear icon.

The buttons available on the toolbar can be configured by a website developer.

Link lists are primarily meant for maintaining “see also” (“further reading”, “you might also like”, etc.) links. If a developer has equipped a page type with such a list, the link list editor will show up in the properties of such pages. It lets you add, sort, and remove internal or external (off-site) links.

You can use the Content Browser to select an internal link target (an object part of the site content) after clicking the folder button to the left.

Each link in a link list consists of a title and a URL. Omitting the title of an internal link causes the title of the linked CMS object to be used, if present.

As an alternative to link lists, reference lists can be used. The latter are restricted to pointing to CMS objects, which is often sufficient and makes them a bit easier to use.

The string list editor 

The string list editor is ideal for collecting words, short phrases, names etc. and assigning them to a page, an image, or any other kind of CMS object. The editor suppresses duplicates and supports auto-completion which helps to avoid misspelt items, making it the best choice for editing tags.

Since the string list editor supports phrases, hitting the space key does not complete an item or separate it from the next one. Please use the tab or enter key instead.