Explained: Hero Block

It’s no secret that a call to action banner helps you get more leads. That’s why all Carrot sites have a hero block built into the banner of your sites. It’s a special block designed and tested to help you pull in more leads. You’ll have a hero block on your site’s homepage and you can add a block on any page of your site.

This section builds credibility! The hero block includes a hero image (the background image) and a form. A local image will resonate with your site’s visitors and help establish rapport faster than a general image that isn’t indicative of your area or the properties you buy and sell. We recommend everyone update their home page’s hero image and content to help them stand out even more.

In this tutorial, we’ll go over how you can add the hero block and make changes to the content, form, and overall layout. Let’s get started!

Hero Image Replacement

Step 1: Click on Content to Access Your Pages

Step 2: Click on the Page to Update or Add Your Hero Block

Your home page will have a bold “Front Page” next to the title. It is the only one we have set with a default hero image. This should be the page clicked if you want to edit the home page hero image. Any page can have a hero block added to emulate the front page. Hover over the page you want to add this to and click the “edit” button or click the title to open the page for editing.

Step 3: *Add the Hero Block (If none set)

Click the circle with the plus sign to add a hero block. You can find it by using the search box or scrolling until you find the hero block within the category “Layout Elements.”

*Note* There will be a default image and text within the hero block. This is to show you what the block will look like. The steps below will walk you through updating the image and adding a form over the hero image.

Step 4: Click Inside the Hero Block to Make Edits

Your hero design is determined by the style you chose in the design section. Click here for more information if you wanted to make changes to the overall design.

Please note, the bracketed information is taking the details you set within your site’s settings. Even though you see , your visitors would see the city you’d set when signing up. You can change this at any time by updating your settings.

Step 5: Adjust Your Hero Style Settings

You’ll see three options for your hero’s style. *You’ll want to keep your hero’s form to 3 or fewer fields for maximum conversions.

  1. Columns: the text is on the left side and the form is on the right side of the hero
  2. Stacked: the text is above the form
  3. Inline: the text is above the form and the form’s fields (boxes) are all on the same line (best for 2 or less fields)

Step 6: Update Your Background Image and Form

You’ll want to use a local image to use for your home page’s hero section. It should be a .jpg or a .png file and have a minimum size of 1920×800 to avoid any unnecessary stretching of the image. Once you update this, the editor will NOT display the new image until you hit the update or publish button on the page.

The call to action option is the form of your hero block. All published forms on your site will be listed in this drop-down menu.

Step 7: Click Update and You’re Done!

Learn More