Hero Image

Add Hero Image Content Element

The "Hero Image" content element can be added only to the flexi-pages of the Sana web store. You can add impressive background images and create wonderful design effects to make your web store look more stunning. You can only add one "Hero Image" content element to a flexi-page. Also, it has to be the first content element on the flexi-page. When you use "Hero Image", it is recommended not to set any other content elements as the background of a web page.

The tables below provide description of the "Hero Image" content element settings.

Background Image

Field	Description
Select a background image  for hero image	Add an image to a web page.     The resolution of the image you add should be not less than 1280 x 800px.     On the mobile devices the image will be cropped from both sides to fit the screen size. Also, the height of the image will fit the height of the device.

Background image settings

The "Hero Image" shown below the navigation on the web page (The "Show after header" option is enabled)

The "Hero Image" shown as the background of the web page (The "Show after header" option is disabled)

The scroll down icon shown on the "Hero Image" content element (The "Show scrolldown icon" option is enabled)

Background image effects

Field

Description

Background image effects

Use these options to add effects to an image or select None, in case you do not want any effects to be applied to an image. Ken Burns effect - this effect adds a smooth zoom and pan to a static image. This effect turns a still image to motion picture. Black and white effect - this effect gradually changes the color of an image from colorful to black and white. The color of an image will start to slowly fade.     "Black and white effect" does not work in the Internet Explorer and Microsoft Edge browsers.     The effects will work automatically, once the image is loaded.

Inverted logo

Field

Description

Select an inverted logo

If you set an image as a background of a web page and a web store logo is of a dark color, you can add a light-colored web store logo, which will be used instead of the default one and shown at the top of the page. If you add the inverted logo, make sure that it is of the same size as your default logo.     If the "Show after header" option is enabled, you will not be able to add an inverted logo.

Text settings

Field	Description
Header text	Add a text which will be shown on an image. You can apply styles to the header text using the HTML tags. Using the Text position field, you can define the position of the header text on an image.     The maximum allowed length of the header text is 140 characters.     If you are using the <h1> or <h2> HTML tag for the header text, the style from the web store theme will be applied.
Header text color	Specify the header text color. The default color is white. If you have knowledge of HTML, then in the Header text you can switch to the Code View and change the header text color using the inline styles.
Sub header text	Add the sub header text which will be shown on an image under the header text. You can apply styles to the sub header text using the HTML tags. Using the Text position field, you can define the position of the sub header text on an image.     The maximum allowed length of the sub header text is 160 characters.     If you are using the <h1> or <h2> HTML tag for the sub header text, the style from the web store theme will be applied.
Sub header text color	Specify the sub header text color. The default color is white. If you have knowledge of HTML, then in the Sub header text you can switch to the Code View and change the sub header text color using the inline styles.
Button text	Add a text which will be shown on a button. The button is shown under the sub header text. Using the Text position field, you can define the position of the button on an image.     The maximum allowed length of the button text is 32 characters.     We recommend to add the text which does not exceed one line on the button to be nicely shown.     If you leave this field empty, then the default text "Learn More" will be shown on the button.
Button text color	Specify the button text color. The default color is white.
Button background color	Specify the color of the button. The default color is white.
Button link	Add an internal web store page or an external URL to the button. Clicking on the button will open the linked page. If the option None is selected, then the button will not be shown on the image.
Text position	Use this field to define the position of the header text, sub header text and the button on an image. The available options are: right, left and center. You can also set the position of the header and sub header texts using the Align option in the text editor, in this case the value you set in the Text Position field will be overridden. The position of the button can be defined only using the Text Position field.

Translations

When translating the page that contains the "Hero Image" content element to another language, the default settings of the "Hero Image" content element will be used for other languages. The header text, subheader text and button text can be translated to other languages. You can also change the color of the header text, subheader text and button text and change the position of these elements on the video for other languages. You can select different image for other language.