Hero Section

Key Elements

• Hero Image: Choose a high-quality image that showcases your animals, evoking positive emotions and capturing the essence of your program.

• Background: Select a background color that complements your image.

• Tagline (H1): Craft a compelling, concise tagline that serves as the main heading (H1) and highlights the unique qualities of your program.

• Introduction: Provide a brief, engaging introduction that expands on the tagline, emphasizing your mission, values, and accomplishments.

• Call-to-Action (CTA): Encourage visitors to take action with a clear and compelling CTA, such as a button or text prompt.

Combining these elements will create an enticing Hero section that draws visitors in and encourages them to explore your website further.

Hero Image

The layout of the hero section can vary to create different visual effects and accommodate the overall design of your website.

Full Width Image

• Description: Spans the entire width of the page, edge to edge.

• Steps

  1. Upload an image.

  2. Select Full from the Hero Image Width dropdown.

  3. Select Centered or Side by Side from the Hero Content Position dropdown.

Full width image with padding

• Description: Spans the width of the page with padding on all four sides, displaying the primary background.

• Steps:

  1. Upload an image.

  2. Select Full With Padding from the Hero Image Width dropdown.

  3. Select Centered or Side by Side from the Hero Content Position dropdown.

Half width image

• Description: Occupies half the page width; image can be positioned on the left or right.

• Steps:

  1. Upload an image.

  2. Select Half from the Hero Image Width dropdown.

  3. Select Left or Right from the Hero Image Position dropdown.

  4. Tip: Portrait images work best.

  5. Note: At smaller resolutions, the image contracts to full screen width.

Half width image with padding

In this layout, the hero section occupies half of the width of the page with padding on all four sides which displays the primary background.

To create a half width image

• upload an image

• select Half from the Hero Image Width dropdown

• select either Left or Right from the Hero Image Position dropdown

Tagline and Introduction

To add your tagline and introduction

• type or copy and paste text into the Tagline field

• type or copy and paste text into the Introduction text editor

Call-To-Action (CTA) button

To create a CTA button

• select the Page Type from the Call To Action dropdown

• select the Page from CTA page field

• enter text into the Button Label field

No Hero Image - Content First

While a hero image can be visually appealing, it is not mandatory to publish one on your homepage. Instead, you can choose to have your tagline, introduction, and CTA at the top of your homepage for a clean and straightforward presentation. If you want to add a banner or promotional element below the content, consider using a banner block.

Here's how you can structure your homepage without a hero image and a banner block instead

• remove your Hero Image by hovering over the Hero Image field and selecting the X

• make sure your tagline, introduction and CTA are compelling and engaging

• insert a Banner Block to provide a great image underneath your introduction