A WordPress slider plugin is a nifty little tool you can use to create beautiful custom sliders, and MotoPress has made this even simpler with their Responsive WordPress Slider Plugin. This plugin allows you to build sliders using a drag-and-drop interface and an easy-to-navigate backend editor.
Please note this plugin does require your server to be running WordPress 3.5 or later and PHP 5.2.4 or later. Also, MotoPress does allow you to test out a demo version of this plugin. You can check out that feature here if you’re interested.
Let’s learn how to build a slider with this plugin.
1. Installing the MotoPress WordPress Slider Plugin
Installing the plugin is very simple. All you need to do is upload the ZIP file you downloaded from MotoPress to your WordPress site or upload the extracted version via a file manager just as you would with any other premium plugin. It’s just a matter of activating the plugin after that:
2. Creating Your First Slider
Creating a slider is easy. All you need to do is select the MotoPress option from the admin panel and click Create Slider:
You’ll notice there’s an Import & Export button. This little feature lets you export sliders you create. You can either use these files as a backup or use them to transfer your slider to other sites. This is especially useful for developers who create their own styles with the MotoPress Slider and wish to use them in future projects.
The Different Slider Types in the MotoPress WordPress Slider Plugin
After you click Create Slider, you need to select a slider type. You can also import a sample from each slider type. These samples contain completed sliders. All you need to do is change the content within them.
These are the slider types that come with the MotoPress Slider plugin:
- Custom Slider
- Posts Slider
- WooCommerce Slider
Custom sliders are fairly self-explanatory. They’re what you’ll use to create sliders filled with custom content and custom styles. They’re the most versatile option out of all three slider types.
Post sliders are what you’ll use to create sliders filled with the featured images and titles of your latest posts.
WooCommerce sliders allow you to create sliders filled with products. This is a great feature to use when you’re running a sale or want to push specific items over others. Note that you won’t see any WooCommerce options until you install the WooCommerce plugin.
Configuring Your Slider’s Settings
We’re going to go with a custom slider for the purpose of this tutorial. Select the slider type you’d like to create, and click Create Slider.
The image above depicts what you’ll see when you create a new slider. These are the default settings. Note that the code in the Slider Alias box matches the code in the Slider Shortcode box. The first thing you’ll want to do is change this in addition to the Slider Title.
Pick something descriptive so you can recall it later on. This is especially important if you plan on building numerous sliders. Luckily, when you enter a new alias in the Slider Alias box, your slider’s shortcode changes automatically.
Next is the size of your slider. If you’re using this slider on a fullwidth page, you can use the Force Full Width setting. This will make your slider stretch from one side of the page to the other. Otherwise, pick a width and height that’s appropriate for the page you’ll be placing this slider on.
Make sure you pay attention to what width and height you set this setting to if you plan on using background images on your slides. Your background images should match this setting, though it’s not entirely necessary. More on that later.
The last settings are optional for now. If you don’t feel like figuring out what they should be before you create your slider, you don’t have to, but we’re going to go over them anyway. You’ll also notice you can disable the slideshow function altogether by unticking the box for Enable Slideshow.
Here’s a quick rundown on the slideshow settings:
- Slideshow Delay – This setting affects how long each slide displays for.
- Slideshow Animation – This setting determines which animation your slider uses to transition from one slide to the next.
- Slideshow Duration – This setting affects how long it takes to transition from one slide to the next.
- Slideshow Easing – This setting more or less determines the direction in which each slide transitions to the next.
Click Create Slider once you’re done configuring its settings.
3. Adding a Background to Your First Slide
Click New Slide to create the first slide for your slider.
There are three different types of backgrounds you can add to a slide:
- Color
- Image
- Video
Adding a Background Color to a Slide
Click the Color tab if you want to add a color as a background. You can add a solid color or a gradient, which allows you to manipulate the colors, two to be exact, and angle the gradient uses. You can also change the transparency of each color no matter which color type you choose.
Adding a Background Image to a Slide
Again, it’s best practice to use an image that matches your grid size, but the plugin will stretch or shrink your image to size if need be. You can also change the Size setting to manipulate how the image is displayed.
The default Size is Cover, pictured above. This setting will stretch your image beyond the dotted container lines. You can also choose Contain, which will bring your image to its actual size. This setting also allows you to use a background color with your background image:
4. Adding Layers to Your Slide
There are four types of layers you can add to your slide:
- Text
- Image
- Button
- Video
Images and videos can be resized by clicking and dragging the width and/or height to the size you desire.
You can click and drag a layer to move it to any location you want on the grid, but you can also use the 3×3 grid layout to quickly move a layer like so:
Center:
Left:
The Slide Editor comes with dotted guides that help you keep your layers aligned with one another. It also includes an “auto-align” feature, a feature that auto detects when two layers are next to each other and snaps them into place automatically so they’re aligned with one another perfectly:
Styling Layers
Click the Edit button with the paintbrush icon to open the style editor. Any change you make will show in the preview box at the top of the style editor:
The tabs you see are the same for each layer type. It doesn’t require you to learn how to code, as you can see. You simply select which color(s) and font(s) you want and enter a number for any setting that requires the use of pixels. You can also click the Hover State button and edit the styles you want displayed when a user hovers over a layer.
Developers can click the Advanced Editor tab and enter custom code in the Custom Styles box.
You also have a few premade styles to choose from in the far right menu of the style editor. These are called presets, and you can create your own by clicking the Create New Preset button at the bottom of the screen:
You’ll also notice a Duplicate button, which enables you to duplicate a layer so you don’t have to waste time creating a new one from scratch if you only need to make a small change to the new layer.
5. Animating Layers
Not only can you choose the exact animation each slide makes when it transitions from one slide to the other, you can also choose how each individual layer appears and disappears from the screen.
As you can see from the image above, there are a lot of different animations to choose from. Changing the number in the box to the right of the drop-down menu that has Linear selected changes the duration of the animation.
Changing the Displays at (ms) setting affects the specific time at which the layer appears. The slider includes a little hint of the setting you chose for the Slide Duration, letting you know how long this individual slide will appear on the screen. This setting allows you to enhance the look of your slider by making different layers appear at different times and even with different animations.
Changing the Hide at (ms) setting allows you to remove a layer. This can be especially useful when you want to use your slider as a call to action. You can make the certain layers disappear and leave only the call-to-action button behind, for example.
6. Making an Entire Slide a Clickable Link
If you want to add a clickable link to an entire slide, just click on over to the Link tab and enter a link. The user will be taken to the page the link leads to no matter where they click on the slide.
7. Saving Slides, Previewing Slides & Previewing Your Slider
Make sure you click the Save Slide button periodically. You can also click the Preview Slide button at any time to preview any changes you make.
You can’t preview your entire slider from the Edit Slide screen. You need to click the Slider Settings button at the bottom of the Edit Slide screen, and click Preview Slider.
8. Controlling Your Slider’s Overlay Appearance
When you preview your slider, you’ll notice it has a few overlay buttons that enable the user to do what they want with your slideshow. If you want to remove any of these overlay buttons, all you need to do is open the slider settings and navigate to the Controls tab. This is where you can change which overlay buttons appear on your slider:
9. Adding a Slider to a Page
You can create an easy-to-remember shortcode, but MotoPress has gone one step further by adding a drop-down menu in the WordPress editor. This feature enables you to select one of your sliders to insert it into a page:
10. Accessing the Backend Editor from the Frontend
If you’re viewing the slider from the frontend and notice an issue, all you need to do is click the Gear icon to open that specific slider’s settings on the backend of the site.
Final Thoughts
This is a fantastic WordPress slider plugin that’s lightweight and easy to use. It allows anyone to build beautiful sliders with a few simple clicks, and it doesn’t take much time at all to learn. Plus, there are plenty of options and abilities experienced developers will surely love.
Click here to learn more about the MotoPress slider plugin.
Don’t forget to use our exclusive MotoPress coupon code “wpkube” to get 15% off discount.
MotoPress is mostly known for its Content Editor plugin, a premium page builder plugin, so make sure you check out our review for that plugin if you’re not up to speed, yet.
Leave a Reply