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:
- Adding a banner HTML code directly to the page through an HTML embed block.
- 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:
- Locate a spot on your page where you would like to place the banner.
- Click the + Add block button and enter the Block Library.
- Navigate to the Call to action section and choose a banner with a background image:
- Click on the chosen block to add it to the page and hover over it to trigger the Block Settings menu.
- Make sure that Primary Button is selected in Block settings> Layout.
- 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:
- Modify the button - click on it to edit the link. Here’s how to do it: Editing buttons.
- 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:
- Locate a spot on your page where you would like to place the banner.
- Click the + Add block button and enter the Block Library.
- Select the HTML embed block to add it to the page.
- Click on the Custom HTML icon to add the code.
- 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.