Hero Section

In the Hero section of your homepage, you can create a captivating and engaging introduction for your breeding program.

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.

Tip: Landscape images work best.

A landscape image - full width layout

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.

Note: Corners will be round or square based on settings.

A landscape image - full width with padding

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.

A portrait image - half 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

A portrait image - half width with padding

The hero image corners will be either round or square depending on your selected options in the settings collection.

At smaller resolutions the hero image contracts to full screen width to maintain a responsive and visually appealing layout.

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

Tagline and Introduction - full width hero image and side by side content position

Tagline and Introduction - full width hero image and centered content position

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

Using more descriptive and action-oriented Call-To-Action (CTA) buttons is preferable to simply using "Click here." Here are some alternative examples:

• "Explore Our Available Puppies"

• "Contact Us to Begin Your Journey"

• "Learn More About Our Breeding Program"

These CTAs are more specific, engaging, and encourage visitors to take the desired action.

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

Content first on your homepage utilizing a banner block underneath to break up the page