Would you like to open a video in a Lightbox with Elementor?
Elementor comes with the Video widget for you to effortlessly add video to a page. You can even add dynamic video using Elementor's dynamic content feature (pro version required).
When you add a video in Elementor, you can configure it to open in a lightbox still called Viewer.
This article will show you how.
But first let's find out How to install Elementor on WordPress
In Elementor, there are at least two ways to add video to a lightbox. You can choose one according to your case. First of all, you can use the Video widget as we just mentioned above. This method works on both versions of Elementor. Second, you can use the dynamic link feature. The pro version is required to use this latter method.
How to Open Video in Lightbox in Elementor Using Video Widget
As mentioned earlier, Elementor comes with a Video widget for you to add video to a page or template. The widget has a setting option to open the video in a lightbox.
First, add the Video widget to the edit box.
Add your video by pasting the link in the field Lien.
Once you have finished adding the video, open the block Image overlay in the Content tab from the settings panel and activate Image Overlay option. Just activate the option Viewer. This will open the video in a lightbox. You can add an image overlay if you want.
How to Open Video in Lightbox in Elementor Using Dynamic Link
If you use Elementor Pro, you can also add video using dynamic link function. You can use any widget that has an option to add a link, including Image widget, Button widget, Text widget, etc.
First, add the widget (i.e. Button widget) to the edit box as usual. In the settings panel, click the dynamic icon in the field Link and select Lightbox.
Then click on the wrench icon in the field Lightbox. Click on the video icon and paste the URL of the video you want to add.
Here. You can click on the item and it should display the video in a lightbox as follows.
Customizing the Lightbox
If the default appearance of Elementor's lightbox doesn't impress you, you can customize it. To do so, you can click on the hamburger icon in the upper left corner of the settings panel and click on Site settings.
Click on Lightbox in the block ADJUSTMENTS.
As you can see, there are some setting options you can set, including colors.
- Background color: The background color of the viewer
- UI Color: The color of the buttons (close button, full screen button, zoom-in button, share button)
- UI hover color: The color of the buttons in hover mode
- Text color: Text color. Applies to the lightbox image
You can also set the button size of the option Toolbar icon size as well as the size of the navigation icons of the option Size of navigation icons. Once you have finished making the settings, click the button UPDATE to apply the changes.
Get Elementor Pro Now!
Discover also some premium WordPress plugins
You can use other WordPress plugins to give a modern appearance and to optimize the handling of your blog or website.
We offer you here some premium WordPress plugins that will help you do that.
1. All Around
All Around is a WordPress Plugin premium, as the well-rounded name suggests. It offers you a clean and responsive design, a number of predefined style options and support for touch.
This WordPress slider is a versatile all-in-one solution perfect for any website. If this is your first WordPress Plugin and slider plugin, it might also be the last one you need.
See also our article on How to make money with your blog when you have low traffic
Its features are:on fully responsive page, 6 predefined styles, le support videos, the dvertical or horizontal scrolling, the psupport for multiple sliders on one page, et more.
Download | Demo | Web hosting
2. Ultimate Form Builder
Ultimate Form Builder is a WordPress Plugin premium that allows you to create forms unlimited responsive. It has a builder forms drag'n'drop which can create any type of form (contact, survey, offer, information, etc.).
This plugin is easy to use. You can create, customize and design beautiful forms, apply templates already existing forms for design and use them on your website in no time.
You can also receive form data via e-mail and store them in the database; which can be exported in CSV format for use via the dashboard of your website.
All forms designed by this plugin are super secure thanks to a Captcha system effective.
Download | Demo | Web hosting
3. WooCommerce Shipping Tracking
WCST will make it easy for your customers to track their orders. You can associate each order with a transport company and a tracking number.
WCST will post tracking information (company URL and tracking code) directly into the "Complete Order" email and the "View Order" page.
Discover also our list of 50 WooCommerce plugins to improve your online shop
By simply clicking on the link generated by WCST, your customers will easily follow their orders. Besides calculating the cost of shipping your goods, this WooCommerce extension also allows you to add and set up your own shipping company.
Download | Demo | Web hosting
Recommended Resources
Find out about other recommended resources to help you build and manage your website.
- 10 WooCommerce plugins to calculate the shipping costs of parcels
- Why should you use a content blocker in WordPress?
- How to translate your WordPress blog into several languages
- How to gradually load Facebook and Disqus comments
Conclusion
Here ! That's it for this tutorial that shows you how to open a video in a Lightbox with Elementor. If you have some Comments or suggestions, do not hesitate to let us know in the reserved section.
However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
