Skip to main content
An Official Vermont Government Website

Widgets

Description

Widgets are modular components that can be added to different sections of a webpage to provide specific functionality or display dynamic content.

Available Widgets

Widgets can be one, two or three columns. There are three types:

Button widget:

Button Widget

Image Widget:

Image Widget

Icon Widget:

Icon Widget

Adding and Configuring Widgets

  1. Navigate to Structure -> Block Layout.
  2. Select the “Place block” button in the region you would like your widget.

     

  3. You are then presented with the below modal. Select “+ Add content block”.

     

  4. Select the widget column type that matches the region you selected (two, three or sidebar regions)

     

Here’s a breakdown of each field:

  • Block Description: Essentially the “title” of the block. Used in the admin menu.
  • Image: The widget image if you’d like this to be an image widget. The aspect ratio for this image is 2:1, meaning for every 2 pixels of width, there is 1 in height. For example, 500W x 250H or 2500W x 1250H. It is recommended you upload the highest quality image you can, and the system will properly scale it to an efficient size for desktop and mobile. Note if you upload an image that does not match the aspect ratio, it will automatically crop off the edges.
  • Icon: If you’d like this to be an Icon widget, select an Icon here. Below is the list of icons available. Just search for the code and it will appear in the suggestions.
  • Headline: Bold text that will appear at the top of the widget, or below the icon/image.
  • Text: Additional text below the headline. Please keep concise.
  • Link: Location the entire widget links to. When pointing to an internal page, the title can be searched in the field and the system will automatically create a link to it. The advantage of this approach is it will correctly adjust the link if you modify the URL of the page. When linking to a local resource such as a pdf file, please leave out the domain name. For example, https://example.com/documents/example.pdf would be /documents/example.pdf
  • Button Text: Text that appears as a button at the bottom of image widget. Optional