Widget Previews

About Widget Previews

When selecting new widgets and editing widgets, there are a few preview options available. When selecting a widget from a category with more than one widget type (such as Berkeley Components), there are previews available as to what the widget looks like. When editing individual widgets, there is a preview window to give Builders an idea of what the widget will look like once saved.

Widget Preview Modes

The default for all new sites as of release 0.19.0 is "single preview mode" when selecting widgets, and "live preview" when editing widgets. Other sites may have other options selected. Builders can choose different settings at any time.

Selecting Widgets ("Add Content" screen)

The options for the "Add Content" screen are:

  1. Show one preview at a time (Single preview mode, recommended): One preview will be shown at a time. Select a widget type or reusable content item to see its preview.
  2. Show all previews at once (Automatic preview mode, the current default): All previews will be shown at once.
  3. Click to show previews (Manual preview mode): Select a widget type or reusable content item to toggle its preview on or off. More than one preview can be displayed at a time.
  4. Do not show any previews (Not recommended): No previews will be available in the Add Content screen.

For accessibility and usability reasons, we recommend #1 above, "show one preview at a time" (single preview mode). This mode reduces screen clutter, and cuts down on the number of keystrokes required to choose a widget. This is especially useful in the "Reusable Content" category when you have many reusable items available.

Screenshot of "Show one preview at a time," when selecting widgets from Berkeley Components:

Editing Widgets

On many sites, you will likely see a "live preview" while you are editing widgets. This means that the preview window updates periodically while you're editing the widget. The full set of options for the previews while editing widgets are:

  1. Show a live preview (the current default): The preview updates as you are editing.
  2. Click to show a preview: The preview will not update while you are editing. Click the Update preview button to see your changes.
  3. Do not show any previews: No previews will be available while editing widgets.

Screenshot of "live preview" when editing a widget:

Widget Preview Settings

To select different Widget Preview settings, navigate to the Site Builder dashboard, then click the "Open Berkeley" tab:

Then click "Widget Settings":

From there, select which options you'd like to use when selecting and editing widgets: