In this tutorial, we’ll show you how to create a special valentine’s day popup using Elementor’s Popup Builder.
You’ll also learn how to set a popup that triggers on page load, use an animated gif as your image and more.
hey everyone had a swim elemental here today we will create a special Valentine’s Day cutout pop-up that is full of love and will appear on page load let’s dig in in finder search for pop-up and then you pop up and give it a name this time I’m going to create my own pop-up so let’s just close this open a new section with one column and a heading widget and a button widget type all the text that you need okay now we can start working on the background click on the section handle to enter its settings under style background type choose classic and add your cutout image change the position to center Center make it no repeat and change the size to contain now let’s just make the heart bigger and the window larger in the Advanced tab go to padding and add 150 pixels all around much better let’s also move the text down a bit click on the column handle to enter it settings and in the Advanced tab add 30 pixels to the top padding okay now let’s add a gift to be displayed as the background open a new section with one column drag in an image widget add your gif and change the image size to four go to the section settings and under the Layout tab go to columns gap and choose no gap we are doing that because we want the image to take the whole space of the section now let’s place them one on top of the other go back to the heart pop-up section settings and under the Advanced tab change the margin top to minus 500 pixels let’s also get rid of the background starting with the overlay go to the pop-up settings and switch the overlay button to hide then under the style tab choose color and slide the transparency slider all the way down next will be the shadow go to the Box shadow and click on back to default arrow all right now let’s add an entrance animation go back to the pop-up settings and in the entrance animation drop down menu pick on fade in and change the animation duration to 2 seconds so my design is ready now let’s click publish and set the conditions triggers and advanced tools click on add condition and leave it on entire site click Next I want the pop-up to show on page load so let’s switch it to yes and type in the number of seconds click Next for this example we’re not going to set any advanced rules so click on save and close ok let’s see it in action oh I hope you enjoyed this tutorial don’t forget to subscribe to our YouTube channel to get all the latest updates and tutorials bye
Elementor is the leading website builder platform for professionals on WordPress. Elementor serves web professionals, including developers, designers and marketers, and boasts a new website created every 10 seconds on its platform.