WiscWeb - WordPress UW Theme - Using the Hero Content Area

This document will walk you through using the "hero" content area on your pages. A hero can be a single image or a carousel of images and can also include introductory text and a link, if preferred.

Adding a Hero to Your Page

  1. Navigate to the page on which you want to add Hero Content. If that page doesn't exist, create a new page.

  2. At the top of the page, you'll see the Hero Content Area. Click on the Add Hero Content button, and select Hero Image/Carousel.

Add Hero Content Button

    Hero Image Display Options

    1. The Hero Image/Carousel options box appears. Here you can add the image, choose the layout, and hide/show the hero using the various options.

      Hero Content Options Area

    2. To add a single image, click the Add Image button. You are prompted to either choose an image from your Media Library, or upload a new image. Remember - any image you use on your site should have appropriate Alt Text applied to it.

    3. Once you have your image chosen, in the Hero Layout section, several options are presented.

      • Image Only - If you want to simply display the hero image by itself, leave radio button for Image Only selected.

      • Headline - If you would like to add a caption to the hero image, choose the Headline radio button. Several more options appear. To have the caption automatically populate from an existing page or post's excerpt field, click that slider. Otherwise, you can use the Headline Text field to insert a brief caption of up to 155 characters. You can also link to a site by clicking the Add a link? slider and inputting the appropriate URL.

      • Featured Content Inset - You can also add a Featured Content Inset, which creates a picture within the hero image with a caption and link as well. These options are similar to those in the Headline selection.

        Hero Image Options

    4. If you would like to create a Hero Carousel, click the Add Image/Carousel button. A new Hero Image section appears, with the same options for you to choose from.

    5. To remove an image from the hero section, click the minus (-) sign in the right column of the hero section. To reorder the images in your carousel, click and drag the image's left numbered column to where you would like it to go.

    Once you are finished with your hero image section, be sure to click the Publish or Update button to commit the changes.

    Best Practices

    See Also: