Campaigns Hero Block

  • Updated

Campaigns is available to customers with the ABM Package. If you are not on this plan and would like to learn more, please reach out to your Mutiny Rep for assistance.  If you are unsure who your rep is, our support team can help you out by submitting a ticket at the bottom of the page! 

The Hero Block is the primary visual and messaging component at the top of your Campaigns microsite. It creates a strong first impression, communicates your core message, and sets the tone for the content that follows.

Campaigns__editor__hero-block.png

When to Use the Hero Block

The Hero Block is typically positioned directly below the Nav Bar and is recommended for:

  • Making a strong first impression
  • Communicating your primary campaign message
  • Establishing visual interest
  • Prompting initial engagement through a call-to-action

Elements

The Hero Block includes the following customizable elements:

Preheader

  • Default: Uses H4 heading style from your theme
  • Purpose: Provides context or categorizes your campaign
  • Customization: Click directly on the preheader to edit the text
  • Toggle: Can be turned on or off in the settings menu (set to on by default)
  • Best Practice: Keep it short (1-5 words)

Header

  • Default: Uses H1 heading style from your theme
  • Purpose: Your main campaign headline
  • Customization: Click directly on the header to edit the text
  • Best Practice: Clear, compelling, and concise (3-10 words)

Subheader

  • Default: Uses body text style from your theme
  • Purpose: Expands on your headline with supporting information
  • Customization: Click directly on the subheader to edit the text
  • Best Practice: Provide additional context or details (1-2 sentences)

CTA (Call to Action)

  • Default: Uses the primary button style from your theme
  • Purpose: Directs visitors to take action
  • Customization: Click on the CTA button to edit text and enter a destination URL
  • Best Practice: Use action-oriented language

Image

  • Default: An image placeholder will appear until you add your own image
  • Purpose: Visual representation of your campaign
  • Customization: Click on the image to upload a file or enter an image URL
  • Best Practice: High-quality, relevant imagery that complements your message

Layout & Styling Options

To access the Hero Block settings, click on the block and then click the settings icon (wrench icon).

Campaigns__editor__hero-block-settings.png

Preheader Toggle

  • Default: Set to on by default
  • Customization: Turn on or off as needed in the settings menu
  • Best Practice: Use the preheader to provide additional context

Text Color

  • Options: Dark or Light
  • Customization: Select the option that works best with your background
  • Best Practice: Ensure high contrast for readability

Background

  • Default: Uses your default theme color
  • Customization:
    • Select from your brand color palette
    • OR upload a background image via URL or file upload
  • Best Practice: Choose a background that provides good contrast with your text

Layout Options

The Hero Block offers four layout options:

  • Image Right (default): Text on left, image on right
  • Image Left: Text on right, image on left
  • Image Above/Top: Image spans full width, text below
  • No Image: Text only, centered or full width

How to Edit the Hero Block

  1. Access Block Settings: Click on the Hero Block, then click the settings menu (wrench icon) to access layout and styling options
  2. Configure Layout and Style:
    • Select whether to show the preheader
    • Choose text color (dark/light)
    • Set background color or upload background image
    • Select image positioning (right, left, above, none)
  3. Edit Content Elements: Click directly on each element to edit:
    • Click on preheader, header, or subheader to edit text
    • Click on CTA to edit button text and destination URL
    • Click on image to upload or change the image

Customization Examples

Standard Hero with Image Right

 

Customized Hero with Different Layout

 

Best Practices for Hero Block

  1. Be concise: Keep your headline clear and to the point
  2. Create contrast: Ensure your text is easily readable against the background
  3. Use high-quality images: Avoid blurry or pixelated images
  4. Consider mobile views: Test how your hero appears on different devices
  5. Align with campaign goals: Your hero should clearly communicate what the campaign is about
  6. Create visual hierarchy: The header should be the most prominent text element

Common Questions

Q: What image dimensions work best for the Hero Block? A: For optimal display, your hero image should be at least 800px wide by 600px tall. The image will automatically adjust to fit the layout you select.

Q: Can I use a video instead of an image? A: The standard Hero Block supports images only. For video content, consider customizing your campaign template.

Q: How much text should I include in my Hero Block? A: Keep text concise for maximum impact. Aim for a headline of 3-10 words, subheader of 1-2 sentences, and a clear, brief call-to-action.

Need Help?

If you have questions or need help, the Mutiny Support team is here for you!  You can submit a support ticket at the bottom of this page or reach us at support@mutinyhq.com.

Related to

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request

Comments

0 comments

Please sign in to leave a comment.