Versions 1.0.0-1.7.3
Display YouTube or Vimeo videos in a modal pop up
In this section...
Video
Video link
Input the shareable video link. If you are unsure of the URL:
- YouTube: Click on the video, then in the lower right, scroll over the YouTube logo and click to watch on YouTube. Once on the video page, look for the share link under the video to the right. Copy the URL, example: https://youtu.be/_9VUPq3SxOc
- Vimeo: Hover over the video and click the paper airplane icon in the upper right. Copy the URL that is displayed. If you are unable to copy it, click the same link to go to the video page. Once there, click the Share button under the video to the right and copy the link, example: https://vimeo.com/187191019
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. By default, a right facing 'Play' arrow will be used.
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
Show image
Include a background image for the section
Image
The background image dimensions depend on 2 options:
- Whether full width or container width. Refer to 'Full width' below
- The height will depend on your 'Height' settings below
Image position
Set the focus of the image to ensure consistency regardless of the height setting, content height or screen width
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