Jumbotrons

Function: Used to display hero-style content, typically at the top of a page/site. A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.

Number of options: 15

Note: Content-width jumbotrons can be used on pages with sidebars. Because we are showing both content-width and fullwidth jumbotrons here we’ve chosen a template without a sidebar. Content-width jumbotrons will fit to the width of the area they are in. Also, if you use a full-width jumbotron on a page with a sidebar you will have unexpected (bad) results.

Step 1: Browse options and copy and paste shortcode

Look through all the options and select the one that will work best. The corresponding shortcode is directly under the jumbotron it creates. Copy and paste your chosen shortcode into the WordPress Editor you wish it to appear.

*Copy all of the code, including the [ ] on either end.

[uw_jumbotron style="default" title="DEFAULT Short title..." overlay="white" image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/10/04110913/i-rnCbdcx-X3.jpeg" alt="Dubs" button="button text" link="#"]This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.[/uw_jumbotron]

 

[uw_jumbotron style="default" title="DEFAULT Short title..." overlay="purple" image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/10/04110913/i-rnCbdcx-X3.jpeg" alt="Dubs" button="button text" link="#"]This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.[/uw_jumbotron]

 

[uw_jumbotron style="default" title="DEFAULT Short title..." overlay="gold" image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/10/04110913/i-rnCbdcx-X3.jpeg" alt="Dubs" button="button text" link="#"]This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.[/uw_jumbotron]

 

[uw_jumbotron style="default" title="DEFAULT Short title..." overlay="gray" image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/10/04110913/i-rnCbdcx-X3.jpeg" alt="Dubs" button="button text" link="#"]This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.[/uw_jumbotron]

 

[uw_jumbotron style="block" align="left" title="BLOCK Something goes in the title..." image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/10/04110913/i-rnCbdcx-X3.jpeg" alt="Dubs" button="button text" link="#"]This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information. Need to put a bunch more content in here to see how it behaves with the slash pattern. Does it get in the way? We’ll have to see![/uw_jumbotron]

 

[uw_jumbotron style="block" align="right" title="BLOCK Something goes in the title..." image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/10/04110913/i-rnCbdcx-X3.jpeg" alt="Dubs" button="button text" link="#"]This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information. Need to put a bunch more content in here to see how it behaves with the slash pattern. Does it get in the way? We’ll have to see![/uw_jumbotron]

 

[uw_jumbotron style="block-slant" align="left" title="BLOCK SLANT Something title" image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/10/04110913/i-rnCbdcx-X3.jpeg" alt="Dubs" button="button text" link="#" ]This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.[/uw_jumbotron]

 

[uw_jumbotron style="block-slant" align="right" title="BLOCK SLANT Something title" image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/10/04110913/i-rnCbdcx-X3.jpeg" alt="Dubs" button="button text" link="#"]This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.[/uw_jumbotron]

 

[uw_jumbotron style="block-center" title="BLOCK CENTER Something goes in the title..." image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/10/04110913/i-rnCbdcx-X3.jpeg" alt="Dubs" button="button text" link="#"]This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.[/uw_jumbotron]

 

[uw_jumbotron style="simple" title="SIMPLE BUT FW Something goes in the title..." image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/10/04110913/i-rnCbdcx-X3.jpeg" alt="Dubs" button="button text" link="#"]This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.[/uw_jumbotron]

 

[uw_jumbotron style="simple" overlay="purple" title="SIMPLE BUT FW Something goes in the title..." image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/10/04110913/i-rnCbdcx-X3.jpeg" alt="Dubs" button="button text" link="#"]This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.[/uw_jumbotron]

 

[uw_jumbotron style="simple" overlay="gray" title="SIMPLE BUT FW Something goes in the title..." image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/10/04110913/i-rnCbdcx-X3.jpeg" alt="Dubs" button="button text" link="#"]This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.[/uw_jumbotron]

 

[uw_jumbotron style="simple" overlay="white" title="SIMPLE BUT FW Something goes in the title..." image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/10/04110913/i-rnCbdcx-X3.jpeg" alt="Dubs" button="button text" link="#"]This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.[/uw_jumbotron]

 

[uw_jumbotron style="simple" overlay="gold" title="SIMPLE BUT FW Something goes in the title..." image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/10/04110913/i-rnCbdcx-X3.jpeg" alt="Dubs" button="button text" link="#"]This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.[/uw_jumbotron]

 

[uw_jumbotron style="simple" title="SIMPLE BUT FW Something goes in the title..." image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/10/04110913/i-rnCbdcx-X3.jpeg" alt="Dubs" button="button text" link="#"]This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.[/uw_jumbotron]

 

Step 2: Customize your jumbotron

There are a ton of ways you can customize a jumbotron to fit your needs.

Within each shortcode there are attributes associated with that jumbotron. It is within these attributes that you can adjust and customize the content you wish to present on it. Below is a list of all the attributes along with what/how you can change for each attribute.

*Remember, when changing an attribute to keep the quotation marks. For instance, if you are wanting to change the title to Go Huskies, make sure the code appears as follows: title=”Go Huskies”

*Make sure you are choosing an image that is both large enough and also orientated correctly for your jumbotron. Also, be wary of what that image will look like on mobile.

Attributes:

• style: This dictates the style of jumbotron you are working with. The currently available options are block, block-slant, block-center, simple, and default
• overlay: This is where you would change the overlay color behind the the text to make it easier for external users to read. The current options are gray, white, gold, and purple. The default is none if the overlay attribute is completely deleted.
• align: This is how you would adjust the overlay positioning. Options are right and left. For block and block-slant styles only.
• image: This is where you would change the background image for the jumbotron. Insert the image URL between the two quotation marks and make sure that the image you are inputing is uploaded to the WordPress server you are working on.
• alt: This is where you put the alternate text for the image you are using up above. It is very important that you include an alternate text for accessibility reasons.
• title: Title for the jumbotron. This is a required field.
• titletag: Heading tag used for the title. Supported tags are h1, h2, h3 (Default is h2)
• button: This is where you would change the button text for your button on the jumbotron!
• link: This is where you would change the button link. Simply insert the link to whatever site or page you want the button to take your external user to. *If for some reason you don’t want a button on a jumbotron that already contains one, simply delete link=”#” and button=”Add a title!”
• id: IDs are a way to assign a unique identifier to a specific shortcode or section. Some shortcodes have slightly different behaviors with IDs than others, to view those as well as best practices please visit our best practices for IDs page.

To change the copy on your jumbotron, simply replace the current filler text found directly before [/uw_jumbotron] with your desired copy.

*Jumbotrons are not necessarily meant to contain ALL of the information you are wanting to present to the external user, but a synopsis. The more copy you insert, the bigger it will get. Be wary of this.

 

Example of a customized jumbotron:

[uw_jumbotron style="default" title="Welcome Builders" overlay="white" image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/27145104/i-DFtdPkF-X3.jpeg" alt="people in construction outfits moving a t-rex skeleton" button="Learn More" link="https://www.youtube.com/watch?v=HdVg-2jn2OU"]Our documentation is made for you and designed to help you “build” your own sites and pages. Hopefully these examples and shortcodes help you achieve your website dreams![/uw_jumbotron]

Back to top