Front Page Hero Content

Article sections

After having set the front-page hero background, it is time to customize the hero content. The content and its background should create a perfect visual balance and have full impact on the users you are expecting to browse your website.

General Hero Content Customizations

Make Content Full Width

This setting refers to the amount of space the content occupies in the Front-Page Hero. If the option is enabled, the content will take the whole Hero space to deploy on it.

Content Layout

This option implies defining the placement and organization of the content in the Front-Page Hero.

The variants are:

Text on center
Text on right
Text on left
Text with media on left
Text with media on right
Text with media above
Text with media below

If you select to attach media to the text for the front-page hero content, you will have multiple options for this. You can include:

An image

The options for customizing this image are available from the panel that opens when you click on Media Box Settings:

Vertical Alignment of the Media – this option allows you to align the media to the top, centred or to the bottom.

Upload the image – here, you can upload an image from your computer. You can remove the file whenever you want or change it with a new image.

Set the image width – from here, you can define the horizontal space the image occupies in the front-page Hero. Change values and preview the results in the live preview mode.

Make the image round – from here, you can turn the rectangular image into a round one, for a nice visual effect.

Image Border Color – in case you checked the option to make the image round, you can further set a certain color for its border.

Image Border Thickness – also, if you checked the option to make the image round, you can adjust the thickness of the border.

Enable media shadow – this allows you to apply some shadow to the media, for enhancing the impact of the image.

Select a frame type – from here, you can easily add a frame to the image, and choose the frame type, too. You can choose between solid background and border.

Frame Type – Background

Solid Background Width – this refers to the width onto which the frame unfolds, behind or over the image.

Solid Background Height – this refers to the height onto which the frame unfolds, behind or over the image.

Offset Left – this refers to the arrangement of the frame behind or over the image, by taking a certain deviation, horizontally, from the image placement.

Offset Top – this refers to the arrangement of the frame behind or over the image, by taking a certain deviation, vertically, from the image placement.

Frame Color – this defines the color of the frame delimiting the image.

Show frame over image – this allows you to set the placement of the frame on top of the image, in case this matches your design purposes.

Show frame shadow – this option adds some shadow to the frame delimiting the image.

Hide frame on mobile – for better responsiveness, you might need to check this option and hide frame on mobile display.

Frame Type – Border

Frame Width – this defines the width on which the frame is deployed, in comparison with the image it is delimiting.

Frame Height – this defines the height on which the frame is deployed, in comparison with the image it is delimiting.

Offset Left – this implies the horizontal deviation of the frame delimiting the image, as compared to the image placement in the front-page Hero.

Offset Top – this implies the vertical deviation of the frame delimiting the image, as compared to the image placement in the front-page Hero.

Frame Thickness – this option defines the thickness of the frame delimiting the image. For some changes to be visible for the frame (e.g. color), you need to choose a value that is greater than 0.

Frame Color – from this option, you will choose the color for the frame of the image.

Show Frame over Image – this option lets you display the frame over the image, in case this matches your design purposes.

Show Frame Shadow – you might want to apply some shadow to the image frame. From here, you have the possibility to enable frame shadow.

Hide Frame on Mobile – for better responsiveness, you have the option to hide the frame on mobile display.

A video

You can insert a video in the front-page Hero and customize it according to your design specifics.

The options for customizing the video are available from the panel that opens when you click on Media Box Settings:

Media Vertical Align – this option permits the vertical alignment of the media box (the video, in this case), so it stays at the top, in the middle or at the bottom of the Hero.

Image Width – this allows you to set the width of the video presentation. Play with different values and see the results in the live preview.

Enable Media shadow – from here, you can add some shadow to the video. If enabled, this option adds style to the presentation.

Content Video – you need to fill in this field the link to the video file that you want to insert in the front-page Hero.

