How to Set up An Image Slider

Easily add an image slider to your WordPress website or blog with these simple directions. Customize width and height for your theme in minutes.

Adding an image slider to your website it a fun way to feature content on your site. Here is a step by step guide covering how to set up an image slider using Soliloquy Lite WordPress Plugin.

This tutorial is part of the Midnight Theme Installation Documentation, but can be applied to any WordPress theme.

FOR THE MIDNIGHT THEME: Minimum image size for the full slider is 1075px (width) x 350px (height) and 650x 405 px for the left slider widget.

How to Set up An Image Slider

Before we get into the nitty gritty of exactly how to add your image slider, it’s important to first look at a few pros and cons of having an image slider at all.

Pros of Having an Image Slider::

1. It’s flashy and catches the eye. A slider, especially on the home page can help people see most content from your site without having to scroll as much.

2. It sets a tone. Even if you aren’t using the slider to promote content, you can use the images to set a tone. I love the example of the slider on this homepage: Salt in My Coffee. The images aren’t necessarily linked to content, they are simply there to set the visual tone and feel for the rest of the site.

Cons of Having an Image Slider:

1. It’s resource intensive. This is really the only con I see to having an image slider. It uses a lot of resources to load and as a result brings down the site load time.

Site load time is of course crucial to customer loyalty, higher ad RPMs, and even product sales. The faster the page, the better all of those metrics will be.

Tips for faster load time.
These tips will help you with faster load time for your slider.

Scale images to the exact size of the slider. So if your slider is 600px wide, your photos needs to be 600px wide. DO NOT just upload a 5000px image and let the slider auto resize it. That will drastically reduce load time.

Use jpg file extension and compress the image. Many photo editing suites have the option to compress jgp images on save. I usually compress at 82% which keeps the photo detail but reduces the file size. NOTE: GIMP is a free editing program that I love.

Depending on your site and what purpose the slider serves, you may still decide to add a slider to your site! If that is the case, continue reading!

Installing an Image Slider with Soliloquy:

Follow these simple instructions for adding a slider to your website.

1. Install and activate “Responsive WordPress Slider – Soliloquy Lite“ plugin.
2. Navigate to Soliloquy >> Add New
3. Give your new slider a name then click the Config tab and use the recommended size for the area you will be using.
4. Select files from your computer or your PC
5. Save changes and copy your slider shortcode from the top right hand side of the page (right under the “Publish” option).
6. Lastly, you’ll add a Text widget to the appropriate widget area (Home-Full Width Slider or Home-Left Slider) and copy/paste in your slider shortcode.

PIN THIS FOR LATER

Even More Blog Set Up Tips: