Articles in Comparison Tag — Blog — Smart Slider 3 — WordPress Plugin Extending the world of WordPress and Joomla. Take your website to the next level with our plugins. Download Smart Slider 3 today and get started building beautiful sliders with confidence using our advanced editor. Tue, 23 Jan 2024 13:58:07 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.3 Are You Looking for a Free Slider Revolution Alternative? https://smartslider3.com/blog/free-slider-revolution-alternative/ Tue, 23 Jan 2024 07:00:32 +0000 https://smartslider3.com/?post_type=blog&p=6779 Slider Revolution is by far the most popular paid slider plugin for WordPress. But did you know there are more fantastic free Slider Revolution alternatives that are just as good as the Slider Revolution? Yes, that’s right – you can design and build beautiful sliders for your website without having to pay for a premium […]

The post Are You Looking for a Free Slider Revolution Alternative? appeared first on Smart Slider 3 — WordPress Plugin.

]]>
Slider Revolution is by far the most popular paid slider plugin for WordPress. But did you know there are more fantastic free Slider Revolution alternatives that are just as good as the Slider Revolution? Yes, that’s right – you can design and build beautiful sliders for your website without having to pay for a premium plugin.

📚 Table of contents

  1. Free Slider Revolution Alternatives
  2. Top Free Slider Plugins
  3. About Slider Revolution
  4. Smart Slider vs. Slider Revolution
  5. Alternatives with Smart Slider
  6. Creating a Free Slider
  7. Reasons to Choose Smart Slider
  8. Smart Slider Pro
  9. Conclusion

Plugins as Free Slider Revolution Alternatives

Do you want to create a slider for free? Then you may look for a free slider plugin in which you can create stunning sliders easily. I collected 11 slider plugins, which you can use.

  1. Smart Slider
  2. Metaslider
  3. Master slider
  4. Gutenslider
  5. Soliloquy
  6. Slide anything
  7. Ultimate Responsive Image Slider
  8. Slider by 10Web
  9. Genesis Responsive Slider
  10. Cryout Serious Slider
  11. Crelly Slider

From the 11 plugins, I tested 4 of which are potential Slider Revolution alternatives: Smart Slider, Metaslider, Master slider, and Gutenslider.

I plan to choose a Rev slider template, which I’ll try to recreate with each plugin. It won’t be easy, because a free plugin can’t fully replace a paid plugin, but let’s try it! I chose this News slider template. There are thumbnails on the left, and there is a white box with a heading, a description, and with a button.

Slider Revolution template

What are the Most Important Features of this Slider?

  • Full-width layout
  • Background images
  • Layers: heading, text, button
  • Thumbnails on the left
  • Autoplay
  • Fading background
  • Animation on the layers
  • Responsive slider

I will check in each plugin, can I recreate the same-looking slider as this template, or what alternatives can I use. Then I will choose the best, and check it for more details.

Smart Slider

Smart Slider is a powerful and perfect free Slider Revolution alternative. This is one of the most popular slider plugins in the WordPress repository, has a 5-star rating and 800,000+ active installs. With this plugin, you can create sliders and blocks without coding knowledge.

Free feature slider

Live Preview
The drag-and-drop editor helps you create the slider as you have imagined, and the available layers can be freely used. The heading, text, images, buttons, YouTube, and Vimeo layers help you create a slider that you can structure in rows and columns. You can easily create a responsive slider, and every layer is customizable.

Smart Slider Dashboard

With Smart Slider I could almost fully recreate the same looking slider as the Rev slider template, only one feature is missing: the layer animation. Layer animations are available only in the Pro version.

MetaSlider

With 600,000+ active installs, Meta Slider is one of the most popular slider plugins for WordPress. But is it the best free slider plugin?

Don’t get me wrong, Meta Slider is a great plugin if all you want to do is create a simple image slideshow. The user interface is minimal and easy to understand and use. Creating a slideshow is a straightforward process – just upload your images, add captions, and then you can set the dimensions and transition effect.

Metaslider dashboard

Unfortunately, layers are pro features, so you’ll need to upgrade if you want to create more than just simple image slideshows with this free Slider Revolution alternative.

Master slider

This well-designed slider plugin, Master slider provides an easy-to-use interface for creating simple sliders. Quickly get started with one of eight free slider templates or build your own custom slider from scratch using this Revolution Slider alternative.

Master slider editing

With the available settings, you can configure the dimensions for your slider, basic transitions and speed, and simple navigation settings like thumbnails or bullets. Unfortunately, Master Slider doesn’t have the option to use layers, it’s a Pro feature.

Gutenslider

Gutenslider is a slider plugin in WordPress, which was created for Gutenberg, the default editor of WordPress. It can be a great free Rev slider alternative because it’s easy to use. Additionally, you don’t need to learn a new interface because Gutenberg is known by every WordPress user. You can use the known Gutenberg blocks as layers, which is a great advantage of a free slider plugin.

Slider editing in Gutenslider

The Top Free Slider Revolution Alternative Plugins

My top four free Slider Revolution alternative plugins (in order) are: Smart Slider, Gutenslider, Master Slider, and MetaSlider.

Smart Slider
Metaslider
Master Slider
Gutenslider
Full width
Background images
Layers: heading, text, button
Thumbnails
Autoplay
Background fade
Layer animation
Responsive settings

If you want to create a layered slider with text, images, and video, Smart Slider is your best bet. For a basic, simple slider, Gutenslider is easy to use and works well with Gutenberg.

So which option is the best alternative to Slider Revolution? Easy. Smart Slider. It’s totally free and offers a lot of features such as Slider Revolution. But can be Smart Slider the perfect free Slider Revolution alternative? Let’s see it in more detail.

What does Slider Revolution Offer?

Slider Revolution is a responsive Slider Plugin that you can use to create modern sliders for your WordPress site. This is a paid plugin that usually comes with premium themes, but you can buy it if you want.

Slider Revolution has an extensive option that you can use it. What can you use it for?

  • Hero image block. With this plugin, you can create a simple block for your page which can be a great header.
  • Video slider. You can create a video gallery, or you can put videos on your slides.
  • Full-width slider. If you want to create a simple full-width slider, Slider Revolution has an option for that, too.
  • Post slider. You can display your latest post in your slider.

It sounds really good, and Slider Revolution indeed has a lot of options. However, it is a paid plugin, the starter package costs $29/year. If you don’t have a subscription package, the one-time payment is $79 only with 6-month support. If you have a low-budget project then you may have no money for a premium plugin. What can you do? Find a free plugin that can be a really good Slider Revolution alternative. Smart Slider can be a great choice for that.

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

Slider Revolution vs. Smart Slider

Before you start working with a new plugin, maybe you are curious about what the difference is between Slider Revolution and Smart Slider.

Slide Editing

Each plugin has a visual slide editor, so you can instantly see the result, and you can customize your slider. I think Smart Slider’s interface is more user-friendly, but each plugin has its own logic, where you can find the options.

Interface of Smart Slider and Slider Revolution
The interface of Smart Slider (on the left) and Slider Revolution (on the right)

Layers

Both plugins come with the standard layers – heading, text, button, and image. And you can use them freely. There isn’t a limit on how many layers you can use, you can create your own design with both plugins.

Available Building Options

While in Slider Revolution you can put layers on your slider to the position where you want, Smart Slider offers 2 options for positioning: a default and an absolute position. The Absolute position is similar to what Slider Revolution offers: you can drop your layers everywhere on the canvas.

In addition, the Default positioning works like a page builder: you can put your layers in rows and columns, and align them vertically or horizontally. To make space between the layers, you can use padding and margins. Why is it good? Because of that, you can create a responsive slider with minimal effort, and it will look great on every device. Also, you have the option to combine these 2 modes by which you can achieve every design as you imagined.

Content and Canvas editing modes
Textual layers in the Default position (blue color) and image layer in Absolute position (purple color)

Animations

Slider Revolution has more options where you can animate your slider or your layers. You can put animation on your layers, on your background, you can use Ken Burns or parallax effect, so there are many options. However, in the free version of Smart Slider, you can use only background animations. Layer animations and a lot of other effects are available only in the Smart Slider Pro.

Speed

I have created a Smart Slider free demo with Slider Revolution to test the speed of each plugin. I published both sliders into a new empty page.

  • In each slider, I used the same images, sizes, and fonts
  • I tested them with other plugins deactivated
  • Cleared the cache before the speed test
  • I used Gutenberg to publish the sliders.
Free Slider Revolution
Free Smart Slider demo created with Slider Revolution

Let’s see the results.

Smart Slider Free Slider Revolution
Requests 20 21
Page size 709 kB 1 MB
Load time 199 ms 316 ms

As you can see, Smart Slider was faster than the Slider Revolution, and also the page size is less than the other plugin’s page. I didn’t use any optimization settings, which can speed up the results – so the speed test was made with the basic settings of each plugin. As we can see from the results, we can say that Smart Slider is faster, which isn’t bad for a free plugin, right?

Free Slider Revolution Alternatives with Smart Slider

Smart Slider can be a great free Slider Revolution alternative because you can create more kinds of sliders with this plugin. Let’s see some examples of what kind of sliders you can create with Smart Slider as with Slider Revolution.

Hero Image Block

Free security hero block

Live Preview
If you want to create a hero image block for your site, Smart Slider can be a great free Slider Revolution alternative. With Smart Slider, you can put Heading, text, image, and button on your slide, and you can position it where you want.

Hero image blocks can be used as the header of your page, and with Smart Slider, you can easily create it. Just select the layers you want to use, and then publish them on your site. There are more templates that you can start with, but you can build your own design, too.

Video Slider

Free video slider

Live Preview
Revolution Slider offers the opportunity to create video galleries. Smart Slider Free has the option to create video sliders, too. There are 2 video layers available: YouTube and Vimeo. There aren’t any other free slider plugins that I’m aware of that offer that kind of functionality.

A lot of people use YouTube or Vimeo videos on their websites because these media elements can call the visitors’ attention. These layers are simple, because YouTube and Vimeo host the videos, so you don’t need to download any video on your site. All you need is to copy the video’s link or ID, and you can create a free responsive video gallery.

🎓 Mp4 background videos are available in the Pro version of Smart Slider.

Full-Width Slider Alternative

Free fullwidth slider alternative

Live Preview
Free Slider Revolution slider alternative can be the full-width type slider of Smart Slider. A full-width slider fills the 100% width of your screen, and it looks good on any page. Using this kind of slider is a great way to highlight your product or content on your page, and it also looks good.

You have the option to design the controls like bullets or arrows, use a background color or image, and you can put layers on your slider. It’s up to you what kind of slider you want to create.

Post Slider

Free Post Slider

Live Preview
Post Sliders can be very useful parts of your website. They show all the recent or featured posts to catch the visitors’ attention, and they encourage your visitors to spend more time on your blog. Smart Slider offers variables that you can use, and these variables change dynamically depending on the content of your posts.

Can you Create the Same-Looking Slider in Slider Revolution and Smart Slider Free?

Maybe you have questions about a free slider plugin that can be a premium slider alternative. Let’s check a Slider Revolution example from their library, and see how we can create a similar layout with Smart Slider free.

I choose a hero image from the Slider Revolution’s templates. This block has a grey background image, a heading, 2 texts, and a CTA with a hover effect on the left side, and 3 images that overlap each other on the right.

Slider Revolution Example
Slider Revolution Example

This layout can easily be created with Smart Slider free. I have created a 1-row – 2-column structure. I’ve put two heading layers, a text layer, and a button into the first column. In the second I’ve put an image from a laptop. The mobiles are in the column but in absolute position, so this image is above the laptop image. Between the texts, I’ve set some padding which makes space between them.

Slider Revolution free alternative
Slider Revolution’s template alternative was created with the free version of Smart Slider

With Smart Slider, you can easily create a responsive slider. In most cases, it is enough to make the font size smaller on different devices with the text scale. If you use a row, then it can be a great solution to wrap the columns below each other. Also, you can change the order of these columns, so you can put the images on the top.

Free responsive slider
Mobile view of the slider

Can Do:

  • Layers in a structure
  • Overlapping images
  • Responsive on mobile
  • Customizable typography and colors
  • Background color or image

Can’t Do:

  • Layer animations
  • Layer parallax

You can use animation and effects in the Pro version of Smart Slider.

Reasons to Choose Smart Slider as a Free Slider Revolution Alternative

    • Free: Smart Slider is a free plugin with premium features. If you don’t want to pay for a plugin, it can be a great alternative.
    • Layers: Heading, text, buttons, images or videos. Create the slider that you’ve imagined.
    • Create the layout you want: You can create a complicated layout thanks to the rows, columns, and positioning options.
    • Customizable controls: You have the option to customize the arrows, bullets, and thumbnails. Position them, change their colors, or hide them on devices.
    • Ready to use templates: Smart Slider has a template library as Slider Revolution. Just choose one, change the content, and publish it.

Free caption slider

Live Preview

  • Responsive sliders: You can create a slider that looks good on any device.
  • Free support: It’s also important to mention that Smart Slider offers free support to every user. Also, you don’t need to wait weeks for a response.

What More Can Smart Slider Pro Offer?

You may think that Smart Slider free doesn’t have a lot of features like Slider Revolution, however, the Pro version of Smart Slider has a lot. You can consider choosing the Pro version. Why? The Standard package costs $49 and you will get lifetime support and updates while Slider Revolution’s one-time payment package costs $79 only with 6-month support.

Slider Revolution Smart Slider Pro Smart Slider Free
Price Support Price Support Price Support
1 domain $95 6 months $49 lifetime free lifetime
3 domains $250 6 months $99 lifetime free lifetime
5 domains $415 6 months $149 lifetime free lifetime
10 domains $765 6 months $249 lifetime free lifetime

Smart Slider and its 24 layer types give you much more creative freedom. If you do choose Smart Slider as your new slider tool, then layers for icons, progress bars, counters, and even mp4 videos can be used to add content-rich slideshows to your website.

Premium Smart Slider template

Live Preview
The pro version offers lots of effects that you can set, like Parallax, Ken Burns, Particle, and Shape Divider. All of them are customizable and can cheer up a single slider, too. You can add layer animations on the individual layers of your slides. They can come in, loop, go out, repeat, so you can create even more complex animations if you want.

Conclusion

Despite the fact that Smart Slider is a free plugin, it offers solid features that are on par with Slider Revolution. The Default and Absolute positions, drag-and-drop slider building, rich layers, and stunning templates, let you build impressive sliders that leave basic scrolling sliders in the dust.

Not convinced? Check out Smart Slider’s example sliders and see for yourself. It’s easy to put a slider together in just a few minutes. It’s totally free, what can you lose?

The post Are You Looking for a Free Slider Revolution Alternative? appeared first on Smart Slider 3 — WordPress Plugin.

]]> How to Migrate from Slider Revolution to Smart Slider? https://smartslider3.com/blog/migrate-from-slider-revolution/ Mon, 24 Jan 2022 14:00:02 +0000 https://smartslider3.com/?post_type=blog&p=44807 Smart Slider and Slider Revolution are two very popular plugins for creating sliders. They’re both super powerful and let you create gorgeous sliders. However, you might come to a decision to switch to Smart Slider. This can raise the question: how to migrate from Slider Revolution? What’s the fastest way to have your sliders up […]

The post How to Migrate from Slider Revolution to Smart Slider? appeared first on Smart Slider 3 — WordPress Plugin.

]]>
Smart Slider and Slider Revolution are two very popular plugins for creating sliders. They’re both super powerful and let you create gorgeous sliders. However, you might come to a decision to switch to Smart Slider. This can raise the question: how to migrate from Slider Revolution? What’s the fastest way to have your sliders up and running?

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

Can Smart Slider automatically recognize Slider Revolution’s sliders?

Every plugin stores and handles their data in a different way. For this reason, neither Smart Slider nor Revolution Slider will recognize the sliders you have created in the other plugin. Unfortunately, there’s no automatic way to migrate your Slider Revolution sliders. So you’ll need to create the sliders you have made in Revolution Slider again in Smart Slider.

How to migrate from Slider Revolution to Smart Slider?

Although both plugins offer very similar features, there are major differences between them. For example, their UI looks very different, so it can take some time to learn how to find your way around. Additionally, the options might have different names. So in this guide I’ll walk you through the most important differences between the two plugins. After you finish reading, you should get a headstart on creating your sliders.

How to start to migrate from Slider Revolution?

Before you start the migration process, it’s best to understand the main differences between Smart Slider and Slider Revolution. One of the most important differences between the two plugins is the “levels” where you work. Slider Revolution has two levels: a dashboard and a slide editor. On the Dashboard you can see every module you have created. Clicking any module takes you to the configuration of the module. Everything happens on the same screen. You can configure your module (such as it’s size or layout) at the same right-hand panel where you edit your layers.

Slider Revolution levels: Dashboard (left), Slider Editing screen (right)
Slider Revolution levels: Dashboard (left), Slider Editing screen (right)

Smart Slider has 3 levels. First, there’s the Dashboard where you can see the sliders you have created. Once you go to any slider, you end up in the Slider Settings page. This is where you can configure the slider itself, such as changing its size, layout or controls. You can also find the list of your slides on this page, at the top of it. To be able to work with layers, first you need to go to the Slide Editor. You can do that by clicking on any of the slides. Here you can set the background of the slide. Also, you can add and configure your layers on this screen.

Smart Slider levels: Dashboard (left), Slider Settings (middle), Slide Editor (right)
Smart Slider levels: Dashboard (left), Slider Settings (middle), Slide Editor (right)

Creating your first slider

One of the most important tasks in a slider software is to create a slider. However, the exact process is a little bit different in every slider plugin. For example, they might ask for different data (such as name or dimensions) before creating the slider. Or, they might not ask anything at all, and just use some default settings.

How to create a slider?

When you create a slider in Smart Slider, first you need to click on the New Project button. Then, the plugin asks you whether you want to start from scratch or import a template. If you choose to start from scratch, you’ll need to select what kind of slider you want to create. For example, you’ll need to choose the type, size and layout of your slider.