Autoplay Video – when enabled, this option makes the video to play automatically when the visitors land on the page. Due to performance purposes, this function is disabled in customizer, so you won’t be able to check it until you hit publish and see it live.

Loop Video – this option refers to the video being played again, once it is finished. If this meets your design preferences, enable the option to loop video.

A video popup button

Another type of media you can insert into the front-page Hero is a video popup button. The customization options are available from the panel that opens when you click on Media Box Settings and they are as follows:

Media Vertical Align – this option allows for vertical alignment of the video popup, to the top, in the middle or to the bottom of the Hero.

Image Width – this option defines the width onto which the file is deployed onto the Hero.

Enable Media Shadow – this option allows for adding some shadow to the video popup box, for a more stylish effect.

Content Video – you need to fill in this field with the link to the video that will be played in the front-page Hero.

Icon Color – from here, you set the color for the icon corresponding to the Play button.

Icon Hover Color – from here, you set the color for the icon corresponding to the Play button, when hovering over with the mouse.

Hide Video Poster – this option refers to hiding the image that corresponds to the video and that appears when the video is not playing.

Poster – the poster refers to the image that corresponds to the video and that appears when the video is not playing. It is the equivalent to an ALT text for a common image. You can upload an image from your computer, change it any time or remove it completely.

Video Poster Overlay Color – in case you’ve chosen to display a video poster, this option adds the possibility to attach an overlay color to it. The overlay is a semi-transparent color that is applied on top of an element to obtain a nice visual effect.

Overlapped images

You also have the option to add this type of media to the front-page Hero content: overlapped images.

You have access to the customization panel for overlapped images if, after having selected Overlapped Images as media type, you click on Media Box Settings.

The options are:

Media Vertical Align – from here, you can set the placement of the media to the top, in the middle or to the bottom of the front-page Hero.

Image Width – change the values to adjust the width of the media.

Note: the default images can be changed by clicking on them (on the pencil icon at the middle of each image) in the live preview. A popup will open, where you are prompted to upload the image files from your computer (one by one) and select them for the overlapped images section of the Hero.

Content Spacing

From this subsection, you can define the distance of the content from the top and to the bottom of the Hero. The values are expressed in percentages, to give you an exact estimation of these distances as related to the Hero as a whole.

Mobile Content Spacing

If you want to go into details with regards to the website view on mobile devices, this section will help you. From here, you can define the distance of the content from the top and to the bottom of the Hero, on mobile devices. The values are expressed in percentages, to give you an exact estimation of these distances on mobile and tablet.

Text Box Settings

The text box can receive further customizations, according to your design guidelines. Click on Text Box Settings and a panel will open with the options to customize the text box. Here are the options:

Text

Text Align – The text in the text box can be aligned horizontally: to the left, at the center or to the right.
Text width – This option allows you to set a greater or a smaller width for the text in the textbox, depending on the amount of text you put there. Set the values, and instantly watch the live preview on the right side of the screen.
Overlap Media – This option refers to how much a text box is overlapped onto the media box. It is valid only if you have previously selected to attach some media to the Hero content, by choosing Text with media (on left, on right, above, below) in the Content Layout
Text Vertical Align – This option gives you freedom to align the text in the text box vertically, so it appears to the top, centered or to the bottom.

Text Background

If you leave this option disabled, the text box will have a fully transparent background.

If you enable this option, you can apply further customizations to the text box background.

They are:

Background Color – Click on the drop-down arrow next to the color box to select a color (+its brightness, its saturation and its shadow) for the text box background.
Background Spacing – This option helps you define the negative space, that is the distance of the text from the box borders (top, bottom, left and right). The values are expressed in pixels, for precise adjustments regarding each of the directions.
Border Radius – This option refers to the corners of the rectangular text box. The corners can be sharper or more rounded, depending on the values you define here. You must enter a value expressed in percentages, to change the default border radius.

Border Color – The border color will only be visible if you set a thickness of the text box border that is greater than 0. The thicker the border, the more visible the color of the border.

