Hero Section

The Hero Section allows you to add a block section across the width of the page with a title, content, and up to two buttons.

Hero Section Shortcode Parameters

The parameters for the Hero Section shortcode:

  • RequiredBackground Image (bg_image): This should be the full URL path of the background image you wish to use.
  • Background Position (bg_position): This allows you to position the background image within the section. You can review the documentation on positioning background images for more information.
  • RequiredTitle (title): The title of the section.
  • Subtitle (subtitle): The subtitle of the section that will display below the title. Note: This text should not be more than 2-3 sentences and if it is more than 250 characters will cut off when displayed.
  • RequiredType (type): There are two styles of hero sections, buttons and links.
  • Primary Button Text (primary_button_text): This is the text that will display in the primary (green) button. Remember, buttons should be calls to action. This title should represent that action.
  • Primary Button Text (primary_button_url): This is the link for the primary (green) button.
  • Secondary Button Text (secondary_button_text): This is the text that will display in the secondary (white) button. Remember, buttons should be calls to action. This title should represent that action.
  • Secondary Button Text (secondary_button_url): This is the link for the secondary (white) button.
  • Menu ID (menu_id): This is the ID of the menu you’d like to use to display the links. If you select a type of ‘links’ then this is required. You should limit the number of links to no more than 5.

Hero Section Shortcode Examples

Hero Section using Buttons

[mu_hero type="buttons" title="Visit Our Campus" subtitle="We're excited to welcome you to Marshall University in Huntington, West Virginia. During your campus visit, you’ll see and feel the energy and pride of Marshall University. " primary_button_text="Schedule Campus Tour" primary_button_url="http://www.marshall.edu/tour/" secondary_button_text="View Virtual Campus Tour" secondary_button_url="http://www.marshall.edu/virtual-tour/" bg_image="http://www.marshall.edu/admissions/files/hero-campus.jpg" bg_position="50% 70%"]
Copy Code to Clipboard

The “Visit Our Campus” hero section on Admissions website is an example of Hero Section using Buttons.

Hero Section using Links

[mu_hero type="links" title="Take the Next Steps" subtitle="Learn How to become a Son or Daughter of Marshall" bg_image="http://www.marshall.edu/admissions/files/hero-band.jpg" bg_position="50% 22%" menu_id=10]
Copy Code to Clipboard

The “Take the Next Step” hero section at the bottom on Freshman Admissions website is an example of Hero Section using Links.