In the customizer, go to HERO -> Front Page Hero.
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
- Control the media box spacing
- 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
For the video pup-up button, you have the following options:
- Define the vertical alignment of the media
- Set the image width
- Select to enable media shadow
- Give the link for the external video
- Select the color of the icon
- Select the color of the icon on hover
- Upload a video poster
- Define the overlay color for the video poster
- Overlapped Images
For this media type, you have to:
- Upload the images of your choice
- Define the media width
- Set the vertical alignment of the media (top, middle, bottom)
- Define the media box spacing (the distance from the top and to the bottom)
- 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)
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.
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.
- 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?
Mesmerize 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.
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.
- 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).