Widgets 

Widgets are individual blocks of content. The State of Vermont web template comes with three different styles of widgets: Button Widget, Image Widget, and Icon Widget. Widgets can display static content or be interactive components that link to other sections of a site. Widgets can appear in a one, two, or three-column layout.

Please Note: You must be logged in to the State of Vermont website that you are editing to follow the instructions below. 

• Create and Place a Widget
• Example Widgets

Create and Place a Widget(s)  

1. Structure
   

   Scroll over 'Structure' on the top navigation.

2. Block layout
   

   Scroll over 'Block layout'.

3. Add custom block
   

   Select 'Add custom block'.

4. Widget
   

   Select one of the three types of widgets: 'Widget (Image and Text - 2 Column), 'Widget (Image and Text - 3 Column)', and 'Widget (Image and Text - Sidebar Regions)'.

5. Block Description
   

   Add a 'Block description'. This is also known as the title of your widget.

6. Optional: Image
   

   If your widget includes an 'Image', select 'Choose File' to navigate to and select the 'Image' file. You should upload the highest-quality image, and the system will scale it for desktop and mobile. If you upload an image that does not match the aspect ratio for a widget, it will automatically be cropped.

7. Alternative text
   

   If you added an image, enter 'Alternative text'.

8. Optional: Icon
   

   Enter a term (i.e., house, dollar sign, check) in the 'Icon' field if your widget includes an icon. The State of Vermont web template uses the Font Awesome (fa) icon library. When searching the library look, select the icon you want to use and look for the code (e.g., fa-house, fa-user). Additional icon settings to explore include: Style (Solid, Regular, Light, Duotone, Thin, Kit Uploads), Icon Set (Classic, Sharp), Size (Default, Extra Small, Small, Large, 2x-10x), Fixed Width, Border, Invert Color, Animation (Spin, Pulse), Pull (Left, Right), Additional Classes, Icon Mask, and Power Transforms. Please note: State of Vermont websites should not use any sort of animation settings to align with accessibility best practices.

9. Optional: Headline
   

   Enter a 'Headline' for the widget. This bold text will appear at the top of the widget or below the icon/image.

10. Optional: Text
    

    Enter any additional 'Text'. This will appear below the 'Headline'.

11. Optional: Button Text
    

    If you would like to include a button on the widget, enter the copy in the 'Button Text' field.

12. Optional: URL
    

    Enter the 'URL' which a user will direct to when the widget is clicked. 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.

13. Link Text
    

    If you entered a 'URL', enter the 'Link text' that will be displayed on the button.

14. Save
    

    Select 'Save'.

15. Display title
    

    In the 'Configure block' window, indicate if you would like to 'Display title' of the widget. It is checked to 'Display title' by default.

16. Pages
    

    In the 'Configure block' window, enter the 'Pages' the widget should appear on.

17. Region
    

    In the 'Configure block' window, enter the template 'Region' the widget should appear in. For example, 'Content bottom'.

18. Save block
    

    Select 'Save block'.

19. Back to site
    

    Select 'Back to site' on the top navigation.

20. View
    

    Confirm that the widget appears in the 'Content bottom' region of the page you selected.

Example Widgets  

Below are examples of the three Widget styles.