Banner Widget

The Banner widget is part of the Promotional Content widget category. For more information on the widgets, please refer to Widgets Set-up Guide.

 

Introduction and use cases 

The Banner widget enables you to display a banner and possibly a button linking to a specific URL.
Images can be added as background images.

23.png23.1.png24.png

 

Layout tab

25.png

Layout

We offer three different layouts:

  • top banner
  • bottom banner (by default)
  • free placement (which allows you to place the widget wherever you want in the page flow)

Layouts are natively responsive.

Layer

Layer Position (z-index)

 

26.png

Suppose you've selected the "modal", "top banner" or "bottom banner" layout. In that case, you can define the position of the widget on the z-axis in order to manage the widget position: above everything, below everything, or precisely fine-tuned.

Please read the dedicated article on this topic: z-index article.

 

Content tab

27.png

Message (text or HTML)

As the "Banner" widget is mainly designed to contain text, you have to fill the text area in.

The text area supports multi-line messages. 

You can use HTML markup to add ordered or unordered lists. All the other styling aspects should be done through the Style tab. 

You can also add emojis.

Widget link type

You can decide whether your widget should contain a clickable button (to close or redirect), whether it should be entirely clickable (to close or redirect) or whether it should have no link at all.

  • "The button is a link": you will have to specify a button URL and a button text. The widget will display a button.
  • "A click on the button closes the widget": you will have to specify a button text. The widget will display a button. 
  • "The whole widget is a link": you will have to specify a URL. The widget will not display a button.
  • "A click on the whole widget closes the widget": you won't have anything to add. The widget will not display a button.
  • "None": the widget will not be clickable.

If you use a background image that looks like a "big ad", we recommend that you select "The whole widget is a link" and remove the paragraph with the editor once the widget is set.

Second CTA/link option

28.png

Toggle the “Add a second link” option to configure a second link/ CTA in your widget, the same way as the first one. 

 

Style tab

Select the style options (Text, Buttons, Container, Border, Close button) you want to apply to your widget and customize the banner.

Background can be set up with an image using the image-fitting policy

4 options are provided:

  • "Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container.
  • "Contains": the image is resized keeping the aspect ratio so that the whole image is included in the background container (no overflow)
  • "Fill": the image is resized to fill the background container without keeping the aspect ratio
  • "None": the image is left unchanged.

 

Conditions tab

Select the Triggering and Recurrence options you want to apply to the Banner widget.

Was this article helpful?

/