In this tutorial, we’ll create a popup with a mouse track effect that you can add to your WordPress website or landing page.
You’ll learn how to:
✔︎ Use position absolute
✔︎ Create a mouse track effect animation
✔︎ Trigger a popup from a form
hi-oh zip from elemental here today in
light of our birthday i’ve prepared a
special tutorial showing you how to
create a cool birthday pop-up step by
step so you can easily apply these
settings to your own designs and make
awesome pop-ups like this one without
breaking a sweat so let’s dive in and
make it together on your dashboard go to
templates pop-ups add new give it a name
and press create template we will create
our pop-up from scratch so go ahead and
click the close button here is our empty
pop-up for now the only pop-up settings
I’ll adjust is its width
so in layouts go to width and set it to
settings later but first let’s add our
content and style it a bit drag in a
heading widget and enter your text align
it to the center and then style it to
your liking before changing the text
color to white let’s go over the section
settings and in layout and the columns
gap set it to no gap now under style
give it a background color let’s also
add this cool background image and set
its position to Center and no-repeat
let’s give it a custom size as well in
the Advanced tab add some padding to the
section now go back to the heading
widgets and set the text color to white
cool go ahead and duplicate the section
and in style set the background color to
white and remove the image under
advanced change the padding a bit click
on the heading widgets and in style
change the color so we can see the text
and enter your new text now duplicate
this widget and change its text as well
then in style change it to your lacking
we are almost ready to add some absolute
positioned images and motion effects
first let’s duplicate this heading
widget and drag it over here
then change the text now drag in a share
battens widget
first let’s change this pattern to email
and drag it to the third place and I’ll
go ahead and delete this one here then
style the buttons to your liking
in the style tab set the columns gap to
eight rows gap to zero and button size
to 0.65 now give it a custom color
in order to position them side-by-side
go to advanced custom positioning width
and set it to inline now let’s do the
same for this heading widget and set the
vertical align to Center in advanced add
a little padding to the right so there’s
some space between them now in the
column settings set the horizontal align
to Center cool we’re ready to add some
images so drag in an image widget and
choose one then under advanced custom
positioning give it a custom width set
its position to absolute so we can move
it to where we like let’s say we want to
move it to the bottom right side of the
section for responsive reasons it’s
advised to change the vertical and
horizontal orientations to the bottom
rights as well before moving the image
there so go ahead and set that over here
now position the image to where you want
cool now let’s duplicate and add a
different image and Ridvan stem
positioning change the custom width to
orientations are set accordingly
I want to position this image in the
bottom left side of the section so all I
need to do is set the horizontal
orientation to left and drag the image
to where I want let’s do it one last
time and choose this cool ribbon image
and read Vance change its width and set
the vertical orientation to top now
position the ribbon to the top left
corner
I want the ribbons corners to stick out
there instead of disappearing like now
in order to do so we need to go back to
the pop-up settings and under advanced
add 100 pixel padding then go to style
and in background type color drag the
opacity to zero and remove the box
shadow awesome now let’s go over to the
close button and style it a bit
finally let’s add some border-radius to
both sections in the top section and the
style go to border hit unlink and set
the top and right border radius to 10
pixels in the bottom section we’ll do
the exact opposite so and this style
border and Link and set the bottom and
left to 10 pixels
dah dah our birthday pop up is desktop
ready now all that’s left is to tweak
the responsive settings for tablet and
mobile as you can see tablet is great in
mobile I’ll change the popups padding to
well as the images and finally for the
top and bottom sections are unlink and
set the padding to 30 and 20 pixels
and now for the cherry on top go back to
desktop mode and let’s add some cool
motion effects to our images let’s start
with the ribbon and red vanston effects
switch on the mouse effects then hit the
edit button next to the mouse track and
leave the settings as is now do the same
for the ball image
but change the speed 20.2 finally for
that tasty looking macaroon image set
the direction to direct and speed to 0.5
awesome job our pop-up is ready let’s
hit publish and set the popups
conditions and triggers to suit your own
website needs I’ve gone ahead and set it
to appear after a visit to submits a
form to do sir go to your form widget
and under actions after submit choose
pop-up in the new pop-up dropdown set
the action to open a pop-up go ahead and
search for your pop-up and hit update
now let’s check it out
cool well that’s it now you know how to
create our cool birthday pop-up step by
step and apply these settings to your
own designs to make your own awesome
pop-ups don’t forget to subscribe to our
YouTube channel for more tips and
tutorials see you later
