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
Upload an image.
Select Full from the Hero Image Width dropdown.
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:
Upload an image.
Select Full With Padding from the Hero Image Width dropdown.
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:
Upload an image.
Select Half from the Hero Image Width dropdown.
Select Left or Right from the Hero Image Position dropdown.
Tip: Portrait images work best.
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
Last updated
Was this helpful?
