Front Page Hero Background

Article sections

    In the customizer, go to HERO -> Front Page Hero.

    In this section, you are presented with a wide range of possibilities to customize the front page hero image and text.

    It is split into 2 main subsections:

    BACKGROUND

    Depending on the background type you choose, there are further options to adjust the appearance and layout of the front page hero.

    There are 5 different background types:

    Color

    Click on Options and set the color of the background hero, as you want.

    Image

    Click on Options and upload an image of your choice, to set as background hero to the front page of your website.

    • Image Background Options
      • First, upload the image you selected for the background. You can replace the header image by another any time, or remove it completely
      • Background Position – align the background image, according to the following options:
        • Left top
        • Left center
        • Left bottom
        • Center top
        • Center center
        • Center bottom
        • Right top
        • Right center
        • Right bottom
      • Background color – you can also select a color for the header background.
      • 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 enable the parallax effect.
    • Mobile Image Background Options
      • Mobile Only Image: you can select a different image to upload for the header background, when it is shown on mobile devices. Or you can leave this subsection empty, if you want to use the main header image
      • Mobile Background Horizontal Position: this refers to the horizontal alignment of the background image (you can set it to left, center or right)
      • Mobile Background Vertical Offset: it refers to the vertical distance by which the background image is out of line. Adjust it to the values that are convenient for your website when it is displayed on mobile.

    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.

    Video

    This feature allows you to set a video as hero background file for the front page. Click on Options to open the customization panel.

    You might

    • 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.

    Gradient

    You may want to simply apply a gradient to your front page hero background, and do without images/videos. Setting a uniform color is not your preferred option, so you can select a gradient.

    For setting up a gradient for the background, 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 background to obtain a nice visual effect. If you choose to show an overlay, click on Options and open the panel where you can 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 select shapes for the overlay. Simply select the shapes you wish to add to the overlay, from Overlay Shapes
      • Adjust the light of the shapes to brighter or darker, from Shape Light

    Bottom Separator – in this section you can add and customize a graphical element that will display at the bottom of the header, separating it from the rest of the page. The effect will be adding a nice visual effect to your front page 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 elements, and see the changes)
    • Bottom Separator Height (from here, adjust the height of the bottom separator)

     

    Use Bottom Arrow – 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.

    Let’s see what options you have for customizing this graphic element. Click on Options to open the customization panel:

    • Bounce Arrow (check this if you want the icon to bounce in a loop; usually, it is used to attract user attention)
    • Icon (you can replace the default icon with any icon available in FontAwesome library)
    • Icon Size (change the size of the icon)
    • Icon Bottom Offset (use this to control the distance from the bottom to the icon)
    • Icon Color (use this to change the icon color)
    • Icon Background Color (you can change the background color of the icon).

    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)

    Full Height Background – the background can be set to full height, so it occupies the entire space dedicated to the front page hero image/background. The changes are more visible on mobile devices.

    Allow content to overlap 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.

    Related Articles