In the customizer, go to HERO -> INNER PAGES HERO.
The inner pages can have different hero image/text, as compared to the front page. So, in this article we show you which are the options to customize the inner pages hero.
Note that it is recommended to have a blog page or a sample page open, otherwise the changes you make from the customizer will not be visible in the customizer preview.
This section is split into the following subsections:
1. BACKGROUND
From this subsection, select the background type. Choose among the following:
A. Color
Select this option and click on the button named Options. A panel will open, where you can adjust the color of the inner pages hero.
B. Image
Select this option if you want to apply an image to the background. Then click on Options. A panel will open, with the Image Background Options.
- Upload an image from your computer, to set as background for the inner pages hero. Your theme works best with an image with a header size of 1920 × 800pixels — you’ll be able to crop your image once you upload it, for a perfect fit.
- Hide the image, and select another one from your computer, to set as background for the inner pages hero.
- If you have 2 or more images uploaded, you can select Randomize uploaded headers. In this way, one image or another will be displayed, at random.
- Background Position – center the image or move it according to the available options: left top, left center, left bottom, center top, center center, center bottom, right top, right center, right bottom.
- Show page featured image when available – this option allows you to set a different image for each inner page. When you have this option enabled, go to WordPress Admin Dashboard:
WordPress Admin Dashboard -> Pages -> All Pages -> Select the inner page you want a distinct featured image for -> Edit.
When you scroll down, on the right hand you will see the option: Featured Image.
Click on Set Featured Image and upload it for the respective page. Click Update the page.
That’s it! You have just set a featured image that will be specific to the page you edited:
- Enable parallax effect – A parallax effect consists of a slightly hidden background that stays in place, and as the foreground moves, you continue seeing the still background until the entire foreground is covering it. (Check the checkbox to activate this option).
C. Slideshow
This feature allows you to select a group of images that will be displayed in a slideshow. Click on Options to open the customization panel.
- First, select the images you want to rotate. You upload them from your computer, in the Header Slideshow Images
- Second, adjust the slide duration. This is the value you define for the time an image is visible on the screen, until the next image replaces it in the slideshow.
- Third, adjust the effect speed. This is the value you define for a smoother or sharper transition from one image to another, in the slideshow.
D. Video
This feature allows you to set a video as hero background file for the inner pages.
You can:
- choose a video from your computer (self-hosted video – MP4 format), or
- fill in the corresponding subsection with a link to an external video (YouTube, Vimeo, etc.).
- set a video poster – this is an image that is shown in case a user’s mobile device does not play video backgrounds, or while the video is loading.
E. Gradient
You may want to simply apply a gradient to your inner page hero and do without images/videos. Setting a uniform color is not your preferred option, so you can select a gradient.
To set up a gradient for the background, click on Options and open the panel from which you can choose/change the gradient to one of your own choice.
Show overlay – the overlay is a semi-transparent color/shape that is shown on top of the inner pages background to obtain a nice visual effect. If you choose to show an overlay, click on Options to adapt it to your website as follows:
- Overlay Type – choose from:
- Shape Only
- Choose among 10+ distinct shapes
- Adjust the light for the shape you have chosen, for more luminosity or additional shading
- Color
- Choose the overlay color
- Adjust the overlay opacity (the values range from 0 to 1, from the most transparent to the opaquest)
- Selecting a color does not exclude the option to select certain shapes. So, feel free to experiment with the shapes that you like
- For the shapes you decide upon, there is the further option to adjust the shape light. This will result in subtler visual expressions for your front page.
- Gradient
- Select the gradient you want to apply to the overlay
- Choose the perfect colors match for your gradient
- To adjust the gradient angle, use the Angle option
- In addition, you can add shapes to the overlay. Simply select the shapes you want to add to the overlay, from Overlay Shapes
- Adjust the light of the shapes to brighter or darker, from Shape Light
- Shape Only
Bottom Separator – in this section you can add and customize a graphical element that has the role of separating the header bottom from the rest of the page. This adds a nice visual effect to your inner pages hero. Define the bottom separator by using these parameters:
- Bottom Separator Type (select the shape you want to apply to it)
- Bottom Separator Color (select the color of the graphic element serving as bottom separator)
- Accent Color (select Accent Color, for bottom separator types with multiple shapes, and see the changes)
- Bottom Separator Height (from here, adjust the height of the bottom separator)
Use Split Background – the hero image can be cut, so two different colors split the background in two. You can choose:
- A certain color that half of the background will have
- The angle that determines the exact positioning of the split border (on desktop)
- The size (that is the distance up to which the split section covers the background, on desktop)
- The angle on mobile devices – it determines the exact positioning of the split border, on mobile devices
- The size on mobile devices (that is, the distance up to which the split section covers the background, on mobile devices)