A narrow banner above the header is displayed on all pages of the site and helps to draw additional attention to promotions, sales, and other important information.
Examples of banners above the site header
How to add a banner above the header
Go to Website → Banners and click Add.
In the Page field, select All pages.
Set up the banner content, and then click Save.
Features of some settings
Image — a picture for the background, placed in the center of the banner, cropped on narrow screens.
Text — text on the banner, supports HTML and CSS.
Height — the height of the banner: 30, 40 or 50 pixels. On the mobile version, the height is automatically increased if the text on the banner does not fit in one line — for this, you need to upload a background image of an extra height.
Show banner on — show the banner only on the desktop version, only on the mobile version, or everywhere. Use this setting to create two different banners for each version of your site.
Show close button — if enabled, the site visitor will be able to hide the banner, after which it will no longer appear.
Banner on the mobile version
On the mobile version, the banner is displayed below the header: it remains visible, and the header does not move from its usual place on the screen. This is important for comfortable use of the site.
When designing a banner, make sure that it is clear and readable on the mobile version. We recommend several options for solving this problem.
1. Set the banner content as text. On the mobile version, the text will not be cut off, but moved to a new line. At the same time, the banner can increase in height if the background image is loaded with a margin.
2. Design the layout so that important content fits the width of the smartphone screen. The image will be cropped on both sides, but the content will remain readable.
3. Create a separate banner for the mobile version. In the settings of this banner, specify that it should be displayed only on the mobile version, and the original banner should be displayed only on the desktop (the Show banner on setting).
The order of displaying banners
Only one banner can be displayed above the header — the one that is located highest in the list in the Website → Banners admin panel section.
However, if the first priority banner has a close button enabled, then after this banner is hidden, the site visitor will see the next one (after reloading the page or going to another page).
