The Contents for the header of the front page can be customized, by following the steps defined in the customizer. Therefore, you are invited to explore the multiple functions this section includes.
Go to the Customizer -> Header Settings -> Front Page Header Content.
1. Main Content
Main content refers to title (+/-image, video), motto and subtitle.
Content Layout – the main content can be aligned to the right, to the left, at the center, or it can align media above, below, on the right or on the left.
The Media Type can be represented by an image, a video, a video popup button or overlapped images.
Note that there are pre-established media for each of these options, for you to easily see the differences in appearance and style.
Content Spacing allows you to place the main content at a shorter or longer distance from the top, and to the bottom of the header (these parameters control the spacing above and below the header content).
The Text Box Settings button opens a panel where you can configure the alignment of the text, and the space width destined to the text.
The Media Box Settings button opens a panel where you can configure different elements of media you have chosen to appear in the header content.
In the case of a video, you can
- give the URL of the video file
- align the video file vertically: top, middle or bottom
- adjust the width of the media column
- enable media shadow.
In the case of a video pop-up button, you can
- specify the URL of the video file
- align the video file vertically: top, middle, bottom
- choose the color of the icon that opens the pop-up
- choose the color of the icon that opens the pop-up, which will be visible when you hover over with the mouse
- upload an image as video poster
- give an overlay color to the video poster
- specify the media column width
- enable media shadow.
In the case of an image, you have the option to
- select the image
- align the image vertically: top, middle or bottom
- make the image round
- adjust the width of the media box (it affects the space between media and text)
- enable media shadow.
In the case of overlapped images, you can
- align the media vertically: top, middle or bottom
- adjust the media column width.
Content Vertical Align – allows you to set the content in the upper part, lower part, or at the centre of the header.
2. Motto (Before Title)
If you leave the checkbox unchecked, the motto will not appear in the header. However, if you check the checkbox, you can further customize it by clicking on Subtitle Style. A panel will be displayed, where you can adjust the typography (font, font size, mobile font size, line height, letter spacing), top and bottom spacing, color and capitalization of the motto.
3. Title
If you choose to have a title, here are the possibilities to customize it:
- color of the text
- typography (font, font size, mobile font size, line height, letter spacing)
- top and bottom spacing
- capitalization (uppercase, lowercase, capitals, etc.)
- enable text animation.
Enabling text animation
This is very cool if you want to replace, in a slideshow, a part of the phrase by another one (by other ones). This is how it functions:
- Put an alternative text (alternative texts) in the specified area, one per row
- In the preview, on the right hand, the text that will be replaced by its alternatives has to be in curly brackets
- The text animation can be speeded up or slowed down using the text animation speed option.
4. Subtitle
The subtitle in this section serves the classic role of any subtitle. It can be customized as the motto and the title, by changing the:
- Typography (font, font size, mobile font size, line height, letter spacing)
- Top and bottom spacing
- Capitalization
- Color.
5. Header Buttons
You can set calls to action directly from the header, with the three options available:
Main Buttons – this is the default option if you choose buttons for your header. It displays 2 buttons (a Primary Button and a Secondary Button, that can be shown or not, according to your needs).
Custom Buttons – this is an advanced customization option, in case you want more buttons (in fact, as many buttons as you like). To add a new button, you just have to click on Add New Button in the corresponding panel that opens. To edit the buttons, all you have to do is click inside the corresponding area within the preview on the right hand and begin the customization process.
AppStore Buttons – for you to simplify the customization of these buttons types, we made possible the integration of Google Play Store and Apple App Store buttons, directly from a dedicated section.
