To customize the inner pages hero differently from the front-page hero, you need to access the options listed in this section.
Go to the Customizer -> Hero -> Inner Pages Hero -> Background.
To customize the inner pages hero background, you need to have an inner page open, otherwise, the changes you make here won’t be visible.
The background of the inner pages hero supports different types, that are explained below.
Background Type – Color
Select Color from the drop-down menu under Background Type and click on Options next to it.
Open the panel dedicated to the color palette and select the color you want (adjust its brightness, saturation and shade).
Background Type – Image
Select Image from the drop-down menu under Background Type and click on Options next to it.
A panel will open, with the different customization options for the image you will set as hero background.
- Click on Add new image to upload an image from your computer. For a perfect fit into the inner pages hero, the image can be cropped before being inserted into the page Hero.
- Randomize uploaded headers – this will allow you to display several images at random, in different browsing sessions.
- Background Color – select the color of your choice for the hero background
- Background Position – align the image the way you want, for a perfect presentation (left top, left center, left bottom, center top, center center, center bottom, right top, right center, right bottom).
- Show page featured image when available – in the WordPress Admin dashboard, you can set a featured image for a specific page and you can set it as Hero background for the respective page.
Note! The featured image will be different for each inner page in the website, if you set a featured image for each page of your website.
- Enable parallax effect – parallax is an effect where the background image is moved at a different speed than the foreground content while scrolling. Check this to enable parallax.
Background Type – Slideshow
Select Slideshow from the drop-down menu under Background Type and click on Options next to it.
You will thus open the panel with customization options for this background type.
- Change the default images in the slideshow, by clicking on them and pressing “Change Image”
- Add new images in the slideshow, by accessing “Add new slideshow image” under the list of existing images.
- Slide Duration – adjust the time an image (slide) stays on the screen, before the next image comes in. The higher the value, the longer an image will be displayed to users, before a new image replaces it.
- Effect Speed – this is the speed at which the images in the slideshow rotate. A greater speed (higher values) will result in a sharper transition from one slide to another.
Background Type – Video
Select Video from the drop-down menu under Background Type, and click on Options next to it, to open the panel with customization options for the video.
You can choose among:
- Self-hosted video (you need to upload the video file from your local device)
- External video (you need to provide the link to the video file that is hosted on a different domain).
You might want to upload a video poster, as well.
The video poster is an image that will be displayed to the users whenever the video file is not playing. It is the equivalent of an alternate text for an image.
Use the option to upload a video poster, in the panel dedicated to customizing the video poster.
Video Background – Gradient
Select Gradient from the drop-down menu under Background Type and click on Options next to it.
Open the panel where you can customize the page Hero with the gradient of your choice.
Click on Change gradient to replace the default one with a gradient of your choice.
Additional Options
Show Overlay
The overlay is a semi-transparent color that is applied on top of the background, to obtain a nice visual effect.
Enable this and click on Options for further customizations.
Choose the overlay type (shape only, color or gradient), and adjust the values for the type of overlay you select:
- For the Shape Only type, choose the shapes and adjust the luminosity for the respective shape
- For the Color type, choose the color, opacity and shapes you will apply to the overlay
- For the Gradient type, select the gradient, match the colors of it and the angle of orientation, and choose some shapes, as well.
Use Bottom Separator
This is useful if you want to apply a bottom border delimiting the inner pages Hero from the rest of the page.
After having enabled this option, click on Options next to it and open the panel with further customization features:
- Choose the shape for the bottom separator. There are multiple shapes you can choose from, for a stylish effect
- Choose the color that will be applied to the bottom separator
- Adjust the height of the bottom separator, that is the vertical distance it covers in the page
Use Split Background
This option takes your web design a step forward.
Use it to split the Hero background in 2, and customize it from the features below:
- Color – select the color that will be applied to the part that splits the background in 2
- Angle – adjust the angle of orientation for the split
- Size – adjust the dimensions of the split
- Angle on mobile devices – adjust the angle of orientation for the split, as it is displayed on mobile devices
- Size on mobile devices – set the dimensions for the split, as it will be shown on mobile devices (this is helpful for better responsiveness on mobile and tablet)