In Smart Slider there are 4 slider types available: Simple slider, Block, Showcase and Carousel. The Simple type is equal to Slider Revolution’s Slider type. The Block is the same as Scene. Revolution Slider’s Carousel is what Smart Slider calls Showcase. The type that Smart Slider calls Carousel is like the Showcase type. The main difference is that it can only display the slides without cropping. Additionally, it can display an even number of slides as well.

How to change the slider size?

Smart Slider asks you to set the size of your slider right before you create a new slider. Should you need to change it, you can always do so at Slider settings → Size tab.

How to change the slider type and layout?

Smart Slider asks you to select the type and layout of your slider before creating it. If you choose the wrong type, or change your mind, you are free to change them later. To change your slider’s layout, go to Slider Settings → Size tab. If you need a different slider type, you can change it at the Slider actions → Change Slider type.

How to enable and configure the Autoplay?

The autoplay is not enabled by default in Smart Slider. If you want your slider to rotate automatically, you need to turn it on at Slider settings → Autoplay. Here you can select the duration of the slides, and the action that stops and resumes them. You can also enable the autoplay button and indicator here.

Working with layers

Layers are the elements you can place on your slider to create its content. There are different types of layers for every purpose. For example, there is a layer to display images and there’s another layer to display texts. Layer creation happens in the slide editor, and you can get there by clicking on the slide you want to edit.

How to add a layer?

To add a layer in Smart Slider, you’ll need to go to the Slide Editor first. Simply click on the slide you want to edit and you’ll end up there. You can add layers by clicking on the green plus icon on the left side. Choose the layer you want to add then drag’n’drop it to the place where you want it to appear.

How to work with layers in Smart Slider?

In Slider Revolution you can work with the layers similarly to image editors. You can drag the layer anywhere within the canvas. However, Smart Slider has a unique editing mode, which we call Default positioning. This editing lets you work with your layers as if you’d use a page builder.

Say you have 5 layers in the middle of your slide and you want to move them to the left. In Slider Revolution you need to move the layers one by one. You also need to be careful to ensure that the distances you set don’t change. In Smart Slider the whole process is a lot more simple. Instead of manually moving all layers, you can change the inner align on their parent element. As a result, all layers move to the left side, without having to touch them. Additionally, all spacing will remain the same.

Commonly used layers

In Smart Slider there’s a separate heading and text layer. You can use the heading layer to create a h1-h6 heading or a div. However, you can create text wrapped in p tag using the separate text layer.

The other main difference is the video layer. In Slider Revolution there’s only one video layer. At this layer you can choose whether you want to display an HTML, YouTube or Vimeo video. However, in Smart Slider all videos have their own separate layers. So, if you want to display a YouTube video, you need to add a YouTube layer.

How to style a layer?

You can style your layers by going to the Style tab of the Layer Window. This is where you can set the color, family, size and font-weight of your texts. Also, you can pick a background color for better legibility. If you create a button, you can also set the border radius option at the Style to create rounded corners.

How to add layer animations?

In Smart Slider you can add a layer animation to every layer. To add an animation to your layer, go to the Animations tab of the Layer Window. You can add 3 types of animations to each layer:

  • In: The incoming animation that makes your layer appear on the slide.
  • Loop: It’s a continuous movement. You can use it, for example, on an image to make it rotate.
  • Out: This animation “hides” the layer from the slide, so it will no longer be visible.

Publishing your slider

After you have created your slider, all that’s left to do is to publish it. You can publish your slider using it’s shortcode or Gutenberg module. You can find the shortcode of your slider at Slider Settings → General tab. Additionally, you can find a Smart Slider module in some of the most popular page builders, like Divi or Elementor.

When you migrate from Slider Revolution, make sure you replace your old sliders with the new ones everywhere.

Building your first slider in Smart Slider

Knowing the basics of where to find certain options is not the same as seeing things done. So here’s a mini-tutorial on how to build a simple slider with a couple of layers on top of a nice background.

The first slider you'll create in Smart Slider to help you migrate from Slider Revolution
The first slider you’ll create in Smart Slider to help you migrate from Slider Revolution

If you keep up with the tutorial, you’ll be able to migrate your Revolution Slider modules to Smart Slider in no time!

Creating the slider

Go to Smart Slider and click on the New Project button. As we’re building from scratch, choose “Create a New Project”. Here you’ll need to select the basics settings of your slider. Since the slider I am creating will have only one slide, I’ll choose “Block” at the Project Type. Give the slider a meaningful name to make it easier to find it later. Next, set the slider size.

You do not need to make the width 1920px to have a full width slider. The Layout setting will decide how big your slider will actually be. In fact, generally we recommend leaving the width on 1200px – it makes it easier to work with your content. The image I’ll use is 1920x800px so I will set the height to 800px. As I want a full width I will leave the layout on Full Width.

Create Slider screen and its options
Create Slider screen and its options

Once all is set, click on Create.

Creating a slide

After you press the Create button, Smart Slider takes you to the Slider Settings page. Here you can configure your slider. For the basic slider we will create, the default settings are fine. So, let’s create our first slide.

Locate the large green button with the “Add Slide” label and click on it. Here you can choose the kind of slide you want to create. Our slide is based on an image, so let’s choose the Image type. WordPress’ Media Library opens and you can select your image.

Adding layers

You can add (and manage) layers in the Slide Editor. Click on the slide you added in the previous step to get there. When you go to the Slide Editor, the Layer Window with the Slide options opens automatically. We don’t need to make any changes to the slide, so let’s just ignore this window now.

What we need to do is to add some layers. Let’s start with the main heading. On the left side, just under the breadcrumbs, there’s a green button with a + sign on it. Click on this button to open the layer list.

When you migrate from Slider Revolution, You can add layers to your slide from the Add Panel
You can add layers to your slide from the Add Panel

Configuring the main headline

We need to create a main headline, so choose the Heading layer under the Basic category. You can drag’n’drop it to the slide, or you can just click on it and it will be added automatically. After the layer is added to the slider, the Layer Window opens and you can start customizing the layer. At the Content tab, change the text the layer displays. Then select the tag that’s best for your content.

heading layer content

After your text and tag is set, go to the Style tab. This is where you can set the size, family and color of the text. Set your heading as you’d like it to look like.

heading layer style

You can set a maximum width for every layer to avoid them getting too wide. Select the layer, locate the small white dot at its side and start dragging it until you get the desired width.

Setting up the description

There’s a descriptive text just under the headline. To create such text, add a new text layer. Change it’s text the same way as you did at the heading. The main difference between the heading and text layer is the tag they use to display the content. The text layer always uses the p tag. However, at the heading layer you can choose from a div or h1-h6 tags. Once your content is set, style your layer and give it a maximum width.

Adding the buttons

At this point the only thing your slider misses is the two CTA buttons. When adding the text and heading layers, you probably noticed you can only put them below one another. However, you can’t move them next to each other.

To create a layout where two (or more) layers are next to each other, you’ll need to add the Row layer. The Row layer, by default, has two columns, and you can place layers into each of them. Since the columns are next to each other, any layers you place into the columns will be next to each other as well.

So, add your row, and place a button to each column. Set the label of your buttons and style them. Use the Border radius option at the Style tab, under Border to create rounded buttons.

Configuring the row

Once your buttons are set up, you’ll notice that they’re too far away. To solve this problem, simply set a maximum width for the row.

Here’s a tip if you’re aiming for a pixel perfect result. Select the columns and change their Inner align option. This option tells the content inside them (the button layer) how to display. So, at the left column, choose the right align, and at the right column, choose the left align.

When you migrate from Slider Revolution make sure you align the layers in the column properly
Aligning the layers inside the column

Creating space around the layers

You can create space between the layers using paddings and margins. Layers by default don’t have any margin set. However, the rows and columns by default have 10px padding on each side. You can remove or change that if you want. But right now these paddings create a nice spacing between the text and button layers. I want the content to have a bigger distance from the bottom of the slide. So I will set up a bottom margin for the row.

Set a bottom margni to the row
Set a bottom margni to the row

However, you should not use paddings or margins for aligning. They’re only for creating distances. So, if you want the content to be at the top of the slide, don’t use these options. Instead, find the container of the layer and change its vertical align option. In this case the container of the layers is the Content layer.

Responsive settings

The slider you create might not always look well on all screens immediately. Sometimes, you need to make a couple of small responsive changes. Usually you need to reduce the font size and the spacings to create a good look on small screens. So, let’s get this slider to look good on tablet and mobile.

To check how your slider looks on tablet or mobile, use the device selector on the top bar.

Make sure you migrate from Slider Revolution and keep the good responsive look by using the Device Selector
Using the Device Selector you can check and edit your slider on small screens

Configuring the tablet view

First, let’s switch to tablet view. The main issue here seems to be the font size. Also, the bottom spacing could be smaller. Let’s focus on the font problem first. If you click on any layer at tablet (or mobile) view, you’ll see a font icon appearing. Click on it to access the Font resizer which you can use to adjust the font size for this particular view. It will not affect other views.

Make sure you reduce the Max width of this heading layer as well. The other layer’s texts are not that big, so you don’t necessarily need to reduce them.

Configuring the Mobile view

Once you’re satisfied with the tablet look, switch to mobile view. There’s a lot more to do here, but again, let’s start with reducing the font size. While doing so, notice how the slider height is reduced as your font gets smaller. The basic behavior of Smart Slider is that the height of the slider gets bigger if the layers need more space. Reduce the font size of the heading and text layer to make the height smaller.

If you have changed the column alignment before, then you’ll need to change that back to center now. Don’t worry, this option will not affect the desktop view. In fact, any option that’s marked with the little device icon is device specific. So you can freely change it in tablet or mobile without affecting the other views.

Change the column alignment on mobile
Change the column alignment on mobile

Here’s a tip on how to have a more even spacing around your content. Reduce the row’s bottom margin and set a top padding to the slide.

Adjust the spacing for a better mobile look
Adjust the spacing for a better mobile look

If you have any layers you don’t want to show on a particular device, click on the layer, select the “…” menu and pick the device you don’t want to see the layer at the Hide on option. You can find the layer anytime later at the Layer List.

Hide some layers on mobile to create the perfect look after migrating from Revolution Slider
Hide some layers on mobile

Conclusion

Smart Slider and Slider Revolution are both great products to create sliders. However, they have many differences in their UI, name and location of features and so on. Having to convert your sliders manually is a huge and difficult task. Hopefully this guide can help you migrate from Revolution Slider more easily.

The post How to Migrate from Slider Revolution to Smart Slider? appeared first on Smart Slider 3 — WordPress Plugin.

]]> Best WordPress Slider Plugins Compared https://smartslider3.com/blog/best-wordpress-slider-plugins/ Tue, 10 Nov 2020 11:00:18 +0000 https://smartslider3.com/?post_type=blog&p=33759 Sliders, carousels, slideshows. There’s no other design element that’s as versatile as they are. And there’s no other element that divides web designers and developers as much as sliders do. Nonetheless, clients love and demand to have sliders. So if you’re in a position where you need to find the best WordPress slider, you’re lucky. […]

The post Best WordPress Slider Plugins Compared appeared first on Smart Slider 3 — WordPress Plugin.

]]>
Sliders, carousels, slideshows. There’s no other design element that’s as versatile as they are. And there’s no other element that divides web designers and developers as much as sliders do. Nonetheless, clients love and demand to have sliders. So if you’re in a position where you need to find the best WordPress slider, you’re lucky. I’m here to help you with this hands-on guide.

📚 Table of contents

  1. How to recognize the best WordPress slider plugin?
  2. Slider Revolution
  3. Smart Slider
  4. LayerSlider
  5. Master Slider
  6. Meta Slider
  7. Soliloquy
  8. Speed test
  9. Pricing
  10. Final results

How to recognize the best WordPress slider plugin?

There are so many sliders out there, and of course, they all claim they’re the best sliders for WordPress. In fact, there are many great sliders but how do you find the best one? What makes a slider plugin the best WordPress slider? Well, finding the all-in-one slider solution for WordPress isn’t as hard as it seems. Simply find a plugin that matches the following criteria:

1. Interface

Even if you don’t think it’s a big deal, it actually matters how your slider plugin looks on your WordPress admin. If the UI is ugly, it’s likely hard to navigate, and creating a slider will be fiddly. So, the best WordPress slider plugin needs to have an interface that looks great and is a joy to use.

2. Ease of use

Slider plugins tend to have many options to allow you to create whatever you want. Too many options can be confusing, especially if they’re not laid out logically. The best WordPress slideshow needs to be simple to use. Having to add a new slider or slide shouldn’t stress you out.

3. Available layers

In sliders, you can create content with layers. They allow you to add text, images, buttons and other cool stuff to your slideshow. The best slider plugin needs to have layers. Additionally, it needs to have enough layers to create a modern slider.

4. Styling

It’s not enough to be able to add many layers to your slideshows. You need to be able to style them, to make the slider fit into your website nicely. So I’ll check the available styling options each slider plugins offers.

5. Slider navigation

A slider contains a bunch of slides. Your visitors need to be able to go through them in an intuitive way. For example, using arrows, bullets or thumbnails. These controls need to fit into the color scheme of your website, and also remain visible over the images. In other words, the best slider plugin for WordPress must offer customizable navigation options.

6. Post slider

Being able to create a slider from their posts is a must-have for any serious blogger. Post sliders help to showcase the amazing content they have on their site. Of course, not all websites have blog pages, but running one can have SEO benefits.

7. Effects

The best WordPress slider needs to help you deliver that wow factor. In other words, it needs to have all the fancy effects you can use to amaze your visitors. You have only 50 milliseconds to create a good impression. And your slider needs to help you with that. You need effects like Ken Burns or Parallax, which look great on any website. Also, a trendy transition effect to switch slides can make the slider more appealing.

8. SEO friendly

There’s a common misconception that sliders are bad for SEO. This might be true for some sliders, especially if they’re outdated. But it’s not so true for modern sliders. Additionally, if a slider wants to be the best WordPress slider plugin then it must be SEO friendly as well.

9. Responsive

In 2020 around 50% of all website traffic is coming from mobile phones. That’s an insane amount of small screen usage, but it’s perfectly understandable. Phones are always around in people’s pockets or bags, ready for browsing. For this reason, your website needs to look great on mobile. Similarly, you need a responsive slider, that’s a joy to look at on a small screen.

What are the best WordPress slider plugins?

The better a plugin is, the more people use it. So, it makes sense to think that the best WordPress sliders are those, which are used by most people. During my research, I found 6 super popular plugins, used by tens of thousands of people all over the globe. How do I find the best slider plugin for WordPress? I’ll compare the most popular plugins I’ve found. I’ll use the criteria listed above for my comparison and see how each plugin performs. These are the six best WordPress slider plugins I choose to compare:

  • Slider Revolution
  • Smart Slider
  • LayerSlider
  • Master Slider
  • Soliloquy
  • Meta Slider

As I want this article to be the most comprehensive one, I’ll be as objective as possible when I test the sliders.

Slider Revolution

If you’ve ever searched for a slider to use on your site, I’m sure you’ve come across Slider Revolution. It’s a super popular slider plugin for WordPress. It’s bundled in many premium WordPress themes which might be the reason for its fame.

People generally choose themes based on the features the theme offers. Often this feature comes from a plugin bundled into the theme. Premium themes usually bundle slider plugins, because they’re great eye candies. Thus, they make the theme more appealing to potential buyers.

But bundled plugins have a huge disadvantage: they come without a license key. As you know, you need to activate premium plugins to be able to update them. But you also need an activated copy for the premium services. These services typically include the support and the template import. So, if you use a bundled plugin, you get a premium plugin for free, but without any support. Unfortunately, this isn’t a very good bargain.

Interface ⭐⭐⭐⭐

The first thing I noticed about the Revolution Slider’s interface is that it’s incredibly dark. By default, I found it hard to read, as there are gray texts on the black background. Turning on High Contrast mode helps a lot with the legibility.

Interface of one of the best WordPress slider plugin, Slider Revolution
Slider Revolution interface

Slider Revolution uses the same interface for the slider configuration and slide editing. In other words, there’s no separate page where you can configure your slider. The large area on the left is where you can set up the slide. The sidebar on the right side is where the settings are. For example, this is where you can name the slider, or style the layers you added. It’s an interesting approach, and it takes a lot of clicking around to get used to it.

Ease of use ⭐⭐⭐⭐

What caused the most difficulties for me is the lack of tooltips. In fact, Slider Revolution uses icon buttons in many places for example, at the top of the sidebar, or above the timeline. Unfortunately, it’s hard to guess what these icons do, sometimes even after clicking on them. It would be nice to have a tooltip that tells the name of the option on hover. This could help to give a clue about what’s going to happen if the icon is clicked. I did find the help mode, but it didn’t work on these icons.

Slide editor in Slider Revolution
Slide editor in Slider Revolution

Rev Slider has a drag and drop interface to create the layout of the slide. As a result, it’s easy to learn and use. However, the positioning leaves a lot to be desired. Imagine this: you want to create a heading, a text and a button layer, and they should start from the same position. By default, layers only stick to each other when they touch. If they’re at least 1px away, they no longer stick. As a result, there’s a good chance they’ll be misaligned. To be able to do pixel-perfect positioning, you need to enable the grid or layer-based adjustments.

Luckily, Revolution Slider offers many great slider templates. You can import them with a single click and customize them to your liking. As a result, you can have a great looking slider for your WordPress website fast. Additionally, you won’t need to spend time positioning your layers.

Available layers ⭐⭐⭐⭐⭐

You can find the basic layers and some more in Slider Revolution. There’s a text layer where you can put a heading or paragraph text. You can add buttons, images, videos, audios and icons to your slides. If you want to darken the background image to increase the legibility of the layers, use the Shape layer.

