{"id":8260,"date":"2019-10-21T07:15:06","date_gmt":"2019-10-21T14:15:06","guid":{"rendered":"https:\/\/help.carrot.com\/?post_type=tutorial&p=8260"},"modified":"2025-04-03T10:03:57","modified_gmt":"2025-04-03T17:03:57","slug":"hero-block","status":"publish","type":"tutorial","link":"https:\/\/help.carrot.com\/tutorial\/hero-block\/","title":{"rendered":"How to Edit the Hero Block"},"content":{"rendered":"\n

In this tutorial, we’ll show you how to update the background image and edit the content that appears in the Hero Block on your homepage.<\/p>\n\n\n\n

A Hero Block<\/strong> is that crucial section at the top of your website\u2014it’s your visitors’ first impression of your business and your most powerful opportunity to convert those visitors into leads. Each Carrot site comes with a Hero Block pre-installed on your homepage, featuring text, a form, and a background image working together to capture visitor information.<\/p>\n\n\n\n

While your site launched with a default Hero Block, we strongly recommend personalizing the background image to reflect your local area and business. A localized image helps you establish credibility and rapport with visitors faster than a generic image, ultimately leading to better conversion rates.<\/p>\n\n\n\n

You can add a Hero Block to other pages of your site as well, though remember that each page can only contain one Hero Block.<\/p>\n\n\n\n

Let’s get started!<\/p>\n\n\n\n

\n
<\/div>
\"How<\/a><\/div><\/div><\/div>\n<\/div><\/figure>\n\n\n\n
\n\n\n\n

Step 1: Click on Content to Access Your Pages<\/a><\/h2>\n\n\n\n

\"\"<\/h3>\n\n\n\n

Step 2: Click on the Page to Update or Add Your Hero Block<\/h2>\n\n\n\n

Your home page will have a bold “Front Page” next to the title. Click to edit this page if you want to edit the home page Hero image. <\/p>\n\n\n\n

Any page can have a Hero block added to emulate the home page, but a Hero block can only be used once per page<\/strong>. <\/p>\n\n\n\n

Hover over the page you want to edit and click the “edit” button or click the title to open the page for editing.<\/p>\n\n\n\n

\"Screenshot<\/figure>\n\n\n\n

Step 3: (optional) *Add the Hero Block if needed<\/h2>\n\n\n\n

If you want to add a Hero block to a page that doesn’t already have one, click the orange plus sign in the top left corner of your screen and search for the Hero Block. Then click to insert it.<\/p>\n\n\n\n

*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 adjusting the form over the hero image.<\/em><\/p>\n\n\n

\n
\"GIF<\/figure>\n<\/div>\n\n\n

Step 4: Click Inside the Hero Block to Make Edits<\/h2>\n\n\n\n

To begin making edits to the Hero block, select the Hero block by clicking it. <\/p>\n\n\n\n

You’ll see that it’s selected when the orange outline appears around the entire block. The block toolbar for the Hero block will also show a Thumbtack icon:<\/p>\n\n\n\n

\"Screenshot<\/figure>\n\n\n\n

\u2139\ufe0f Your default hero design is determined by the style you chose in the design section. Click here for more information<\/a> if you wanted to make changes to the overall design theme of your site.<\/p>\n\n\n\n

Step 5: Update Your Background Image<\/h2>\n\n\n\n

To update the background image, navigate to the sidebar settings for the Hero block. (You may need to toggle the sidebar settings area on.)<\/p>\n\n\n\n

Click “Set featured image<\/strong>” to choose a new background image for your Hero block. You can choose an image from your Media Library or upload a new photo.<\/p>\n\n\n\n

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\u00d7800 to avoid any unnecessary stretching of the image. <\/p>\n\n\n\n

Be sure to Save<\/strong> your work, and then hit Preview to see your updated homepage.<\/p>\n\n\n\n

\"screenshot<\/figure>\n\n\n\n

Step 6: Adjust Your Hero Style Settings<\/h2>\n\n\n\n

Want to adjust the placement of your Hero Block text and form? In the sidebar settings, you\u2019ll see three options for your hero\u2019s style: Columns, Stacked or Inline.<\/p>\n\n\n\n

    \n
  1. Columns:<\/strong> the text is on the left side and the form is on the right side of the hero<\/li>\n\n\n\n
  2. Stacked:<\/strong> the text is above the form<\/li>\n\n\n\n
  3. Inline:<\/strong> the text is above the form and the form’s fields (boxes) are all on the same line (best for 2 or less fields)<\/li>\n<\/ol>\n\n\n\n
    \"Screenshot<\/figure>\n\n\n\n

    Step 7: (optional) Adjust the Form<\/h2>\n\n\n\n

    When you launched your site, we created Forms<\/a> for you to capture info that your leads submit. One of these forms is automatically attached to the Hero block on your home page.<\/p>\n\n\n\n

    If you want to change the Form that appears in your Hero Block you can do that via the Call to Action<\/strong> section inside the sidebar settings area. You can select a different Form to use, change the info that appears or even change the size of the Form\u2019s button.<\/p>\n\n\n\n

    \"Screenshot<\/figure>\n\n\n\n

    \ud83d\udea8 Note:<\/strong> You’ll want to keep your Hero’s form to 3 or fewer fields for maximum conversions.<\/em><\/p>\n\n\n\n

    Step 8: (optional) Editing the Text in the Hero Block<\/h2>\n\n\n\n

    You can edit the text that appears in your Hero block by clicking into the Heading or Paragraph sections. <\/p>\n\n\n\n

    With that said, please proceed with caution when adjusting this written content as we have included the information here based on best practices for SEO (search engine optimization) and converting your website visitors into leads.<\/p>\n\n\n\n

    The bracketed bits of info seen here are called shortcodes<\/a> and they are the magic behind many of our most powerful SEO features.<\/p>\n\n\n\n

    Even though you see [market_city]<\/code> while editing your site, your visitors would see the city you do business in that you told us when signing up. You can change the info that is auto-populated into the shortcodes at any time by updating your settings<\/a>. <\/p>\n\n\n\n

    When you\u2019re getting started, we don\u2019t recommend deleting your shortcodes from the Hero block. Learn more:<\/p>\n\n\n\n

    \n
    <\/div>
    \"Carrot<\/a><\/div><\/div><\/div>\n<\/div><\/figure>\n\n\n\n

    Step 9: Save Your Changes and You’re Done!<\/h2>\n\n\n\n
    \"screenshot<\/figure>\n\n\n\n
    \n\n\n\n

    Conclusion<\/h2>\n\n\n\n

    The Hero Block is one of our favorite ways to customize your site and increase conversions. Be sure to update it with a background image unique to your business! Here’s some free images to use for your hero section.<\/a><\/p>\n\n\n\n

    \n\n\n\n

    Learn More<\/h2>\n\n\n\n