Skip to main content

Adding a banner image

  • Updated

You may want to display a banner on your website for a number of reasons:

  • To advertise a special event such as a sale or a new Online Store arrival.
  • To promote a cause you support, for example, a nonprofit organization.
  • To drive sales to your product on third-party platforms, for example, leading to a product in the Amazon store.
  • To add more color to your page and highlight the new user experience.

There are two ways to add a banner to your website page:

  1. Adding the image as a background of the Call to action block.
  2. Adding a banner HTML code directly to the page through an HTML embed block.

Which method to choose? This depends on your priorities.

  • Need a clickable button so that your site visitors are redirected to another page or website or allowed to download a file? Choose the Call to action block.
  • Have a pre-designed third-party banner? Choose an HTML embed block.

Adding a banner by using the Call To Action block

To transform your Call to action block into a full-width banner, you need a background image that would support the banner message. Here's how you can add a banner this way:

  1. Click the Add block (+) Plus button to open the Block Library.
  2. Navigate to the Call to action block and choose a layout with a background image.

    WL - Adding a banner image - 1.png
  3. Click the chosen block to add it to the page and hover over it to open the Block settings menu. 
  4. Make sure that the Primary button is ticked on in Block settings > Layout.

    WL - Adding a banner image - 2.png
  5. Edit the title according to your needs: Click the title and start typing the text or paste your content. 
  6. Modify the button: Click it to edit the link.
  7. Change the block background to your banner image. 

Your banner is ready. Remember to publish your site for the changes to appear online.

Adding a banner by using the HTML embed block

If you have a ready third-party code for your banner, you can add it through the HTML embed block. This way, you won't need to design the banner yourself. Here's how to do that:

  1. Click the Add block (+) Plus button to open the Block Library.
  2. Select the HTML embed block to add it to the page.

    WL - Adding a banner image - 3.png
  3. Click on the Custom HTML icon to add the code.

    WL - Adding a banner image - 4.png
  4. Paste your banner HTML code into the corresponding field and click Submit to confirm the changes.

Your custom banner will be visible online once you publish your site.