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