Widget Gallery - The Building Blocks of Your Website Content

Scrivito includes several widgets that can be placed on web pages either by means of in-place editing or by using a helper in a view. This gallery provides an overview of the available widgets and explains in short how to create and use them. Watch this short introduction to widgets:

Image Widget

This widget displays an image. Drag an image file from your computer to the drop zone (or the current image), or choose the image using the Content Browser (just click the widget).

Text Widget

The text widget displays an HTML content field for adding styled text to a page.

Google Maps Widget

This widget adds a Google map to the page. The address to be shown can be edited. If you choose an address recognized by Google, a notification bubble is displayed as can be seen on the thumbnail.

Slider Widget

The Twitter Bootstrap carousel is used to display any number of images. The list of images can be edited by means of the properties dialog of the widget.

Video Widget

The video widget can play video resources stored in the CMS and uses Projekktor to play any mp4 video.

Teaser Widget

A teaser is often used at the top of a page to display the main information and draw the attention of the user to itself.

Accordion Widget

The accordion widget is an example of a more complex widget. It is based on Twitter Bootstrap's Collapse component. Every accordion panel is defined by a title and any number of nested widgets. In editing mode, the accordion widget is fully expanded to ease in-place editing.

Headline Widget

The headline widget displays a title on the page. It is often used in combination with other widgets to form rich page structures.

Flickr Widget

The Flickr widget displays a selection of images from Flickr. There are several configuration options, e.g. the image source and the number of images to display.

CRM Event Widget

The CRM Event Widget displays the date and location of an event scheduled in the Infopark CRM. Attribute values are enriched with semantic data to support search engines with indexing.

PDF Widget

The PDF Widget displays a PDF file on a page of your website using Mozilla's pdf.js.

Icon Box Widget

The Icon Box Widget displays an icon from a collection of over 400. The icon color is selectable.

Spacing Widget

The spacing widget lets an editor insert more space between two widgets.

HighlightJs Widget

The HighlightJs widget lets you highlight source code in different languages.

Table Widget

Using the table widget, you can add a Bootstrap-styled table to a web page.

SEO Headline Widget

This widget is a Headline Widget with some attributes for SEO.

Tabbed Content Widget

Places a tab group onto your page for structuring your content.

CRM Form Widget

Inserts a form into your page. This widget contains some options for more comfort. It detects existing users, creates new ones, adds tags to them, and lets you add them to events.

Three Column Widget

For more flexibility when creating the page layout, this widget lets you insert a row with three columns into the page.

Two Column Widget

This widget adds a two-column container to a page. The columns can be filled with widgets.

Link List Widget

A widget for creating a simple link list. It also lets you use the text as a CSS class to style each list element.

Timeline Widget

A Widget for creating a simple timeline.

Section Widgets

This is a collection of three widgets for dividing a page into sections. The first one creates a background section with a solid color. The second widget lets you choose an image and produces a parallax effect. The third widget serves to place a full-width video onto your page, with an image as a fallback on mobile devices.

Slick Slider Widget

A Scrivito widget that adds a slider to a page. It has attributes for specifying its responsive behavior, scroll speed, and more.

Picture Widget

A Scrivito image widget that utilizes the picture tag. This allows you to choose different images for different display resolutions and device orientations.

Content Box Widget

A Scrivito widget that adds a content box to your page. You can choose from different styles and assign a background color to the box.