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:
- Adding the image as a background of the Call to action block.
- 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:
- Click the Add block (+) Plus button to open the Block Library.
-
Navigate to the Call to action block and choose a layout with a background image.
- Click the chosen block to add it to the page and hover over it to open the Block settings menu.
-
Make sure that the Primary button is ticked on in Block settings > Layout.
- Edit the title according to your needs: Click the title and start typing the text or paste your content.
- Modify the button: Click it to edit the link.
- 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:
- Click the Add block (+) Plus button to open 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.
Your custom banner will be visible online once you publish your site.