Widgets

Widgets are small blocks of content that live on various types of specialized pages, such as a landing page. They are used to highlight key pieces of information and often link to full pages that contain more detail.

Widgets—such as a statistic, testimonial, or profile widget—can be used to highlight or reinforce concepts that are being presented on a particular page. They can also be used to point out related relevant content present on another section of a site.

The availability of widgets will vary depending on a site’s needs and the permissions a user’s account may have; not all widget types may be present for a particular site, and not all users may have access to certain types of content.

Adding or editing a widget #

As stated, the availability of specific types of widgets depends on your site’s needs and if the site has been configured with a particular widget in mind.

To add a widget to a page, you will need to look for a “Widget” tab or property. A button with a plus sign () will allow you to create a new widget.

Existing widgets will appear as lines with the widgets’ title, heading, or label present. Clicking on this line of text will expand a widget’s configuration. You can then edit the widget’s properties like you would other types of content on your site.

Existing widgets will also have a set of buttons that allow you to:

  • Add a new widget beneath the current one ()
  • Move a widget’s position within a series of widgets ()
  • Temporarily hide a widget from being displayed ()
  • Delete a widget completely ()

Types of widgets #

Widgets will vary in their type dependent on the needs of a particular site.

Standard widgets #

Standard widgets usually contain three main components:

  1. A heading or title used to label the widget’s topic.
  2. Body text or content that briefly introduces the topic and conveys key points.
  3. Button(s) that can lead to more information about the topic, if needed.
Backoffice view of a Research page, with the Widgets tab selected, and a Departments widget expanded showing properties for Heading, Text, and Button.
The School of Medicine’s Research landing page has a Departments widget, which lists out links to 5 of the school’s departments associated with research. Here is how that widget is configured in Umbraco.

Statistics/Facts widget #

Statistics/facts widgets will allow you to pick from a list of statistics/facts that are already defined on your website.

The School of Medicine’s Research page, complete with a “Departments” widget containing a list of links to five different research-related departments and a statistics widget with the text “100 pre-doctoral students across 7 Ph.D. programs.”
The “Departments” widget is rendered on the “Research” page in the browser. A statistics widget is shown beneath. Widgets on landing pages, when viewed on large screens, appear as blocks of content in the page’s right-hand sidebar.

Profile/testimonial widgets #

Profile and testimonial widgets will pull in details about an existing profile page already on your website. Just choose the profile you wish to highlight, and the page will often display the subject’s name, photo, and a small detail from their profile like a pull quote or brief biographical statement.

A profile widget of Alison Lastinger of the Infectious Diseases program. Alison’s photo is overtop of her name, her area of study, and buttons to her story and more profiles.
Profile widgets are in use on the School of Medicine website, highlighting students in the various programs in the school.