In this Tips & Tricks tutorial, we’re going to combine popups, widgets and custom CSS code to create amazing interactive sections in Elementor! In this lesson you will learn how to:
✓ Add a template shortcode inside of a widget
✓ Add custom CSS
✓ Create and link to a popup ✓ And much more!
Custom CSS used in the tutorial:
/* Adds a border to the image box */
selector img { border: 2px solid white; }
/* Sets the height of the column and allows an infinite scroll */
selector { height: 80vh; overflow-y: scroll; }
/* Allows the video playlist widget video to be displayed on top */
.elementor-widget-video-playlist .e-tabs-main-area { flex-direction: column-reverse; }
/* Ensure the video fills the width of the container */
.elementor-widget-video-playlist .e-tabs-wrapper { width: 100%; }
Hey there, it’s Ash from Elementor.
Today in this tips and tricks tutorial I’ll show you how to combine Elementor features to create this amazing popup playlist.
Elementor gives you everything you need to build a website in just a few clicks. It’s easy to create a simple template using widgets separately, but for more complex designs, we might need a different approach which combines several Elementor features.
In this tutorial we will use a template shortcode to add our unique design inside a widget. We’ll then use a dynamic link to activate a popup containing our video playlist and we’ll learn how to add advanced customisations to our widgets using CSS.1
So if you’re ready, let’s get started!
We’ll begin in our editor. We have already set up our website to display a variety of music radio categories. In this example we choose the Lo-Fi category which will showcase the top shortlisted online channels.
I’ll go ahead and delete this tabs widget so we can start building in an empty column.
Then search for…and drag the tabs widget in our column.
The tab widget is a really great way to help you categorise your content.
What’s even more awesome is that it allows you to load an entire template inside of it using a shortcode.
Before we explore how to add a template to this widget let’s first give the tab items a name…
And then we’ll amend some styles…
Let’s now save our changes and head to the templates area.
Type CMD/CTRL + E on your keyboard to bring up the Elementor finder and then search for ‘templates’…and select ‘saved templates’.
Once this page loads now select ‘add new’.
We’ll select ‘section’…name our template file…and then select ‘create template’.
Lets first dismiss the library window….and then create a new section which contains one column.
We’ll set the content width to ‘full-width’…and switch to the style tab.
Set the background color using our global color choices.
Now select the column…and in the advanced tab unlink the padding and enter 20px in the top box.
While Elementor gives you everything you need to build a website without a single line of code, for advanced design ideas, Elementor gives you the ability to add your own CSS which can enhance a template’s look even further.
Let’s first search for…and drop in an image box widget…
Change the image…add a title…and remove the default description.
Switching over to the style tab…set the width to 65%…amend the hover animation to ‘shrink’ and the transition duration to 0.5.
Now expand the content tab…and amend the typography.
If we now select the advanced tab and go to ‘positioning’ we can adjust the width of this widget.
Under width, choose custom and set this to 50%. This will allow us to position two image box widgets side by side which is a great technique to adopt as it generates much less code than using an inner section or more columns, ultimately resulting in faster load times.
We’d like to add a border to our image only, so let add some custom CSS to achieve this. Select the Custom CSS tab next and then add the following line of CSS…
If you would like to copy and paste this CSS you’ll find it in the description of this video.
If we now right click onto the image box widget and select duplicate, you can see exactly what our positioning settings have achieved.
Lets update this second image box widget…
Now that our row is ready, let’s add a divider to give a nice space under our elements.
Search for…and drop in the divider widget…
Set the to 50%…and alignment to center.
In the style tab set the color…and then the gap.
And finally in the advanced tab, unlink the margin values and enter -20px in the top box.
Now that we’ve created our first row and divider, we can duplicate these to save some time.
First of all open the navigator by typing CMD/CTRL + i on your keyboard, and to ensure the navigator isn’t blocking your view drag it to the right hand side so it snaps to the edge.
Right click the first image box and select duplicate. Now drag these widget from within the navigator to the bottom. This is a great way to easily move around and organise your widgets, columns and sections.
Do the same for the second image box widget, and then also the divider.
Now update these two widgets with their relevant images and titles.
We’ll now repeat this step several more times to add in all of our radio stations.
Once finished save your changes and publish.
Great! We have now finished creating our list.
Now let’s explore how to add this template inside our tabs.
Press CMD/CTRL + e to open the finder and type templates once again.
CMD/CTRL click templates to open this in a new tab as we’ll be coming back to this template soon.
As you can see our new template is now showing and on the right hand side you will see a column titled ‘shortcode’. Select this shortcode and copy it.
Let’s now head back to the homepage. We can get there quickly by typing CMD/CTRL + e on your keyboard and typing ‘home’.
Select the tabs widget…open the first item and remove the default text. Now paste in the shortcode.
Update the page and now preview…
As you can see our new template is now showing within our tabbed section. If we scroll down however you’ll see that the entire page scrolls. We’d like our list to scroll and the rest of the content to stay fixed.
Let’s head back to the template file and make that happen.
Select the section which holds this content…and navigate to the custom css tab location in the advanced section.
Add the following CSS code, and again you can copy and paste this from the video description for ease.
By adding the overflow property we can now add as much content as we like and this section will scroll indefinitely providing a great user experience.
OK, everything is looking and working fantastic so far!
It is now time to add an action so that when a user selects one of our radio stations the video playlist appears.
We’re going to easily create this with a popup.
Navigate to ‘Templates > Popups’
Add a new popup….give it a name…and dismiss the library.
First of all add a new one column section…switch to the style tab and set the background color.
Now search for and drop in the video playlist widget…
Rename the playlist…and don’t worry that you can’t see this right now, it’s the same color as the background which we’ll fix soon.
Expand the first item and add your video link.
Make good use of the ‘get video data’ button as it will automatically populate your video title, duration and thumbnail. You can of course amend any of these manually if you need to.
Now expand item 2 and repeat the process…
And then do the same for the remaining videos…
OK, that’s all of the videos added, let’s now continue with our customisations and configurations.
Select the image overlay tab, enable this option and then select your image.
With the image overlay enabled we can also amend the play icon.
Now expand the additional options tab. Here you can control the behaviors and further configurations associated with the videos you’re displaying.
‘On Load’ will automatically play the video and ‘Next Up’ will play the videos consecutively.
We’ll remove the thumbnails…the play and watched icons…and then enable lazy load.
Let’s now add some custom CSS in the advanced panel to adjust this widget slightly for our exact requirements.
To save you from having to type out this CSS, we’ve provided it for you in the video description.
Don’t worry that this doesn’t look exactly how we’d like it just yet. Switch to the style tab now and let’s make this widget look amazing!
Set the height to 650px…
Amend the top bar background color…typography…and video amounts.
Next, set the video item background color…item color…item typography…duration color…and finally the duration typography.
Now set the active styles..
The item color…item typography…and duration typography.
Select the column next and add a white 2px border.
And then set the padding to 0px on all sides.
Let’s now amend some settings to the actual popup.
Select the gear icon in the bottom left hand corner.
Switch over to VW and set to 38.
The horizontal position we’ll set to right and the vertical position we’ll set to bottom.
Hide the overlay…and also the close button.
Now set the entrance animation to SlideInUp and the exit animation to SlideOutDown. Amending these will open the animation duration setting which we’ll set to 0.5.
Now in the advanced tab unlink the margin values and set the right hand side to 50px.
Lets now publish our popup and set its conditions by selecting the ‘Publish’ button. Choose ‘Add Condition’ and by default ‘Entire Site’ is selected. From here we can simply select ‘Save & Close’.
Now it’s time to connect everything together and test out our new video playlist popup.
Open the template file first of all…and select the first image box widget.
In the link field, select the dynamic tags icon.
Scroll down to the Actions section and select popup.
Now select ‘Popup’ and search for the popup we’ve just created.
Once you’ve found and selected the popup, simply update the template and we’re ready to test it out.
Open your website now and as you can see by clicking onto the first image the video playlist popup appears and looks fantastic!
We can click the image again, and the playlist then disappears.
We’ve gone ahead and populated the other radio stations and as you can see we can switch between effortlessly providing a great user experience.
By combining Elementor features like template shortcodes and popups you can create some amazing and interactive website experiences for your users.
Let your imagination run wild, experiment with different combinations and share your websites below so we can all be inspired.
Thank you for watching.