The available layers are enough to create any kind of layout you can imagine. As a result, it’s safe to say that Slider Revolution is a multipurpose slider plugin. So, you can use it to create high-quality sliders for your WordPress site.

Styling ⭐⭐⭐⭐⭐

You can configure any layer to your liking with Rev Slider. At text layers, you can set the font size, family, color, weight and even the letter spacing. But there’s also an option to set the background color, padding and margin on each layer.

The first confusion I bumped into was when I wanted to create a button for my slider. I needed to change the normal and hover background, but they are in different places. The Style, which has an artist palette icon, has all styling options. For example, that’s where I found the normal background color option. However, the hover color is under the Hover settings, which has a mouse cursor icon. There’s some logic behind this, as the hover color activates on a mouse interaction. In any case, it’s an interesting choice to put these options so far away from each other.

Slider navigation ⭐⭐⭐⭐

There’s no default navigation enabled when you create a new slider module. In other words, if you want arrows, bullets or thumbnails on your slider, you need to enable them yourself.

You can choose from many predefined navigation styles. Hovering on their name shows them on the slide editor which makes it easier to choose the one you like the most. You can also change the colors to ensure the navigation stays visible over the slide content. I thought that setting a normal background and turning off hover would make the same color show for both. Instead, Slider Revolution sets some kind of default color as the hover background. So if you want the same color for hover and normal state, you need to set it at both.

Post Slider ⭐⭐⭐⭐

Being able to create sliders from the posts is something most bloggers want to do. Post sliders can highlight the latest post, and bring them more readers. They can also showcase the most popular posts from your blog. As Slider Revolution is one of the best WordPress slider plugins, it can create post sliders.

What’s great about the post slider is that it allows creating separate layouts for the post. Additionally, it’s simple: you just need to create more slides. For example, if you create two slides, your odd and even posts can have different layouts. In other words, it’s possible to create a different layout for every other post in your slider. Since the type of the slider is dynamic, you can’t put non-dynamic slides to your slider. This could be used, for instance, to create an intro or an outro to the dynamic slides.

Post Slide in backend and frontend in Rev Slider for WordPress
Post Slide in backend (left) and frontend (right)

When you edit the slide, you can’t see the actual post data in your slides. As a result, it can be difficult to create a proper layout. That’s because the length of the content at the editor and the frontend can differ. Although it’s easy to build the slide, you won’t know how much space the content needs. As a result, the editing gets complicated, because layers can overlap. This can cause legibility problems. Additionally, overlapping content looks unprofessional.

Effects ⭐⭐⭐⭐⭐

Slider Revolution is full of amazing effects to create truly gorgeous sliders. Unfortunately, many cool effects are available after you download their addon. Some of these popular effects are the before & after, particle, or typewriter effects. Obviously, addons have their own advantages and disadvantages. First, not including everything in the plugin makes the UI less bloated. As a result, it’s easier to navigate and more user friendly. Additionally, people will only have the effects which they actually use.

Addons in Revolution Slider
Addons in Rev Slider

However, there are some disadvantages to the add-on approach. First, it’s the fact that the site will have more plugins that need to be maintained. Whenever you update Slider Revolution, you need to ensure you update its add-ons. Otherwise, there can be compatibility problems. For example, some effects won’t appear on the sliders.

It’s also important to mention that add-ons are only available after activation. Since Slider Revolution is often bundled with themes, this can help to generate revenue. That’s because themes can’t include license keys, so their customers won’t be able to use the add-ons. But there are many great and popular effects amongst the add-ons, so there’s a good chance people will update.

SEO friendly ⭐⭐⭐⭐

When you add text to the slides, Slider Revolution wraps it inside rs-layer tags. However, that’s not really good for SEO. Additionally, a Slider Revolution user claims they noticed an improvement in their keyword positions. I searched for content wrapped in the rs-layer tag. Then Google displayed a message about not finding any matches for my search. Even if the link to the page was just below this block, it seems to prove this user’s point. Google does not like the rs-layer tag.

WordPress slider SEO via Revoltuon Slider
SEO results with Slider Revolution

So, if you want your site to rank better, be sure to change the wrapper tag. Change h1 to h6 tags for your headings, and p tags for other texts. When you add images, their alt text is pulled from the WordPress Media Library. If you update it at WordPress, it’s updated at the slider as well. This way you won’t have to work twice.

Responsive options ⭐⭐⭐

Slider Revolution has the same responsive behavior as most sliders have. They scale down everything while keeping the aspect ratio of the slider. As a result, the layers can get too small and illegible on mobile devices. Luckily, you can improve the result and create a much more mobile-friendly slider by hand. However, first, you need to turn on the mobile editing to be able to make changes. This suggests you can create sliders that don’t need mobile-specific changes. Unfortunately, I wasn’t able to create a slider like that.

Mobile editing needs to be enabled manually in Slider Revolution
Mobile editing needs to be enabled manually in Slider Revolution

After you enable the mobile editing, you can move layers around. It’s also possible to adjust font sizes to ensure legibility. Additionally, you can hide layers on mobile, or on other devices. This is useful, for example, if you don’t have enough space for the layer. But you can also hide the layer if it’s not important for mobile users.

Smart Slider

Smart Slider is another popular WordPress slider plugin. Its free version is the fastest-growing slider plugin in the WordPress.org repository. So, Smart Slider is a popular slider plugin, and people love it for a good reason. It’s easy to use, has many features, and a huge amount of dynamic slide generators.

☝️ Note: Smart Slider has a free version on WordPress.org plugin library. In this article, I’m focusing on the Pro version.

Interface ⭐⭐⭐⭐

Smart Slider has a clean and colorful interface. First, you arrive on the Dashboard where you can find the sliders you created. Also, this is the place where you can create a new project. Clicking on any slider thumbnail takes you to the slider settings page. This page displays the slides in the slider on the top, and the settings below. You can edit the slide by clicking on their thumbnail. The slide editor takes up the entire screen, which is great because it gives enough space to edit the slide in a comfortable manner.

Interface of Smart Slider, the best WordPress slider plugin
Interface of Smart Slider

Smart Slider has an incredible amount of options. Just the Slider settings page has 9 tabs full of them. While so many options can be confusing at first, they’re placed very logically. For example, on the Controls tab you can find all options you can use to switch slides.

The three levels (dashboard, slider settings page and slide editor) are easy to distinguish. The UI differs enough to give you a clear idea of where you are right now. But the elements look so similar that you can always tell you’re still using Smart Slider. Also, there’s breadcrumb navigation on the top left corner.

Ease Of Use ⭐⭐⭐⭐

Creating a slide with layers is the easiest and fastest amongst the sliders I’ve tried for this article. That’s because Smart Slider has two positionings: Default and Absolute. Absolute positioning is what you can find in every other slider. You drag and drop the layers anywhere, and they scale up or down with the ratio of the slider. As a result, they can overlap on smaller screens. In any case, they make responsive editing seem like a nightmare.

Slide editor in Smart Slider
Smart Slider: Slide Editor

On the other hand, you can’t freely drag and drop Default layers. Instead, you need to position them from their container, which can seem restrictive at first. But you can learn it quickly, and create sliders with really great results.

The layer styling options are available in a floating window, which you can drag anywhere. As a result, there’s no need to scroll up or down to see the changes you made. Also, since the layer window doesn’t have a fixed space, it doesn’t take up useful editing space.

Additionally, Smart Slider has many amazing slider templates. You can download them with a single click from the dashboard. Then change anything you want, including replacing texts, images or colors. The slider templates give you a great head start and also help to learn the plugin. If you don’t need a whole slider, just a slide, take a look at the slide templates in the Slide Library.

Available Layers ⭐⭐⭐⭐

There are 24 layers in Smart Slider. That’s an incredible amount of elements to work with. Obviously, there’s a heading, text and a button layer, which is already enough to create a hero header. But there are video layers to enrich your slider with YouTube, Vimeo and MP4 videos.

Having so many layers can cause choice overload. You might build your content with a layer, then find out there’s a better layer for your needs. As a result, you’ll need to style your layer again, causing time loss. For example, there’s a simple heading layer which has text animation. This animates the full text you entered, but if you want to animate certain words only, you’ll need the animated heading layer instead.

Styling ⭐⭐⭐⭐

You can find rich styling options in Smart Slider, so you can configure your layers to your liking. At the font family, you can choose from a huge list of Google Fonts, or you can write the name of the custom font you want to use. You can also adjust the font-weight, the line height, set background color, add a border and border-radius. But there are too many options you can play with, which can be confusing.

Additionally, you can save the styles you created and apply them to layers of the same type layer. For example, if you styled a cool CTA button, you can save this slide and use it at other buttons. Although styling a layer is easy, this option can save a lot of time.

Slider Navigation ⭐⭐⭐⭐

The typical slider navigation options are available in Smart Slider. This includes the arrows, bullets and thumbnails as well. The best thing about these controls is that they’re not theme-based. As a result, you can freely configure their look and position. However, the button that brings up the styling options bends into the UI so seamlessly that it’s easy to miss.

There are preset styles of course, what you can select, but you can customize these as well. For example, you can choose the arrow preset that has an orange background, and change the color to blue. Additionally, you can upload your own arrow image as well.

Post Slider ⭐⭐⭐⭐

You can create sliders from your post, and custom post types as well. What’s more, you can mix these dynamic slides with the non-dynamic slides. So it’s not the slider that’s connected to the post, like at Rev Slider, but the single post slide. If you want to create a different styling for the second, or third slide, you can create more dynamic slides. However, you need to adjust their settings to make them show just the second or third slide.

Post Slider in Smart Slider
The backend (left) and frontend (rigth) result match exactly when you create a Post Slider in Smart Slider

Another thing that makes the post slide really great is that you can actually see the result in the editor. So you’ll know how much space the layers need when you create your layout. However, it doesn’t really matter, because you will work with Default layers anyway. These layers will make space for themselves, and won’t overlap.

Effects ⭐⭐⭐⭐

As mentioned above, Smart Slider has many options. Naturally, the available features include cool effects as well. First, let’s see the effects you can add to background images. The most popular one is the Ken Burns effect which you can set for every slide or individual slides. But you can also select background animations and the parallax effect, too. Additionally, the parallax effect is available for the layers as well. Now that I have mentioned layers, it’s possible to animate them with cool layer animations.

Also, you can find many slider level effects in Smart Slider. For example, you can use the Particle effect to give some subtle movement to the slider. But you can use the animated Shape divider for a modern look. Unlike at Revolution Slider, these effects are immediately available. So you don’t have to download and maintain add-ons.

Seo Friendly ⭐⭐⭐⭐⭐

Smart Slider is another slider you can use for SEO purposes. You can specify alt and title text at every slide background and image layer. At the heading layer, you can choose from h1 to h6 tags to help to structure your content. If you need simple paragraphs for the content, use the text layer. Additionally, search engines can easily read the content you write into Smart Slider.

Smart Slider is the best WordPress slider for SEO
Google easily reads the content from Smart Slider

When you add images from the WordPress Media Library, Smart Slider sets the alt tag you wrote there. Later you can adjust the content of the alt tag at the layer window if you need to.

Responsive Options ⭐⭐⭐⭐⭐

The best thing about Smart Slider is the Default positioning. As mentioned above, for first-time users it can seem limited and harder to use. But when it comes to the responsive result, it couldn’t be any better. The layout I have created with Default layers didn’t actually need any responsive changes. In fact, the slide looked fantastic without having to do anything. As opposed to Absolute positioned layers that other sliders have. Additionally, these layers take longer to position.

Smart Slider, the best Responsive slider
Mobile result in Smart Slider (left) and on the frontend (right) without making any changes

Should you need to make responsive adjustments, here’s what Smart Slider can help you with. First, you can use the Text Scale option to adjust the font sizes. If your texts are too small, you can increase them with this option. But if your texts are too big, you can use the Text scale to decrease the font size. It’s also useful if you want to make your heading text fit into one line. Additionally, you can hide layers on any device. As a result, you can hide unnecessary layers on mobile. But you can also replace complex desktop layers with simpler ones on mobile.

LayerSlider

Layer slider is yet another slider that’s typically bundled in premium themes. You can find it in themes like Avada, Enfold or Bridge. As mentioned above, bundled plugins have many disadvantages. First, you can’t get premium support. Then you can’t download templates or update the plugin via WordPress. In LayerSlider’s case, some features are also locked behind the activation wall. For example, the popup usage feature needs a license key.

Interface ⭐⭐⭐⭐

The interface of LayerSlider is very minimalistic, mostly just gray and white. The only place where you can find colors is the activation area. When LayerSlider is not activated, there’s a blue Activate button, and a red label. The latter turns green after the activation. Because of this, the interface feels a bit empty.

Interface of Layer Slider
Interface of Layer Slider

Ease of use ⭐⭐⭐

Editing a slide in LayerSlider involves lots of scrolling. You need to scroll up to see the layers, then scroll down to see the configuration options. It’s an unfortunate placement, and it makes the editing process tiring. To avoid this problem, make sure you toggle the Popup editor. It creates a floating box from the settings, so you can style your layers much more comfortably.

Layer Slider Slide Editor
Layer Slider Slide Editor

It’s good that layers snap to one another, but they need to be really close. Otherwise, it’s easier to use the arrow keys or the positioning options at the Styles to set their position.

When I worked with LayerSlider, I wanted to create a specific design. The first part of the design was breaking a text into three lines. I tried to do this by limiting the width of the layer using its dragging points. However, as it turned out, these dragging points don’t limit the size of the layer in the way I thought. In fact, they only increase or decrease the font size. As a result, the text I entered stayed in one line. I found this approach very interesting, and rather confusing. Additionally, leaving line breaks at the layer’s content field had no effect either. I found only one way to limit down the width of the layer. I had to manually write the size at the Styling options.

Available layers ⭐⭐⭐⭐

There are 8 layers in LayerSlider. That doesn’t sound a lot, but it’s enough to create good content. The most basic layers, like the image, text and button are available. Additionally, you can add video or audio, or write your own HTML codes.

Styling ⭐⭐⭐

LayerSlider offers a bunch of configuration options for the layers. You can set the font size, family or color for the layers. Although there are not many fonts in the dropdown, it’s possible to write the name of the custom font you want to use. This dropdown is present at some other options, like the font size, too. The problem with them is that they make the editor seem restrictive because it seems you can’t actually set anything but the suggestions.

Layer Slider styling options
Layer Slider styling options

Another good option is the rotate, which lets you create interesting layouts by rotating the layers. But there are some options which don’t seem to work well. For example, the min font size option has no effect in the slide editor. It seems to work fine in the preview, but completely messes up the layer in the frontend.

Slider navigation ⭐⭐⭐

You can add bullets and arrows to the slides. However, their look depends on the selected slider skin under Appearance. Even if there are many skins to choose from, you can’t configure the navigation further. In other words, if the arrows have a white background in the skin you choose, you’re stuck with that color.

Post Slider ⭐⭐⭐

Creating a post slider is totally possible with LayerSlider. But there’s a catch: you will need to create as many slides as many posts you want to show by hand. Although you can create one slide, and duplicate it, so you won’t need to work a lot, if you need to change something on the slides, like a color or font size, you’ll need to edit each slide.

You can also mix post slides and normal slides within a single slider. It’s a really useful feature.

Effects ⭐⭐⭐⭐⭐

You can find popular effects like the Ken Burns effect in Layer Slider. Additionally, there are layer animations to enrich sliders. There’s also a timeline, although it’s easy to miss. Additionally, it’s possible to copy and paste the effects you set. You can also enable the parallax effect on the layers. Additionally, you can enrich your slides with many great looking slide transitions.

Layer Slider Slider effects
Slide transition effects in Layer Slider

SEO ⭐⭐⭐⭐⭐

At the text layers, you can choose between h1 to h6 and p tags to display content. As a result, LayerSlider can help you write a structured text for SEO purposes. This is good news because it means you can use the content of the slider to earn a higher rank in search engines. Additionally, LayerSlider pulls the alt tag for the images from the Media Library. Thus, you won’t need to edit the alt tag twice.

Search engines can read text from Layer Slider
Search engines can read text from Layer Slider

Responsive options ⭐⭐

LayerSlider scales up and down the slider to match the set aspect ratio. As a result, the text sizes might end up being too small. Luckily, the developers have thought of that and made a minimum mobile font size option. But there’s a catch: the result doesn’t show in the editor. Additionally, the minimum mobile font size doesn’t show in the preview either. So you can only test how the slide looks with the set font size on the frontend. This means doing lots of back and forth editing.

Also, LayerSlider has an option to hide the slider you made on a mobile device. Alternatively, you can hide the slider above or below the given screen width, in pixels. In other words, if you want to have a decent looking slider on mobile, you’ll need to create and maintain two sliders. Unless you create simple image galleries or add just a few lines of text, you’ll need separate sliders.

Apart from the above options, LayerSlider has no other responsive tools. These options are not enough in 2020 when so many people browse from their phones. Modern websites need responsive content, which means LayerSlider isn’t suitable for these sites.

Master Slider

Master Slider is another popular slider you can use on your WordPress site. It allows you to create image slideshows with layers. Additionally, it’s simple to use, and touch-friendly as well. Also, it offers a bunch of cool slider templates to start with.

☝️ Note: Master Slider has a free version on WordPress.org plugin library. In this article I’m focusing on the Pro version.

Interface ⭐⭐⭐⭐

The interface of Master Slider is very simple. The Dashboard, where the sliders are, looks like WordPress’ own post page. As a result, even new Master Slider users will be able to navigate easily.

Master Slider interface
Master Slider interface

However, the slider’s settings page doesn’t look so close to WordPress. First, the options are available via horizontal tabs. These tabs make the slider configuration, slide editor and slider control pages available.

Ease of use ⭐⭐⭐

Master Slider offers the familiar drag and drop editing. What makes drag’n’drop editing good is that it’s intuitive and easy to learn. Layers can snap to each other, but only when they’re close. For example, if you want your layers to have the same distance from the left, it’s easier to set it manually. Just write the number in the Left field. Or you can use the arrows keys for positioning. First, snap the layer to another one that’s already positioned. Then use the up/down keys to move the layer.

