Summary
This article covers the following topics:
1. What is a banner?
Banners can be used to to encourage visitors to sign up to your newsletter, highlight flash sales to returning customers or cross-sell to customers with items in their cart.
They are anchored against the top or bottom the page, pushing the website content up or down and disappearing while the visitor scrolls through the page.
ℹ️ To create experiences that take the entire screen width but not fixed to the top or bottom or the page, you can use the full-width embedded format, attaching them to a website element.
To create experiences that sit at the top of the website content and stay on a fixed position of the screen while visitors scroll up or down the page, you can use full-width notifications.
See below how to edit and style an overlay experience using the Campaign Builder Beta.
2. Creating a banner
To create a new campaign, click the + button on the top left of your website dashboard. You will be asked to choose which version of the Campaign Builder to use:
⚠️ Campaigns created with the Campaign Builder Beta cannot be edited with or migrated to the Legacy Campaign Builder, and vice versa. They can only be opened on the same version in which they were originally generated. This also applies to campaign duplications.
For more information, read the help article on getting started with the new Campaign Builder Beta.
With the desktop view, you can design the creatives that will appear on any desktop or tablet device while the mobile view allows you to design the creatives that will be displayed on any mobile device.
3. Banner placement
You can change the placement of the banner by choosing its location in the properties drop down.
Banners can be fixed at the top or at the bottom of the page, pushing the website content up or down and disappearing while the visitor scrolls through the page.
4. Rendering banners on a website
The recommended dimensions for Banners are:
Desktop / tablet:
1200pxx50pxMobile:
400pxx120px
When the banner width is smaller than the screen width, it will expand its background colour to match the latter:
⚠️ Banners expand the background color to match the screen width while the creative remains center-aligned. At present, it only supports the use of solid colors. Any background images added will not expand to fill the page window.
When the banner width is larger than the screen width, it will scale down the entire creative to fit the screen:
5. Clickable banners
Clickable formats replace the need to add an invisible CTA on top of a creative. By enabling the clickable format, the entire stage will work as a call-to-action, with the same action types and capabilities as a regular CTA component.
Clickable formats will be visible in the Links section within the review page and can be used for Campaign History Targeting.
To enable this, go the Clickable banner section on the banner properties panel and switch the toggle on:
You can then set it up using the same action types as the call-to-action component.
⚠️ When setting up clickable formats, it is not possible to include regular call-to-actions or hyperlinks to the creatives.
6. Adjusting the z-index position
Z-index defines the order of overlapping HTML elements of a webpage. Elements with a higher index will be placed on top of elements with a lower index.
By default, the z-index for this stage is set to the second highest layer of the webpage.
To manually, enforce a different z-index position, select the overlay background layer, then go to the Position and size section on the banner properties panel and switch the toggle on to enter a new value:
7. Background image upload
To upload an image to use as background for your embedded experience, go the Background image upload section on the Banner Properties panel.
⚠️ When the Accessibility Compliance mode is on, it is not possible to upload gifs as background images. To learn more, visit the Accessibility Basics help article.
The background image can be adjusted to the embedded background container in 2 different ways:
Fill container: the image is center-aligned and scaled to fill the entire container so that no empty space is visible.
Fit container: the image is center-aligned and scaled to be entirely visible within the container.
Once an image is uploaded, it is possible to replace it by a different file, download the image back to your device or delete it so the overlay background reverts to a solid color.
8. Fill and border properties
It is possible to style and customize the shape of the creative on the Fill and border section of the banner properties panel.
9. Accessibility settings
In the Accessibility settings section of the banner properties panel it is possible to set up the read order as well as define an aria-label for the experience.
The aria-label describes a web page element so that it can be identified by screen readers. By default, it will be automatically extracted from a text box marked as a heading.
If the creative doesn't contain a text box marked as a ‘heading’, the default aria-label will be Banner.
Alternatively, by switching the Override aria-label toggle on, you can provide a custom aria-label:
10. Switching between in-page formats
It is possible to turn a banner into an embedded or a sticky experience without the need to add a different stage and then copy/paste the properties manually.
This can be particularly useful if an experience originally built as a banner is not rendering correctly on the website due to it having a fixed navigation bar, for example.
To do this, click to open the menu at the banner stage, go to the Change format to option and select one the formats available.
ℹ️ By changing the format, all components and design properties (fill and border, background image, z-index position) are preserved. You might be able to set up properties that were not available or were specific to the previous format (website selector, placement options, margins, animation.