by Ramona Nemeth-Csoka on May 13, 2019

How to Create a Good Responsive WordPress Slider?

Responsive slider

Nowadays people browse on their desktop computers, laptops, mobiles and tablets. They have different screen sizes so your website needs to adapt to any size. Unless your visitors can find what they look for on your WordPress website, they’ll leave. If your website looks bad on the visitor’s device you can lose a potential customer. Not only do you need a responsive website, you need a responsive WordPress slider as well. Luckily, Smart Slider 3 is a great tool to create beautiful and fully responsive sliders.

How to make a responsive WordPress slider?

The easiest way to create a beautiful responsive WordPress slider is via Smart Slider 3. Even the free version allows you to create sliders which look perfect on mobile. Once you finish creating your slider you can easily add it to your website using its shortcode.

  1. You need to decide what kind of slider you need. Should it be a full width or full page slider?
  2. Think about the layout of your slider. What kind of content will your slider have?
  3. Create the slider using Content mode, in desktop view.
  4. Use the device icons and switch to tablet and mobile view and check your slider.
  5. Use the font size modifier if needed, to adjust the font sizes for a better look.
  6. Hide unnecessary layers on mobile or tablet.
Smart Slider 3 Icon
Bring Your Ideas to Life
Powerful. Visual. Intuitive. Smart Slider 3 is the most advanced slider and block creation tool for WordPress and Joomla.

The highlights of Smart Slider 3

Smart Slider 3 is a responsive slider plugin for WordPress which you can use to add sliders to your website. The user interface is easy to learn and there are many slider settings which let you fine-tune your slider. Smart Slider 3 supports adding image and video slides as well. The slider is SEO friendly, so when you add images, you can give them alt and title text. For rich media support, you can add YouTube and Vimeo videos, and in the pro version, MP4 videos as well.

Responsive modes in Smart Slider 3

Here’s a few things to consider before you start making a responsive WordPress slider. First, you should think about how you want the slider to behave. It should be responsive, of course, but what more? Do you need the slider to be full width or full page, or should it fill the area where it is in and nothing more?

Smart Slider 3 has 4 different responsive modes: Auto, Full Width, Full Page and Fixed. The fourth mode, Fixed, isn’t responsive unlike the others. For this reason, this article won’t cover that mode.

Auto responsive mode

An auto responsive slider has a simple behavior: it fills the container where you’ve placed it. For instance, if you put the slider to your post content, it will be as wide as your post area. This way your responsive WordPress slider does not break your theme’s layout.

Today, most layouts are full width, but you can still find a couple of boxed designs. An auto responsive slider is great for a boxed layout, as it fits into its container. This responsive mode is the best for adding a slider to your WordPress post.

Full width responsive mode

A full width slider fills the total width of the browser, even if its container does not. What’s so great about these sliders is that they have plenty of room. There’s enough space to put the content and the visitor can enjoy the background, too. Most themes feature a slider on their homepage, and this slider is usually a full width one. This makes them the most popular sliders around. If you check out a few full width sliders, you’ll understand why: they look gorgeous inside any theme.

Full width sliders are great for pretty much any purpose. Whether you want a post slider, a hero slider, or a simple image slider you can’t fail with this mode. The best part is, you don’t need to buy the pro version to create full width sliders.

Full page responsive mode

Full page sliders fill the browser width and height on every device. On desktop screens it gives you lots of space to place your layers, which is great. The problem width full page sliders is that their mobile size is short and narrow. On such a small size, there isn’t enough space to add more than a couple of layers.

Full page sliders are great for hero sliders. You can also take advantage of their greatness if you decide to create a landing page. This responsive mode is available in the premium version of Smart Slider 3 only.

What is Content mode and how to use it to make a responsive WordPress slider?

Content mode is Smart Slider 3’s unique editing mode. This mode is not available in any other responsive WordPress slider plugin. When you use Content mode, you can work on your slide as you would use a page builder. You can create rows with columns and place layers or other rows into the columns. Layers have connection to each other and align themselves based on their surroundings. For instance, put down a heading layer and place a button below. As you write more text to the heading layer, it pushes the button down. This behavior prevents the text ending up on top of or behind the button.

Creating a responsive WordPress slider in Content mode can seem hard at first glance. Content mode isn’t a free positioning like what most people are used to. It’s crucial to understand how it works and get used to thinking in structures. You need to spend some time to learn, but after you know the basics, you can work faster and better in this mode.

The basic responsive behavior of Content mode

We’ve built Content mode with the purpose to help you reduce the time spent with the slide editing. Structures let you work faster and more precise. The best part of Content mode is that when you set it up properly, it’s unlikely to get bad results on small screens. There’s a constant font size on each device, which makes sure the texts are legible on mobile.

