Widgets: The building blocks to your site design

I’m sure you’ve heard plenty about Widgets by now. You might be wondering what the hay is a Widget? Fair question. Widgets are tools that help you design pages in your site. Would you like to introduce some imagery through a banner? Do it with a Widget. How about featuring select modules on the home page? That’s where a curated content Widget comes in handy. Provide links to commonly used software for your users? Links Widget!

Wisetail offers a wide variety of Widgets with varying functions — take a look at the glossary of Widgets attached to this guide for a complete description of each Widget.

Adding and Managing Widgets

Let’s begin by stating that Widgets can live in two locations on a page: the main column or the right column. Certain Widgets can only live in certain places (the locations for these Widgets are in the attached glossary). The main column takes up the majority of the page and is the only area where you can place content Widgets.

To add a Widget, go into the admin tool and select the system tab. From here, click on the pages pill and select the page where you’d like to add the Widget.

widgets gif 1

Once on this page, you have the option to add and manage Widgets. You can easily add a Widget (or multiple) to the main column or right column by clicking the ‘Add Widget’ button for each column.

widget gif 2

The next step is managing the Widgets – You can customize your Widgets, change their position on the page, or delete them using the icons on either side of the Widget display card.

widgets 3

The hamburger on the left help you reorder Widgets on the page. Click the icon and drag to move the Widget position up or down.

To manage the options and content of a Widget, or to delete it, click the three dots on the right.

Now, let’s talk about the settings you will see when you click the ‘manage’ button from this dropdown.

Widget Settings

Oh boy, there are quite a few Widget settings available depending on the Widget you’ll be managing. Let’s begin with a few of the common settings:

  • Title: This is simply the Widget title you’d like to display above the Widget content. This title will inherit the brand font and colors you selected when designing the initial site branding.
  • Show Title: This checkbox will allow you to show or hide the title on a Widget. If you don’t have the title filled in, but you’ve selected “Show Title,” a default title will display. Pro Tip: Don’t show the title on a banner Widget!
  • Autohide if Empty: If the Widget doesn’t have any content it’ll be hidden from its Page. This is especially handy if you’re using a filtered content Widget to display enrolled content. Or, an announcement Widget with a feature date!
  • Show Quick Link: This is an area where you can designate a URL for a user to follow. The Quick Link appears underneath the content, to add the desired URL you simply populate the ‘Link URL’ field beneath the ‘Show Quick Link’ checkbox.

Content Widget Display types

If you’re using a curated or filtered content Widget you will have the option to select from four different display types:

featured content settings

Tile: This view shows the thumbnail image with a description and title below the image:

tile view

Thumbnail: This view shows just the thumbnail image. If your cursor hovers over the image, the module title will appear (as seen below):

thumbnail view

List: This shows the thumbnail image aligned to the left of the main column with the Module title and description extending to the right of the thumbnail:

list view

Compact: This appears similar to the list view above. With this one, however, the width is compacted to take up less page space:

compact view

PRO TIP: If you choose the thumbnail or list view, be sure to use multiples of three in either a curated or filtered content Widget to fill the page!

Widgets are integral to creating an intuitive user experience and stylish site design. We highly encourage you to explore the various Widgets available and become comfortable with managing those Widget settings. A great way to do this, if your site is live, would be creating a test page which is ‘inactive.’ Use this test page to mock up a potential home page or custom page and familiarize yourself with all of the Wisetail Widget Wheezes available. Please refer to the attached document for a full list of Widgets with accompanying descriptions.

 

Article Attachments

Was this article helpful?