Beyond the impressive look you imagine for the Front-Page Hero of your website, lie multiple options you can play with for a successful result.
Go to the Customizer -> Hero -> Front Page Hero.
The first section here is dedicated to customizations for the Front-Page hero background.
There are 5 different background types:
- Color
- Gradient
- Image
- Slideshow
- Video.
Background Type – Color
Select Color from the drop-down menu under Background Type.
Click on the Options button next to the selected background type, Color.
A panel will open, where you will choose the preferred color for the front-page header background.
Click on the drop-down menu next to the color box:
Select the color from the right bar, then adjust the luminosity, saturation and shade to get the appropriate tint.
You also have the RGB color code, you might need to save it in order to define it or match it with other colors in the website design.
Background Type – Gradient
Select Gradient from the drop-down menu under Background Type.
Click on the Options button next to the selected background type, Gradient.
A panel will open, with the gradient options. Click on Change Gradients to change the default one with the gradient of your liking.
Choose from the list of available gradients you can visualize by scrolling down the page:
If you already have an idea about what gradient to apply, the search box in the upper right corner will help you. Depending on your search terms, the list will be restricted to only those gradients that match the specified criteria.
After you have made your decision, select the preferred gradient and press Select gradient.
It will apply to the front-page header design.
Background Type – Image
Select Image from the drop-down menu under Background Type.
Click on the Options button next to the selected background type, Image.
A panel will open, where you can add and customize the image of your choice.
First, you need to upload your image.
Background Image Upload
Click on Change file to replace the default image with the one you want to apply. Or, if you have already removed the default image, you need to click on Select file to upload an image from your personal device.
Background Position
This option serves to better position the image onto the header background. You have multiple variants to play with, to check the best image placement in that area:
- Left top
- Left center
- Left bottom
- Right top
- Right center
- Right bottom
- Center top
- Center center
- Center bottom.
Background Color
This option is useful when the background image is set to smaller dimensions, and it does not occupy the entire header space.
Simply click on the drop-down arrow next to the color box, to open the panel for choosing colors.
You need to select the basic color, then adjust the luminosity, shade and saturation of that color, for perfect results. You also have the RGB color code corresponding to the selected color, in case you want to save it for later, to replicate it in other parts on the website.
Enable Parallax Effect
The parallax effect implies that the background of the webpage moves at a different speed than the rest of the page, for an impressive visual effect.
If this option is activated, when a visitor scrolls down the page, there is a slightly hidden background that stays in place, and as the foreground moves, he/she continues seeing the still background until the entire foreground is covering it.
Mobile Image Background Options
If you want to show the visitors a different image on mobile, you can set it from this subsection.
Mobile Only Image
In case you want to use the same image as on the desktop, for showing it on mobile devices, you will leave this field empty.
In case you want to insert a specific image for mobile devices, press Select file to upload it from your computer.
Mobile Background Horizontal Position
From here, you can center the image for the best visual showcase on mobile devices.
You have the following options:
- To position the image to the left
- To position the image to the center
- To position the image to the right.
Mobile Background Vertical Offset
The vertical offset helps ranging the image in a certain manner, on a vertical axis.
Set different values on the slider and visualize the results in the live preview.
Once the ideal image vertical offset is found, press Publish to save the changes.
Background Type – Slideshow
The slideshow allows for multiple images to succeed one to another automatically, while the web-surfers are visiting the page.
Select Slideshow from the drop-down menu under Background Type.
Click on the Options button next to the selected background type, Slideshow.
A panel will open with settings for the slideshow.
Header Slideshow Images
This subsection consists of the elements you define for the slideshow: the images that will be part of the presentation.
- To remove or change any of the default images, click on them and press Change Image or Remove.
- To add images to the list, press Add new slideshow image under the items that are already defined.
- To reorder the images in the list, use drag and drop for a different arrangement.
Slide Duration
This option defines how long each image will be displayed to the users. The higher the value, the longer an image will be kept on the users’ screen, before the next image comes in.
Effect Speed
The effect speed refers to how fast or slow the images are succeeding one to another, in the slideshow. A smaller value results in sharper transitions from an image to another, while a greater value results in smoother transitions from one image to the next one.
Background Type – Video
If you want to upload a video file for the Front-Page Hero background, you can set it from this subsection.
Specify the video file
You have 2 possibilities:
- Upload a video from your personal device (self-hosted video)
- Provide the link for an external video hosted on another domain (e.g. YouTube, Vimeo, etc.)
Video Poster
The video poster is an image that will be shown to the website visitors, in case the video file is not loading or if it cannot be played.
It is the equivalent of an alternate text (ALT text) for an image, or of the alternate text for the logo, as you have seen when setting up the website identity.
There is a default video poster you can set up, or else you will upload your own image.
Additional customizations
Show Overlay
The overlay is a semi-transparent color that is applied on top of the front-page Hero background, to obtain a nice visual effect. If you check the checkbox, the overlay is enabled and available for further customizations: click on Options to open the panel with settings for the overlay.
The overlay can be one of these types:
- Shape Only
For this overlay type, you need to select the specific shapes for the overlay, as well as the luminosity of those shapes.
- Color
For this overlay type, you need to select the overlay color (in the perfect combination of luminosity, shade and saturation), the overlay opacity (that defines how transparent or opaque the overlay is – the higher the value on the slider, the opaquer the overlay will be), and you can add shapes to the overlay (and adjust the luminosity for those shapes).
- Gradient
For this overlay type, you need to select the gradient of your liking, adjust the colors that make up the gradient, define the gradient angle using the Angle option, and you can also apply shapes and adjust shapes luminosity (the higher the value, the more luminosity the shapes will receive).
Use Bottom Separator
The bottom separator is more visible if you don’t allow content to overlap header. That is, the last option should be disabled, for the bottom separator to be noticeable.
Check the checkbox to Use Bottom Separator, then click on Options next to this section to expand the panel with customization settings:
- Select the type of bottom separator (e.g. Wave and line, Book, Book Negative, Arrow, Waves Brush, etc.)
- Select the color that will be applied to the bottom separator
- Select the accent color that will be applied to the bottom separator (e.g. for Wave and line)
- Adjust the height of the bottom separator (how much the bottom separator will deploy on a vertical axis)
Use Bottom Arrow
The bottom arrow is a symbol placed in the bottom area of the header, with the role of drawing people’s attention that there is more to browse down the page.
Please note that the bottom arrow might not be visible if you have previously enabled certain bottom separator types.
When you check the checkbox to Use Bottom Arrow, you need to click on Options next to this subsection, to expand the panel with further customizations:
- Bounce Arrow
If you enable this, the symbol will bounce, for raising attention to the content below the fold. It will draw the users’ attention in a more effective way.
- Icon
This option refers to selecting the symbol that will be used at the bottom of the header. Besides an arrow, other symbols can also be selected:
To access this list, click on Change Icon next to the default arrow.
There is also a search box where you can enter suggestive terms that will restrict the symbols list to the ones that are most relevant to you.
After having selected the symbol, press Choose Icon.
- Icon Size
This option refers to the dimensions of the symbol that will be used at the bottom of the header. The higher the value selected on the slider, the bigger the icon at the bottom of the front-page header.
- Icon Bottom Offset
The icon bottom offset represents at what distance from the header bottom the icon is placed. You can set a higher value, for the icon to be placed higher in the header. Or you can set a smaller value, for the icon to be positioned more to the bottom of the header.
- Icon Color
This option allows you to define the color of the symbol that you’ll use as bottom icon.
- Icon Background Color
This option allows you to define the color of the space surrounding the symbol you selected as bottom icon.
Use Split Background
This option, when activated, makes the header background to be split in 2.
Click on Options next to Use Split Background, to expand the panel with split options:
- Select the color that divides the header background in 2
- Adjust the angle of orientation for the split (the background can be split horizontally, vertically, to a more or less inclined angle)
- Define the size of the part representing the division of the header background
- Adjust the angle of orientation for the split, specifically for mobile devices
- Define the size of the part representing the division of the header background, specifically for mobile devices.
Full Height Background
This option allows you to set the header background to full height, so that it occupies the entire space dedicated to the front-page hero background. The changes are more visible on mobile devices.
Allow Content to Overlap Header
This subsection refers to the possibility for some content sections to be indented into the front-page header. If the option is enabled, content sections will overlap the header, resulting in a nice visual effect.
The overlappable sections come first in the list of content sections for the page, so it will be easy to find them and select one to apply to this part of the homepage.
