Let’s go forward and proceed to customizing the header settings, for the website you want to create.
Go to Header Settings -> Front Page Header Background, in the Customizer.
1. Background Type
You can choose among four different background types:
For the image background type, you can upload an image of your choice. Afterwards, you can either remove or change the image with another one.
You have the option to use the parallax effect. Check the checkbox to 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.)
For more advanced options, the image can be aligned differently, as follows:
- Left top/Left center/Left bottom
- Center top/Center center/Center bottom
- Right top /Right center /Right bottom
For the gradient background type, please bear in mind that this option excludes the insertion of an image. It only allows a colored background, with the color of your selection, in gradient mode.
For the slideshow background type, you can add as many images to the slideshow as you want, according to preferences.
You can adjust slide duration, that is the time (in milliseconds) each image in the slide is displayed on the users’ screens. The smaller the number, the shorter the time an image is displayed in the slideshow.
You can adjust the effect speed, which results in a smoother or more abrupt transition from one image to another in the slide. The smaller the number (in milliseconds), the more abrupt is the transition from one image to another.
For the video background type, you have to choose between self-hosted videos and external video files. For self-hosted videos, you have the possibility to upload them (MP4 format). For external videos, there is a space to be filled in with the URL where the respective file is to be found (e.g. YouTube or Vimeo, etc.)
The video poster is the image displayed while the video file is loading, or on mobile devices that do not play video backgrounds.
2. Header General Options
Here, there are two options:
- You can set the background to full height
- You can allow content to overlap header
If the background is set to full height, it occupies the entire space dedicated to the header. This change is more visible on mobile devices.
For the content to overlap the header, you have to previously select from the content sections that are overlappable. If you check the “Allow content to overlap header” box, a message will appear under this format:
To use this option, you need to add one of the overlappable sections to the page content.
The overlappable sections come first in the list of Page Content sections.
Click the link on overlappable sections, to select from those that allow this feature to be implemented.
Overlap with refers to the amount of space the content will overlap the header.
3. Header Overlay Options
The overlay is a semi-transparent color that is applied on top of the image background, for a nice visual effect.
There are two possibilities:
- To show overlay:
Select Color – this is for the nuances of the overlay. There is a wide range of colors you can choose from.
Overlay Opacity – this is for adjusting the opacity of the overlay. From 0 to 1, the overlay opacity goes from maximal transparency to maximal opacity.
- To uncheck the checkbox and disable the function to show an overlay.
4. Header Separator
There are two possibilities:
- To select a header separator
- To leave the box unchecked, for no header separator
The header separator delimits the header from the rest of the page, through a graphic element that can be shaped stylishly to match your design preferences.
Note that if you have checked the content to overlap the header background, the header separator will not be so visible. So, it is recommended to use it when the content doesn’t overlap the header background.
Type of the header separator: there is a wide range of shapes you can choose from, to set up this function accordingly.
Separator Height: it sets up the height corresponding to this graphic element.
Separator color: it sets up the color of the corresponding graphic element.
5. Bottom Arrow
The bottom arrow is the sign that leads users to the other sections within the front page. You can adjust its appearance, so that it perfectly matches your design and branding preferences.
*Note that if you have previously set Allow Content to Overlap Header, the Bottom Arrow might not be visible.
Therefore, you can:
- Show bottom arrow or uncheck the checkbox for not showing it at all.
- If you opted for the presence of a bottom arrow, you can choose among different types of arrows or other symbols to replace the default one.
- Icon Size – move from 0 to 100, to enlarge the icon.
- Icon Bottom Offset – move from 0 to 200, to place the icon in the upper or lower part of the background.
- Icon Color – use this to change the icon color. Maybe you want it to have the same colour as the text above, or part of the text above, to match branding preferences.
- Icon Background Color – use this to change the background of the icon (in this case, of the arrow). In case you selected an icon background color and this background color is not visible, you have to adjust the opacity under the respective color.
- Bounce Arrow – use this function for making the icon/arrow bounce or keep it stable on the page.