Go to the Customizer -> Hero -> Front Page Hero.
Click on Front Page Hero to open the list of options available for the front-page background and content.
- First, you need to decide upon the Hero type. It can be represented by:
– a simple Hero
– a slider
– a custom slider
Select the type of the Hero background
You can apply one of the 5 hero background types, as follows:
1. Set a color as Hero background
Choose from the drop-down menu the option to set a color as background type.
Click on Options next to your selection, to expand the panel dedicated to selecting colors.
You can choose the color you prefer and adjust its parameters, so it best fits the Hero background of your website front page.
2. Set an image as Hero background
Choose from the drop-down menu the option to set an image as background for the front-page Hero.
Click on Options next to your selection, to open the panel with further customizations for the image.
Upload the image
You have to upload the image of your choice from your device and set it as Hero background.
For removing the image afterwards, or replace it with another one, use the buttons below the image currently in place.
Position the image
You can center the image in 9 variants, so the image value is accentuated in the best possible way:
– Left top
– Left center
– Left bottom
– Center top
– Center center
– Center bottom
– Right top
– Right center
– Right bottom
Set a color for the background of the image
The background color is visible especially on mobile devices, and when the mobile background vertical offset has certain values.
Apply a parallax effect to the background image
The parallax effect consists of a web page’s background moving at a slower rate than the foreground. It’s modern, stylish and catchy for users. In case you chose to set an image as hero background, you can check the checkbox to Enable parallax effect. The result will be visible in preview mode.
Set a different mobile image
To choose a different Hero image for mobile devices, you should use this section and upload the image from your device.
In case you want to replicate on mobile devices the same appearance as on desktop, you should leave this field empty.
Regardless of the image you want to set for mobile devices (the same as for desktop or a different one), you can adjust 2 additional parameters:
- Horizontal position of the image as it appears on mobile devices (set it to left, center or right)
- Decide on the deviation of the image from the top or bottom of the Hero section, by selecting a certain value on the slider for Mobile Background Vertical Offset.
Here’s an example where the image is positioned to the right and the mobile background vertical offset is set to 176:
3. Set a slideshow as Hero background
Select from the drop-down menu the option to set a slideshow as background for the front-page Hero.
Click on Options next to your selection, to open the panel with further customizations for the slideshow:
Upload the images that will be part of the slideshow
Click on the section dedicated to each default slideshow image, to replace the defaults with your own selections.
To add a new slideshow image, click on the button Add new slideshow image and then, press Change Image.
To eliminate an image from the slideshow, click on the Remove button corresponding to that image.
Set the Slide Duration
The slide duration option refers to how long an image is displayed onto the screen, until the next image in the slideshow comes in. Smaller values equal a shorter time an image will be shown to users, until the next image succeeds to it.
Set the speed of the slideshow effect
This results in how smooth or sharp is the transition from one image to the next one, in the slideshow. Smaller values mean a sharper transition from one image to another, while greater values mean a smoother transition from one image to the next.
4. Select a video to apply as Hero background
Choose from the drop-down menu the option to set a video as Hero background for the front-page.
Click on Options next to the selection to open the panel with further customization settings.
Choose the video
You can insert here either:
- A self-hosted video of your own – you have to upload the file from your computer
- A link to an external video hosted on another platform (YouTube, Vimeo, etc.) – you have to provide the link to that external source
Set a video poster
The video poster has the same role as an ALT for an image. In case the video file is not loading or cannot be played, the image set as video poster will appear instead.
5. Select a gradient to apply as Hero background
Choose from the drop-down menu the option to apply a gradient to the background of the front-page Hero.
Click on Options next to your selection to open the panel with customization settings:
To replace the default gradient with one of your choice, click on Change Gradient and open the popup with the available options:
Select the preferred gradient and press the Select Gradient button at the bottom of the popup window. To limit your research, you can enter a keyword related to gradient colors in the search box, and a restricted list of gradients will be displayed.
Select to show an overlay for the Hero background
The overlay is a semi-transparent color that is applied on top of the selected background, to give a nice visual effect.
The overlay can have the power to enhance the value of the colors, image or video that you’ve chosen for the Hero background.
If you opt for the overlay, check the checkbox to enable it. Next, click on Option to expand the corresponding panel with further settings for the overlay:
You can choose one of the 3 overlay types:
- Only shapes
- Color for the overlay
- Gradient for the overlay
We mention that shapes can also be combined with a color/gradient overlay.
For the Shapes type, you have to select from a wide variety of shapes those that are most appropriate for your Hero background.
Also, you can adjust the luminosity of the shapes, by setting smaller or larger values for the Shape Light option.
For the Color type, you have to select the color of the overlay and adjust its opacity level to smaller or larger values. Depending on the opacity value set on the slider, the overlay can range from the more transparent to the opaquest.
You can add shapes to color, choose from the list of available shapes, and adjust the luminosity of the respective shapes in the overlay.
For the Gradient type, you have to select the gradient of your choice, and further customize that gradient. Thus, you can select different colors combination in the gradient, and adjust the gradient angle.
Also, you can add shapes to the gradient, choose from the list of available shapes, and set the luminosity of the selected shapes in the overlay.
Insert a bottom separator that differentiates between the Hero and the rest of the page
A bottom separator delimits the Hero section from the rest of the page. Through the style you apply to the bottom separator, the Hero can be set apart through shapes and color.
Check the checkbox to enable the bottom separator in the front page of the website. Click on Options next to it to expand the panel for customizing settings:
Type of bottom separator
Here, you can select from different shapes the one that suits best your design.
Color of bottom separator
You can choose what color to apply to the bottom separator you have previously defined.
This is an additional color that can be customized for the bottom separator, to create a more stylish effect.
Height of the bottom separator
This values refer to the vertical distance the shapes defining the bottom separator occupy in the front-page Hero. The higher the values, the more distance the bottom separator will occupy, vertically, in the front-page Hero.
Select a bottom arrow to add in the lower part of the Hero background
A bottom arrow is a graphic symbol showing that there’s more content down the page, that users have to see.
Note: the bottom arrow might not be visible if you have previously selected to apply a bottom separator to the Hero.
Check the checkbox to enable the use of a bottom arrow for the Hero of the website front-page. Click on Options next to it, to expand the panel with customizations of the settings:
Make the arrow to bounce
Enable this to make the arrow have a bouncing effect, whose role is to direct users’ attention towards it.
Symbol for the icon
From here, you can select the symbol for the bottom icon that’ll draw users’ attention to the rest of the page content. Click on Change icon to select the graphical element you want. A popup will open, with the available symbols:
Select the symbol of your choice and click Choose Icon at the bottom of the popup window.
Set the dimensions of the bottom arrow
You can try different values on the slider, for larger or smaller dimensions of the bottom arrow.
Icon bottom offset
This value refers to the distance of the icon from the bottom of the front-page Hero. Greater values equal a longer distance of the icon from the bottom of the Hero.
Choose the color of the icon
Select an appropriate color for the icon, so it fits well in the website color scheme and draws attention effectively.
Choose a background color for the icon
For the symbol to be more salient, you can choose to attach a specific color to its background. Use this setting correctly and observe the design guidelines when selecting the color for the symbol background.
Choose to split the background in 2
You have the option to enable Split Background. This means the Hero will be split in two different parts, and further customizations will contribute to enhancing the design style for the front-page Hero.
Check the checkbox to enable this feature, and click on Options next to it to open the panel with further customizations:
Choose the color for the split
The dividing part will have the color you define from this subsection.
Decide on the Angle of the split
Choose the inclination degree for the dividing part, so it fits the overall page design. In the above example, we used an angle with the value of 85.
Dimensions of the split
Choose the dimensions for the dividing part, so it covers a slight part of the Hero or a major part of it. In the above example, we chose a value of 52 for the split dimensions.
Angle of the split on mobile devices
You have to choose the inclination degree for the dividing art, as the Hero will appear on mobile devices (mobile and tablet).
Dimensions of the split on mobile devices
You have to choose the dimensions for the dividing part, as it will appear on mobile devices (mobile and tablet).
Set the Hero background to full height
If you set the Hero background to full height, it will occupy the entire distance dedicated to the Hero section of the website Front-Page.
Enable the option for the first content section of the page to overlap the header
When content overlaps the header, a certain part of the content section is indented into the header. You can activate this option or leave the checkbox unchecked (if you do not want the content to overlap the header).
Overlap with: from here, set the values for the distance at which the content section is indented into the background.
The overlappable sections are the first you will see in the list of available content sections.