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 as an HTML block.

2. Adding the image as a background of the Call to action block.

Which method to choose? This depends on your priorities.

  • Want to add a new banner in a few clicks without designing it? Choose b.
  • Need a clickable button? Choose Call to action.
  • Have a pre-designed third-party banner? Choose HTML block.

Adding a banner as 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:

banner1.png

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 > General.

Screen_Shot_2020-06-03_at_10.42.43.png

6. Modify the Call to action. Enter your event or sale details. Simply click on the title and start typing or copy and paste your content. Here's an example:

banner2.png

7. Modify the button: hover over the button to edit the link. Here’s how to do it:

Editing buttons

8. Change the Call to action block background. Here’s how to replace a block background:

Changing the block background

Adding an animated background

Adding block background overlays

banner3.png

Congratulations! Your full-width banner is ready, no image editor required.

 

Adding your banner with custom HTML

If you have a block of HTML code from an external URL or a referral banner URL, you can insert it as a block of Other > HTML. 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.  Navigate to the Other section and click on the HTML block to add it to the page.

4. Hover over the line of text where the banner will be added and click on the Custom HTML icon.

banner4.png

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

Your banner should appear in the location you have selected.

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