Marsha Docs

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.

Note on Hero Section
This shortcode is only available when using the Full Width page template. It will not display anything if you attempt to use it on the default template or the left sidebar template.

The title is assigned an Heading 2/H2 tag. You should not add a h2 tag before the hero section for that section.

Also, this component should not be the first item on the page. You should use the featured image hero instead.

Your page should not be mostly hero sections. Hero sections should be used with other components or basic text on your page. Multiple hero sections are fine, but should be separated by other component sections.

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. There is a hard limit of 5 menu items that will appear on the front end.
  • Arrow (arrow_top): You can make the hero section have a white down arrow at the top of the section by setting the arrow parameter to “white.”

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.

Hero Section using Buttons with Arrow

[mu_hero type="buttons" arrow_top="white" title="Discover Our Campus" subtitle="Come visit Marshall University and learn what Marshall has to offer you! We offer daily tours, as well as virtual and self-guided tours." primary_button_text="Schedule A Tour" primary_button_url="http://www.marshall.edu/tour/" secondary_button_text="Take Virtual Tour" secondary_button_url="http://www.marshall.edu/virtual-tour/" bg_image="https://www.marshall.edu/wp-content/uploads/discover-campus.jpg"]
Copy Code to Clipboard

The “Discover Our Campus” hero section on the homepage is an example of Hero Section with an arrow.