Adding a banner image

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 that you are supporting, 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 a banner HTML code directly to the page through an HTML embed block.
  2. Adding the image as a background of the Call to action block.

Which method to choose? This depends on your priorities.

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

Adding a banner through a Call To Action block

You can transform a Call To Action block into a full-width banner in seconds. All you need is a background image that would support the banner message. Here's how you can add a banner this way:

  1. Locate a spot on your page where you would like to place the banner.
  2. Click the + Add block button and enter the Block Library.
  3. Navigate to the Call to action section and choose a banner with a background image:

  4. Click on the chosen block to add it to the page and hover over it to trigger the Block Settings menu. 
  5. Make sure that Primary Button is selected in Block settings> Layout.

  6. Edit the title according to your needs - click on it and start typing the text or copy and paste your content. Here's an example:

  7. Modify the button - click on it to edit the link. Here’s how to do it: Editing buttons.
  8. Change the block background to your banner image. Here’s how to replace a block background: Customizing block background.

Congratulations! Your banner is ready. Do not forget to publish your site for the changes to appear online.

Adding a banner through an 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. Locate a spot on your page where you would like to place the banner.
  2. Click the + Add block button and enter the Block Library.
  3. Select the HTML embed block to add it to the page.

  4. Click on the Custom HTML icon to add the code.

  5. Paste your banner HTML code into the corresponding field and click Submit to confirm the changes.

That's it! Your custom banner will be visible online once you publish your site.

Was this article helpful?
1 out of 1 found this helpful