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
