Skip to content

How to Create a Hero Box

Usage:  Used to display a message or highlight information in a hero box over on an image. For the Department theme, the image should be 980X360 or the same ratio. For the Core Theme, the image should be 960X360 or the same ratio. Heading and other styling and/or shortcodes may be used within the hero shortcode to format the information in the overlay box

Hero boxes are another tool that you can use to create a unique look for your homepage. They are similar to a carousel in that they take up the full width of a page, but they only have one image or slide. 

To create an image box, you will need to first have a graphic that is 960px wide and 360px tall. You'll need to upload it to your site's media manager and then locate it's attachment_id in the library's index. Remember, that's the number just under the file's name in the library's index.

You'll be able to generate the hero box by using the following shortcode:

[hero align="right" attachment_id="ID"]Your Content Here[/hero]

Align can either be left of right. The text block will change according to which you choose.

The attachment_id is the ID number for the image you want to use. Again, this can be found in the media library's index.

Where you see "Your Content Here", you should replace that with the content that you want to see in the box. You can also use shortcodes here as well like the [button] shortcode. We typically use H2's for the headlines.

Note: Images in hero boxes are not included when using the [rps-include] shortcode.  The content of the page should be included and the image an hero box created on each page.

Example: [hero attachment_id=125 align=”right”] 

That's pretty much it. Have fun creating your hero boxes.


We have new colors, transparency, and placement options for Hero Boxes.  To change these settings notice the align, class and transparency attributes in the following table.

The following attribute will be available after the wordpress core update (scheduled for 4.18.15).

zeromargin             |   removes the bottom margin from the hero image, so that there is no space between the 
                                   hero box and the next element on the page   

[hero attachment_id="5601" align="bottomright" class="mulberry" opacity="transparent"]<h2>Content</h2>Your content here.[/hero]

Scroll through all the possible combinations here.

Feedback and Knowledge Base