Skip to main content

[2.0] Adding Hero with Background Image Block

This guide will help you add a Hero section with a background image to your webpage.

Written by Paul Cox

  1. Create a New Page

    1. Navigate to your Dashboard

    2. Click Create Page

    3. Enter the Name of your Page

  2. Open the Block Selector

    1. Once you're on the new page, you can find the plus icon (usually at the top left corner of the editor interface).

    2. Click the plus icon to open the block selector menu.

  3. Add the Hero Block

    1. In the block selector menu, look for the block titled "Hero w/ BG Image."

    2. Click "Hero w/ BG Image" to add it to your page. This will place a Hero block with a background image section on your page.

  4. Select Media for Background Image

    1. Click on the Hero block to activate it. On the right side of the screen, you should see options for editing the block.

    2. Find the option labelled "Media" or "Background Image."

    3. Click "Select Media" to choose an image from your media library or upload a new one.

    4. Once you've selected the image, it will automatically be applied as the background for your Hero section.

  5. Edit Text in the Hero Section

    1. Click on the text within the Hero block to edit it.

    2. You can customize the heading, subheading, and any other text elements within the Hero block using the text editor that appears.

    3. Adjust the text size, colour, and alignment to fit your design needs.

  6. Save Your Changes

    1. After customizing the Hero block, make sure to save your changes.

Additional Tips

Preview Your Page: Always preview your page to see how the Hero block looks with the background image and text. Adjust as necessary.

Mobile Optimization: Check how your Hero section looks on mobile devices and make any necessary adjustments for a responsive design.

Consistent Style: Ensure that the style of the Hero block aligns with your website's overall design and theme.

Following these steps will successfully add a Hero section with a background image to your webpage, creating an engaging and visually appealing entry point for your visitors.

Did this answer your question?