Slide Editor in Master Slider, a WordPress slider plugin
Slide Editor in Master Slider

But there’s one thing that makes using Master Slider even more uncomfortable. The slide you’re editing, and where the layers are, is above the area where you add and configure them. When you add a new layer, it appears in the top left corner. However, the top left corner isn’t usually visible even when you don’t have any other layers yet. Constantly having to scroll up and down is time-consuming and uncomfortable. Additionally, they don’t have the undo-redo option. So if you accidentally edited the wrong layer, you need to revert your changes yourself.

Available Layers ⭐⭐⭐⭐⭐

Master Slider has 5 layers available. These are text, image, button, video and hotspot. At the text layer, you can find an editor that looks like WordPress’ Classic editor. Chances are you’re already familiar with it. But if you’ve only used Gutenberg, you can still learn this editor easily. Additionally, it allows you to decide if you want your text to be a paragraph or an h1 to h6 heading.

Styling ⭐⭐⭐

As mentioned above, styling the layers in Master Slider is super uncomfortable. It involves a lot of scrolling up and down due to the unfortunate position of the slide, layer list and style options. Once you’re at the style editor, you’ll be happy to find the most common styling options. For example, you can change the font family, size, color and weight. You can also save your style as presets and re-use them later.

Master Slider handles the background of the text layer rather interestingly. I’ve added a two-line text (6 words total) and decided to give them a nice background color. Interestingly, the editor only set the background of the first word. Additionally, it broke up the text, putting every word in a new line. But the frontend looked fine, which made me question if I can trust the editor at all.

Slider navigation ⭐⭐⭐

When you create a new slider, the only default option to switch slides is swiping on the slides. To be able to have arrows or bullets, you need to enable them. First, you need to go to the slider controls tab of the slider.

Adding a navigation in Master Slider
Adding a navigation in Master Slider

There are seven different controls available, including the arrows and bullets. However, none of the controls have styling options. In other words, there’s no option to change the default colors. The only way to have different colored arrows is to change the skin at the Slider settings tab. Luckily, the set skin displays on the preview, so I could check how the slider looks before publishing.

Post Slider ⭐⭐⭐

When you create a new slider you can choose to create a post based slider. Then you can configure how you want your slides to look. Since the whole slider is pos-based, you can’t mix dynamic and non-dynamic slides. Additionally, it’s also not possible to create two kinds of post slides in the same slider. So, you can’t create different layouts for different posts.

At the Post Settings, you can select, which categories should MasterSlider filter posts from. You can also exclude or include posts based on their ID. Both are very handy options to have.

Effects ⭐⭐⭐

MasterSlider has a handful of cool effects to choose from. First, there’s the layer parallax which looks cool and makes the site look impressive. Then, there’s another nice effect, the pattern overlay. This effect can increase the legibility of the text by placing a black or white pattern above the image. As a result, the image will look darker or lighter. Additionally, it makes the picture more interesting.

Unfortunately, popular effects like the Ken Burns are not available in Master Slider. This effect is something people often look for in a slider plugin. So, they need to look further than Master Slider.

SEO friendly ⭐⭐⭐⭐⭐

Master Slider claims to be the most SEO friendly slider. Indeed, it has a valid HTML structure. When you create text layers, you can set h1 to h6 tags, or leave them as paragraphs. Additionally, the alt tags of the images are pulled from the media library.

Google reads the text Master Slider creates well
Google reads the text Master Slider creates well

Responsive options ⭐⭐

The slide editor has desktop, tablet and mobile editing options. It seems to be possible to edit most options on mobile devices, and that’s great. However, the beautiful mobile layout I created in the editor looked nothing like what I made on my site. As it turned out, the editor, for some reason, keeps the set height, but the frontend does not. In fact, I had to enable custom slider size and set the size I want on my own. Unfortunately, that’s not what people expect after seeing the result in the editor.

Master Slider responsive result
Responsive result in the editor (left) and on the frontend (right)

Meta Slider

Meta Slider is the most popular free slider plugin in the WordPress.org repository. At the time of writing, it has 800,000+ active installations. So, a lot of people like the free version. But there’s one other thing that makes the Free version so popular: the Pro version doesn’t work without it. Does this huge user base make Meta Slider the best WordPress slider plugin? Let’s find out!

☝️ Note: Meta Slider has a free version on WordPress.org plugin library. In this article, I’m focusing on the Pro version.

Interface ⭐⭐⭐⭐

Meta Slider has a simple interface divided into two sections. First, there’s the top bar, where you can search your sliders, or add a new one. Additionally, this is where you can add slides to your current slider, or preview it. Second, below the top bar there’s another horizontal area. This is where you can find the sliders you already made. Then, the biggest part of the page is the Slide configuration area. Next to it, there’s a sidebar where you can configure some aspects of the slider.

Interface of Meta Slider, best WordPress slider plugin
Interface of Meta Slider

When you go to MetaSlider, you’ll end up on the Slider configuration page of the first slider in the slider list. So, the plugin assumes you’ll want to work on the slider that’s in the first place in the list. It’s convenient if you drop the slider that needs the most frequent changes there. Otherwise, it’s not really useful, they could have left the configuration part of the page empty.

Ease of use ⭐⭐⭐

Meta Slider has a very few options, which makes it simple to use. On the other hand, there are a couple of things that make the plugin seem a lot more complicated. For example, if you want to add layers, you need to add a special “Layer Slide”. If you realize this after you added all images where you want to have layers, you’ll be disappointed. There’s no option to convert to a “layer slide”, so you’ll have to start again. While you can add many image slides together, it’s only possible to add layer slides one by one. This makes the whole process of adding a new slide confusing.

Layer Slide editor in Meta Slider
Layer Slide editor in Meta Slider

Available layers ⭐

Most slider plugins offer a bunch of different layers to add content with. However, Meta Slider offers a single layer. It’s a text-based layer, but you can put an image into it. As a result, you can enrich your slides with more interesting content.

Styling ⭐⭐

Meta Slider has the basic styling options to allow you to style your content. But there’s a catch: most options are super limited. For example, the Font color has 40 predefined colors to choose from. Then, at the font family, you can choose from 8 common (and boring) font families. The font size options are also limited.

Meta Slider provides an option to access the HTML code of the layers you added. You can make adjustments there, like changing colors or adjusting the font family or size. So, if you know, and are willing to, touch a couple of lines of HTML code, you can create better-looking layers. That’s not something you’d expect from the world’s #1 slider plugin.

Slider navigation ⭐⭐⭐

Meta Slider integrates four slideshow types you can choose. These are Flex Slider 2, Nivo Slider, Responsive Slides and Coin Slider. These slideshow types affect how the available arrows, bullets and thumbnails display. Although it would be great if the navigation would have customization options.

Post slider ⭐⭐⭐

When you create a new slider, you can choose to create a Post slider. This will create a special slider where you can filter posts into. Additionally, you can filter posts from custom post types into the slider. This all sounds really cool until you want to start configuring the slides.

WordPress Post slider in Meta Slider
Post slider in Meta Slider

Unfortunately, Meta Slider provides no visual way to edit the content of the post slides. In other words, you can only edit and customize what you want to see on the slides via HTML coding.

Effects ⭐

The only effects Meta Slider offers are the layer and background animations. There’s no parallax or Ken Burns Effect. Although, you can add the latter via custom coding. Even if layer animations look good, they aren’t enough for modern websites.

SEO friendly ⭐⭐

Meta Slider claims you can use it to “create powerful, SEO-optimized slideshows”. However, at the layers, you can’t set h1 to h6 tags unless you edit their HTML source. Usually, people use plugins to avoid having to code things. Well, using Meta Slider you can’t avoid having to code your way around to create the slider you want to have.

Search engines can read the content of Meta Slider
Search engines can read the content of Meta Slider

Apart from these problems, search engines can read the content Meta Slider creates. You can also write alt and title tags for the background images. The images inside the layer, however, read the alt tag from the Media Library once when you select them at the slide. The alt tags can’t be changed later unless you pick the image again or touch the code.

Responsive options ⭐

The Slide editor of Meta Slider doesn’t have the option to edit or even view the slider on mobile. Additionally, the Preview has no device selector either. In other words, there’s no way to edit or even see the result the slider will produce on mobile. It does have a basic responsive behavior, though. The slides scale down, keeping the set aspect ratio, and the layers scale, too. But this way the texts can shrink too much and become illegible. As a result, this is not the best WordPress slider plugin for content slides.

Soliloquy

Soliloquy is a popular slider plugin for WordPress. The premium version is based on add-ons, similar to Slider Revolution. However, unlike Rev Slider, you only get all add-ons by purchasing one of the two highest packages.

☝️ Note: Soliloquy has a free version on WordPress.org plugin library. In this article, I’m focusing on the Pro version.

Interface ⭐⭐⭐⭐⭐

The interface of Soliloquy slider couldn’t look closer to WordPress’s own interface. First, the slider list looks exactly like the Posts page of WordPress. Then there’s the slide configuration page which is very similar to the post editor. So when you configure your slider, you feel like you’re not creating a slider, but configuring a post. I’m not saying looking like WordPress is a bad thing, but it does limit what you can expect your slider to do.

WordPress slider Soliloquy interface
Interface of Soliloquy

Ease of use ⭐⭐⭐

Even when all add-ons are installed, Soliloquy doesn’t have many features. As a result, there’s no bloat in this slider, which makes it super easy to use. However, there’s no preview. So you can’t see what the options do and how they look in the slider without publishing the slider first. It would be a lot less of a problem if you didn’t have to keep scrolling up and down to save the slider. So it would have been nice from the developers if they had figured out something to avoid this.

Soliloquy has very basic slide editor
Soliloquy has very basic slide editor

When you set the title and caption of a slide, there are navigation buttons to quickly go through all slides. The problem is that the captions you added or changed are saved individually. For example, if you have two slides that need captions, you need to save both of them or you’ll lose the caption. When you switch away with the arrows, there’s no indicator that your changes are not saved yet. Additionally, there’s no notification when you close the editor either.

Available layers

There are no layers in the Soliloquy slider. You can add “edit” the slides and give a title and a caption to each image, but that doesn’t count as a layer. In fact, this is the first slider I’ve tested for this article, where I wasn’t surprised to see that there are no layers. A layer editor wouldn’t really fit into the look of the WordPress post editor.

Styling ⭐⭐

The styling is another part where the Soliloquy slider doesn’t shine. There are two themes you can choose from that define how your slider looks like. You’ll get three more with the Themes add-on, but that’s all. If you want a simple slider to display images or videos, I have no doubt Soliloquy slider will serve you well. But it will let you down as soon as you want to create a content slider, or just need some styling options.

Slider navigation ⭐⭐⭐⭐

The most popular navigation options are available in Soliloquy WordPress slider. There are arrows, bullets and thumbnails you can turn on. However, the look and position of the arrows and bullets depends on one of the two themes the plugin offers. If you have the Themes add-on, there are three more skins. They do look somewhat good, but they’re very basic. Additionally, they give the impression of an outdated slider.

Post Slider ⭐⭐⭐

To be able to create post slides, you’ll need the Featured Content Addon. This add-on is available in the two highest packages. So you won’t be able to create post slides by purchasing any Soliloquy Pro package.

Effects ⭐⭐

The only effects Soliloquy slider has are the slide transitions. Unfortunately, there are only four effects you can choose from, which isn’t a lot. The slides can fade, scroll vertically, horizontally or continuously horizontally.

Although it’s possible to adjust the caption transition delay, there isn’t any other option to set. For example, it’s not possible to set if the captions should slide or fade in. As a result, they’ll always fade in, regardless of the slide transition setting.

SEO Friendly ⭐⭐⭐⭐

Soliloquy slider has a clean and valid HTML structure. That’s always nice from the SEO perspective. When you add the slide, Soliloquy pulls the alt tag from the WordPress Media Library. Of course, you can edit it at the slide editor. Additionally. search engines can see the content the plugin creates well. The only SEO related feature I missed was the ability to set h1 to h6 tags.

Google can read content from Soliloquy
Google can read content from Soliloquy

Responsive options ⭐⭐

I created a slider with captions to see how that looks on mobile. While the images resized correctly, I was astonished to see the captions were gone. By default, Soliloquy slider hides the captions on smaller screens. Luckily, there’s an option to show the textual content on mobile, so I turned them back. Then I looked at the slider again and immediately understood why they chose to hide the text. As my image had a couple of lines of text, it covered the image completely. Additionally, the text even overlapped the content above the slider. All in all, the slider looked terrible on mobile with the captions enabled.

Soliloquy slider responsive behavior
Captions enabled (left) and disabled (right) on mobile devices

To sum it up, Soliloquy slider does a great job of resizing the images for small screens. At the same time, it does a terrible job of displaying their captions.

Comparing the speed of the best WordPress slider plugins

There are many criteria the best WordPress slider plugin must fulfill. It needs to have all the amazing features to create a stunning slider. Additionally, it needs to load fast, because the websites need to care about their speed. So they need to choose the fastest loading plugins. In other words, when you choose a slider, you need to consider its impact on your page’s loading time. A resource-heavy slider will have a huge negative impact on your site’s speed. As I want to find the best slider for WordPress, I have to compare the speed of each plugin.

Testing environment

I wanted to run the speed test on sliders that have the same content. Since not all sliders have the same features, it was a bit difficult to create the same looking slider in all. Finally, I decided to create a slider like the Image slider, template, without Google Fonts. I run the test using the Hello Elementor theme. I tested each slider with no other plugins being active at the same time.

All images and texts were the same in each slider. Each slider uses its default settings. I haven’t enabled any optimization options, like lazy loading. Additionally, I cleared the cache before each speed test.

First, I ran the speed test on the WordPress Sample page, to give you an idea about Hello Elementor theme’s speed. The internet speed used for the tests was 10Mb/s.

Speed test results without lazy loading

I’ve run two separate tests. In the first test I checked each plugin without using any kind of optimization, such as lazy loading. This makes the speed test fairer for those plugins, which don’t have built-in lazy loading.

Hello Theme Revolution Slider Smart Slider Layer Slider Master Slider Meta Slider Soliloquy
Loading time 533ms 1.94s 848ms 1.39s 1.06s 750ms 644ms
Page Size 90.7kb 1.1MB 951kb 1.7Mb 1Mb 688kb 584kb
Requests 6 16 19 22 19 17 18

The fastest loading slider was Soliloquy. It also produced the smallest page size. The second fastest and most lightweight slider was Meta Slider. The third palace is Smart Slider’s, which is slightly slower than Meta Slider.

Speed test results with lazy loading

Some plugins can lazy load the images. In other words, they can delay the loading of the images, which are not essential to see the slider. So, I decided to run a test where each plugin can showcase their full speed. Here are the results:

Hello Theme Revolution Slider Smart Slider Layer Slider Master Slider Meta Slider Soliloquy
Loading time 533ms 1.09s 657ms 1.39s 713ms 750ms 644ms
Page Size 90.7kb 1.0MB 761kb 1.7Mb 625kb 688kb 584kb
Requests 6 16 14 22 15 17 18

Although Soliloquy doesn’t have a lazy loading feature, it still finished in the first place. After turning on Lazy Loading Smart Slider loaded faster than Meta Slider. So it was the second fastest slider, barely slower than Soliloquy.

Pricing

In this article, I’m focusing on premium slider plugins, which means I have to mention their pricing. Most slider plugins have many packages to choose from. To make the comparison fair, I’ll compare the price, support and update period of their one site package. So, here’s how much each slider costs if you want to use them on a single WordPress site:

Slider Revolution Smart Slider Layer Slider Master Slider Meta Slider Soliloquy
Price $95 $49 $49 $34 $79 $19
One time payment
Support period 6 month Lifetime 6 months 6 months 1 year 1 year
Update period Lifetime Lifetime Lifetime Lifetime 1 year 1 year

If we compare the prices alone, Soliloquy is the cheapest option, as it costs $19. But for this money, you get updates and support for one year only. Unless you never update anything on your site, you’ll need to renew the plugin for a second year. So, for two years Soliloquy costs you $38.

So which WordPress slider plugin is worth its price most? Obviously, it needs to use a one-time payment model. There are only four plugins that offer lifetime updates with a single purchase. Although Slider Revolution, Layer Slider and Master slider offer only 6-month support.

There’s simply no guarantee that you won’t need support after 6 months. Imagine the plugin has a major update 8 months after your purchase. Some options were moved around, but you can’t ask where they are now, because your support period is over. So, you need to purchase the plugin again to have another 6 months to ask questions.

There’s only one plugin that offers lifetime updates and support: Smart Slider. So the WordPress slider plugin that is worth the price the most is Smart Slider.

Which one is the best WordPress slider plugin?

Here’s how the scores stack up (in order) for each WordPress slider plugin I’ve tested for this article:

Revolution Slider Smart Slider Layer Slider Master Slider Meta Slider Soliloquy
Interface ⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐
Ease of use ⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐
Available layers ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐
Styling ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐ ⭐⭐ ⭐⭐
Slider navigation ⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐
Post slider ⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐
Effects ⭐⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐
SEO friendly ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐ ⭐⭐⭐⭐
Responsive options ⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐ ⭐⭐ ⭐⭐
Speed ⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐
Pricing ⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐
Total 42 46 38 36 28 35

Based on these scores, the best slider plugin is Smart Slider. Although there’s a learning curve, the plugin is super easy to use. Thanks to Default positioning, the slider looks amazing on mobile. Actually, it looks much better on small screens than any other slider in this article. Additionally, you can use if for SEO purposes, and it has all the fancy effects you’d need for your site. The pricing couldn’t be more friendly: for $49 you’ll get updates and support forever. Additionally, it was one of the fastest plugins.

The second best slider is Slider Revolution. It has many great features and lots of effects. You can (and will need to) make responsive edits to make your slider look good on mobile devices. You’ll also need to make adjustments to ensure the content you create is SEO friendly.

