In the Customizer, go to Hero -> Front Page Hero -> select Slider.
You can add multiple slides, you can duplicate them and remove them anytime.
Slide Background
The background type can be set to:
- Color
After selecting “Color” background, click on “Options” and a panel will open, where you can select the color of your choice.
- Image
After selecting “Image” background, click on “Options” and a panel will open, where you can upload the image of your choice. In addition, you can configure the image size (Auto/Cover), and you can position it (left center, left bottom, center center, etc.). Also, you can change the image any time, or remove it completely.
- Video
After selecting “Video” background, click on “Options” and panel will open, where you can specify the video you want to include in the front-page hero. It can be a self-hosted video, or an external video you give the link to.
Also, you can upload an image that will serve as video poster (in case the device does not support playing videos in the background, the video poster will display).
- Gradient
After selecting “Gradient” background, click on “Options” and a panel will open – where you can select the gradient of your choice.
Show Overlay
Check the checkbox to show an overlay (a semi-transparent color that is applied on top of the slide, to obtain a nice visual effect). Click on “Options” and a panel will open, with the customization options for the overlay.
Overlay type
You can set the overlay type to:
- Color – for this overlay type, select the color and adjust the color opacity. You can add overlay shapes from 10+ available shapes. Also, adjust the shape light on a scale from 0 to 100.
- Shape only – for this overlay type, select the shapes you want to apply to the overlay, from a list of 10+ available shapes. Also, adjust the shape light on a scale from 0 to 100.
- Gradient – for this overlay type, select the gradient you wish to place into the slide. You are free to play with the colors combined in the gradient and adjust the angle of the gradient. Like in the previous cases, choose the overlay shapes and configure the shape light.
Slide Content
Content Layout
The content pieces included in a slide can be placed:
- On center
- On right
- On left
- Text with media on left
- Text with media on right
- Text with media above
- Text with media below
Content Spacing
Content spacing refers to the space from the top and to the bottom, of the slide content. The values are expressed in percentages, so it should be easy to estimate that space, as related to the overall design.
Mobile Content Spacing
The distance from the top and to the bottom should be set differently for mobile devices. That is why Mesmerize contains a separate section where you can adjust these distances (in percentages) from the top and to the bottom, for mobile devices.
