Go to the Customizer -> Hero -> Front-Page Hero -> Content Options.
From this section in the Customizer, you can set your preferences for the content layout, dimensions, typography and text animations.
- Content Layout (this defines the alignment of the content: to the left, at the center or to the right, text with media on left, text with media on right, text with media above, text with media below).
The types of media you can include are:
- Image
Click on the pencil icon inside this media section in the customizer preview, and a panel will open, for further customizations:
- Vertical alignment of the image (top, middle, bottom)
- Upload the image of your choice
- Set the width of the image
- Make the image round and set the color & thickness of the image border
- Apply media shadow, if wanted
- Choose a frame type (select from none, background or border) and adjust for the frame type: width, height, etc. Select the color for the frame, check to Show frame over image, Show frame shadow and/or Hide frame on mobile
- Video
For the media type: video, find below the options:
- Set the vertical alignment of the video
- Set the image width
- You can choose to enable media shadow
- Give the link of the external video
- Video Pop-Up Button.
- Overlapped Images
For this media type, you have to upload the images of your choice and replace the defaults.
- Content Spacing (this defines the distance of the content from the top and to the bottom). Set larger values for a greater distance from the top or/and to the bottom.
- Mobile Content Spacing (this defines the distance of the content from the top and to the bottom, on mobile devices). Set smaller values for a smaller distance from the top and/or to the bottom. Then test the appearance of the header on tablet and mobile.
Text Box Settings – from here, you open a panel where you can adjust:
- the alignment of the text (left, center or right)
- the text width (larger numbers refer to extended width), like in the example below:
- text vertical align (top, middle or bottom)
Media Box Settings – from here, you can set the alignment of the media on a vertical axis (top, middle, bottom) and you can set the image width to larger or smaller values.
Show Motto
A motto is a phrase that appears on top of the front-page title. Check the checkbox to make the motto section visible in the header content. If you click on Options, a panel will open with the different option fields that you can set to the values you want.
From the respective panel, select the motto typography and the motto spacing.
Adjust values for:
- Font Family – select a font for the text, or add a web font you want
- Variant
- Subset
- Font Size – set the size of the text font, to larger or smaller values (for desktop)
- Mobile Font Size – set the size of the text font, to larger or smaller values (for mobile devices)
- Line Height – define the height of the text font, and the distance between two rows of text
- Letter Spacing – this is the space between the letters of the motto phrase
- Text Transform – this refers to capitalization, lower case, upper case, etc.
- Color – select the color that will be applied to the text. For visibility reasons, the color should be lighter, in case the text is placed on a dark-colored background, or the color should be darker, in case the text is placed on a light-colored background.
- Motto Spacing – this defines the distance from the top and to the bottom, for the motto phrase.
Background options
From here, you can customize the background onto which the motto will be displayed:
- Select the color for the background of the motto section
- Set the spacing of the background for the motto section, by filling in the corresponding fields with your values (in pixels) of the spacing from the top, to the bottom, from the left and to the right.
- Border Radius – when values are greater than 0, the corners of the section dedicated to the motto are rounded.
Show Title
Check the checkbox, for the title to be visible on the front-page hero.
Click on Options and open a panel where you can make changes to the style of your front-page title.
- Title Typography – adjust the typography settings for the font, size, spacing (desktop & mobile), capitalization of your title phrase:
- Font Family – select a font for the text, or add a web font you want
- Variant
- Font Size – set the size of the text font, to larger or smaller values (for desktop)
- Mobile Font Size – set the size of the text font, to larger or smaller values (for mobile devices)
- Line Height – define the height of the text font, and the distance between two rows of text
- Letter Spacing – this is the space between the letters of the title phrase
- Text Transform – this refers to capitalization, lower case, upper case, etc.
- Color – select the color that will be applied to the text. For visibility reasons, the color should be lighter, in case the text is placed on a dark-colored background, or the color should be darker, in case the text is placed on a light-colored background.
- Title Spacing – this defines the distance from the top and to the bottom, for the title.
Background options
From here, you can customize the background onto which the title will be displayed:
- Select the color for the background of the title section
- Set the spacing of the background for the title section, by filling in the corresponding fields with your values (in pixels) of the spacing from the top, to the bottom, from the left and to the right.
- Border Radius – when values are greater than 0, the corners of the section dedicated to the title are rounded.
Text Animation – check the checkbox to test some text animations for your front page.
This is how it functions:
A part of the title can be subject to text animations you set from this section.
- Pick a word/phrase that you want to change to several variants that dynamically show when a user visits the page.
- Put that word/phrase into curly brackets, in the corresponding editable area of the customizer preview.
- Fill in the blank space with the alternative texts, one word/phrase per row, as shown below:
Hit Publish and see the difference. The alternative texts will be succeeding one to another, while the user is visiting the page.
Show Subtitle
Up to now, you probably have a title and a motto. How about inserting a subtitle, too?
Highlight gives you a supplementary option, dedicated to the subtitle settings.
Check the checkbox to enable the subtitle section on the front page and click on Options. Once you click this button, a panel will open, with the possibility to adjust the typography (font type, font size, capitalization, etc.) of the subtitle text:
- Font Family – select a font for the text, or add a web font you want
- Variant
- Font Size – define the size of the text font, to larger or smaller values (for desktop)
- Mobile Font Size – define the size of the text font, to larger or smaller values (for mobile devices)
- Line Height – define the height of the text font, and the distance between two rows of text
- Letter Spacing – this is the space between the letters of the subtitle phrase
- Text Transform – this refers to capitalization, lower case, upper case, etc.
- Color – select the color that will be applied to the text. For visibility reasons, the color should be lighter, in case the text is placed on a dark-colored background, or the color should be darker, in case the text is placed on a light-colored background.
- Subtitle Spacing – this defines the distance from the top and to the bottom, for the subtitle.
Background options
From here, you can customize the background onto which the subtitle will be displayed:
- Select the color for the background of the subtitle section
- Set the spacing of the background for the subtitle section, by filling in the corresponding fields with your values (in pixels) of the spacing from the top, to the bottom, from the left and to the right.
- Border Radius – when values are greater than 0, the corners of the section dedicated to the subtitle are rounded.
Show Buttons
The front-page hero comes with the additional option to add buttons in this page section. You can choose to make the buttons visible or not to display them at all.
In case you check the checkbox named Show Buttons, a panel will open with the options:
- Insert Normal Buttons (insert your own Calls-to-Action, and customize the buttons as you like – click inside the corresponding editable area, in the customizer preview and start editing):
- Button Text
- Link to target page
- Target (open target page in the same tab, in a new tab or in a lightbox)
- Button Size (make the button small, normal or big)
- Button Shadow
- Button Color (give the button the color of your choice)
- Button Text Color (if you selected the button color, you should also be careful when selecting the button text color)
- Button Preset (select the shape of the button, from: square round, square, round, square round outline, square outline, round outline)
- Button Icon (choose an icon from the list of FontAwesome Icons, and select to apply)
Click Apply Changes.
Background options
From here, you can customize the background onto which the buttons will be displayed:
- Select the color for the background of the buttons section
- Set the spacing of the background for the buttons section, by filling in the corresponding fields with your values (in pixels) of the spacing from the top, to the bottom, from the left and to the right.
- Border Radius – when values are greater than 0, the corners of the section dedicated to the subtitle are rounded.
- Insert App Store Buttons (you have the store badges for Google Play and Apple Store; you can change the order of the store badges and you have to specify the link to the target page).
Background options
From here, you can customize the background onto which the buttons will be displayed:
- Select the color for the background of the buttons section
- Set the spacing of the background for the buttons section, by filling in the corresponding fields with your values (in pixels) of the spacing from the top, to the bottom, from the left and to the right.
Border Radius – when values are greater than 0, the corners of the section dedicated to the subtitle are rounded.
