Front Page Header Dimensions and Background

To customize the appearance of the front page header background you have to access the Header Settings -> Front Page Header Background section in the Customizer. It is also recommended that you have the front page open in the Customizer as if you have other page opened you won't be able to see the changes you make in the customizer as they only apply to the front page.

This section is split into the following subsections:

Header Background Options - here you can set the background type and parameters

Header General Options - these are additional header options like "full height" or "allow content overlap"

Header Overlay Options - here you can customize the overlay that is shown over the background

Header Separator - in this section you can add and customize a graphical separator to add a nice visual effect to your header

Bottom Arrow - here you can configure an arrow icon to be show at the bottom of the page - this is commonly used if your header is full height

Header Background Options

Background type - you can choose between 4 types of background:

image
gradient
video
slideshow

Image background settings:

Background position - this parameter controls the alignment of the background image
Background image - this is the image that will be displayed as background

Gradient background settings:

After choosing the "gradient" background type you can click the "Change Gradient" button and a popup window will open, showing all the available gradients - you can choose any of the gradients listed there. Over 140 gradients are available.

Slideshow background settings:

Header Slideshow Images - this is a list of images that will be used for the slideshow background - you can add or remove images and you can also change their order
Slide Duration - this is the amount of time (in milliseconds) that an image is visible during the slideshow
Effect Speed - this is the speed (in milliseconds) of the fade effect used to switch the images in the slideshow

Video background settings:

Self hosted video - if you want to use a self hosted video you have to upload the MP4 file to your media library and select it here - if you want to use an external video (Youtube, Vimeo, etc) you should leave this empty
External video - this is the URL of the external video you want to use (usually a Youtube or Vimeo link)
Video poster - this is an image that will be shown while the video is loading and it will be also shown on mobile devices that don't play video backgrounds

Header General Options

full height background - check this option if you want the header to fit the entire browser height
allow content to overlap header - check this option if you want the first section to overlap the header; this will apply only if the first section is a section from the overlapped sections category
overlap with - the amount of space the content will overlap the header

Header Overlay Options

The header overlay is a semi transparent color that is show on top of the background to obtain a nice visual effect.

Show overlay - uncheck this checkbox if you don't want to display an overlay
Overlay color - this is the color of the overlay
Overlay opacity - this is the opacity level of the overlay (0 is fully transparent and 1 is fully opaque)

Header Separator Options

The header separator is a graphical element that separates the header form the content.

Show header separator - uncheck this checkbox if you don't want to display a separator
Separator type - this is basically the shape of the separator - there are many shapes available and you can choose the one that fits your header best.

Separator height - this is the height (in pixels) of the separator

Bottom Arrow Options

The bottom arrow is a graphic element used to inform the user that there is more content below the header. When the user clicks it, it will scroll the page to the area below the header. This element is usually used when you have a full height header.

Options:

show bottom arrow - check this to enable bottom arrow
icon - you can replace the default icon with any icon available in font awesome library
icon size - change the size of the icon
icon bottom offset - use this to control the distance from the bottom of the browser to the icon
icon color - use this to change the icon color
icon background color - you can change the background color of the icon
bounce arrow - check this if you want the icon to bounce in a loop; usually is used to attract use attention