Click on the drop-down arrow and choose a particular color for the text box borders.

Background Border Thickness – This option defines how thick the text box borders are. The values are given in pixels, so you can go into such details for each of the sides (top, bottom, left, right) of the text box.
Shadow Elevation – This allows you to play with advanced customizations for the text box. It not only adds a shadow to the text box, but it can also be adjusted to accentuate or diminish the effect.

Motto Customizations

If the option to show a motto is enabled, you can click on Options next to Show Motto to open the panel for advanced customizations.

You can adjust:
Motto Typography

Font Family – from here, you define the font of the motto
Variant – for more customizations, you can define more precisely the font of the text using Variant
Font Size – this helps you specify the dimensions of the motto text
Mobile Font Size – for better responsiveness on mobile devices, you need to specify the dimensions of the text for mobile, from this subsection
Line Height – this is the vertical distance the text occupies in the space dedicated to the motto
Letter Spacing – this defines the space between the letters of the text representing the motto
Text Transform – it refers to capitalization of the motto text. You can set the text to uppercase, lower case, or capitalization, etc.
Color – this helps you set a particular color for the motto text.

Motto Spacing

Motto Spacing implies using certain values for the distance of the motto from the top of the text box and to the bottom of the text box. The values are expressed in pixels.

Motto Background

If you leave unchecked the checkbox to Enable Background, the motto will be displayed on no background.

If you enable this option, you can make the motto stand out through specific customizations:

Background Color – set the color of your choice for the motto background (define its parameters in the color selection panel, for better branding purposes)
Background Spacing – this defines the amount of space between the motto text and each of the borders delimiting the motto background (top, bottom, left, right). The values are given in pixels.
Border Radius – this is helpful for setting rounded corners for the motto background. Give values expressed in percentages, for changing the default value.
Border Color – set a particular color for the motto background border. However, note that you need to choose a value for the background border thickness that is greater than 0, for the border color to be visible.
Background Border Thickness – this defines how thick the borders of the motto background are. The values are expressed in pixels, for a greater precision in defining the border thickness.
Shadow Elevation – this allows you to apply some shadow to the motto background. Depending on the value selected on the slider, the shadow will be diminished or accentuated.

Title Customizations

If the option to show title is enabled, you can click on Options next to Show Title to open the panel for advanced customizations.

You can adjust:

Title Typography

Font Family – from here, you define the font of the title
Variant – for more customizations, you can define more precisely the font of the text using Variant
Font Size – this helps you specify the dimensions of the title text
Mobile Font Size – for better responsiveness on mobile devices, you need to specify the dimensions of the text for mobile, from this subsection
Line Height – this is the vertical distance the text occupies in the space dedicated to the title
Letter Spacing – this defines the space between the letters of the text representing the title
Text Transform – it refers to capitalization of the title text. You can set the text to uppercase, lower case, or capitalization, etc.
Color – this helps you set a particular color for the title text.

Title Spacing

Title Spacing implies using certain values for the distance of the title from the top of the text box and to the bottom of the text box. The values are expressed in pixels.

Title Background

If you leave unchecked the checkbox to Enable Background, the title will be displayed on no background.

If you enable this option, you can make the title stand out through specific customizations:

Background Color – set the color of your choice for the title background (define its parameters in the color selection panel, for better branding purposes)
Background Spacing – this defines the amount of space between the title text and each of the borders delimiting the title background (top, bottom, left, right). The values are given in pixels.
Border Radius – this is helpful for setting rounded corners for the title background. Give values expressed in percentages, for changing the default value.
Border Color – set a particular color for the title background border. However, note that you need to choose a value for the background border thickness that is greater than 0, for the border color to be visible.
Background Border Thickness – this defines how thick the borders of the title background are. The values are expressed in pixels, for a greater precision in defining the border thickness.
Shadow Elevation – this allows you to apply some shadow to the title background. Depending on the selected value, the shadow will be diminished or accentuated.

