How to Effectively Use the Modal Box
How to use the modal box element on your page's section?
Press the ' + ' icon to add an element and choose select Modal Box. (refer to image below)
Note: the white plus with the grey button creates a new section with the modal box element, while the grey plus with the light grey background adds to the current section you selected.
How to add a popup video with a play button?
Access the Modal Box Settings and scroll down to the Modal Content section where you can place the embed code of the video. (refer to image below)
Note: Make sure you are on the 'Text' tab when placing the embedded code.
Make sure to select appropriate category on the "What's in Modal Popup" drop-down.
Select "image" on the "Display Modal on -" drop-down
Note: The image you would be uploading will serve as the button trigger to activate the modal popup.
Use .svg (recommended) or .png file type for the play button icon.
Congratulations, you have now learned the basics of using the modal box! There is a lot to discover more about this element and how you can manipulate it but that is what you need to learn for now.
Other Useful Tips and How-tos:
How to get the embed code for youtube:
Click on SHARE at the bottom right side of the video.
Click on EMBED.
Copy the embed codes in the text box.
Note: You can tick the "Start At" option and enter the time duration to where you would want to video to start.
You can also untick the tick boxes under the Embed options in order to have a cleaner embed.
We recommend unticking "Show suggested videos when the video finishes" and "Show video title and player actions".
Is this tutorial unclear? If you do not find the training you are looking for, please send us a detailed email to hello@lightningsites.com.
Press the ' + ' icon to add an element and choose select Modal Box. (refer to image below)
Note: the white plus with the grey button creates a new section with the modal box element, while the grey plus with the light grey background adds to the current section you selected.
How to add a popup video with a play button?
Access the Modal Box Settings and scroll down to the Modal Content section where you can place the embed code of the video. (refer to image below)
Note: Make sure you are on the 'Text' tab when placing the embedded code.
Make sure to select appropriate category on the "What's in Modal Popup" drop-down.
Select "image" on the "Display Modal on -" drop-down
Note: The image you would be uploading will serve as the button trigger to activate the modal popup.
Use .svg (recommended) or .png file type for the play button icon.
Congratulations, you have now learned the basics of using the modal box! There is a lot to discover more about this element and how you can manipulate it but that is what you need to learn for now.
Other Useful Tips and How-tos:
How to get the embed code for youtube:
Click on SHARE at the bottom right side of the video.
Click on EMBED.
Copy the embed codes in the text box.
Note: You can tick the "Start At" option and enter the time duration to where you would want to video to start.
You can also untick the tick boxes under the Embed options in order to have a cleaner embed.
We recommend unticking "Show suggested videos when the video finishes" and "Show video title and player actions".
Is this tutorial unclear? If you do not find the training you are looking for, please send us a detailed email to hello@lightningsites.com.
Updated on: 12/02/2022
Thank you!