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%; }

Was this answer helpful? 0 Users Found This Useful (0 Votes)