Elementor Webinar: Popup WordPress Plugin

Elementor Pro includes a revolutionary popup builder for WordPress. Ben & Ziv introduce the new Popup feature and show you how to: – Customize the popup window and overlay – Build the inside of the popup – Set conditions, triggers and advanced rules

okay hi everyone and welcome to
elementor’s pop-up webinar I’m Ben Pines
simav Elementor and with me is zip Hertz
web designer and educator here at
Elementor highs if I then how are you
I’m good and good are you are you ready
for the webinar absolutely
so in case you don’t know Elementor just
released a revolutionary new pop-up
builder and we’re excited to show you
how to build pop-ups how to target them
and first I want to tell you a bit why
we built this product so basically
designing pop-ups is very hard nowadays
you use another interface and you can’t
really include all the great content
from your WordPress site from your
elementary templates WooCommerce and
that just doesn’t make sense
so zip tell us a bit about elemental
pop-ups okay so basically to start a
pop-up what we’re gonna do is we’re
gonna go to the dashboard and we’ll go
to templates and you’ll see pop-ups so
press that and this is the same process
you use to build any part of your
website with the theme builder the same
thing you’re building the pop-up in the
same process which is a huge deal we’ll
go ahead and and press add new and as
you can see the template type is already
selected it’s pop-up and what we’ll go
and do is we’ll type in the name of the
pop-up and we’ll create a template so
now you can see that the pop-up window
comes up and here you will see tons of
pre-made pre-designed templates that
we’ve prepared for you and there’s a
template for each use case you might
need so scroll through you can preview a
template we’ve made really beautiful
templates so I invite you to browse
around choose whatever you like in the
categories
we’ll see you have bottom bars the
classic pop up flying pop-ups
fullscreen hellobar and sliding and
these are an amazing collection we’ll
have a lot more in the in the next
couple of next time soon so we can build
it also from scratch the pop-up so what
we’ll do is we’ll press the X area and
as you can see we’ve got the regular
elemental editor what we can do here is
we can just drag in you know like like
normal my heading can add an image so
that’s the same editor that you’re using
to build your entire site you can use
any of elementors widgets and create
like Ziff is doing that now create a
layout with columns you really have no
limit as to what you can accomplish with
this pop-up builder but what we’re going
to be doing is we’re going to use a
pre-designed pop-up from the library so
we’ll go ahead and go to the library and
as you can see how we can select either
one of the pop-ups that we’ve designed
we can go to the templates and I’ll go
ahead and open up a pop-up that already
pre-made as you can see over here and I
mean we’re going to be releasing more
videos on explaining how to design the
pop-ups you know so all of the regular
editing with the widgets and the
settings but for now we’re going to
focus on the pop-up settings itself so
we’ll go ahead and press the settings
cog over here on the Left bottom and
we’ll start off with the layout so
basically what we can do here as you can
see is we can control the width so this
is a really a huge thing because not
only can you design your entire inside
of the pop-up with Elementor but the
outside as well this includes the window
there over the overlay so let’s see what
can be done now besides for the width we
can also control the height we can set
it to fit to content basically the heart
will be determined by the amount of
content you’ve got in the pop-up we can
also set it to fit to screen
which will then take the whole height of
the screen what we can do then is we can
also position the content to the top the
center and the bottom and what we can
also do is we can set a custom height
you can just use the slider over here
and once again we can also set the
position of the content now I’m gonna go
ahead and set it to fit to content
and let’s move on to the position so
basically you can also position the pop
up you can align it to the left
horizontally you can align it to the
center in the right vertically we can
align it to the top to the center and
the bottom as you can see here go ahead
and set it to the center we’ve got an
option here to a show/hide the overlay
as you can see when we hide the overlay
we get the the user can still interact
the visitor can still interact with all
of the elements behind the pop-up so the
regular webpage without without
interfering so you can actually control
the type of experience you’re offering
to your users if you’re thinking about
adding a mess a short message box to the
bottom of the page you can still have
the user continue to browse and scroll
along your site okay and we can also
decide to show and hide the close button
okay as you can see over here and this
is also once again it’s very good for
the user experience for any reason if we
would like to the pop-up to shop without
having the close button sharp straight
away or if we just want to disable it
entirely we can do that over here this
is good also to restrict the content
right yes exactly also we can add an
entrance animation as you can see over
here you can bring the pop-up to life
you can set its duration as well now
let’s move on to the style tab in the
style tab we can set we can set the
background because the background color
as you can see here
can play around with that cassette the
and background image as you can see
we’ve got a border over here the border
is yellow that’s ten pixels we can set
our own width
now all these customizations are really
important to create the right appeal of
and the right fit for each pop-up and
your website so customize it to fit your
brand your website and your style
absolutely just like regularly we can
play around with the border as well to
set the radius over here got a box
shadow that we can set now in the
overlay drop-down we can customize what
happens outside the pop-up so it’s the
area surrounding the pop-up over here we
can set its color will really really
give a customized experience of the
pop-up you can even set an image I don’t
think this flexibility is available in
any tool that I know of so it’s cool
okay let’s go to the Advanced tab where
we can set some oh so we’ve got some
advanced settings over here we can also
set the pop-up to close automatically
after a certain amount of seconds let’s
say your user lands on the page or sees
the pop-up and you know you went to the
pop-up to close automatically we go
ahead and set that over here prevent
closing on overlay and prevent closing
on escape they’re very similar
basically you prevent the pop-up from
closing on overlay basically means if
your user clicks on the on the area
surrounding the pop-up then the pop-up
won’t close okay and if he wants to
close the pop-up by clicking the escape
but key also add one close so if you
want to create a content lock and keep
your users behind this content wall that
you have you want to remove the ability
to close the pop-up on click outside of
the window and also if they hit the
escape button also what we can do is we
can disable the page scrolling
so the moment that the pop-up appears
the user won’t be able to scroll and
what we can also do is if the user has
already seen a pop-up on this page then
we can decide for this specific pop-up
not to show oh this is a setting that I
personally like because I remember I I
don’t remember which side it was but I
landed on the site and it had one pop-up
then I continued it had another one very
annoying just not a good experience and
this setting actually prevents even if
by mistake you created two pop-ups on
the same page it’s not a problem
you’ll still avoid the multiple pop-up
scenario exactly so we’ll set that away
avoid multiple pop-ups okay so that’s
basically the pop-up settings now I
think that covers the area of designing
and customizing the pop-up but we
actually have a lot more to show you
because all the magic here is also with
the targeting and triggering options so
these are all the settings that help you
determine how and where the pop-up
appears so let’s go to that window okay
so we go ahead and we hit publish as you
can see over here we’ve got the
conditions basically the conditions that
determine where the pop-up is used
throughout the site what we do is we add
the condition over here very easily we
can decide to either include or exclude
so any page any category that you want
to include you can do that it works the
same way as you’re used to with the
theme builder if you tried it very easy
and very intuitive to use so you can
also get very specific and you can set a
specific you know post category for
whether the pop-up can show so I’m gonna
go ahead and set it to the entire site
as you can see we can add multiple
conditions so it will actually have a
separate video in a later time
explaining this in detail so stay tuned
for that
absolutely okay so now we’ve done
setting where the pop-up appears
throughout the other side and let’s see
what what user actions actually
you know trigger the pop-up so we go to
triggers we can set on page load
basically what this means is that if if
you visit the lens on the page and you
know the page is loaded if you set this
to zero seconds the pop-up will show
straight away and if you want to delay
that you can let’s say 30 seconds you
can just set that over here and then the
pop-up will show after 30 seconds now
unscrew means that the moment your user
starts scrolling down the page you can
set the pop-up to show after a certain
percentage of scrolling so let’s say 50
percent halfway through the page and I
know this setting is very important for
content sites so those content sites
with a blog after user hit about 80
percent of the article you want to add
the pop-up that maybe tells them to sign
up for your newsletter or maybe if they
finish the article you want to a pop-up
that introduces other articles in your
blog so this is where the power of
elementor’s pop-up that you can include
content from your real site it’s the
same interface and that’s a great
trigger absolutely so like if I set this
visitor is nearing the end of the page
the pop-up will be triggered to get
their attention so we set that here
another really really cool option is to
unscrew all two elements to shut the
pop-up the shell on scroll to certain
element as you can see here in the
selector we just we enter the ID or the
class over here and the moment that the
visitor reaches that element could be a
an image it could be you know an altar
action area button that’s when the
pop-up will show so we can really set
specific really target specific use
cases aware the next setting on click
very simple we can set the pop-up to
show after certain amount of clicks the
mouse clicks on the page yeah after you
have some sort of interaction from the
user you can show them the pop-up that
you like and after an activity it’s
basically with
the idle time so if you you know you
your visitor has hasn’t interacted with
the page you know was might have lost
his focus or attention was busy doing
something else open YouTube open
facebook grab their attention back
because I opening a pop-up add some
movement here I would also include this
animation and an ability so it actually
interacts and grabs the attention
absolutely so I can go ahead and set
that over here in seconds and then the
next setting is on page exit intent
basically the moment that your visitor
starts nearing the mouth starts nearing
the edge of the page we can set the
pop-up to show as well this is very
important for e-commerce sites because
when the user tries to get out of the
page maybe it’s the right time to show
them an offer get them give them the
nudge to actually make the purchase okay
so let’s move on to advanced rules and
show after X amount of Penn’s pageviews
we do that over here if your visitor has
seen a certain amount of pages and we
want the puppet to show early after that
so we said that right here if your
visitors seen three pages then the
pop-up will show afterwards show after X
amount of sessions okay so let’s say a
user is visited your website already and
has come back for the second time and
that’s when you want to show them the
pop-up with your sales offer if it’s
someone that already visited your site
he knows about what you offer that’s a
great time to give them the the offer
that you have after they had some
experience with your service and your
product absolutely show up to X amount
of times here we can limit the amount of
times that pop up actually shows you
know we all don’t you know we don’t like
to see too many pop-ups and yeah and if
you haven’t sold on the third time
you’re popping up the same one you
probably shouldn’t use the same pop-up
maybe try a different approach
another pop-up to to do to use instead
and when arriving from a specific URL
this is really really cool we can decide
to show or hide
the pop up based on where they’re coming
from so you know we just paste in the
URL over here and then we can decide for
the barb to show or hide this is also
great for personalization so if I know I
have a campaign from Facebook I can add
the URL Facebook and then pop up a
specific pop up for them hello Facebook
users and having that much more
personalized message gives me a lot more
conversions and opportunity to get the
sale and and also really cool is that we
can we consider a rejects for advanced
users so if you want the pop-up to show
when they come from a certain in a blog
or Facebook page we just put in the
rejects here which is really really cool
okay moving on to show when arriving
from basically here we can decide for
the part to show when when your users
arrive from search engines like Google
and Bing
external links links outside your
website and internal links inside your
website or the man we can also decide to
hide the pop-up for logged in users and
you know like sometimes you just don’t
want to show a pop-up for users that are
ready logged in or signed up so we hide
the pop-up here again this allows for
really advanced segmentation you can
only target those users who haven’t yet
converted and become your subscribers or
users and get them to to make the sale
and don’t interrupt the users that
already converted and we can over here
we can select all users or we can set
custom users as you can see over here so
we can get really really specific and
finally we can also set the pop-up to
show on devices desktop tablet and
mobile we set that over here so if you
want to remove not to show up on mobile
you can save it yeah you’ve seen every
setting here is so intuitive it’s just a
flip of the switch don’t you don’t need
any technical know-how even I can do it
and you can really get a high level of
complexity and targeting
just by using these these switches so a
lot of work has put into to building it
like this way and I think the result is
it’s nice absolutely
there’s so many different use cases we
can you know we can set the pop up to
you to appear so yeah let’s show them to
use cases that to get you up in the
rolling and knowing this material even
better
absolutely okay what’s so give me a use
case okay so let’s start with the
classic
I want a landing page where I click on a
button and the pop-up appears okay so
for that we need a landing page so let’s
go over here now this is our landing
page and we want to pop up to show when
we press this button right okay so let’s
go to the settings I need to go to the
batten widget and we’ll go to link will
press dynamic and under actions will
press pop-up and then we’ll press on the
pop up settings now when we press the
button we want to pop up to open so
we’ll leave that and here we can select
the pop up so let’s go ahead and select
this I can we update the page and that’s
it really
right now let’s preview okay so let’s go
ahead and hit the button and then works
like a charm okay so the second scenario
is a bit more complicated
I want the pop-up to open when I scroll
to 80% and then I want it actually to
close after I submit the form so this is
a general scenario that’s a it’s a good
one
so first basically what we want is we
want to pop up to show up to appear when
the user Scrolls 80% right so we already
were there we were in triggers on scroll
so we’ll go back to that the direction
is down 80% we’ll hit save and close and
basically what we want is the pop-up to
close when
when the user hits submit right yeah so
that’s actually a cool feature of
Elementor that links clicking on links
in buttons or clicking or submitting a
form actually can close open or toggle
the pop-up so this is a unique feature
and it’s easily done really cool so
basically what we do is we go to the
form right we go to the form widget and
here we’ve got actions after submit add
action go ahead and search for pop-up in
the pop-up drop-down that appears we can
choose the action we wanted to close the
pop-up so go ahead and select that
and we also have an option to not show
the pop-up again
and go ahead and hit that as well update
the page update the pop-up and let’s
check it out will refresh this page over
here and we’ll start scrolling there we
go
yeah 80 percent let’s fill it in go
ahead and fill it in go ahead and go
ahead and send the message was sent
successfully just when you sent it
closed the pop-up and that’s the second
example that we wanted to show so this
is the webinar and we want to hear your
your questions so feel free to go to ask
anything you want on pop-ups I want to
do a small recap of what we showed so as
you can see everything works in
Elementor you can use any of your
content from your site from you commerce
from Elementor templates it gets your
style your images it’s it all works
seamlessly with your website and in one
interface which is the huge revolution
that we’re introducing you saw the level
of styling option and design options and
capabilities that you can reach
pixel-perfect design of pop-ups we saw
the targeting which is simple to use yet
allows you to
target and segment exactly the users
that you like so you know pop-ups are
very important to get conversions to get
more sales but they kind of have a bad
rap I think with this project product we
are able to create better pop-ups that
offer a better user experience for our
users
absolutely so a really really powerful
tool and you know we’re gonna be
creating more videos explaining how to
design more more of these pop-ups and
and also explain how to you while we can
combine these triggers and these
conditions and combinations to really
apply to to specific use cases and I
invite everyone to join pro all the
pop-ups are part of elemental pro so
there’s never been a better time to join
Pro enjoy all the functionality that
we’ve seen Plus pop-ups and I’m sure you
you will like it and it will do amazing
results for your business absolutely
so we’ll be over here answering your
questions so by the way we’re filming
from the elementary offices so this is
the our aquarium room so we hope you
enjoy this new scenery so tell us what
you think share and give comments thank
you everyone and bye bye so long cheers
guys