Final Thoughts

Choosing a slider plugin for your WordPress website is never easy. There are just too many options, and not all plugins are equally great. Additionally, they might not be a good fit for your website.

So, which is the best WordPress slider? Which is the plugin you should use on your website? I can heartily recommend Smart Slider. It’s a wonderful plugin which your site can benefit from. It has great responsive behavior, and there’s a chance you won’t need to make any changes. It’s SEO friendly, it’s fast and has nice effects and a friendly pricing. What more could you ask for?

The post Best WordPress Slider Plugins Compared appeared first on Smart Slider 3 — WordPress Plugin.

]]> Best Free WordPress Page Builder Plugins Compared 2021 https://smartslider3.com/blog/best-free-wordpress-page-builder-plugins/ Wed, 30 Sep 2020 06:00:11 +0000 https://smartslider3.com/?post_type=blog&p=5219 Your website needs to stand out of the crowd, not only with its great and unique content but with its design as well. If your site can’t catch the visitors’ attention, they’ll leave immediately. For this reason, you need to create outstanding pages. The easiest way to do that is to find the best free […]

The post Best Free WordPress Page Builder Plugins Compared 2021 appeared first on Smart Slider 3 — WordPress Plugin.

]]>
Your website needs to stand out of the crowd, not only with its great and unique content but with its design as well. If your site can’t catch the visitors’ attention, they’ll leave immediately. For this reason, you need to create outstanding pages. The easiest way to do that is to find the best free WordPress page builder plugin for your website.

Comparing the best free WordPress page builder plugins

In this article, I’ll compare the most popular free WordPress page builders. Of course, there are many great free builders out there, but I’ll only take a deeper look at four of them. The page builders I chose to compare are Gutenberg, Elementor, Beaver Builder and Brizy. I’ve picked them because they’re popular amongst WordPress users. So I’m curious to figure out which one is the best free page builder for WordPress from these four. I’m going to analyze them based on the following criteria:

Best free WordPress page builders
Best free WordPress page builders

1. Interface

When you choose a page builder for your site, you always need to consider how easy it is to use the plugin. After all, you trust it to help you build beautiful pages for your WordPress site. So the plugin you choose can’t have a clumsy interface. The options need to be laid out logically, they can’t be all over the place. In other words, you need to be able to find your way around quickly. So the best free WordPress page builder needs to have an interface that’s a joy to work with.

2. Available Elements

Unless you have the right tools at your disposal, it’s unlikely you’ll be able to create a stunning website. Page builders need to give more than only the basic heading, text, image and button elements. If these basic elements are not available, it isn’t a good fit for a modern website.

3. Styling options

If a plugin wants to be the best WordPress page builder, it needs to offer more than the ability to add content. It needs to provide options to style or design this content to create something unique.

4. Templates

Being able to create what you imagined is great. But having premade layouts to choose from is always welcomed. That’s because these layouts save time and effort. Additionally, they can teach you about what you can create with each plugin, and how to do it.

5. Pricing

Most plugins have a paid version with extra features. Although, in this article, I focus on finding the best free WordPress page builder. But I have to mention the premium plugins. I’ll compare what more you get, and how much you need to pay for it.

6. Speed

The keys to a successful site are: good content, nice design and fast loading. This is why I want to compare the speed of each page builder. I’m curious to see which of them loads the page that has the same layout, content and images the fastest.

📚 Table of contents

  1. Gutenberg
  2. Elementor
  3. Beaver Builder
  4. Brizy
  5. Speed
  6. Pricing

Gutenberg – free page builder plugin built into WordPress

Gutenberg - one of the best Free WordPress page builder plugins

Download

Gutenberg is WordPress’ built-in, block-based page and post editor. It arrived with WordPress 5, back in December 2018. Gutenberg editor has come a long way since its initial release. As a result, today and in the future, it can compete with the best free WordPress page builders.

Interface of Gutenberg ⭐⭐⭐⭐

Gutenberg looks simple and minimalistic, maybe a bit basic. This makes it fast to learn and easy to use. While it’s a visual, drag and drop editor, it operates on the backend. As a result, you might not see everything the same way as they’ll appear on the frontend during editing. Although, themes can style Gutenberg’s backend editor. As a result, the backend and frontend can look as similar as possible.

Interface of Gutenberg, the free WordPress page builder
Interface of Gutenberg

Gutenberg has an inline editor, which feels natural to use. Additionally, you can paste long text with basic formatting into the visual builder. Gutenberg is capable of automatically creating the paragraphs, headings and lists. You don’t need to create any element before. Very handy.

Available elements ⭐⭐⭐⭐

Gutenberg calls its elements blocks. Adding a new block is super easy, and there are more ways to do it. First, there’s one at the top left part of the fixed toolbar. Additionally, you can find one plus icon right below every block you added.

Blocks in Gutenberg, the Free WordPress page builder
Available Blocks in Gutenberg

Styling options ⭐⭐

Gutenberg offers minimal styling options for the elements. You can adjust the font size, color, and background color. But apart from these, there aren’t many options you can tweak. Nonetheless, they’re useful and nice to have, but it would be great if more were available. For example, I would have loved to be able to adjust the font family of the content I added. Unfortunately, Gutenberg offers no way to do that, it can only inherit it from the theme.

Templates ⭐⭐

Gutenberg offers a few selections of block templates under the Pattern tab. These are simple, but great looking layouts that can give you a head start. The designs are simple and there’s not much you can choose from. Nonetheless, they help you save time when you build your page.

Gutenberg block templates
Gutenberg block templates

Final thoughts about Gutenberg

Gutenberg is a simple, but easy to use tool WordPress offers to create nice looking pages. It works best with a theme, that does the heavy lifting when it comes to styling the page. Paired with such a theme, Gutenberg can beat any competition. However, if you pair it with a minimal theme, you’ll probably have a hard time creating the designs you want.

Elementor – the most popular free page builder plugin

Elementor - one of the best Free WordPress page builder plugins

Download

Elementor is the most popular page builder in WordPress.org’s repository. In fact, it’s one of the most popular WordPress plugins. Right now, the repository has only 7 plugins which have more than 5 million installations. And Elementor is one of these super popular plugins. Having so many users, Elementor managed to keep an impressive 5-star rating out of 5,465 reviews.

Interface of Elementor ⭐⭐⭐⭐⭐

Elementor offers a visual frontend editor to create pages. Many users prefer frontend editing, because they can see how the page is going to look like while they edit it. So, frontend editing saves time, because it removes two editing steps. You don’t need to save and refresh every time you want to take a look at the page you’re working on. Additionally, you can edit textual layers inline which is a great addition.

Interface of Elementor, the best free WordPress page builder
Interface of Elementor

The editor is divided into two main sections. First, there is the Elementor panel on the left side, where you can find the configuration options. For example, this is where you can name your page. Then there’s the wider section, which is the actual editing screen. This is the place you can drag widgets to from the left panel and see what you’ve created.

The Elementor panel has a handy search field to quickly find widgets. This helps speeding up the workflow, as you won’t need to locate the widget you want. Although, you might need to be a little familiar with the elements to use it effectively.

Available Elements ⭐⭐⭐⭐⭐

Page builders need to provide at least the most basic elements to fit into a modern website. Since Elementor is one of the best free WordPress page builder plugins, it offers them. You can create headings, add text, images, and buttons. Additionally, you have other handy widgets at your disposal. For example, the image carousel, counter, progress bar or tabs at your disposal. So Elementor doesn’t only offer the most basic widgets, it gives so much more.

Widgets in the best free WordPress Page builder, Elementor
Widgets in Elementor

There’s a huge list of widgets you can choose from to create your amazing looking Elementor page. These elements will help you create beautiful pages for your website in the long run. Additionally, if you would need more widgets, there are many plugins that offer them. Moreover, there are plenty of these plugins which are available free of charge.

Styling options ⭐⭐⭐⭐

Have you installed Elementor on your site for the very first time? I recommend setting up the typographies first. You can find them at Elementor Editor’s Settings Panel > Hamburger Menu > Site Settings. After that you can select these at any widget you add, speeding up your workflow.

Elementor Styling options
Elementor Styling options

There are many options you can use to style every element to your heart’s content. Although there are many settings, they are easy to understand. Even if you aren’t sure what an option does, you can try it with confidence and undo the change if you wouldn’t like them. While there are many styling options, there were a few things which I missed being able to set. For example, the line height can only be a pixel or em value. I’d have loved to simply set it to 1.5, but I couldn’t. The custom CSS giving option would have been a workaround for this. But that option is available in Elementor Pro only.

Templates ⭐⭐⭐⭐

Elementor offers a huge template library, but first, you need to create a free account at them. After that, you’ll have access to a bunch of great looking designs. You can import full pages which then you can customize to your heart’s content. Or you can import separate blocks and assemble the page piece by piece.

Connect to reach Elementor's Template Library
Connect to reach Elementor’s Template Library

There’s an incredible amount of beautiful designs you can choose from. It can be time-consuming to look at all available templates. Luckily, there’s a search option so you can try to find blocks or pages by related keywords. Additionally, at the right side of the Block templates, there’s a category selector. If you’re looking for contact or pricing sections, you can choose it there and see what’s available.

But there is one thing I don’t like about the templates popup. It’s the fact that pro templates are seamlessly mixed with the free ones. You can’t filter for the Pro or Free ones only. As a result, you can spend too much time trying to find a template you both like and can import.

Block templates in Elemento
Block templates in Elemento

You can also save your own designs as templates which you can easily import later. It’s handy when you have the same looking elements across your site, like a subscription or contact block.

Final thoughts about Elementor

Elementor is an exceptional page builder. It’s easy to learn to use, although it might take some time to master. In any case, Elementor allows you to build modern and great looking websites. It doesn’t matter whether you’re a beginner or a professional

Beaver Builder – one of the best free WordPress page builder plugins

Beaver Builder one of the best free WordPress page builder plugins

Download

Beaver Builder is another popular free WordPress page builder plugin. It powers over 300.000 websites, and has an impressive 5-star rating on WordPress.org out of 342 reviews. So, a lot of people use and like this plugin. Let’s see what the hype is all about!

The interface of Beaver Builder ⭐⭐⭐⭐

You can use Beaver Builder to build pages for your site in two ways. The first way is using the floating Content panel which you can drag anywhere. The second way is sticking the Content panel to the left or right sides of the browser. As a result, you can add and configure the elements on the left side, and see the result on the right.

Interface of Beaver Builder, the best free WordPress page builder plugin
Interface of Beaver Builder

Beaver Builder offers inline editing, which is very convenient to use. It’s easy to figure out how to add new elements, and configuring them is just as effortless. However, adding a new element makes a loading icon appear in the area where you drop it. Although it only lasts for a few seconds, I found it irritating. Additionally, I felt it was interrupting the editing process. Also, the drag’n’dropping of the modules sometimes produced interesting movements.

Available Elements ⭐⭐

Beaver Builder offers the bare minimum of elements, or modules as they call them. There’s only 5 available: audio, HTML, photo, text editor and video. Additionally, you can create rows to place content into. The WordPress widgets are also available to choose at Beaver Builder. This gives slightly more tools to work with. Still, this free WordPress page builder plugin has very few elements to offer.

Elements in Beaver Builder
Elements in Beaver Builder

You can use the Text editor to create headings, so you can structure your content properly. What’s more frustrating is that there’s no button module, at least in the Lite version. That’s a bummer because CTA plays an important role in a website’s conversion. Of course, if you have coding knowledge, you can create buttons using the HTML or Text Editor modules. But let’s face it: if you wanted to write code to have a button, you wouldn’t have used a page builder.

Styling options ⭐⭐⭐

Beaver Builder seems to expect the styling to be done from the theme’s end. By default, it inherits the layout the theme sets nicely. If you want to create a custom layout, you can use Beaver Builder’s options to do so. However, there’s no global, or page level styling. At the rows or columns you can only set text colors, but not font specific options, like size or family.

Beaver Builder styling options
Beaver Builder styling options

Templates

Many WordPress plugins offer quick access to some templates, which users can use to get a head start. It’s useful for those who are new to the plugin, or don’t have much design knowledge, or are in short of time. In Beaver Builder, templates are available only after purchasing a paid plan. So users of the Free plugin won’t be able to import any templates.

Final thoughts on Beaver Builder

Beaver Builder is a nice and easy to use free WordPress page builder plugin. However, it seems it’s aimed for developers, rather than the average WordPress users. In the free version, it’s not possible to create a Hero header, because there’s no option to create a button. Unless you code the button yourself, and I don’t think that’s acceptable from a visual builder in 2020.

Brizy – innovative free page builder plugin

Brizy - one of the best Free WordPress page builder plugins

Download

Brizy is a relatively new plugin, released in April 2018. The page builder plugin market is full of big fish like Elementor or Beaver Builder. On the paid front, there are plugins like Divi or Visual Composer. So new plugins need to offer something more, something new to be able to attract users. And that’s not an easy task.

Yet, Brizy has managed to earn more than 60.000 people’s trust in just two years. Additionally, it promises to offer a new and intuitive way of visual page building. This makes me curious to see if this free WordPress page builder can keep its promise.

Interface of Brizy ⭐⭐⭐⭐⭐

Like the other page builders, Brizy also has a visual frontend editor. It has a narrow panel on the left side of the browser window. This is where you can add new elements, adjust the order of the added blocks, or set the styling. The large right-hand side is for placing the content. As a result, the interface offers plenty of space to see the content you’re creating.

Interfaece of Brizy, the best free WordPress page builder plugin
Interfaece of Brizy

Brizy has inline text editing by default, which is very convenient to use. In fact, Brizy’s solution feels as natural as Gutenberg’s. And that’s a big achievement. I’ve tested Elementor, which also has inline editing, but it doesn’t feel as seamless.

Brizy inline editor
Brizy inline editor

Available Elements ⭐⭐⭐⭐

Brizy offers a handful of elements to create content with. You can create headings or paragraphs with the text module, or add a button to your page. You can also add images, icons, or videos. There are cool extras, like the counter or Google map elements. To sum it up, Brizy has all elements you’ll need to create a content rich website.

Elements in Brizy
Elements in Brizy

Styling options ⭐⭐⭐

Before you start creating your pages with Brizy, make sure you set up colors and text styles first. This will make the editing experience faster. In the text settings, you can find the most essential options. You can set the font size, family, weight, line height and letter spacing. Other options, such as the text-align, are available at the text element.

Styling options in Brizy
Styling options in Brizy

Templates ⭐⭐⭐⭐⭐

The page creation in Brizy starts with adding a new block. First, you need to choose whether you want to start from a template or create an empty block. In case you chose to add with an empty block, you can build your content from scratch. But even if you start with a template, you’ll be able to tweak anything you want.

Beautiful templates in Brizy
Beautiful templates in Brizy

There’s a total of 502 blocks you can choose from, and you can use them to build your page piece by piece. There are also 41 full-page layouts ready for importing. The only downside is that pro and free templates are totally mixed. As a result, it can take time to find what you can import in the free page builder.

Final thoughts on Brizy

Brizy is easy to use whether you have any developer knowledge or not. Additionally, its inline editing feels like a breeze and is very easy to get used to. Of course, there’s plenty of room for improvement. For example, I’d love to have more styling options. Nonetheless, I feel Brizy has created something unique.

Speed of the best free WordPress page builders compared

There are three key factors for creating a successful site. These are: a good copy, an eye-catching design, and a fast loading time. Most plugins you add to your site have an impact on your website’s speed. So you need to choose what you install carefully.

When you choose a page builder for your site you need to consider how much impact it has on your page’s loading time. A resource heavy plugin will have a negative impact on your site’s speed. And you haven’t even added your content yet.

To help you find the best free WordPress page builder plugin, I’ll compare their loading speed. In other words, I’ll check how fast the page you create with these plugins loads. Additionally, I’ll test how much weight they add to the page speed, and how many requests they make.

Testing environment

I wanted to run the speed test on a page that had the same content. So I built the layout of the Healthcare template in each page builder. I run the test using the Hello Elementor theme. When I run the tests, no other were active at the same time but the one I was testing. All images and fonts were the same in each builder. Additionally, I’ve cleared the cache before each speed test.

First I ran the speed test on the WordPress Sample page, to give you an idea about Hello Elementor theme’s speed. The internet speed used for the tests was 10Mb/s.

Speed test results

Hello Theme Gutenberg Elementor Beaver Builder Brizy
Loading time 198ms 361ms 2.05s 1.26ms 1.42s
Page size 90.0kb 230kb 964kb 418kb 1.5 MB
Requests 6 17 35 21 26

Gutenberg is an obvious winner here. It loads faster than any of its competitors, weighs less and makes fewer requests. Of course, it’s much more limited than any of the other plugins in this article in terms of styling. So, based on its speed alone, Gutenberg is the best free WordPress page builder plugin.

But we should look deeper than the page speed. Take the styling options and available elements into account as well. In this case, Gutenberg won’t keep its first place. With these in mind, the best free WordPress page builder plugin is either Elementor or Brizy. Elementor loads slower, but it weighs less. Brizy, on the other hand, is faster, but heavier. So, if you need a good page builder for your site, I recommend giving Elementor or Brizy a try.

Which one is the best free WordPress page builder plugin?

If you still haven’t decided which plugin to pick, here’s how the scores stack up (in order):

Gutenberg Elementor Beaver Builder Brizy
Interface ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐
Available Elements ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐ ⭐⭐⭐⭐
Styling options ⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐
Templates ⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐
Speed ⭐⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐
Total 15/25 21/25 13/25 20/25

Based on these scores, the best Free WordPress page builder is Elementor. But it’s closely followed by Brizy. If you start a new project, I recommend checking these out first. But it’s also worth considering whether Gutenberg would be enough.

Pricing

As mentioned before, I wanted to take a look at the paid version of the best free WordPress page builder plugins. You might want to go pro later, even if you’re satisfied with the plugin now. Or you might upgrade because you want to support the developers of the plugin.

As Gutenberg is part of WordPress core, it has no premium plan you could upgrade to. But if you should need more blocks or templates, you can find a bunch of free or premium plugins to help you with that.

However, there’s a premium version of Elementor, Brizy and Beaver Builder. You can choose from the following pricing options:

Elementor Beaver Builder Brizy
Price/year $49 $99 $199 $99 $199 $399 $49 $99
Domain license 1 site 3 sites 25 sites 3 sites

What more do you get if you buy the premium plugin?

  • Elementor: You get 50 more widgets to build. Also, 300+ more templates, and 10+ full website kits. The Theme, WooCommerce and Popup Builder is also available in one of the paid plans.
  • Beaver Builder: Each Beaver Builder package is different. In the cheapest plan you get Premium Modules & Templates, and pro support. Additionally, in the middle package, you get the Beaver Themer and multisite compatibility. What’s more, the highest package offers White Labeling.
  • Brizy: The Pro version of Brizy gives you access to 250+ Premium Designs. You can also access Brizy Cloud, where you can get amazing new templates from.

Final Thoughts

Choosing a WordPress page builder plugin for free is never easy. There are just too many options, any not all plugins are equally great. Additionally, they might not be a good fit for your website.

So, what’s the best free WordPress page builder? Either of these four plugins can be the best for your project. If you have a theme with nice styling, Gutenberg would probably be enough for your site. As a result, your site would load faster than with any other plugins I’ve tested for this article.

But if you don’t have such a good theme, or you prefer to create everything by yourself, you still have good options. You can choose Elementor or Brizy as the free page builder for your site. Both plugins offer a great number of features to create an amazing website.

The post Best Free WordPress Page Builder Plugins Compared 2021 appeared first on Smart Slider 3 — WordPress Plugin.

]]> Slider Revolution vs Smart Slider https://smartslider3.com/blog/slider-revolution-vs-smart-slider/ Sat, 18 Apr 2020 13:36:24 +0000 https://smartslider3.com/?post_type=blog&p=5755 When it comes to sliders for WordPress, there are two premium plugins that stand tall above the rest: Slider Revolution and Smart Slider. What is Slider Revolution? Revolution Slider or Slider Revolution by ThemePunch is a responsive, premium WordPress Slider Plugin. You can use Revolution Slider to create modern sliders for your WordPress site. Slider […]

The post Slider Revolution vs Smart Slider appeared first on Smart Slider 3 — WordPress Plugin.

]]>
When it comes to sliders for WordPress, there are two premium plugins that stand tall above the rest: Slider Revolution and Smart Slider.

What is Slider Revolution?

Revolution Slider or Slider Revolution by ThemePunch is a responsive, premium WordPress Slider Plugin. You can use Revolution Slider to create modern sliders for your WordPress site. Slider Revolution can be found in most premium themes, making it incredibly popular amongst WordPress users.

What is Smart Slider?

Smart Slider is an easy to use, responsive WordPress Slider Plugin. It has everything you’d ever look for in a slider plugin, such as layers and special effects. Unlike most other premium sliders, Smart Slider has a free version, which is a great alternative to many premium plugins.

Do Smart Slider and Revolution Slider has anything in common?

Both are feature-rich plugins that enable you to create beautiful and responsive sliders complete with impressive animations, layers, buttons and dynamic content. But comparing these two plugins is a challenge. Unless you want to spend time setting each of them up and creating sliders, there aren’t any reviews that compare these plugins against each other. Until now.

In this post, I’m going to put these plugins to the test, comparing them side-by-side for their features, pricing and performance. I’ll also walk you through a comparison project where I’ll create the same slider using both plugins so you can see how they work – and which one is better to use.

By now you’re probably thinking, “Well, of course she’s going to say Smart Slider is the best because this is the Smart Slider blog!” Oh yeah, I could totally write a biased and boring sales post with a big “Buy Smart Slider!” button at the bottom of the page. But that’s not my style. I like facts and not fake news. So this review is an honest to God account of my experiences with both plugins and what I genuinely think about them. Here we go.

Want to jump to a section quickly?

⚡️ Features
💰 Pricing
💪 Comparison Project
🔄 Creating a slider with Slider Revolution
🎓 Creating a slider with Smart Slider
Performance Test
🏆 Conclusion: The Best Slider Plugin Is…

⚡️ Features

Slider Revolution and Smart Slider push the boundaries (and even blur the lines, in Smart Slider’s case) in terms of what a slider can and should be able to achieve in web design. Both enable designers and developers to create stunning hero headers, testimonials sections and more.

As far as features go, these plugins share many similarities but also have their own unique selling points. Here’s a side-by-side comparison of their features:

Slider Revolution
Smart Slider
Slider types 3 (standard, carousel & block) 4 (standard, carousel, showcase & block)
Template library 80+ 100+
Layers 8 23
Dynamic generators 8 22
Object Library
Extra Addons
Default/Absolute layers
Slide library
Animated Shape Dividers
Slide Mixing

Slider types

Smart Slider comes with two extra types of sliders: showcase and block. While you’re no doubt familiar with standard and carousel sliders, here’s a quick look at what all four of Smart Slider’s slider types look like:

Available slider types in Smart Slider: Simple, Block, Carousel and Showcase
Available slider types in Smart Slider: Simple, Block, Carousel and Showcase

Template library

When you’re time poor or just have no idea what you’re doing when it comes to design (like me), you need a bit of guidance. Fortunately, both Slider Revolution and Smart Slider come with a stack of beautifully designed templates to get you started.

Here are some examples of the templates that come with Slider Revolution:
Revolution Slider - Slider Templates

Here’s what the template library looks like for Smart Slider:
Smart Slider - Slider Templates

Layers

Both plugins come with the standard layers – heading, text, button, image etc. But Smart Slider has a bunch of extra ones for content (list, captions, transition, progress bar, counter, circle counter), media (Vimeo, video, YouTube, audio), and advanced layers (area, input, iframe, HTML).

While the basic layers might seem like enough for a slider, I found the advanced options in Smart Slider, in particular the row layer, indispensable, as you’ll see later in this review.

Animations

Animations are a lot of fun to play around with when you’re creating sliders, and Slider Revolution and Smart Slider deliver. Both plugins come with a stack of animation options that go beyond the standard fade, left, right options. Whether you want to add a subtle micro animation or a bolder flip, shake or bounce, it’s easy to implement with both plugins.

Dynamic Generators

Want to auto-populate your sliders with photos from Flickr, videos from YouTube or show off your latest tweets? Both plugins allow you to use dynamic content, including WordPress pages and posts and WooCommerce. Smart Slider provides lots more dynamic sources – dribbble, Pinterest and NextGenGallery to name a few.

Unique Features – Slider Revolution

With the object library, you can add background images, transparents PNG objects, SVGs and font icons to your slides. Want to add a picture of a piece of toast to a slide? Easy – just search for it in the object library and add an image layer to your slide.

Slider Revolution also offers some great add-ons, including whiteboard and typewriter effects, slide backups, WordPress gallery, related posts and social sharing, coming soon, particle effects, polyfold effects, adjacent posts, filmstrip, 404, post featured slider, login page, slicey, before and after, weather, panorama, reveal and duotone.

Unique Features – Smart Slider

Smart Slider also has a bunch of cool features that Slider Revolution doesn’t have. There are two different visual editing modes for creating your slider content: content and canvas mode. These editing modes really set Smart Slider apart from any other slider plugin. In content mode, the slider behaves like a page builder, while in canvas mode gives you freedom to work with your layers unobstructed, much like you would in Photoshop.

The Slide Library lets you choose from 100+ premade slides in different skins and in different categories. The library is massive and it’s easy to get lost in all the beautiful designs (and have a hard time picking just one!).

The animated shape divider is another really cool feature unique to Smart Slider. Lastly, Smart Slider offers slider mixing. Basically, you can mix regular slides with sliders that contain dynamically generated content. This is an advanced feature and one that would be awesome to use in hero headers that are regularly updated with new content.

💰 Pricing

Both plugins have similar price points on the Standard packages, however you can see big differences at the bigger packages. Also Smart Slider has a free version.

Slider Revolution

This plugin’s pricing is aimed at two distinct markets: freelancers who are creating sites for clients – there are available one-site and three-site licenses, and theme authors who sell products on ThemeForest.

Starter Enthusiast Professional
$29/year $79/year $129/year
1 website 3 websites 5 websites

Slider Revolution is often bundled with themes available for purchase at ThemeForest. This has helped make it a hugely popular plugin as many users get a copy of the plugin when they buy a theme from the Envato marketplace. It’s important to point out that the bundled version you get with themes lacks a lot of features:

  • You can’t import any premium slider templates,
  • Updates aren’t available,
  • You can’t access the Object Library or Add-Ons, and
  • There’s no support.

Slider Revolution has one-time payment packages, in this case you don’t need to pay a yearly fee, but you will get only 6 months support. Let’s see the one-time prices!

1 sites 3 sites 5 sites 10 sites
$95 $250 $415 $765
1 website 3 websites 5 websites 10 websites

Smart Slider

There are five different pricing options, including a free version that’s available for download. If you decide to give the free version a try, you can upgrade to the pro version at any time.

Free 1 sites 3 sites 5 sites 10 sites
$0 $49 $99 $149 $249
1 website 3 websites 5 websites 10 websites

Smart Slider offers a handy 14-day money back guarantee if you change your mind.

What I like about the free version of Smart Slider is that it doesn’t constantly nag you to upgrade. You know all the ugly ads and nags you see in some free versions of plugins? There’s none of that in Smart Slider. Instead, the plugin prompts you to upgrade only when you try to use a feature that’s pro-only. It’s unobtrusive and allows for an uninterrupted user experience.

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

💪 Comparison Project

I have a confession to make: I’ve only ever created a slider once before. It was a WordPress carousel slider using a free plugin I downloaded from WordPress.org. The user experience was so bad that I hated on sliders for the longest time and never used them again…

… Until the guys at Smart Slider asked me to write this review.

I’ve reviewed a ton of plugins over the years. The fact I haven’t used either of these slider plugins is in my favor since I’m approaching this without bias any preconceptions about how they work. Yes, I know I’m writing for Smart Slider, but as I mentioned, I don’t like BS reviews so what you’re reading is all honest.

The Project

In order to compare these plugins, I’m going to create the same slider with both plugins. Rather than design a new slider, I’m going recreate the testimonial slider from the Help Scout homepage:
HelpScout Slider

Since I’m a total noob when it comes to sliders, I knew recreating this slider would be fiddly. While it looks fairly simple at first glance, there are quite a few things going on:

  • There’s an image (with a drop shadow),
  • There’s a quote on the left,
  • There’s a name,
  • There’s a logo,
  • The quote is inside a white box (with a drop shadow),
  • When you scroll through this slider, the images fade rather than slide right to left, and
  • The navigation arrows are in the bottom-right

Well, time to start building my sliders! 🙄

🔄 Creating a Slider with Slider Revolution

First thing’s first: I installed Slider Revolution and here’s what the welcome screen looks like:

Revolution Slider Dashboard

I gotta say, it’s pretty ugly. There are boxes everywhere and no real focal point (like a getting started wizard) to help me work out what to do. Fortunately, I’m not a complete noob when it comes to plugins, so after scrolling down the page to check out all the content, I clicked on “New Slider.”

The “New Slider” screen provides a set of options for creating a new slider:

Revolution Slider - Create New Slider

I clicked “Default Slider” and then gave my slider a name and alias. Under “Select a Slider Type” I chose “Standard Slider” and clicked the expander to select a preset. The “Thumbs-Right-Auto” option looked the most similar to the slider I wanted to create so I selected that. In the “Slide Layout” section I selected “Auto” and left the defaults enabled for the different responsive sizes.

Scrolling to the bottom of the page, I clicked “Preview” to check out my slider so far but nothing happened. Hmm. What’s the point of having a preview button if it doesn’t work? I clicked “Save Settings” and was taken to the slider editing screen:

Revolution Slider - Slide View

For someone who hasn’t built a slider before, this screen was intimidating. When you scroll further down the page you see the visual editor and underneath it the animation player:

Revolution Slider - Slide Editor

After clicking, hovering and just generally poking around the editor to try and understand what was going on, I decided to get started by adding an image to my slide. I often use Unsplash for its stunning images, so I downloaded three images of people for the three slides I wanted to create. I cropped, resized and optimized them in Photoshop to match the dimensions of the Help Scout slider I wanted to recreate.

With my images ready, I clicked “Add Layer,” selected “Image” and uploaded my image.
Revolution Slider - Add Image Layer

Next, I needed to add a drop shadow to the image. After clicking through the tabs above the editor, I eventually worked out that I needed to right-click the image. I clicked on Style > Advanced CSS and entered my CSS:

Revolution Slider - Add CSS

Next, I needed some kind of white background to sit behind the quote. I clicked on the “Add Layer” button and thought the “Shape” layer might work. It brought up a modal with styling options.
Revolution Slider - Add Shape Layer

After updating the settings, I noticed when changing the background color that the opacity was set at 50% by default. I thought this was odd since wouldn’t most people want it at 100% by default?

With my white shape looking good, I added a drop shadow to, similar to the main image.

Next up: quotation marks. The Help Scout slider has subtle quotation marks that sit to the top-right of each quote. I wanted to emulate this, so I create an image in Photoshop and then added it as an image layer over the white shape I’d just created, like so:
Revolution Slider - Add Icon Layer

It took ages to get it looking like this, TBH. I had a lot of trouble ordering the layers even though I had them sorted in the right order in the animation area below. It took a lot of ordering and re-ordering to work out that I needed to have my images in descending order, i.e. the image I wanted at the back of the slider needed to be at the top of the order. WTF?!

I had been ordering my slides with the main image at the bottom since the last image was being assigned the largest z-index number. Urgh… confusing.

Moving on. Next up, I added a testimonial quote (using the “Text/HTML” layer), which I found on the Slider Revolution ThemeForest page and styled it using the options at the top of the visual editor. It took me a while to work out how to make the text italicized – you need to click on the arrow next to the “Style” tab. I found this confusing because there’s an italics icon next to the bold icon.

Revolution Slider - Add Text Layer

Then I added a name using a text layer and went about creating a fake logo using Squarespace’s free logo creator. I found it a bit cumbersome trying to align the name with the quote and the logo. While there’s a “Snap to” option it doesn’t work very well and I ended up using the arrows keys on my keyboard to try and line things up as best I could.

Here’s my first slide all finished!

Revolution Slider - First Slide

Looking good so far, but I still needed to create another two slides before my slider was ready to preview. I scrolled to the top of the screen, hovered over my first slide and clicked “Duplicate.” It only took a minute to update this second slide with a new image, testimonial, name and logo.

Revolution Slider - Second Slide

With my second slide ready, I created another duplicate with new images and text (which you’ll see shortly in my finished slider). Next: navigational arrows.

By default, arrows aren’t enabled in Slider Revolution. In the Slider Settings, which you can find at the top of the screen, I found the “Navigation” options. I enabled arrows and chose a style.
Revolution Slider - Add Arrow

Scrolling further down the navigational settings, I was able to configure the placement of the arrows so they appeared in the bottom right-hand corner, and even set horizontal offsets.

Lastly, I needed to configure how the slider animated. I returned to the Slide Editor and clicked “Slide Animation.” Here, I selected “Fade” and set the animation duration to 800ms.

Then I hit “Save” and “Preview” and waited in anticipation…

First slider done! Overall, I’m pretty happy with the result. If I was going to use it on a live site I’d make some more tweaks to perfect alignment of the text and logo.

Okay, let’s move on to Smart Slider…

🎓 Creating a Slider with Smart Slider

First up, I activated the Smart Slider PRO and here’s what the welcome screen looks like:

Smart Slider Dashboard
Smart Slider Dashboard

It’s very different from Slider Revolution. It’s not a cluttered collection of boxes and information, just two buttons that prompt you to choose your next adventure, so to speak. I clicked on “New Project.” A modal popped up asking me to choose whether I want to Create a New Project or Start with a Template. I choose the first, then I gave my slider a name, specified dimensions, and a slider layout.

Smart Slider - Create a new slider
Smart Slider – Create a new slider

I clicked “Create” and another screen loaded with the dashboard for my new slider:
Smart Slider - Slider View

At this point, I clicked “ADD SLIDE” and selected “Blank.”

Add Blank Slide

Moving on, I clicked on this slide and a new screen loaded with the Slide Editor. Unlike Slider Revolution, this screen wasn’t like an overwhelming slap in the face – it’s minimalist and provides only the basic options to start with. Perfect for a noob like me.

I jumped right in and started building my first slide. First up, I needed to add an image. I added a new Absolute positioned image layer with my main image.

Next, I needed a drop shadow. Clicking through the available options in the modal, I quickly discovered that I could add extra CSS in the “Style” tab of the layer window by clicking “MORE.” So I entered my CSS:

Next, I needed a white background. After initially dragging across a text layer and adding a white background to that, I had a thorough look through the available layers and noticed the advanced “Row” layer. I dragged it across to the canvas, made some changes and voilà!

The row also needed a drop shadow similar to the main image. Luckily, the row has a box shadow option for this.

Next, I created another Absolute positionted image layer for the quotation marks and dragged it into place over the Default positioned row layer. Too easy.

Then I added a text layer and went hunting around for a nice testimonial. I styled the text, making it italicized, increasing the size and line height.
Smart Slider - Add Text

I gotta say, making design changes to text and images is so easy with Smart Slider. It was much quicker to access and edit styling options compared to Slider Revolution. Next, I added a heading layer for the name and another image layer for the logo:
Smart Slider - Add Image

First slide complete! I hit “Save” and then clicked “SLIDES” at the top of the screen and right-clicked on the first slide to Duplicate it, so I could worked on my second slide.

Smart Slider - Duplicate Slide

I then got to work replacing the image, text, name and logo for the second slide.

