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

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

31 thoughts on “How To Add A Slider To Beaver Builder Page Builder For WordPress

  1. Great Job on the videos. They are informative and well done. Thanks for making them, us newbie WordPressers appreciate it

  2. The margin you are experiencing when you have added Smart Slider 3 into your Beaver Builder layout might come from the issue that you are using shortcodes inside the Beaver Builder's "Text Editor" module. It might output unwanted HTML that creates weird thing, depending on the theme you are using. It is much better to use "HTML" page builder module to insert custom shortcodes in.

  3. I'm glad you did decide to teach us about sliders any way Adam. after you did I caught up with the article by Thrive themes.
    I get what they are saying and it makes sense. But in my situation I find sliders will be useful for certain functions in my web design. My situation like many others is unique.Thrive has their good points but there are different strokes for different folks, Thanks for teaching me.

  4. How come I only have "color", "photo" or "video" but not "slider" in the background type? Is it because I have the free version?

  5. Hey, I installed "smart slider 3", however, there is no "slide demo" in my website. I also tried to paste the "sample" code as followed your instruction, it's not workable.

    So could you please let me know how to download the "demo slider"? Thanks a lot.

  6. Again, it's me. I have found the demo. Another thing happens, when I paste the code "[smartslider3 slider=4]" to text editor in text mode. It's still not workable. Just show the code '[smartslider3 slider=4]' in my page. It'll make me out of control.

  7. Many thanks for taking the time to create your videos. I find myselft quite interested in this slider video, only because a client insists on using a slider. Looks like the BvB background slider may work. That said, your example slider displays "taller" than the screen display, requiring scrolling to see it all. How might the a page with a slider always display, on different resolution PC monitors, with both the header at the top and the footer at the bottom, respectively, without the need to scroll to see the entire slider?

  8. Hey Adam awesome contects, appreciated. I need to make a website like this:
    If I use Row setting-> Background type-> Slideshow it isnt responsive in mobile. I'd like a Hamburger menu in mobile. Thanks

  9. Thanks for posting this information. I am getting close to purchasing Beaver Builder and knowing that the slider can be integrated with BB is nice.

  10. I m using free theme and its show builtin slider. How we replace this slider with another slider and after replacement new slider will shown automatically at same place ?

  11. This worked great except when the slideshow was viewed on a mobile phone (small screen) or tablet, the images in the slideshow didn't size down to fit smaller screen. Is there a way to make this work on all devices so entire photo can be seen no matter the size of the screen? A responsive effect?

Leave a Reply

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