Text Animation

This option gives some dynamism to the presentation, by animating the title text. Here’s how to use this feature:

Go into the live editor and put the excerpt of text you want to dynamically replace – in curly brackets.
In the Text animation subsection, in the Customizer, put the alternative words in the field dedicated to them, one word/phrase per line.
Click Publish and see the results. The initial word (that was put in curly brackets) will be dynamically replaced by its alternatives (the words/phrases mentioned in the field for Alternative Text).

Subtitle Customizations

If the option to show subtitle is enabled, you can click on Options next to Show Subtitle to open the panel for advanced customizations.

You can adjust:
Subtitle Typography

Font Family – from here, you define the font of the subtitle
Variant – for more customizations, you can define more precisely the font of the text using Variant
Font Size – this helps you specify the dimensions of the subtitle text
Mobile Font Size – for better responsiveness on mobile devices, you need to specify the dimensions of the text for mobile, from this subsection
Line Height – this is the vertical distance the text occupies in the space dedicated to the subtitle
Letter Spacing – this defines the space between the letters of the text representing the subtitle
Text Transform – it refers to capitalization of the subtitle text. You can set the text to uppercase, lower case, or capitalization, etc.
Color – this helps you set a particular color for the subtitle text.

Subtitle Spacing

Subtitle Spacing implies using certain values for the distance of the subtitle from the top of the text box and to the bottom of the text box. The values are expressed in pixels.

Subtitle Background

If you leave unchecked the checkbox to Enable Background, the subtitle will be displayed on no background.

If you enable this option, you can make the subtitle stand out through specific customizations:

Background Color – set the color of your choice for the subtitle background (define its parameters in the color selection panel, for better branding purposes)
Background Spacing – this defines the amount of space between the subtitle text and each of the borders delimiting the subtitle background (top, bottom, left, right). The values are given in pixels.
Border Radius – this is helpful for setting rounded corners for the subtitle background. Give values in percentages, for changing the default value.
Border Color – set a particular color for the subtitle background border. However, note that you need to choose a value for the background border thickness that is greater than 0, for the border color to be visible.
Background Border Thickness – this defines how thick the borders of the subtitle background are. The values are expressed in pixels, for a greater precision in defining the border thickness.
Shadow Elevation – this allows you to apply some shadow to the subtitle background. Depending on the selected value, the shadow will be diminished or accentuated.

Button Customizations

From here, you can customize the appearance of the buttons in the front-page Hero. There are 2 types of buttons:

Normal buttons

Buttons Options

You can add a button by clicking on Add New Button under the existing buttons list
You can remove a button by clicking on it and pressing Remove
You can reorder the buttons by simple drag and drop

Buttons Background Options

If you enable the option to show buttons background, a full list of customization options will expand:

Background Color – set the color of your choice for the buttons background (define its parameters in the color selection panel, for better branding purposes)
Background Spacing – this defines the amount of space between the buttons text and each of the borders delimiting the buttons background (top, bottom, left, right). The values are given in pixels.
Border Radius – this is helpful for setting rounded corners for the buttons background. Give values in percentages, for changing the default value.
Border Color – set a particular color for the buttons background border. However, note that you need to choose a value for the background border thickness that is greater than 0, for the border color to be visible.
Background Border Thickness – this defines how thick the borders of the buttons background are. The values are expressed in pixels, for a greater precision in defining the border thickness.
Shadow Elevation – this allows you to apply some shadow to the buttons background. Depending on the selected value, the shadow will be diminished or accentuated.

AppStore buttons

Buttons Options

There are 2 buttons available: Google-Store & App-Store.

For each of them:

Select the Badge Type (Google Play Badge/App Store Badge)
Provide the corresponding link

You can also remove one of the buttons or rearrange the buttons with drag and drop.

Buttons Background Options