Add USP Bar Content Element

The USP bar content element is available as an app. It can be installed from the Sana App Center. In Sana Admin click: App Center > Apps > Apps Explorer.

The USP bar content element can be added to the webstore header, web pages (content, product and product list pages) and system pages of the Sana webstore. We recommend to use the USP Bar in your webstore header. You can add the USP bar content element to all header layouts (desktop, tablet and mobile).

To add a content element to a page, you must first choose a column layout, then, hover over a column and click the button (add content). Find the necessary content element, hover over it, and click Add to page. If the content element is not installed yet, click Install & add to page to install the content element and add it to the page.

For quicker and more comfortable usage, you can search and filter content elements.

Content Tab

The table below provides the description of the USP bar content element settings.

Field	Description
USP bar details
New banner	Use this button to create a new banner.
Banner text	Enter the text which will be shown on the banner. By default, the text is aligned to the center. Using the text editor you can style your banner text, for example, you can format a font, change the alignment, add a link or image. We provide the following recommendations which can help you to create a better banner: When you add any content to the banner, make sure that it looks good. You can preview the page to check it. You can add images to the banner, but take into consideration that they might break the design. This can happen for a variety of reasons. One of them is the inappropriate image size. We recommend to use smaller images for banners, for example icons. In any case, you should preview a page and make sure that an image looks good. If you add several banners, we recommend to use the same font size for all banner texts. Also, it is better to add a single line of text to the banner. The banner will look much better, if it is not overloaded with text.
Banner text color	Specify the banner text color. You can change it using the color picker, or by entering the color hex code, RGB or HSL values.
Banner background color	Specify the background color of the banner. You can change it using the color picker, or by entering the color hex code, RGB or HSL values. If you leave this field empty, the default value will be used.
Miscellaneous settings
Banner transition as	Using this field you can specify how the banner text should move. There are four types of transitions: Bottom to top: The banner text slides from bottom to top. Top to bottom: The banner text slides from top to bottom. Left to right: The banner text slides from left to right. Right to left: The banner text slides from right to left.
Autoplay settings
Rotation delay (in seconds)	Specify how much time should pass between banner transitions. The default rotation delay is 3 seconds (3000 milliseconds). You can add values between 1 and 3600. You cannot add decimal values or negative values. If you created one banner, then only the banner text will move with the delay you specified in this field. If you created several banners, the banners will switch automatically with the time interval you specified in this field. If you enter the value 0, then the banners will not rotate or, in case you have only one banner, the text transition will not occur.

It is also possible to expand the USP bar to the full width of the page. You can do this using the Show full width option on the Advanced tab in the row settings.

Make sure that the option Justify is selected in the Content element horizontal alignment field in the column settings. If any other option is selected the USP bar will not be shown in full width.

Advanced Tab

On the Advanced tab of the USP bar content element, you can configure height, width, and spacing settings.

Using the Content horizontal alignment setting, you can change the banner text alignment. The default value is Center.

Using the Minimum element height settings, you can specify the height of the USP bar for desktop computers, tablets, and mobile devices.

For more information about advanced settings, see Content Elements.