This article will cover how add a Video Modal to your page. A Video Modal is an image or thumbnail a visitor can click on your page and it will pop up a video to play over top the page.

First Add A New Section

You can add a new section by either clicking Add New Section on the page, or going into the Sections tab on the right side toolbar and clicking Add New Section.

Next Add Row and Container

Once you have a Section, you will need to add a Row and Container. The container allows you to separate elements across a single row with different widths.

Add The Video Modal Element

Once you have the Row and Container, you will be able to add the element. Click Add Element and choose Video Modal.

Set Up Your Video Modal

The next step is to set up your Video Modal according to what image you want displayed on your page, and what video it will link to.

Element Name -- Add a name for your element.

Element ID -- Unique id for for custom CSS.

Margin Top -- Add space on the top of your element.

Thumbnail URL -- Add the preview thumbnail image.

Video Embed -- Add your embed code for your video.

Thumbnail Width -- Custom width for thumbnail.

Thumbnail Height -- Custom height for thumbnail.


The styles section will allow you to move where your element is on the page as well as change the shape, add borders and or shadows.

Align -- Align your image within the column it is in. Left, Right and Center.

Radius -- Add rounded corners to your image. Choose a Circle or Rounded Corners.

Border -- Choose to have a light or dark border.

Shadow -- Choose to have a light, full or dark drop shadow.


Animations allow you to draw attention to different elements on your page through movements and fades.

Animation -- Choose the different animation settings. Please check the article on "Animations" for more information on animations.

Congratulations, you now have set up a Video Modal on your page.

Did this answer your question?