Drawer Template

The drawer template lets you organize content into "drawers" or expandable / collapsible subsections in the center of the page. Each drawer consists of a Drawer Title, where you enter a given section's title text and a Drawer Body, where you input its corresponding content. This template is ideal for lengthy content (such as FAQs).

The page content is made up of blocks in two locations:

1. Left Blocks display content on the left column of the page, under the navigation.
2. Middle Blocks display content in the center of the page.

Middle Blocks have three sections: Top, Drawers and Bottom.

The Top and Bottom sections can be WYSIWYG or a shared block (to insert a module, for example), much like the Middle Blocks of an Article Template.

Add an optional intro banner to the top of your drawer page.

Working with Drawers

• Drawers can be added, deleted or reordered by using the plus, and delete icons.
  
  

  

• The buttons will be grayed out until you mouse over them.
• Note: If you want to remove all the drawers from a page, the template needs to be changed. Email wts@ucsd.edu for assistance.

If you want to have separate groups of drawers on the same page, you will need to create multiple Middle Blocks, each with its own Top, Drawers and Bottom sections.

Drawer Styles

The default drawer style is 'dark' as displayed on the drawers above. You can change the style to 'light.'

Example of light style drawers

Note: This is just an image, you can't interact with this example.

Change the drawer style on a page

Note: You can only have one style of drawers per page (light or dark)

1. Edit the page
2. Scroll down to "Advanced Options." Click the Show radio button if needed.
3. Click on Drawer Style Options to expand it
   
   
4. Select 'Light'
5. Submit your changes and Publish as normal

Optional Feature: Intro Banner

You can use the intro banner on an drawer page much like you would use a hero on a homepage template. There are some key differences:

• The intro banner is only one image. It can't be a rotator.
• The intro banner does not have links.
• The image size is locked to 1500 x 480 pixels. If your image is a different size it will be cropped to those dimensions.
• See an example of the Intro Banner in use.

Best Practices

• Appropriate for setting the tone on an index page.
• Avoid over-using the intro banner throughout your site.
• Choose an appropriately sized image. See the intro banner image library.

To Add an Intro Banner to an Existing Drawer Page

1. From the Edit screen of your Drawer Template, scroll down to "Advanced Options." Click the Show radio button if needed.
2. Click on the Intro Banner drawer to expand it.
3. Complete these fields:
   • Enable Intro Banner? Yes
   • Background type: Select one:
     
     • Image to upload an image
       
       • Background Image: 1500 x 480 pixels
       • See the intro banner image library for pre-cropped images
       • Image Description (Alt Text): Describe the image for users that can't see them (images disabled/didn't load, using a screen reader, etc.)
     • Default (pre-canned background)
       
       • Slide Background (choose one):
         • Navy (select light text below)
         • Yellow (select dark text below)
         • Blue Orb (select light text below)
   • Text Color: Light or Dark
   • Headline alignment: Center or Left
   • Headline (all caps):
     
     • Approximately 32 characters
     • Uses H1 Heading. Do not start with an H1 heading in the Middle Block content if you are using an intro banner. (Exception: Blink and TritonLink have special behavior for H1 headings, so the Intro Banner Headline will not create an H1 in those sites. Enter your H1 in the Title field as normal.)
4. Submit your changes and Publish as normal