Versions 1.0.0-1.7.3
Display mp4 videos in the background
Recommended reading
In this section...
Video
Video link
Due to ongoing changes in format and how YouTube & Vimeo allow videos to be embedded, it was decided to only support mp4 videos. But, you can still convert both to an mp4:
Files should be added to the Files section of your admin. You can then copy the link and paste it into this input.
It is recommended to keep files sizes as small as possible. Most users will not watch an entire movie preview, which is around 6mb! Keep it under 2mb for those with slower internet connections.
Text
Heading
Title of the section or feature
Subheading
Secondary title of the section or feature
Link
Include a button with a link
Button
Customize the text for the button
Outline button
Invert the button to use a frame with no background
Alignment
Text can be aligned to the left, right or centered to the container
Content width
The design is based on a 12 column, 1200px wide layout. Refer to the following table to reference content widths:
| Setting | Desktop Width | Maximum Width |
|---|---|---|
| 33% | 400px | 1200px |
| 50% | 600px | 1200px |
| 66% | 800px | 1200px |
| 75% | 900px | 1200px |
Horizontal position
After setting the content width, content can be aligned to the left, right or centered
Vertical position
After setting the content width, content can be aligned to the top, bottom or middle
Background
White text
When an image is chosen, you can uncheck this setting if you want the overlaid text to be the default color.
Full width
The banner image and background color have the option of being as wide as the screen or only as wide as the content container. Refer to the following table to reference content widths & optimal image sizing:
| Setting | Desktop Width | Minimum Image Width |
|---|---|---|
| Full width checked | 100% | 1900px |
| Full width unchecked | 1200px | 1200px |
Height
The overall height of the section in relation to the height of the screen. 5% is the minimum, and it steps up by 5 to a maximum of 100%
Overlay
A color may be applied to background images to help the text clarity
Opacity
When an 'Overlay' color has been selected, control the opacity with the slider. 0% is the minimum, and it steps up by 5 to a maximum of 100%
Background color
If an image is not used as a background, you can choose between None, Primary & Secondary. The Primary & Secondary colors are set in the Theme Settings Color section