Hero Widget

Create a new Landing page (if you're adding to your home page, skip this step and refer to the "Change Layout" info below). For best display we recommend unchecking "Show breadcrumbs" and "Show page title." You can optionally add the page to a menu (if so, add a "Menu link title" and select a parent item).

From here, when you select "Customize this page," you should see a Hero region (see "Add the Hero widget," below).  If you don't, select "Change Layout" at the bottom of the page, then select "Hero Layouts" from the drop-down:

Select one of the Hero layouts, then click Save. NOTE: No matter which layout you choose, there will be a hero region available at the top of the page. The other layout regions will be available underneath the hero region.

Click "Customize this page" at the bottom of the page, then click the "plus" button in the Hero region to add a new widget.

From the "Add Existing Content" area, select "Berkeley Branded".

For "Hero Image," click "Add".

Hero widgets are designed to be displayed in Hero regions; they should not be added to other regions. Additionally, other types of widgets are not designed to be displayed in Hero regions. Widgets placed into inappropriate regions may not display properly.

Under Content Settings, select the desired Layouts, Color Scheme, and image (either select a Stock Photo from the library or upload a new photo) as appropriate, provide an image credit, add the primary hero text (required), add a secondary line of text (optional for "Text Box," "Landing," and "Video Split"), and add a link (optional). If you select the "Video Split" option, you will also need to include a YouTube or Vimeo video.

The "Text Box," "Landing," and "Video Split" hero options all display text against the background hero image. The "Image Only" option just displays the image with no text. When you use the "Image Only" option, you still need to enter text in the "Text" field, which will become the alternative text for the image.

NOTES:

• The "text" field will be the text that overlays the hero widget. If you select "Use page title as text," then the text will be what you added as the title of the Landing page. You might need to hit refresh after saving the widget and hitting "Save" at the bottom of the page in order to see this text appear.
• If your hero widget will contain a link, you must add Alt text when uploading the image!
• In order to avoid upscaling (enlarging your image beyond its original size when it is displayed), which causes images to look fuzzy, avoid using small images for Hero widgets. To account for full-width images on large monitors, we recommend a minimum of 1200px wide and 450px high.

By default, Hero widgets will fill the full width of the browser window, as it does on the Berkeley homepage, http://www.berkeley.edu.

If desired, Site Builders can adjust Hero widgets so that they just fill the width of the content area of the page (this style is in use on the Berkeley News homepage, http://newscenter.berkeley.edu). To do this, after configuring the Hero widget and clicking save, click the Paintbrush icon in the Hero region (you might need to click "Customize this page" first) above your Hero widget:

Then, in "Style Settings," select "Default Region Style", then click "Next":

Hit "Save" at the bottom of the page to finish your work. Before proceeding, reload the page, as you might notice some display issues in your browser window both before and after saving your changes.

Landing Hero example with "Berkeley Blue" color scheme:

Text Box example with "Berkeley Blue" color scheme:

Video split layout with "Berkeley Blue" color scheme:

Image Only layout example:

There are stock photos from Public Affairs available in your library to use on your site as needed. These photos are cropped to the following dimensions:

• 1200px wide by 450px high
• 800px wide by 450px high

These dimensions are noted in the names of the files. For more information on photo best practices, see Image Shapes and Sizes.

To use these photos: When uploading a photo for your Hero, navigate to the "Library" tab, then filter by "Stock Photos".

Select a desired photo from the selection of stock photos, and proceed with the rest of the hero configuration.

If you want view large images of all the stock photos (to help you determine which one you would like to use), make sure you are logged in, and then visit http://[yoursite].berkeley.edu/media-tags/stock-photos.

Make sure to provide an image credit if you are using a photo or image created by someone else (and make sure you have permission to use the photo or image).

For the stock photos provided, the photo file names include the names of the photographers.  When using a stock photo from the provided library, add the appropriate photographer to the "Image credit" field:

• Keegan Houser
• Elena Zhukova
• Hulda Nelson