Repeating the steps above, I created a second duplicate for my third slide and updated it with different content.

Now, for the animation. I needed each slide to fade into the next one. So I returned to the main screen for my slider and went to the Animations tab. I selected a crossfade, set the duration and the easing. It wasn’t hard to find these settings at all – they’re all organized and laid out in a logical way.
Smart Slider - Animation Settings

After previewing the slider, I realized the arrows needed to be in the bottom-right but instead were on either side of the slider. I went to the Controls tab to adjust the arrow positions.

Smart Slider - Arrow Settings

And that’s it! Here’s what my finished slider looks like:

ready slider

I’m really happy with the results. Smart Slider was really easy to use and I found all the editing options intuitive. Finding everything I needed to create my slider was straight forward and it didn’t take long at all to create my slider, maybe 20 minutes with all my assets ready.

⏳ Performance Test

There’s a common perception that sliders negatively impact website performance. So I was keen to put this theory to the test. Often, people add images to sliders that are too big or not optimized. So if the plugin adds to that, it’s a double whammy for page load speed.

The sliders I created used images that were 840px by 560px and each slide was 1000px by 600px. In order to test the plugins, I used a similar methodology to Chris Lema in his performance post:

  • I scanned each of the plugins five times using WebPagetest before saving the results.
  • I did each test on its own page with the other slider plugin deactivated.
  • The page I tested featured the slider and no other content.
  • I cleared the cache after testing each plugin.
  • My test site is hosted with Cloudways.

Slider Revolution:

Revolution Slider - Performance

Smart Slider:

Smart Slider - Performance

The results were marginally faster for Smart Slider, which made fewer HTTP requests and achieved a load time of 1.7 seconds. Even though both sliders were identical in almost every way, Slider Revolution was slightly behind, loading in 1.8 seconds.

🏆 The Best Slider Plugin Is… Smart Slider.

I was impressed with both plugins but found Smart Slider much easier to use. The content and canvas modes, along with the modals that pop up for editing settings made the user experience so much more pleasurable. In comparison, the Slider Revolution editing screen wasn’t quite as polished or as intuitive.

It’s obvious the Smart Slider guys have put a lot of time and thought into designing their plugins, so props to them! It’s one of the best-designed plugins I’ve ever used. Learning how to use it was far easier than trying to figure out Slider Revolution.

Speed-wise, Smart Slider performed slightly better than Slider Revolution in the speed test. In future, I’d be interested to see how adding more layers and animations would affect the performance of these plugins.

Overall, if I had to pick one plugin for creating sliders, I’d choose Smart Slider. And not because I’m being paid to say that! It out-performed Slider Revolution for me in terms of ease of use, plus it has so many more cool features. All it needs is an object library (which I’m sure is coming in a future version!) and extra add-ons and it will have everything Slider Revolution has and more.

The post Slider Revolution vs Smart Slider appeared first on Smart Slider 3 — WordPress Plugin.

]]> Meta Slider vs Smart Slider 3 https://smartslider3.com/blog/metaslider-vs-smart-slider-3/ Fri, 17 Apr 2020 06:00:14 +0000 https://smartslider3.com/?post_type=blog&p=6460 Looking for a great free slider? Easy. MetaSlider. It’s the most popular free slider available in the WordPress.org plugin repository with 800,000+ active installations. But is it the best free slider plugin for WordPress? Interestingly, Smart Slider 3, which I recently found was the best premium slider plugin for WordPress in a recent comparison test, […]

The post Meta Slider vs Smart Slider 3 appeared first on Smart Slider 3 — WordPress Plugin.

]]>
Looking for a great free slider? Easy. MetaSlider. It’s the most popular free slider available in the WordPress.org plugin repository with 800,000+ active installations. But is it the best free slider plugin for WordPress?

Interestingly, Smart Slider 3, which I recently found was the best premium slider plugin for WordPress in a recent comparison test, is the second most popular free plugin in the repository with 700,000 active installations. So… what’s so great about MetaSlider that 100,000 people prefer it over Smart Slider 3?

Having never used MetaSlider before, I was determined to find out.

In this post, I’m going to put the free version of MetaSlider and Smart Slider 3 to the test, comparing them side-by-side for their features, pricing and performance. I’ll also walk you through a comparison project where I’ll produce the same slider using both plugins so you can see how they work – and which one provides the best user experience.

Want to jump to a section quickly?

⚡️ Features
💰 Pricing
💪 Comparison Project
🎓 Creating a Slider with Smart Slider 3
🖼️ Creating a Slider with MetaSlider
Performance Test
🏆 Conclusion: The Best Free Slider Plugin Is…

⚡️ Features

As far as features go, MetaSlider and Smart Slider 3 offer a very different list of features in the free versions of these plugins. Here’s a side-by-side comparison of their features:

Meta Slider Smart Slider 3
Templates 6
Layers
Dynamically display WordPress posts
Default/Absolute layer position
Page builder support
HTML overlay slides ✅ (available as a control element)

I’ve intentionally left out of the table the different slider types for both plugins because MetaSlider says it has four types in its marketing, when really it one. Smart Slider 3 has two distinct slider types (default and block).

As I discovered later during the comparison project (which I completed after putting this features section together), MetaSlider doesn’t offer layers as a free feature. This is a BFD. It means you can only create very basic, simple sliders, with no buttons or text overlays. This makes the free version of MetaSlider incredibly lacking in features compared to the free version of Smart Slider 3.

As you’ll see in the comparison project below, there is so much more you can achieve with the free version of Smart Slider 3 because it offers just the right number of features, so you can create a beautiful slider without feeling forced to upgrade for something as simple as layers.

💰 Pricing

Both plugins are available to download for free from the WordPress plugin repository. But if you’re interested in accessing pro features, here’s what you can expect to pay.

Meta Slider

When you upgrade to Meta Slider Pro plan you get added support for:

  • YouTube and Vimeo slides
  • HTML slides
  • Layer slides with CSS3 animations & HTML5 video backgrounds
  • Dynamic post feed/featured image slides (content slider)
  • Custom themes
  • Thumbnail navigation
  • Premium support

There are five different pricing plans in addition to the free option:

1-2 site license 5 site license 20 site license 100 site license Unlimited site license
$39 $79 $119 $189 $289

If you’re interested in upgrading from the free version, you can try MetaSlider risk-free thanks to a 30-day money back guarantee.

Smart Slider 3

The free version of Smart Slider 3 is one of the most feature-packed plugins I’ve ever come across in the WordPress repository. Seriously, it’s amazing for the price you pay – absolutely nothing!

When you upgrade to a paid plan, you also get access to:

There are 4 different pro pricing options:

1 site 3 sites 5 sites 10 sites
$49 $99 $149 $249
1 website 3 websites 5 websites 10 websites

Smart Slider 3 offers a handy 14-day money back guarantee if you change your mind and want to return to using the free version.

What I found a breath of fresh air when using the free version is that it doesn’t constantly nag you to upgrade like a lot of other free plugins do. Instead, the plugin simply displays a “Go Pro” link in the top-right of the slider dashboard. It’s unobtrusive and doesn’t interrupt the user experience – a big thumbs up from me.

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

💪 Comparison Project

The best way to compare two slider plugins is to create the same slider using both plugins. So in order to test MetaSlider and Smart Slider 3, I went searching for a slider I could try and emulate…

The Project

Rather than design a new slider, I wanted to recreate Spotify’s homepage slider:

The Project: Spotify Slider

It’s a fairly simple slider with four slides that all have the same background image, but different text and button text/links. I figured since I was testing free plugins, I shouldn’t attempt anything too complicated in case I couldn’t access the features I needed.

So I found a kind of similar background image from Unsplash to use for my slides – pretty much the only asset I needed.

So here we go…

🎓 Creating a Slider with Smart Slider 3

First thing’s first: I searched for “Smart Slider” in the repository and installed and activated it.

Install Smart Slider 3 Free

After activating the plugin, a menu item is displayed in the left-hand sidebar, which you need to click to access the Smart Slider 3 dashboard.

Once you’re in the dashboard, the top of the page displays a CTA linking out to a video on how to get started using the plugin. I watched the video and it was a good introduction to getting started with the plugin and adding sliders. Great start so far.

The dashboard is well-laid out, with large buttons that are clearly labelled so there’s no confusion about how to get started (simply click on the “New Project” button). To to access the template library if you want to get started with a template (just click on the “Template Library” button), check out a sample slider (click on “Start with a Template”) or check out what you get with a pro license.

It’s also nice to see that from the start there is easy access to support, in the header at the top. The link enables you to search Smart Slider 3’s extensive documentation, which is fantastic for a free product.

Smart Slider 3 Dashboard

I clicked “New Project” to get started and a modal appeared, asking me to give choose if I want to Create a New Project or Start with a Template. I choose to Create a New Project, where I could give my slider a name and specify its dimensions.

Smart Slider 3 - Create slider

After choosing my settings, I clicked “Create” and another screen loaded with the dashboard for my test slider.

Smart Slider 3 Slider Dashboard

Next, I clicked “Add Slide”, choose “Image” and uploaded the bubble image I had downloaded from Unsplash to use as the background for my slides.

Below the uploaded image slide there are various tabs for different features, such as controls, animations or autoplay. Before changing any of the Slider settings, I needed to work on my slides first. So I clicked on my first slide and was taken to the Slide Editor.

Smart Slider 3 Editor

The editor is pretty basic, which I like – it’s not overwhelming and the icons to the left of the editor are easy to identify.

With my background image already in place, I started by adding the header text for my first slide. It’s pretty easy, just click the “H” icon to the left of the Slide editor and enter and style your text in the modal that appears. Rather than look for a similar font to Spotify’s headers, I decided to go with something a bit more fun.

Smart Slider 3 Slide 1

Next, I added a button by clicking the button layer in the sidebar. With the settings modal open, I updated the font (Arial) and styled the button to look like Spotify’s, with round edges, a green color and a lighter green color on hover.

Smart Slider 3 Button

Then I created a row and moved this button to the left column. I added another button to the right column and styled it with similar white colors that Spotify uses.

Smart Slider 3 Button 2

And voilà, my first slide finished! Now, that was really easy and took about 5 minutes, though I have used the pro version of Smart Slider 3 before so it wasn’t all new to me.

I clicked “Save” and then “Slides” to duplicate my first slide and start working on the second slide.

Smart Slider 3 duplicate

I then got to work replacing the header text and buttons for the second slide.

Smart Slider 3 slide 2

Repeating the steps above, I created a two more duplicate for the third and fourth slides and updated them with header text and button content.

Next up, the animation. I needed the background image to remain static and the header text to fade with each change in slide. So I returned to the main screen for my slider and in the “General” tag, scrolled down to the animation section. I selected “Fade” and updated the duration to 400ms, since Spotify’s animation is faster than the 800ms default setting. I left the background animation as “disabled” since I didn’t want the background to change at all, just the text and buttons.

Smart Slider 3 Animation Settings

By this stage I’d been previewing my slider as I updated it and noticed the arrows were too far apart. The free version of Smart Slider 3 doesn’t offer any advanced navigational settings, which is fine because the arrows I needed were pretty basic. But it did allow me to offset the positioning of the arrows (update them to 50px) to bring them in closer from the sides of the slider.

Smart Slider 3 Arrow Settings

And here’s my finished slider:

smart slider

I’m pretty happy with the result. It looks great and, more importantly, it was really easy to put together. I didn’t run into any problems at all using Smart Slider 3.

Now, let’s move on to creating the same slider with MetaSlider…

🖼️ Creating a Slider with MetaSlider

Like the free version of Smart Slider 3, I searched the plugin repository from within my WordPress site and installed and activated it. After activation, MetaSlider adds a menu item to the sidebar. The dashboard for the plugin is ultra minimalist, to say the least. Check it out:

MetaSlider Dashboard

There’s a simple wizard that prompts you to click “New” in order to create your first slide. Other than that, there’s an “Upgrade Now” button at the top, along with a button for add-ons and other plugins, and a third button for accessing documentation – very handy for MetaSlider noobs like me.

Not really knowing what I was doing, I clicked “New” and was taken to the slide editing screen. This screen is also pretty sparse, but the wizard clearly directs you to add your first slide. So I went ahead and clicked “Add Slide.”

MetaSlider Add Slide

The Media Library modal then appeared, prompting me to upload a background image.

MetaSlider Upload Image

My first nag! I supposed it’s good to know that I can get more slide types with add-ons, but by this stage, I hadn’t really created anything yet so I wasn’t ready for an up-sell. Once I uploaded my background image and clicked “Add to slideshow” a modal popped up letting me know the tour was over and I was on my own. I do like wizards and product tours, so props to MetaSlider for using this technique to enhance the user experience.

MetaSlider Tour Over

The page then reloaded and my first slide appeared on the dashboard. I clicked around, not really sure what to do next. Where could I edit the slide? How could I add a text layer to the slide? How could I add a button??

MetaSlider Adding Slides

Not really sure what was going on and why this screen was so basic compared to Smart Slider 3, I clicked on the “Add-ons / Other Plugins” button to see if layers were a pro-only feature… and sure enough they were.

MetaSlider No Layers

What the…?! Well, there’s goes my idea for creating the same slider using MetaSlider and Smart Slider 3! Seriously, slider layers are a pro feature in MetaSlider??

My plan for this comparison project was to just jump right in and try recreating the Spotify plugin without investigating the plugins much (I wrote the “Features” section above after writing this section) and see what differences and issues I ran into while using both plugins. This was the first major hurdle I encountered and it was a big one.

I started to panic. What was I going to do now?! I had to decide what to do next. Well, what else could I do but push on? So I returned to the slider dashboard and continued editing my slider with the few options that were available.

MetaSlider slide 1

Wow, I actually feel embarrassed right now after that last image. Since I couldn’t add a layer of text for the slide, I had to add it as a caption.

I added the three remaining slides and text as captions. Then I updated the animation speed in the “Advanced Settings” so it was 400ms.

MetaSlider Advanced Settings

OMG, I can’t believe those were the advanced settings. The free version of Smart Slider 3 has ruined me for using any other free slider plugin…

I regained my composure and nervously clicked “Preview” to see what my slider looked like…

meta slider

Cringeworthy. Seriously, this is why people don’t like sliders – because of the 800,000 people who create ugly sliders like this.

⏳ Performance Test

Similar to the review I put together comparing Slider Revolution and Smart Slider 3, I wanted to run performance tests to see which plugin was faster. But since I wasn’t able to produce sliders that were comparable, with similar images and text, this was going to be tough.

I still wanted to know how each plugin performed, so I set up tests anyway. Before we dive in, I want to outline why I wanted to run performance tests. The common perception in the web development world is that sliders negatively impact website performance. Maybe they did a few years ago when sliders were clunky and badly designed (ahem… MetaSlider… cough…), but these days, slider plugins are generally fast as long as users add images that are resized and optimized and put thought into other assets they use.

The sliders I created for the comparison project used images that were 780px by 389px and each slide used the same dimensions, 780px by 389px. In order to test the plugins, I used a similar methodology to my Slider Revolution vs Smart Slider 3 review:

  • I scanned each of the plugins five times using WebPagetest before saving the results and using the median.
  • I did each test on its own page with the other slider plugin deactivated.
  • The page I tested featured the slider and no other content.
  • I cleared the cache after testing each plugin.
  • My test site is hosted with Cloudways.

Smart Slider 3

Smart Slider 3 performance results

MetaSlider

MetaSlider performance results

Smart Slider 3 has more elements because the free version has layers! Interestingly, the results were only marginally faster for MetaSlider. And really, it should’ve been faster since the slider I created with it had optimized images, and no layers, buttons or fancy fonts.

Making Things Fairer…

The slider I created with Smart Slider included two HTTP requests for Google’s Permanent Marker font. I was interested to know how the slider would perform without having to download a third-party font, so I edited my slides to switch out Permanent Marker for Arial and cleared the cache. Here are the updated performance results:

Smart Slider 3 performance results without fonts

Wow. Without any fancy Google fonts, but with the addition of layers and buttons, Smart Slider 3 easily is faster and outperforms MetaSlider.

🏆 The Best Free Slider Plugin: Smart Slider 3

OMG, why is MetaSlider the most popular slider plugin in the WordPress repository?!

MetaSlider absolutely pales in comparison to the free version of Smart Slider 3, which is packed full of features, and then has even more cool features when you upgrade. I mean, you can’t even use layers in MetaSlider unless you upgrade, because it’s a pro feature.

The slider I ended up creating with MetaSlider looks awful. In comparison, the slider I created with Smart Slider 3 is elegant and on par with the Spotify slider (I chose to use a different background image and fonts – didn’t want to copy too much!).

Overall, if I had to pick one plugin for creating free sliders, I’d choose Smart Slider 3. Hands down, it’s the best free slider plugin for WordPress. It includes a huge range of features – including layers – and provides an easy-to-use and intuitive user interface. Plus, it’s faster than MetaSlider when it comes to speed.

If you’re using another free slider plugin, make the switch to Smart Slider 3. It’s easily the best free slider plugin available at WordPress.org.

The post Meta Slider vs Smart Slider 3 appeared first on Smart Slider 3 — WordPress Plugin.

]]> What are the best Gutenberg plugins? https://smartslider3.com/blog/best-gutenberg-plugins/ Sun, 12 Apr 2020 11:00:42 +0000 https://smartslider3.com/?post_type=blog&p=23496 Many people say Gutenberg is the future of WordPress, while others disagree. If you check the reviews of the Gutenberg plugin, you’ll find lots of people who dislike and eager to disable it. Well, bad news for them: Gutenberg isn’t going to go away anytime soon. In fact, more and more developers create new Gutenberg […]

The post What are the best Gutenberg plugins? appeared first on Smart Slider 3 — WordPress Plugin.

]]>
Many people say Gutenberg is the future of WordPress, while others disagree. If you check the reviews of the Gutenberg plugin, you’ll find lots of people who dislike and eager to disable it. Well, bad news for them: Gutenberg isn’t going to go away anytime soon. In fact, more and more developers create new Gutenberg plugins to extend its functionality.

