Black Friday Super Sale! 🔥 Enjoy a jaw-dropping discount of up to 50% OFF on all Smart Slider plans. Hurry, the offer ends on December 2nd!

Buy Now
Plugins

Smart Slider 3 and WPBakery Page Builder

Raelene Morey
Raelene Morey
October 9, 2019
wpbakery slider

WPBakery Page Builder is the best-selling plugin on CodeCanyon and has been for many years now for good reason: it adds simple drag and drop functionality to any WordPress theme.

Although WPBakery is packed with useful features, including dozens of predefined layouts and design elements, there are still some areas where it can be enhanced with third party plugins. Creating WPBakery sliders is one example of this.

So in this guide, we’ll explore how you can create a beautiful WPBakery slider for your WordPress site with minimal effort using WPBakery Page Builder and Smart Slider 3.

What is WPBakery Page Builder?

There’s been a lot of confusion in recent months since the original Visual Composer plugin available on CodeCanyon was renamed “WPBakery Page Builder for WordPress.”

Here’s a video that explains this confusing name change:

I hope that clears things up for you! In this post, we’re going to focus on the latest version of the WPBakery Page Builder for WordPress plugin.

What Makes WPBakery Page Builder So Great?

The beauty of WPBakery Page Builder is that it works with any WordPress theme. All you need to do is install and activate the WPBakery Page Builder plugin on your site and you’ll instantly have access to a ton of awesome design elements and layouts for creating beautiful pages with easy.

What makes the WPBakery Page Builder for WordPress plugin stand out are two things: its drag and drop functionality, and the ability to edit and style your pages on both the backend and the frontend of your site. This means you can preview your changes in real-time.

There are 40 content elements you can add to any page, which are split into four categories: content (e.g. text blocks, buttons, accordions, video background, rows, columns), social (e.g. Facebook Like, Pinterest), and structure (e.g. Raw HTML, Raw JS). You can also add insert the default WordPress widgets (e.g. search, recent comments, recent posts).

You might be wondering how to add sliders to your site with WPBakery Page Builder? Under the “Content” tab, you can choose “Posts Slider” to add a slider to your site that shows your latest WordPress posts.

WPBakrey add element

It’s a useful element, but as you’re about to see, thanks to the support of third party plugins like Smart Slider 3, you can create stunning sliders that take WPBakery Page Builder to the next level.

Creating a WordPress Slider with WPBakery Page Builder

WPBakery Page Builder is a premium plugin, which you can purchase from CodeCanyon for $46, or directly from the WPBakery website for $45. You can try it for free using WPBakery’s text drive demo site.

WPBakery page builder

Once you’ve installed and activated the plugin, you can choose to customize your site on the backend or frontend of your site. When you create a new page, you’ll see the WPBakery Page Builder button below the page title.

Add new page

For this example, we’ll look at how to add a posts slider to your site using the WPBakery Page Builder’s frontend editor. This feature allows you to display a slider on your site that pulls in content from you latest posts or pages. Feature images will be used in your slides.

First, select the “+” icon in the top-left of the page. It will reveal the full list of elements. Find “Posts Slider” and add element.

Create a post slider with WPBakery

A modal will appear where you can customize the settings for your posts slider. Give it a name and choose from one of three slider types: flex slider face, flex slider slider, and nivo slider.

You can also choose from several options:

  • Number of slides
  • How many seconds to auto rotate images
  • To display posts or pages
  • To display a description
  • To output the post/page title
  • To link to a post, bigger image, custom links, or no link
  • Thumbnail size
  • Specific post/page IDs,
  • To display specific categories
  • To order slides
  • To sort order
  • Advanced options for CSS

WPBakery Post Slider settings

The options are fairly basic as far as creating sliders go, which is great if you just want a very simple slider for displaying your latest blog posts. Here’s what my final slider looks like:

Post slider in WPBakery

Unfortunately, you can’t create image sliders or carousels with WPBakery, or create more complex sliders with layers, text, buttons, videos and more. For more advanced customizations, you can use a third party plugin like Smart Slider 3 to boost the existing functionality of WPBakery.

Smart Slider 3 is a great choice for integration with WPBakery as it adds an element directly to the page builder so you can create a WPBakery slider while editing your page.

The new way to build a Slider
Next generation visual editor, customizable animations & effects, and access to hundreads of premade templates.
Get Started
Smart Slider 3 - The new way to build a Slider

Using WPBakery Slider and Smart Slider 3 Together

Smart Slider 3 has integration with WPBakery Page Builder and the two plugins work well together. After you have created your slider in Smart Slider 3 and you are ready to publish it, you can use the shortcode of the slider or create a WPBakery element.

Let’s see how you can publish your slider with WPBakery.

1. Add new WPBakery element

Go to the page where you want to add your slider. And click on the “Add Element” button.

wpbakery element

2. Select Smart Slider 3 element

Then select the Smart Slider 3 element from the list.

wpbakery slider element

3. Select the slider what you want to show

After that, paste the slider ID or alias, or click on the “Select slider” button and select your slider which you want to add.

select slider

4. Save the page

Finally, you will see that a Smart Slider 3 element has been added to your page and you can freely save your page.

wkbakery smart slider 3

Other Reasons to Use WPBakery Page Builder and Smart Slider 3

As you’ve seen, WPBakery Page builder offers basic posts slider functionality that is great if want to show your latest posts on your site. However, installing a feature-rich slider plugin like Smart Slider 3 alongside WPBakery will give you more creative, advanced options for creating sliders.

The free version of Smart Slider 3 offers just the right number of customization options to help you create a beautiful slider, all without feeling overwhelmed by features. Unlike other free slider plugins, it also lets you work with layers — an essential feature of any slider plugin.

Smart Slider Examples
Smart Slider Examples

In addition to the huge library of 180+ customizable sliders, blocks, and page templates you get access to with Smart Slider 3, one feature you’ll appreciate if you’re running an ecommerce store is the ability to create WooCommerce product sliders and carousels. With this feature, you can easily add product sliders anywhere on your site, complete with titles, descriptions and buttons.

Product Carousel in Smart Slider 3

Creating sliders for testimonials, videos, logos, social media, and more isn’t a problem either. You can easily create any kind of slider with Smart Slider 3. WPBakery Page Builder does let you integrate with other slider plugins, like Revolution Slider, and offers addons for creating sliders and integrating with other slider, but you’ll need to pay for access.

Broken Grid Slider

Using a powerful slider plugin like Smart Slider 3 together with WP Bakery also gives you the ability to create advanced sliders and blocks that feature layered animations, social icons, image hover effects, dynamic content, parallax scrolling effect, Google fonts, the Ken Burns effect and more.

Wrapping Up

If you’re looking for a way to create beautiful custom sliders for your WordPress site, using WPBakery Page Slider and Smart Slider 3 together is a great option. Smart Slider 3 lets you extend WPBakery existing capabilities so you can great beautiful sliders that match your site design. You can get started for free with Smart Slider 3. Start using it with WPBakery today for a powerful suite of WordPress customization tools!

Do you use WPBakery Page Builder on your site? If you have any questions about using WPBakery Page slider and Smart Slider 3 together, let us know in the comments below!

Raelene Morey

About Author

Raelene Morey is the Chief Bird at Words By Birds , an agency that helps WordPress businesses make better content. Computer science grad turned newspaper journalist and ex-managing editor at WPMU DEV. Raelene has been developing WordPress sites for over 10 years.