Drupal 7 Working with Widgets

Please Note that we have a video tutorial available on this subject! Written instructions are available below.

Widgets are pre-formatted, editable blocks that support various types of media and text. They are designed to show links, news, images, and other types of data in an organized, visually appealing fashion.

There are two ways to create widgets. One is to use the built-in tool. The other is to create a block and add styled text to it. Both require two steps to display on a page: Create the widget, then assign the widget to one or more pages.

Before you get started, prepare any images you want to use.

Using the built-in Widget content creator

1. Click Add Content, then Widget.
2. The title field is required.
3. If including an image, browse for and upload your image. Be sure to include Alternate text as required for accessibility purposes.
4. Enter the text needed in the Widget Teaser.
5. Enter Widget Link Title. This is the name of the URL you link off to.
6. Enter Widget Link URL. If using an existing Drupal page, you use this format: page-name Alternately, you can use a fully-qualified URL.
7. Scroll down and change Publishing Options to Published and click Save.
8. After you've created the widget, assign it to a page.

Create a block that will reside in the Widget Region

This method provides a little more flexibility and styling options.

1. Navigate to Structure, then Blocks. Click Add Block.
2. Leave Block ID blank and Enter Block Description. This will be the name of your block but not visible to users. Leave Block Title blank.
3. In the Block Body section, enter the text you want to display and insert a photo, if desired, using the Image button.
4. Optional: If you want the widget to appear on a page that is not the home page, enter the Page Title in the Pages box. Use the format /content/page-name. If you want it to only appear on the home page, don’t select anything.
5. Leave other settings as default and click Save Block.
6. After you've created the widget, assign it to a page.

Assign a widget to a page

Widgets are contained inside blocks. The above 7 steps create the widget, but it won’t appear anywhere until you assign it to a page.

1. The block you just created will be near the bottom of the Disabled region. Locate it by the Block Description you entered previously.
2. Assign it to the Widgets Region by clicking the down arrow and picking “Widgets”. Scroll all the way down and save.

The Recent News widget

The Recent News widget is an automatically generated widget. It pulls your three most recent News Items and puts the title in the widget. The only way to add and remove items from this is to create or delete (or unpublish) pages that are in the News Item content type. To create News Items, click Add Content and select News.

Editing existing widgets

To find your widgets, go to Find Content. All your content is here and you can sort by type by using the “Show only items where” field. Select Type, select Widget from the drop down box, and click Filter. You can then edit your widget.

Deleting widgets

You can delete a widget you’re no longer using by navigating to Administer Site, Site Building, Blocks. To permanently remove a block, click the delete button next to it. If you want to simply un-publish it for possible re-use later, move it to the Disabled region of the blocks page. Note that we cannot recover blocks that have been deleted.