What is the Gutenberg editor?

Before you can learn about the best Gutenberg plugins to add to your site, let’s see what Gutenberg is. Gutenberg is WordPress 5.0’s new editor to create content for your site. Gutenberg brings a new idea to create content: using blocks. What’s a block? A heading, a paragraph of a text or an image. To make it simple, a block can be anything you can add to your page or post content.

Gutenberg is a visual editor and it’s super easy to use. It allows fine-tuning of content in a way that was only possible with shortcodes before. The future is the visual editing and Gutenberg does a marvelous job at supporting this.

A nice touch for WordPress theme developers: Gutenberg allows customizing its editor. They can make the backend editor look and feel like a frontend editor. For example, Gutenberg can use the font family and size at the backend, what the frontend uses. Theme developers can change the content width, set background color, and many more.

How to use Gutenberg?

When you create a new post or page in WordPress 5.0 or above, Gutenberg will open. Using its visual editor, you can write your next most trending post, or create a stunning page. Everything is visual and live, so you’ll see the result right there.

Clean Gutenberg editor interface
Clean Gutenberg editor interface

Using Gutenberg couldn’t be simpler. Type the title of your post or page to the large “Add title” field, then start creating content below. You can use many different blocks to create your content. You’ll probably use the paragraph, heading, image and button blocks the most. But you can easily add a list, video or a simple gallery with Gutenberg.

What are the best WordPress Gutenberg plugins?

Every website is unique and has its own needs. Because of that, many developers have created custom blocks for the editor and released it as a plugin. As a result, many amazing WordPress Gutenberg plugins were created for the community.

This means you will find what you need for your website for sure. On the downside, having many plugins to choose from makes it complicated to find the plugin you are looking for. To help you with your quest, here’s a list of some of the best Gutenberg plugins you can find. Best of all, they’re all free plugins. So let’s dig in!

1. Gutenberg Blocks – Ultimate Addons for Gutenberg

Gutenberg Blocks

Download

Ultimate Addons for Gutenberg is one of the most popular plugins for Gutenberg. The plugin offers many useful widgets. Additionally, after installing Ultimate Addons plugin, you won’t need to waste time to figure out which new content was added. The developers have created their own panel, where their blocks are easily accessible.

Ultimate Addons blocks in Gutenberg Editor
Ultimate Addons blocks in Gutenberg Editor

Some of the coolest blocks you can create: advanced heading, testimonial, social share, content timeline, blockquote (with an option to tweet the quote). There’s also a table of contents block which is useful for bloggers. It automatically reads every heading from your post and creates a table of contents for easy navigation. The block updates itself, so you don’t have to maintain it. Gutenberg blocks is really trying to be the ultimate blocks plugin for Gutenberg.

2. Kadence Blocks – Gutenberg Page Builder Toolkit

Kadence Blocks

Download

Kadence Blocks is yet another popular WordPress Gutenberg plugin. In this plugin, you can enable or disable the blocks you need. This way you can keep your editor nice and clean, without showing options you’ll never use. They also create their own panel to access their blocks in one place.

Some of the blocks Kadence Blocks plugin offers
Some of the blocks Kadence Blocks plugin offers

Some of the coolest blocks they have: Spacer/Divider, Advanced Button, Tabs, Info Box. You can also create an accordion layout where you can adjust the content of each tab by moving any block. I like how well this integrates with the Gutenberg experience.

3. Atomic Blocks – Gutenberg Blocks Collection

Atomic Blocks

Download

Atomic Blocks offers a handful of useful blocks to enhance your posts and pages. The plugin’s header shows some interesting icons which I have expected to see in Gutenberg. After seeing their colorful banner, it was disappointing to see that their icons are so simple.

Blocks in Atomic Blocks

Some of the best blocks are: Notice, Drop Cap, Profile Box, Sharing (you can use this to share on Facebook or Twitter). They integrate with Mailchimp and have a handy block to allow adding a newsletter subscription block. The pricing block they have is one of the coolest blocks I’ve seen.

4. Stackable – Gutenberg Blocks

Stackable

Download

Stackable – Gutenbergs Blocks extends your Gutenberg editor with a list of colorful blocks.

Stackable adds a handful of new Gutenberg blocks
Stackable adds a handful of new Gutenberg blocks

Some of the coolest blocks are: Notification, Blockquote, Team Member and Call to Action Button. They also have a separator block that looks like the Shape dividers in Smart Slider 3. My favorite block from them is their Card block. You can use it to create a block with an image, heading and description.

5. Advanced Gutenberg

Advanced Gutenberg

Download

Advanced Gutenberg by JoomUnited is yet another WordPress Gutenberg plugin. It promises to add all the missing blocks and configuration you need to build professional websites. Indeed, they offer some unique but useful blocks to enhance your website.

Advanced Gutenberg blocks
Advanced Gutenberg blocks

Some of the coolest blocks are: Advanced Accordion, Video, Count Up and Social Links. Another block I loved is the Login/Register Form block. Many people want to handle the login and registration outside of the /wp-login.php for some reason. Advanced Gutenberg Blocks makes it easy to create a page and have a login/registration form inside. For this reason, many website owners will love JoomUnited’s plugin.

6. Gutenberg Blocks and Template Library by Otter

Gutenberg Blocks and Template Library by Otter

Download

ThemeIsle’s Gutenberg Blocks plugin starts with a cool tour to learn the basics of their plugin. Some of the options they show are targeting developers (like the option enable the Custom CSS module), so it might worth disabling it during the tour.

Some blocks Gutenberg Blocks and Template Library by Otter creates
Some blocks Gutenberg Blocks and Template Library by Otter creates

Some of their best blocks are: About Author, Service and Pricing. What’s cool in this plugin is that they don’t only offer blocks. They offer templates (created with Gutenberg blocks) to help those who don’t have an eye for design. To add a template, add a new section under the Otter panel.

7. WooCommerce Blocks

WooCommerce Blocks

Download

Ecommerce is blooming. Because of this, it’s not possible not to add a Gutenberg plugin with eCommerce features to our list. Meet WooCommerce Blocks which is the most popular Gutenberg plugin to add WooCommerce blocks to your post or pages.

WooCommerce blocks are super useful for every webshop owner
WooCommerce blocks are super useful for every webshop owner

The most notable blocks are: Featured Product, On Sale Products and Products by Category. I love the Reviews by Product block, as it’s very useful for promoting any product. The Newest Products block is also great, especially for landing page building.

8. Page Builder Gutenberg Blocks – CoBlocks

Page Builder Gutenberg Blocks – CoBlocks

Download

CoBlocks has some interesting features some of which target business owners. For example, they have a Hero block which you can use to create a beautiful hero section for your website. There’s also a Contact form block which you can use to add a simple contact form to your page. A contact form can help you get new clients (e.g. if you’re a photographer) so they are important to have.

A few blocks CoBlocks will enhance your website
A few blocks CoBlocks will enhance your website

If you run a restaurant, check out CoBlocks. Their Food Item block will be super useful to display your menu. Their Social Profiles block seems to allow the most social sharing features compared to the other plugins on this list.

What’s the future of Gutenberg?

Gutenberg is already fantastic, but still has lots of room for improvement. As a matter of fact, there are many ways to move forward with such a versatile plugin. Luckily, the developers are full of amazing ideas about the future of Gutenberg.

What are these cool ideas? At the moment, Gutenberg is only responsible for content creation at posts and pages. The developers’ plan is to extend this and make Gutenberg the menu and sidebar editor as well. In other words, they plan to replace the current widget system with Gutenberg blocks. This sounds like an excellent idea, and we’re curious to see how it goes.

Conclusion

Gutenberg block editor is the future of creating content in WordPress. It will make the editing experience consistent across different parts of your site. Because of that, WordPress will be easier and faster to use and learn for everyone. As a result, more and more people will be interested in building their site with WordPress.

The only question is how long will it take for Gutenberg to revolutionize how you can work with your WordPress site.

The post What are the best Gutenberg plugins? appeared first on Smart Slider 3 — WordPress Plugin.

]]>
The 8 Best Quality WordPress Themes with Sliders https://smartslider3.com/blog/wordpress-themes-with-sliders/ Thu, 24 May 2018 19:30:35 +0000 https://smartslider3.com/?post_type=blog&p=7876 Strong imagery is a must for any website, but even more so if you have a commercial need to promote your work or sell your products online. One of the best ways to showcase your images is using WordPress themes with sliders. WordPress themes that integrate with sliders – and vice versa – provide an […]

The post The 8 Best Quality WordPress Themes with Sliders appeared first on Smart Slider 3 — WordPress Plugin.

]]>
Strong imagery is a must for any website, but even more so if you have a commercial need to promote your work or sell your products online. One of the best ways to showcase your images is using WordPress themes with sliders.

WordPress themes that integrate with sliders – and vice versa – provide an ideal way to display multiple images fluidly and in an eye-catching way that grabs your visitors’ attention the moment they land on your site.

But before you go downloading that theme you like with its shiny built-in slider, there are a few things you need to know first…

The Problem with Bundled Slider Plugins

What you might not know is that themes that offer slider functionality usually provide it via a third-party plugin. Here’s how it works:

  • The theme author buys an extended license for a slider plugin from a plugin developer, and
  • This extended license allows the theme author to include the slider with a theme they sell.

A popular example of this is Slider Revolution, which is by far the most popular slider plugin for WordPress. How did it get so popular? It is bundled with hundreds of themes in the hugely popular ThemeForest marketplace, including Avada, the best-selling theme of all time on the site.

You might be thinking, bundling plugins with themes makes sense. After all, if a theme author designs a theme to include a hero slider header, they should provide the functionality to achieve it. Plus, bundling plugins makes it easier for users to get a site up and running quickly since they don’t have to buy additional plugins to use with the theme.

Yes, it does make sense. But it’s important to be aware of a few traps. Specifically:

  • Bundled slider plugins can only be used under the same license as the theme they came with, i.e. you can’t use the slider plugin with a different theme;
  • If you need help using the slider plugin, you’ll need to get in touch with the theme author you purchased from during your support period – you can’t access support directly from the slider plugin developer; and
  • Bundled plugins can only be updated when a new version of the theme they are attached to is released. Unless you buy the slider plugin separately, you’ll have to wait until the author of the theme provides the latest version of the bundled plugin with their next theme update.

When users purchase a theme bundled with a slider plugin and later realize the plugin they thought they had also purchased is completely useless with other themes, well… let’s just say it’s caused confusion and later frustration amongst ThemeForest customers:

themeforest bundled plugins limitations

Look, I’m not out to bash Slider Revolution here. I think it’s a fantastic plugin. It’s just unfortunate that the licensing around bundled plugins – especially themes bundled with slider plugins – is confusing. Users aren’t getting what they thought they paid for.

Which is why I think the solution is to use standalone plugins.

Why Standalone Plugins Are Best

A standalone plugin is a plugin that you download or buy on its own, i.e. it doesn’t come bundled with another product. You can download standalone plugins from the official WordPress Plugin Directory and from marketplaces like CodeCanyon (which is part of the Envato company umbrella that ThemeForest also falls under).

When you download a standalone plugin, you get all the benefits of a regular license, including:

  • You can use the plugin independently with any theme;
  • You can update the plugin whenever there are new updates available from the developer – you don’t need to wait until your theme can be updated; and
  • You get access to support.

If you’re launching a new website or planning a redesign and know that you’ll need a slider, it’s best to download or buy it separately from a trusted slider developer. This way, you’ll know that the plugin will work with any theme and if you need support you can count on a quick response from the very people who built it.

Smart Slider 3: The Highest Rated Slider Plugin for WordPress

When it comes to slider plugins, yes, Slider Revolution is the most popular premium option. But did you know Smart Slider 3 is the highest-rated slider plugin for WordPress? With 430 five-star reviews and 200,000 active installs recorded in the WordPress Plugin Directory, you can’t go wrong. Plus, it’s free to download.

There’s a pro version of the plugin, which I’ve compared with Slider Revolution here. But really, the free version is all you need to get started adding a beautiful slider to your website.

Let’s take a look at themes that integrate nicely with Smart Slider 3, along with ideas for how you can feature sliders in your theme.

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

Best Free WordPress Themes with Sliders

Since Smart Slider 3 is free, you might want to pair it with a free WordPress theme:

Neve

neve theme

Neve is one of the most popular free theme in the WordPress Plugin Directory with 20,000 active installs. It also features a nice, big hero header for displaying images, which is pretty handy if you want to display a hero header slider.

Fortunately, ThemeIsle, the team behind this theme, have put together a handy guide to replacing the “Big Title” section with an image slider. In Smart Slider 3, you just need to copy your slider’s shortcode or PHP code and paste it into Neve’s big_title.php file as instructed.

OceanWP

OceanWP theme preview

OceanWP is a free multipurpose WordPress theme that’s easy to adjust for responsive design, ensuring it looks great on any device. There are 13 free demos to choose from, which all feature different layouts.

Adding a hero slider header is as easy as inserting the shortcode for your slider into OceanWP’s settings, which you can learn more about here. Depending on your design, you could display your latest posts as a slider, or stick with a hero slider header.

Here’s just one example of a free slider template from Smart Slider 3 that you could easily insert into your theme and edit to match your branding.

Smart Slider 3 post slider

GeneratePress

GeneratePress theme preview

GeneratePress is a fast, lightweight WordPress theme with a modular structure that makes it easy to customize.

Adding a slider to this theme is straightforward. Whether you want to add a homepage slider, testimonial carousel, or post showcase, you can simply add your slider shortcode into the “Content” section of the page header metabox (if you’re using the Page Header add-on).

Otherwise, if your homepage is your blog, you can go to Appearance > Blog Page Header and insert your slider shortcode into the content section of that page (also using the Page Header add-on). You can learn more here.

Astra

Astra theme preview

For a free theme, Astra is gorgeous – the team who built it obviously have an eye for design.

Astra works great with the Elementor page builder plugin, which allows you to customize your pages via drag and drop. With Elementor, you can add sliders anywhere on your site by inserting your slider shortcode into your theme. WPCrafter.com explains how to work with Astra’s headers using Elementor in this instructional video.

Startup Blog

Startup Blog Theme

The Startup Blog theme is a beautiful, minimalist WordPress theme you can get for free. It features a nice looking post slider at the top of the page, immediately encouraging visitors to check them out. Since it’s a free theme, it doesn’t have a built-in page builder. But the good news is, Startup Blog plays very well with Elementor. Did you know that at the moment Elementor has more than 3 million active installations? It’s safe to say this is the most popular free page builder plugin in 2019. By the way, the theme is also Gutenberg compatible.

Startup Blog isn’t just Elementor and Gutenberg but Smart Slider 3 friendly as well. You can put the slider’s shortcode to any post or page and the slider will show up there. If you would like to replace the header slider with Smart Slider 3, you’ll need to modify the theme. But the developers coded Startup Blog so well that this will be very easy.

Need help to get started? Startup blog theme has a very detailed documentation. It teaches you everything from the basics to the more advanced settings. All steps are explained in detail, with pictures. Thanks to this, you’ll be able to set up this beautiful theme in no time!

Startup blog slider

Best Premium WordPress Themes with Sliders

When you’re ready to take your website to the next level, a premium theme can provide you even more features. Here’s a select list of themes that work great with WordPress sliders.

Avada

Avada theme preview

As I mentioned above, Avada is the best-selling WordPress theme in the ThemeForest marketplace with 425k+ sales. It comes bundled with 3 premium sliders – Layer Slider, Slider Revolution, and Fusion Slider. But again, when you use one of these plugins it means you’ll only get a limited feature set, no support, and you won’t be able to update the plugin..

With Smart Slider 3, you can easily add a slider to any page or post using the theme’s Fusion Page Options or Fusion Builder Elements. For example, say you wanted to add a static slider to the Avada theme using Smart Slider 3. You could easily insert the free template slider below – or any one of Smart Sliders 100+ templates – using Fusion’s features and make further customizations to suit the style of your site.

Simple Slider with Smart Slider 3

BeTheme

BeTheme preview

With more than 330 pre-built templates, BeTheme is a hugely popular option for users who want to build a stunning WordPress site with ease. Like other popular premium WordPress themes, it comes with page building functionality – Muffin Builder 3 and WPBakery Page Builder.

With these page building tools, all you need to do is insert your slider shortcode into any post or page to display a beautiful slider, whether it’s a product slider like this:

Smart Slider 3 product slider

X Theme

X Theme Eclipses preview

With X Theme, you can achieve virtually any look and layout for your website using one of the 4 pre-built “stacks” (i.e. starter themes), which you can then customize using Cornerstone. The team behind X Theme developed the Cornerstone page builder to give users the freedom and flexibility to make front-end customizations and create any design you want.

X Theme comes bundled with Slider Revolution, LayerSlider, and Soliloquy. Again, with a free standalone plugin such as Smart Slider 3 you’ll get full slider functionality. Just like the other slider plugins, all you need to do is copy your shortcode from Smart Slider 3 and, using Cornerstone, paste it on your site where you want to display your slider/s.

For example, say you wanted to add a slider section to the band theme demo above. With Smart Slider 3 you could create a section displaying your latest posts, like so:

Smart Slider 3 Post Slider Carousel

Conclusion

When it comes to WordPress themes with sliders, your choices are endless. The truth is, you don’t need to download or buy a theme with a “built-in slider” because there’s no such thing – themes with sliders use third-party plugins in order to provide that functionality.

So why not cut out the middleman and download a free slider that’s better than any bundled slider plugin? Smart Slider 3 can help you create any kind of slider you want, from homepage hero sliders to testimonial carousel, post showcases, fullscreen sliders, and even simple hero blocks. You’re only limited by your imagination.

The post The 8 Best Quality WordPress Themes with Sliders appeared first on Smart Slider 3 — WordPress Plugin.

]]>