In this tutorial, we will show you how to use Elementor’s login widget to create a login form popup that redirects to a different page upon clicking the login button using Elementor’s Popup Builder.
You will also learn how to set buttons that toggle popups, use the slides widget and more.
hi-oh zip from Elementor today i’ll show
you how to create this cool login pop-up
which appears upon clicking this login
button also after filling in the details
and hitting the button users will
automatically be redirected to their
personal dashboard so let’s break it
down and show you how it’s done
step-by-step first off let’s start by
adding a new pop up template hit come on
e to open the finder and go ahead and
choose add new pop-up let’s give it a
name and create the template now I’ve
pre-made a pop-up for this tutorial so
let’s go to my templates and insert it
as you can see we set the popups width
to 300 pixels and custom heights of 600
pixels let’s explore the main structure
of the pop-up the pop-up is built out of
two sections the first section contains
a heading and login widget the second
section contains the slides widget
essentially what we’ve done is use the
slides widgets in the second section as
the background for the entire pop-up and
the widgets in the first section they
display on top of it I’ll break it down
and explain exactly how it’s done let’s
start off with the first section
settings we give it a minimum height of
login widget let’s focus on the login
widget we want the users to be
redirected to their personal dashboard
account after hitting the login button
so in order to set that go to content
additional options and set redirect
after login to on and paste the link of
the page here great now let’s move on to
the second section we set a minimum
height of 600 pixels both for this
section as well as the slides widget in
it I’ll explain why we did this in a bit
but first let’s go over to the slides
widget settings as you can see we have
set three slide items let’s see how we
set them up go to item number one and
for the background we chose an image and
we set the size to cover we also switch
the can burn effect to yes this will
give the zoom effect we can set the
direction here
I’ve said it to zoom in go ahead and
repeat the same process with the other
items okay great we’re done with the
slides now the reason why we set the
first and second sections hard to 600
pixels is so that it will match up
exactly with the popups height of 600
pixels as well in the Advanced tab
we gave the second section a negative
top margin of 600 pixels so it will
align up perfectly with the first
section now we want the widgets in the
first section to remain on top at all
times in order to do this we need to go
to the Advanced Settings of the first
section and set the z-index to 1
great now let’s go ahead and publish the
pop-up we won’t be setting conditions
triggers or advanced rules because we
will set the pop-up to a pair up on
clicking the login button on our main
page so go ahead and hit save and close
next let’s go over to the main page to
set the pop-up to open and close when
pressing the login button click command
e to open the finder and search for the
page and select it here we want to set
the login button to toggle the pop-up so
in the batten widget settings go to link
dynamic and under actions choose pop-up
now click on the fuel to enter the
settings set the action to toggle and in
the pop-up field search for the pop-up
we just made make sure to hit update now
let’s see it in action as you can see
the pop-up appears correctly but the
overlay is blocking our login button
this prevents the button from being able
to toggle the pop-up so let’s see how we
can fix it go back to the pop-up editor
and in pop-up settings set the overlay
to hide so it won’t show and in the
Advanced tab we will set prevent closing
on overlay to yes if we don’t do this
any math’s click on the page will close
the pop-up so in order to avoid this set
it to yes this way only the login button
will toggle the pop-up its update ok
great now let’s see it in action again
cool well that’s it now you know how to
make your own creative login pop-ups and
set them to appear on a button click
don’t forget to subscribe to our YouTube
channel for more tips and pop-ups
tutorials see you later
