• Categories
    • Tutorials
    • Beginners Guide
    • WordPress News
    • WordPress Security
    • Best WordPress Plugins
    • WordPress Themes
    • Product Reviews
    • WP Tips & Tricks
  • Guides
    • Start a Blog
    • Make a Website
    • WordPress Hosting
  • Themes
  • Hosting
    • Kinsta
    • Flywheel
    • WPEngine
    • SiteGround
    • A2 Hosting
  • Coupons
    • WPEngine
    • SiteGround
    • HostGator
    • A2 Hosting
Best WordPress Plugins

How to Make Beautiful, Lightweight Sliders with the MotoPress WordPress Slider Plugin

Last Updated on: June 27, 2016 Lyn Leave a Comment

How to Make Beautiful, Lightweight Sliders with the MotoPress WordPress Slider Plugin

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

Install 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:

Activate WordPress Slider Plugin

2. Creating Your First Slider

Select MotoPress Slider

Creating a slider is easy. All you need to do is select the MotoPress option from the admin panel and click Create Slider:

Create MotoPress 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

Slider Types

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

Create New Slider

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.

Default Slider Settings

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.

New Slider Name

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.

Slider Size

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.

Slideshow Settings

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

Add New 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

Color Background

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

Image Background

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.

Background Image Cover

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:

Background Image Contain

4. Adding Layers to Your Slide

There are four types of layers you can add to your slide:

  • Text
  • Image
  • Button
  • Video

Resize 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:

Grid Layer Setting

Left:

Grid Layer Setting

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:

MotoPress Slider Guides

Styling Layers

Style Editor

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:

Edited Text Layer

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.

Custom Styles

Developers can click the Advanced Editor tab and enter custom code in the Custom Styles box.

Premade Styles

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:

Create New Preset

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

Layer Animation

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.

Time Animation Displays

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

Linkable Slide

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

Save & Preview Slide

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.

Preview Slider

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

Slider Overlay Buttons

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:

Change Overlay Buttons

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:

Add Slider to Page

10. Accessing the Backend Editor from the Frontend

Quick Access

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.

+ Share
Disclosure

Lyn

Related Posts

Back to all articles
  • CSS Hero Review: Taking The Pain Out Of WordPress Customization

  • LifterLMS Review: Deliver Online Courses with WordPress

  • 6 Best WordPress Appointment Booking Plugins Compared

Coupons

View more deals
  • 15% OFF

    WP Security Audit Log

    WPKube has partnered with the folks who develop the WP Security A
    Get This Deal
  • pressable logo
    15% OFF

    Pressable Coupon

    If you’re looking for a high-quality managed WordPress hosting
    Get This Deal
  • wpengine coupon
    20% OFF

    WPEngine Coupon

    If you’re in search of a WordPress hosting company that deliver
    Get This Deal

Leave a Reply Cancel reply

Full Disclosure This post may contain affiliate links, meaning that if you click on one of the links and purchase an item, we may receive a commission (at no additional cost to you). All opinions are our own and we do not accept payments for positive reviews.

Our Newsletter

Get awesome content delivered straight to your inbox.

THE BEST OF WPKUBE

Some of the best content we have published so far.

BEGINNER GUIDES & REVIEWS

1How to Start a WordPress Blog (Step by Step Guide)
2How to Install WordPress - The Complete Guide
39 Best Options for Managed WordPress Hosting Compared
4The 7 Best WordPress Hosting Providers for 2019 Compared
5Top 9 Landing Page Plugins for WordPress (2019)
611 of the Best List Building Plugins for WordPress In 2019
7How to Fix the 500 Internal Server Error on Your WordPress Website
8WP Beaver Builder Review: Build WordPress Sites Instantly
9What is a Gravatar and Why You Should Get One
10Thrive Themes Review: A Look At The Full Membership
117 Best WordPress Migration Plugins Reviewed and Compared
12OptimizePress Review: Create Landing Pages with Ease
13How to Make a Website: Complete Beginner's Guide
14WordPress.com vs WordPress.org: Which is Best for Me?
15Top 22 Best Free Stock Photo Resources For Your Site
1617 of the Best Google Fonts (And How to Use Them in WordPress)
17LifterLMS Review: Deliver Online Courses with WordPress
18How To Fix '503 Service Unavailable' WordPress Error
1911 Best Contact Form Plugins for WordPress in 2019
20How to Use BackupBuddy – The Best Backup Solution for WP??
2115 Best 'Hidden Gem' WordPress Themes for 2019
22How to Add a Custom Logo to Your WordPress Site
23Kinsta Review: Real Test Data + My Likes And Dislikes
24How to Fix Error Establishing a Database Connection in WordPress
25Thrive Architect Review: A Huge Upgrade to Thrive Content Builder

Exclusive deals

Flywheel Elegant Themes Coupon WPEngine Coupon SiteGround

WPEngine: 50% OFF Deal

Save 50% on one of the best managed hosting providers.

Get this Deal

Featured In Forbes Huffpost Entrepreneur SEJ

About WPKube

WPKube is an online WordPress resource which focuses on WordPress tutorials, How-to’s, guides, plugins, news, and more. We aim to provide the most comprehensive beginner’s guides to anything about WordPress — from installing plugins, themes, automated installs and setups, to creating and setting up pages for your website.

We have over 500+ tutorials, guides, product reviews, tips, and tricks about WordPress. Founded by Devesh Sharma, the main goal of this site is to provide useful information on anything and everything WordPress.

Useful Links

  • Behind the Scenes
  • Beginner Guides
  • WordPress Hosting
  • WooCommerce Themes
  • MeridianThemes
  • Exclusive WordPress Deals
View All Guides »

Reviews

  • WPEngine 33% OFF
  • Thrive Leads
  • Flywheel 33% OFF
  • Divi Builder 20% OFF
  • SiteGround 60% OFF
  • Elegant Themes
Reviews »

Deals

  • InMotion Hosting
  • SiteGround Coupon
  • LiquidWeb Coupon
  • WPEngine Coupon
  • A2 Hosting
More Deals »
© Copyright 2019 WPKube ® All Rights Reserved.
  • About
  • Contact
  • Site Terms
  • Disclosure
  • Privacy Policy