The layers can adjust their position based on their surroundings. The best part of Content mode is that the layers will always fit the slider. When they need more space, they make the slider bigger. Rows wrap each column after the other on mobile.

Creating a responsive WordPress slider in Canvas mode

If you’ve ever used any slider plugin, you know how Canvas mode works. It’s a simple drag and drop editing, which lets you put the layers anywhere within the slide area. The upside of Canvas mode is that it’s easy and takes almost no time to learn. The downside is that the more layers you add the harder it will be to make the slider responsive.

The layers you add in Canvas mode have no connection to each other. Let’s say you have a heading layer and a button below then add more text to the heading layer. The heading layer won’t push the button below to make more space for itself. As a result, it can cover the button or move below it depending on the layer order.

The basic responsive behavior of Canvas mode

Canvas mode works on a very simple responsive idea: it scales with the slider. If you make the slider bigger, the font sizes and images will grow larger. If you make the slider smaller, the text and images will shrink. This means the text can get tiny on mobile, and lose their legibility. Since the layers have no connection to each other, they’re likely to overlap.

Tools that help you create a responsive WordPress slider

Smart Slider 3 has many useful tools to make the most of the editing mode you’re using. You can use these tools to optimize your slide’s look for different devices. Let’s go through them so you can start creating your responsive WordPress slider.

1. Font size modifier

You can use the Font size modifier to adjust the font sizes for each device. For instance, if your texts shrink too much on mobile, you can make them bigger. This helps keep the texts legible on all devices.

Available in Free and Pro version
Editing mode(s) Canvas and Content
Use it to Increase or decrease the font size for each device

2. Show on devices

When you create a responsive WordPress slider for desktops, you can add lots of layers. But on small screens you probably don’t need as many layers. Using the Show on devices feature you can disable any layer which you don’t need on any particular device.

You can use this feature to optimize your content for mobile in several ways. As an example, you can remove long text layer, or images that are only for decoration. Do you use layer animations on your slides? Lots of animations can be resource-heavy for mobile phones. You can hide the desktop layers, which have the animation, and create new layers for mobile.

Available in Free and Pro version
Editing mode(s) Canvas and Content
Use it to Create device specific layers

3. Custom Slider size

Content mode can increase the size of the slider if your layers need more space. While you can set a custom slider size even if you use Content mode, it’s not needed to create a proper layout. But if you’re working in Canvas mode, you’ll need to set custom slider sizes. The challenge here is finding the perfect size for your slider, which isn’t easy to figure out.

Available in Pro version
Editing mode(s) Canvas and Content
Use it to Increase the slider size for different devices

4. Layer align

In Canvas mode the layers aren’t aligned to each other, but to the slide canvas itself. Each alignment has a vertical and horizontal alignment point for proper positioning. For instance, you can have a layer which is bottom-right aligned. If this layer needs more space, it can go upwards or to the left. If there’s a fixed layer width set (so it’s not auto), and the size it needs would exceed that, it will go upwards. If the layer width is auto then the layer will increase its size to the left.

This behavior means your layers can cover each other on different screens. That’s not a good behavior for any responsive WordPress slider. The good news is that there’s an easy way to avoid this problem. Make sure that all your layers have the same alingment points. Here’s a video where you can see the difference:

The video starts by setting the alignment of the first button layer. The two top layers have the same alignment. They’re both top-left aligned, while the last two layers have different alignment. This results the second button to cover the heading above as the screen gets smaller.

Available in Free and Pro version
Editing mode(s) Canvas
Use it to Ensure proper layer positioning

5. Chain layers together

Using the layer chaining feature, you can connect two layers to each other. Let’s say that you have a heading layer and a button below each other. The heading layer can break into two lines on bigger screens which means it’ll cover the button. But with the chain feature the heading layer pushes the button down without covering it. This behavior is the default way Content mode works.

Available in Pro version
Editing mode(s) Canvas
Use it to Connect layers to each other

Summing up

Creating a beautiful responsive WordPress slider can be a challenging task. Luckily, you can make your job easier in several ways. If you plan your slider before you start working on it, you can save yourself from lots of trouble.

You should also work in Content mode, to reduce the time you need to spend editing your slides. For adding content, you shouldn’t use Canvas mode, unless you definitely need to work in this mode. Content mode will save you from lots of trouble in the long run.

Ramona Nemeth-Csoka

About Author

I’m Ramona Nemeth-Csoka and I’m a member of Nextend‘s awesome support team. You’ve probably chat with me if you’ve submit a support ticket. When I’m not answering support emails I read a book or go cycling. I enjoy writing as well, both for our blog and for my private projects.