A&S Web Guide

A helpful guide to web content and accessibility for the Faculty of Arts & Science, University of Toronto community.

You are here: Home / Drupal Guide / Three-Button Widget

Three-Button Widget

The three-button widget makes it easy for you to highlight important pages from your (or another) website in a visually stimulating way. As you might have guessed from the name, it creates three image-based links – no more, no less.

You can add a three-button widget to Pages, including your homepage. You won’t be able to add the widget to other types of content, such as news stories, events or profile pages.

Add a Three-Button Widget

  1. Hover over Content in the black header bar, then hover over Add Content. Click on Three-Button Widget.
  2. Enter the Three-Button Widget Title. This will display as a heading above your widget, so it should reflect the content you plan to include in the widget. For example, if you were planning to include links to your academic programs, the title could be “Our Programs.”
  3. In the Appear on What Page drop-down menu, select on which page the Three-Button Widget should display.

  1. Enter the Link Destination. This is the URL (e.g., https://www.utoronto.ca) to which the first image-based link will point.
  2. Enter the Link Text. This should be a brief but engaging descriptive label – and no more than 25 characters.

  1. Click Browse to upload an image and follow the standard Media browser prompts.

⚠ Tip: Remember to follow the recommended image dimensions (listed conveniently beneath the Browse button).

  1. Repeat steps one to six above for the remaining two buttons.
  2. Click Publish. 

Edit a Three-Button Widget

  1. Click on Content in the black header bar.
  2. Click on the Type drop-down menu and select Three-Button Widget. Press the blue Filter button.

  1. You will be shown a list of existing Three-Button Widgets on your site. Click edit beside the widget you would like to revise.

  1. Make your edits (change link destinations, link text and/or images as appropriate, being sure to read the formatting hints beneath each field).
  2. Click Save to publish your changes to your site.

Delete a Three-Button Widget

  1. Click on Content in the black header bar.
  2. Click on the Type drop-down menu and select Three-Button Widget. Press the blue Filter button.

  1. You will be shown a list of existing Three-Button Widgets on your site. Click edit beside the widget you would like to revise.

  1. Scroll to the bottom of the editing panel and select Unpublish. The widget will automatically be unpublished (you won’t need to confirm your decision). However, you can republish it any time by repeating the steps above but selecting Publish instead of Unpublish.