by Adam Preiser updated May 18, 2017

How To Add A Slider To Beaver Builder Page Builder For WordPress


Share on facebook
Share on twitter
Share on linkedin

Video Transcript

How To Add A Slider To Beaver Builder Page Builder For WordPress

Thank you for joining me for another video I am Adam from were a make videos for non-techies

like me and maybe like you in in this video
I show you how to add a slider to Beaver Builder

in it’s actually very simple now a lot of
developers really frown upon sliders and a

lot of experts in conversion that’s converting
your customer your visitor to a customer also

have lots of statistics backing up why a slider
is not a good idea however a lot of people

still want sliders in that’s okay too because
you can have what you want with Beaver Builder

with your site it’s all up to you now before
ushering out at a slider I want to show you

how to add an alternative to a slider that
still might meet your needs if you just want

a little bit of movement on your website so
let me show you it’s built into the the rebuilder

the paid version of Beaver Builder though
some to go to my homepage here click on page

builder, this is really quick on some going
here and so say I have a new role in Beaver

Builder like this I can go and click on the
row settings a little wrench icon and when

I scroll down there is background options
right here words his background and I currently

have to set the color but I can change that
to slideshow just like that and then right

here I can choose us several images so let
me click on create gallery when we choose

this image let me choose that image and let
me choose that image they do not go together

I’m doing this just really quick Canada click
on update gallery like that and I can set

my speed of these images so let’s just leave
it at six seconds and you can see right there

the images and they’re just fading across
like that now there’s also more options to

this there’s different transitions so you
can do the let’s see like a random boxes see

if we can get that write 123 and will be able
to see the way transitions so there’s an option

like that if you just want to add a little
bit of movement to the background this is

what I like to do I like to change the speed
from three seconds to something like 60 seconds

I like to use the transition called can Burns
and the speed is fine like that and the seat

background color okay so that’s all good so
we save it let me actually make some more

space in there so you can see it better when
we go back into the row settings and go right

here and let me say put 200 like that they
go see can see it so this is one option in

your you’re able to get a little bit of motion
out of this let me click on Don and publish

changes you can really see it so you see how
is moving just ever so slightly so you do

get a little bit of motion in your website
I’m using this feature extensively on websites

right now because I do like us little bit
of soul motion and a variation of images so

this is an alternative to having a sliders
let me just say it like that now typically

when people think slider they think of having
different layers of text and images on top

of an image and so we show you how to do that
so I am going to go back into my WordPress

dashboard there’s a really need plug-in that
is really taking over the slider space in

my opinion because of its ease-of-use and
its power and performance so if you go to

plug-ins and then click on add new just called
smart sliders reading some initially how to

integrate Smart slider three into Beaver Builder
and here it is smart slider three you can

seniority has 40,000 active installations
and lots of positive reviews sorority downloaded

and installed it yours Enoch and one version
to your in one version 3 I’m assuming that

they didn’t go from 2 to 3 because maybe there’s
some compatibility issues but here smarts

later three in it as this new option here
that’s a smart slider now I’m not going to

go through showing you how to create a slide
in smart smart slider three they have excellent

documentation they have sample sliders and
I actually downloaded this one here called

the most lighter and here’s the different
slides and there’s can be text and things

like that that are flying out so let me show
you how you take this slide and then pop it

into Beaver Builder it were to do with this
thing called the short code so I’m going to

highlight input this short code in my clipboard
now you want a video specifically to at creating

slides with this plug-in I will create one
but most the slighter plug-ins you need what’s

called a short code in order to get it into
Beaver Builder so you don’t have to follow

these instructions and think it only works
for smart slider it’ll work for revolution

slider layer slider in all the like so anyways
you just get that short code and I’m in a

put that my clipboard him and go back into
that page template some good pages home page

and then I went to click on launch page builder
and so I will put it right here I’ll get rid

of the note can Burns thing I got going on
to go hear him and click on the little ranch

there this is row settings and let me just
get rid of that slideshow and put it up back

to non-that’s fine click on save now I need
a one column row so let me just actually delete

these like that and then click on add content
and I’m a go to basic modules and I’m going

to go ahead and add this one right here called
text editor okay and then click on text and

paste in that short code okay so now what
we need to do is we need to remove any margins

in paddings in the advanced tab cc has these
margins hears let’s make that zero across-the-board

right and that’s good let me click on save
okay so now let me save this and see what

it looks like on the front end in the word
to get back in here and tweak it a bit okay

so here is the slider and you can see that
we still have some issues with it not being

fully or fullwidth off the left and the right
number three had overcome that right now so

we go back into the page builder and then
I am going to go into the row settings to

make the content to stretch the full width
some go here to row settings and then racehorses

content with it’s currently set the fixed
will make that fullwidth just like that okay

and then let’s go here to advanced and let’s
get rid of that all that spacing of top and

bottom is what I added when I did that a slideshows
let me get rid of that here just like that

and let’s go ahead and click on save and then
let’s see how this looks and there it is you

can see now my sliders hitting the full width
just like that and you can see slight Austria

to give her this little gap there I was just
those sliding across and you can put any slider

in there now, I would probably remove these
dots I’m not a fan of the.navigation in it

might be just got it takes away so that’s
a setting in the smart slider itself let’s

see if we get rid of that right there and
go back in the page builder I need to put

some negative negative margin in there to
pull it out all right Sonoma ago here in I’m

going to click on it looks like that negative
margin is coming maybe from the elements only

going to click on this ranch animal to go
to advanced and maybe let’s put a little bit

negative negative padding like that something
like that okay/seems to pulled it up for us

perfect Sonoma go and clicked on published
changes and there it is that looks fairly

perfect okay and the Don allegation that sloughs
something that’s good to be in smart slider

itself we just see if I can get rid of that
really quick okay so I’m going into that slider

and let’s see what options we have down here
the controls it’s right here etc.I can click

on that in a just gets rid of it and if I
want to get rid of the arrows I usually don’t

like the arrows as well and then click on
save now my slider should be perfect when

you go to visit site and we should have no
dots and no arrows yet there it is as perfect

so that’s pretty much how you would take any
slider and make it work with Beaver Builder

it’s just be the short code but then you got
to get rid of the margins in any kind of padding

that might be in there and then you might
need to tweak it by putting just a little

bit of negative margin if it’s too low on
the top or the bottom and my personal preferences

get rid of the dots and get rid of the arrows
actually my personal preference is the not

have a slider at all but I understand that
people want sliders in this was how you could

do that with Beaver Builder 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 be happy to answer
and you can also leave a comment or question

down below this video hey I put together a
course just for you and I’m in a give it to

you for free all you have to do is click on
the button right here on the right is called

the 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 they are 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. Great video and tip. I have a problem though. When I put the shortcode in via the text module, it shows as just a skinny row in the page builder. I have to save and publish to actually see the slider. Any ideas?

Stay Up To Date

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