What’s new in Elementor Pro 3.3 – New Video Playlist and Image Hotspot widgets
Elementor is one of the most popular page builder plugin in the WordPress ecosystem and on 8th of June 2021, a new minor update for the pro version of the plugin was released.
In this version 2 new widgets have been introduced that will help you power up your designs and make them more engaging for the users.
Kindly note that you will only be able to use these widgets if you are using one of the Pro plans.
In case you are looking to get access to these and more then you can use our SPECIAL LINK below to buy Elementor Pro.
New widgets in Elementor Pro 3.3
As mentioned above, in Elementor Pro 3.3 two new widgets have been introduced and using these you can take your site or page designs to the next level.
In this section we will familiarize you with almost every aspect of the new widgets so that you feel at home while using these in your designs.
New video playlist widget in Elementor Pro 3.3
In the past few years, there has been a massive uptick in the visual form of content or video content creation.
And this upswing has been due to the fact that videos are more engaging as compared to the written form of content or blog posts.
Not only does the videos let you diversify the traffic sources, but it also helps users understand the message better and improves the dwell time on the site.
Before this update, Elementor only allowed you to embed videos on a page using the video block
And to add Video playlist you were required to use an Elementor addon.
However, the latest version of this plugin (Elementor Pro 3.3) will come with new Video Playlist widget that will allow you to display multiple videos on a page for showcasing your courses, collections and more.
This widget will boost engagement leading to users staying on your site for a longer time. To give you a basic understanding of this new Elementor Pro widget, we have answered some basic questions about it below.
The new video playlist widget is located under Pro widgets section in the Elementor menu.
Please note that if you are using the free version of the then you won’t be able to locate this widget under the Pro section as of now.
If you have been using Elementor Pro then I’m sure you are aware of the fact that this plugin is known for its drag and drop functionality.
And using this functionality, you can easily drag the new video playlist widget and drop it on the canvas just like any other widget.
When you add the video playlist widget on the page, it will automatically generate a placeholder / demo playlist for you.
You can replace the demo videos and style the playlist just like you want to and we will be discussing briefly about this in this article.
Elementor Pro being a user friendly plugin makes adding videos to video playlist pretty straight forward.
And for this you will have to copy the URL of the video from YouTube and add it to one of the playlist items.
After this you need to click Get Video Data and Elementor will automatically fetch the video title and thumbnail of the video and will display it on your page.
There is no limit to how many videos you can add in the video playlist widget in Elementor Pro.
To add a video in an existing playlist you need to click Add Item in the Playlist section.
And after adding the item you need to select the Type and then add the link to video that you want to add to the playlist.
Yes absolutely, Elementor Pro lets you change / customize every element of the video playlist widget including its name.
To change the name of the video playlist, you need to add the new name in the box right in-front of Playlist Name in the playlist section.
Once done click Publish to save the changes you have made.
Yes, the new video playlist widget by Elementor Pro allows you to change the title of the video easily.
To change the title of a video in a playlist, you need to click Playlist Item and it will show you all the settings.
Here you will have to locate the Title and once found, add the new one in the box below it.
Once done click Publish to save the changes you have made.
Yes you can add a custom thumbnail to a video in the new video playlist widget.
And for this you will have the click the video in Playlist items and search for the Thumbnail.
Once found you need to hover your mouse pointer over it and you will notice it allows you to choose a image from the WordPress media library.
You can either upload a new image or select an existing one as the the thumbnail for the video.
Yes Elementor Pro allows you to change the layout of the video playlist.
And for this you need to navigate to the Additional Options in the widget editing menu in Elementor.
Under this, the first setting allows you to change the layout.
As you can see it give you 2 options to choose from
- Left
- Right
By default the layout is set to left and if want to change it then you can select the desired option.
Yes, Elementor Pro lets you customize every element of the video playlist so that it looks like a part of your site.
To design the video playlist you need to navigate to the Style settings of the new video playlist
And here you will find options to customize every part of the playlist such as
- Titles
- Sections
- Icons
- Tab
- Topbar
And more.
First things first, there are plenty of factors that have a direct impact on the loading times.
Here we will recommend you use YouTube as aa source for adding videos to your playlist and not go for the self hosted option.
The reason behind this is simple, for self hosted videos you will have to upload the video in the Media library first and that will take up a lot of space eventually slowing down your site.
On top of that you must opt for a robust cache plugin for your site and WP Rocket is the one we recommend as it is compatible with Elementor Pro.
Personally speaking we use WP Rocket to speed up all of our sites.
Apart from this, the video playlist widget in Elementor Pro also comes with a Lazy Loading option.
You can enable this setting to further optimize your playlists for speed with just one click.
Now that you are familiar with the new Video playlist widget, the next topic we are going to discuss is
New Hotspot widget in Elementor Pro 3.3
While browsing the internet you might have come across sites with animated images containing elements that either display more information about the product or show you the pricing when you click.
These elements are also used to take the users to the respective pages when clicked helping boost engagement, sales, leads and more.
All in all these hotspots on the images improve the overall user experience as it provides more information to the visitors.
You can add Hotspots like these on your site easily using Elementor Pro as in version 3.3 a new Hotspot widget has been introduced.
Before the Elementor 3.3 update, you needed addons to add Hotspots on images using Elementor.
However, with the release of Elementor 3.3 this feature will be available for all Elementor Pro users meaning you will no longer need addons or additional plugins to achieve this.
To get you started quickly, we have answered some basic questions about the new Hotspot widget below and these will give you the basic understanding of the new widget that has been released in Elementor Pro 3.3.
The new Hotspot widget is located under the Pro section in Elementor Pro widgets menu.
If you are currently using Elementor free then you will not be able to see this widget and to use it you will have to upgrade to the Pro version of the plugin.
If you are a Elementor user then you are already aware of the fact that you can drag and drop the widgets on the blank canvas
And that is what you have to do here.
Once you are done adding the Hotspot widget, it will show you an option to choose an image under the image tab.
Here you will have to hover your mouse pointer on the box and it will show you an option to choose the image.
On clicking this, it will take you to the Media Library in your WordPress dashboard where you can either select an existing image or upload a new one.
Adding Hotspot to an image using Elementor Pro is pretty simple.
To do this, the first thing you have to do is add the Hotspot widget on the Elementor canvas and then upload an image.
When you add the new widget you will notice, it by default comes with 2 Hotspots that you can see under the Hotspot section.
In case you are looking to add a new one then you can click Add Item and it will add a new Hotspot that you can configure according to your requirements.
The new Hotspot widget in Elementor 3.3 only allows you to upload a single image.
This means you cannot upload multiple images.
Yes, Elementor Pro allows you to add multiple Hotspots on an image.
It is important to know that you don’t want to over do this as the image might look spammy instead of engaging.
For adding tooltip in a Hotspot in Elementor Pro, the first thing you have to do is click a Hotspot Item and then locate Tooltip Content.
Under Tooltip content you will see a box that allows you to add text.
Adding a link to a Hotspot in Elementor Pro is very similar to adding a tooltip. And for this you need to click a Hotspot Item on which you want to add a link.
On clicking you will see the second option in the Content section lets you do that.
Here all you have to do is enter the link and click Publish to save the changes you have made.
In case you want to open the link in a new tab or add attributes like nofollow, sponsored and ugc then you will have to click the gear icon right next to the box.
And it will show you all the options.
Elementor Pro allows you to change the position of the tooltip with just a click.
And for this you need to head over to the Tooltip tab and the first option you will come across is position.
There are 4 options to choose from
- Left
- Top
- Right
- Bottom
By default bottom is selected and you can change it depending on your requirements.
Yes absolutely. Just like any other widget, Elementor Pro allows you to stylee and customize every element of the Hotspot widget.
For styling the hotspot image, you need to click the Style tab and it will show you all the options.
As you can see in the screenshot above, Elementor pro lets you style the image, hotspot, and tooltip. Using these style settings you can create an engaging image hotspot that looks perfect.
Now that you are familiar with the new Hotspot widget that has been introduced in Elementor Pro 3.3, the next topic we are going to discuss is
How can you get Elementor Pro 3.3
As you know you can only use the new widgets on your site if you have Elementor Pro and this means you will have to buy it.
- To buy Elementor Pro, the first step is to visit Elementor.com using our SPECIAL LINK and it will take you to the homepage.
- On the homepage you will have to click Pricing and it will show you all the plans offered by Elementor.
- There you will have to select a plan depending on your requirement and it will take you to the checkout page.
- On the Elementor’s checkout page you will have to provide some basic information about yourself to create a free account and then you will have to complete the payment process by paying via credit card or PayPal.
- Once the payment is successfully processed you will receive an email from Elementor with the payment receipt and login credentials.
- You need to use these credentials to access your Elementor dashboard and download the pro version of the plugin.
- After this the next step is to install this plugin in WordPress and for this you can follow our tutorial on How to install Elementor Pro and activate license.
And that it you have successfully purchased Elementor Pro 3.3 and now you can used the new widgets on your site.
Other Updates
- What’s new in Elementor Pro 3.5
- What’s new in Elementor 3.5
- Elementor Christmas Seasonal Kit
- New Elementor seasonal kit for Black Friday
- What’s new in Elementor 3.4
- What’s new in Elementor 3.2
- What’s new in Elementor Pro 3.1
- Elementor 3.1 Update
- What’s new in WordPress 5.8
- Astra Pro Membership plans rebranded
- Tailwind Create for Facebook and Instagram
- Elementor 3.0 Update
- Elementor Pro expands license to include Staging sites
- Astra 4th of July Sale
Having said that,
I hope you will find this article helpful and now know What’s new in Elementor 3.3. In case you have any queries feel free to reach out via comment section we will be happy to help.
Also, don’t forget to share this article with your friends on social media. If you want to read more product update like these then we have a dedicated Updates section for you on our site.
Other Elementor Articles
To stay up to date with our content feel free to join our Facebook group, subscribe to our newsletter and follow us on social media.
Wow!! I am so overwhelmed by Elementor and so thankful for your post. Always a bit challenging to learn new ways, and I am happy to see some light on a great program
Thank You Giangi. Elementor is a user friendly plugin however like any other software comes with a slight learning curve. I think the best way to learn creating sites or pages using Elementor is to understand the basic of styling such as borders, margins, shadows etc and on the side see what each widget can help you achieve. For this you can see Elementor’s knowledge base and we will release tutorials on this as well.
Thank you once again.
Jasmeet