by Adam Preiser updated September 6, 2017

How To Create A High Converting Popup Lightbox With Beaver Builder


Share on facebook
Share on twitter
Share on linkedin

Video Transcript

How To Create A High Converting Popup Modal Lightbox With Beaver Builder

Welcome back to another video my name is Adam
from where I make videos for

nontechies like me and i’m going to show you how to do something
really really cool in this video and that

is how to add a pop up box that can have anything
you want in it on your Beaver Builder website

and you have to have the Beaver Builder theme
for this you just need to have the Beaver

Builder plug-in and an add-on package that
I’m gonna show you that adds this really awesome

functionality you can do some really amazing
things with pop-ups and I had a client recently

where they asked if I would put a video on
a page I designed for them and I know when

I looked at it it just really wouldn’t fit
and I thought this should really be maybe

a button where they click on it and a video
pops up and so I was looking at my favorite

add-on package now part of the reason is my
favorite add-on package is because it’s the

only one I own about it with my own money
I’m not some rich guy buying all these add-on

packages also I’m very conservative when I
end up buying something I want to buy stuff

that I’m good use and I’m usually not to buy
something else that does the same thing to

stick with what I have unless the other thing
that does a better job at it so I went to

the ultimate add-ons website for Beaver Builder
and I saw when I clicked on modules they have

this module right here mode dial pop up I
don’t know why they called the mode dial I

know it’s probably a technical term but most
people don’t know what the heck that is so

just pop up and it’s coming soon so I contacted
them and asked them if I can have an advanced

copy of the the plug-in that has this add-on
already in it so that I can use it for this

client and they were very generous and I asked
if I can make this video and they said yes

as well so go over this new module that they’re
adding and other creative uses for it and

us all to try to cover some of them as best
as I can in this video but they do have some

demos up and they have these eight demos of
it so here is a demo where when you click

on it just some content comes out and everything
is customize woman to show you all the options

in it here’s one for a photo you notice I
can change the color of the background there

and you can also choose if you want a border
there you don’t have to here’s a video embeds

when you click on it just pops up a video
and if if you noticed that others different

animation options okay so here’s where you
can have a saved row so you can creator Rowan

Beaver Builder and you can select that to
be the contents of your pop-up that is some

powerful stuff right there here’s for save
the modules and also saved page templates

and I was actually thinking this would be
really good for anyone that wants to have

a portfolio but not have it be that take up
so much space on their website so if your

client to design some pages and Beaver Builder
when you can actually export those pages import

them on your site and add them to these pop-ups
to really showcase some of the work that you

do so anyways this is your full saved page
template YouTube video you might see someone

familiar and you can even get rid of this
border by the way also if you don’t want the

border you can get rid of it you can change
the background color here the color the opacity

everything is controllable including this
is controllable to you can have it be whatever

you wants and here’s a video video so these
are the eight demos let’s jump into the backend

of word press and take a look at the settings
on my site so here I am I’m logged in now

I’m going to give you a little bit of a tease
here so if I go to settings and then page

builder and is where you simply find your
Beaver Builder settings you can see right

here something pretty interesting but I am
not to click on that that something for different

video I just asked if I could get an advance
copy for the pop up and if I can make a video

of it all go into what this is in a different
video so you want to click on modules if this

is your first time installing it in when you
scroll down this is where you can actually

enable or disable modules when you scroll
down here so the ultimate add on modules right

here and I have them all checked are right
now but you can choose which ones you want

this photo gallery is also a new one this
ribbon is new they have a couple new ones

in here but I just don’t talk about these
pop-ups because they’re so cool going to pages

and skinny jump into my home page and click
on page builder so I can get into the Beaver

Builder interface and here it is so I’m just
a search for its pop that’s enough there it

is motile pop-up so the way it works is you
can drag-and-drop this wherever you wanted

to say I wanted a pop-up button underneath
here I will drag-and-drop that there and up

pops my settings panel right here so may try
to go over all of these you know some of these

pop-ups you don’t even need to trigger with
have a button you can actually have a trigger

was some action may be time on the page or
that whole exit and testing were when summonses

scrolling off the page or maybe right when
someone gets the websites there’s lots of

different triggers for these pop-ups which
is actually pretty darn cool and the reason

why I think the way that ultimate add-ons
is implementing it is so awesome as they actually

also have pre-built a lot of this technology
they have a plug-in called convert plug that

is a plug-in that allows you to capture opt
ins and things of that nature on your website

so anyways now you can do anything with these
problems you can use them for lead generation

for relaying information for notices there
so many cool things you can do with it it’s

pretty pretty powerful so right here you can
have a real basic pop-up where you just have

text you can have a title and some text right
here right here is the option we can actually

choose different types of contents when I
expend this right here I can choose a photo

my video embed code which is pretty awesome
so if you are using video that’s not on video

not on YouTube you can embed it here as well
or maybe even an audio embed code here’s reviewed

choose your saved rows modules templates YouTube
or video so I have some saved page templates

I can click on that and I’ve got a couple
here maybe I can just chooses Adams template

right there you can see the width is defined
in the pop-up options right here CC which

is maximum with that’s why looks funny because
it’s taken this page in and scrunching it

all in but I’m sure if I expanded this out
to maybe like 900 or something like that it

would go ahead and kind of look normal so
yeah there it is it’s looking better already

and I can get rid of this content padding
right here I think I probably wouldn’t really

use the padding I would like to just set it
as zero and there it is so here is a full

page, and implement this on my website for
showing full-page designs especially for templates

that might be for sale anyways when you scroll
down here you have the effect when it appears

you could do something real basic there’s
always really nice effects that you can choose

to like hokey dorky type of effects I mean
there were the really cool facts that can

get your attention also if you’re using where
you’re showing some of the V padding on the

side you can write here choose the background
color for that and here’s where we could choose

the overlay color so right now I have as this
dark color so let’s see if I make it like

an annoying green or something like that and
then I can choose my opacity right here so

I wanted it to you know have very little opacity
I can do that is you have those options there

since look at this tab word says appear on
and this is where were you have all these

options we can create a button it could just
be text it could be an image of someone clicks

on an icon we can also tie this into a custom
class which is pretty cool and automatic that’s

were working to choose some parameters where
it’s not someone clicking something in order

for it to pop up show those real quick click
on automatic right here is before user leaves

and this is like an accident and after a few
seconds and you can specify the second so

if I click on yes I wanted to cure the minute
someone got on the page I can have this set

to zero or I can have there be some kind of
a delay so we said that to know see there’s

any additional options with this note there
is an okay right and so this is actually really

thoughtful of them you can enable cookies
and this is going to allow you to control

if someone comes back to the site or they
can see this again so just see what options

are there to choose yes and right here we
can choose a range so I sent this to two when

someone comes to my website and sees this
pop-up it won’t appear again for two days

or if they go on to another web browser it’ll
probably appear are they clear their cookies

but you have some pretty good control over
it now you also have options for this close

button so if you see right there it’s an acts
and we can choose whatever he wants if I click

on replace you have the choice of all of these
different options so you definitely don’t

want a form of an X because if you don’t someone
might not know that they need to click on

it unfortunately that does happen but you
can choose whatever you wanted like maybe

throw in a house and then you could choose
the size here the color of it whatever you

want and so now it’s a little home for some
people you might want to make it larger so

I just change that to 60 which are probably
close to double the size but that would make

sense you want and ask but you also change
the position of where you want it so there

it is real sex in the top right I can put
it may be on the top right of the actual pop

up like that in that should move it to be
right next to the pop up its self okay so

now you can actually choose also what action
someone would do to make this go away so could

be just clicking on that extra whatever you
put there but you can also have it be if someone

hits the escape key or clicks on the over
Overlake I think you should enable this overlay

click option because I do that sometimes I
just want to click there and have it go away

and then you have your standard options your
topography in your advanced options so anyways

and then you can just go ahead and save its
what I do I think I might’ve set this the

trigger after a few seconds right so see if
I click on Don and then publish of late into

the X and tendency take me to the page actually
just went back and made it work as the X intent

and that just means when you take your mouse
and you move it out of this browser window

it should trigger it like that and there it
is it just triggered it and you can scroll

down so I had this full-page template showing
but you can see how really cool this would

be to show you you can do just all kinds of
things you can have page specific pop-ups

you can have light boxes for your videos you
can capture leads you can do amazing things

you can demo your portfolio you can do all
kinds of cool stuff so that is it to making

pop-ups for your Beaver Builder based website
using the ultimate add-ons plug-ins and add-ons

splitting is not expensive and it’s like 60
or $70 right now and that you get all these

modules rose and pretty soon you’re in a half-full
page templates for it and I love it and I

use it on my personal website I’ll use a lot
of the different modules now I do have links

to Beaver Builder and ultimate add-ons down
below know when you click on those links and

it goes over to the website ulcer affiliate
links and what that means is if you were to

purchase it they give me a small commission
it’s not a huge commission it’s really small

commission and so if you did want to purchase
either of those I’d appreciate it if you did

it through my links however that is not why
I talk about these products I talk about it

because I own on bottom with my own money
and I currently use them and love them and

fully believe in them now if you did by ultimate
add-ons or Beaver Builder through one of my

links I have a corset I’d like to give to
you for free all you have to do is forward

your receipt over to me now verify that you
purchase it through my link the name of the

course is Beaver Builder essentials and what
that’s gonna do skin it take the person that’s

new to Beaver Builder and maybe even building
a website in its continued through the whole

process of having in building an entire website
using Beaver Builder in I’d like to give that

to you before you go I have something for
you and before I get into that I wanted to

ask you to do something for me to give me
a thumbs up on this video and if you’re not

a subscriber click on the subscribe button
right beneath me if you have a question on

this video I’m happy answering you can also
leave a comment or question down below this

video hey I put together a course just for
you and him and they give it to you for free

all you have to do is click on the button
right here on the right is called three steps

to WordPress success is an awesome course
you’re gonna love it I would love for you

to join in and enroll as a student in this
course thanks for watching this video I really

appreciated and I do it just for you

My passion is making the best quality video tutorial online, for non-techies. When I am not behind the camera, I am usually helping out one of my YouTube subscribers.

Join The Conversation

Your email address will not be published. Required fields are marked *

  1. Excellent Video! Do you know when they plan on releasing the Modal Popup tool? I’d love to purchase this but would really love this modal popup first. Thanks!

    1. It’s available right now in beta. Just log into the members area and you can download and start using it now.

Stay Up To Date

Enter your name and email for the latest news, updates, and tutorials.