This lesson continues from the previous lesson, “Installing, Activating and Configuring Smart Slider 3.”
If you’re continuing from the previous lesson, then you’re already in the Smart Slider Dashboard. However, if for some reason you had logged out, here are the steps to return to the Smart Slider Dashboard.
- Type in yourdomain.com/wp-admin
- Enter username and password.
- Click the “Login” button.
Look for the “Smart Slider” button in the left column menu.
Click it.
Ok, so now we’ll scroll down and look for the part that says “New Slider.”
We’ll click on “New Slider.”
This pops up a Create Slider Dashboard. The Create Slider Dashboard gives us several options.
As you can see, the first thing we have to do is give our slider a name. Let’s name it:
Next option we have is to adjust the height and width.
I think I’ll just leave that at default settings for now.
For now, I”ll choose “Default.” So I’ll click on that.
As you can see, it’s already selected since it is highlighted in blue.
Finally, I click the “Create” button way down towards the bottom of the page.
The slider has now been created and a new screen loads.
Now scroll towards the bottom of the page where we have the option of selecting the images for the slider.
So the first thing I”ll do is click on where it says “Slide 1.”
That opens the Media Uploader where we have the option of uploading a new image or choosing one from the Media Library.
As you can see I already have quite a few pictures in my WordPress Media Library. And I guess by now you already know how to upload pictures into the Media Library.
So for the first slider of this slider, I’ll click this image here.
Once I click on it, I now have the option of selecting it.
And there it loads into the slider!
Now of course, one slide is not enough for a slider. So let’s click “Add Slide” which appears to the left of the first slide we just uploaded.
And this loads up a wide variety of options for our next slide in the slider. As you can see, we’re not limited to just images, we can slide videos, posts etc.
But for now, let’s click on “Image.”
And that loads up the image library again, and I click on a new image.
So I repeat these steps until I have six slides for this slider.
So let’s scroll down a little bit and configure some options.
First thing we have do is decide if we want navigational arrows on the slider, and if so, what style of arrows?
The second thing is to decide whether we want navigational bullets on the slider.
The third thing is to decide whether or not we want a text bar on the slide.
The fourth thing we need to decide is if we want thumbnails at the bottom of the slide.
And the fifth option has to do with Shadows which is something I won’t touch for now.
So the first thing I’ll do is click on the Arrows Button.
Now let’s see our options.
The style highlighted above is the one I selected for our slider.
I’ll leave all the other arrows options on default settings except.
I’ll change “Previous Arrow” to “Previous Image” and “Next Arrow” to “Next Image.”
That makes more sense doesn’t it? Great.
Next, I’ll click on the “Bullets” button.
In this case, I’ll click on the No Bullets option highlighted above as I already have navigational arrows, and I’m not a big fan of bullets.
Next, I’ll click on the Text Bar Option.
And I’ll choose the No Text Bar Option because I think I’ll use the layers option to insert a description of the image – which is way neater.
Next I click on the Thumbnails option.
I think I’ll leave the thumbnails option selected. Thumbnails are neat because they remind your viewer that more images are coming. They also serve as a navigational tool for moving between images.
Next, I’ll just click the Save Changes button located towards the top of the page.
OK, so let’s scroll up a bit and look at another set of options.
First, I’ll click on the Publish Button.
The Publish Button gives us 3 options.
- Insert a shortcode where we want the slider to go.
- Insert the slider from a page or post editor.
- Insert a PHP code into the template files (for more advanced developers).
For now, we’ll use the shortcode method. We’ll copy and paste the shortcode highlighted above into our text widget in order to run the slider.
Now let’s take a look at the general settings.
I need to tweak the general settings a bit.
The “Controls” settings under “General Settings” helps us configure how users can move between the slides on our slider. At present we have the following options.
- Mouse scroll. This enables users to move between images by scrolling the mouse wheel. I’ll leave this option turned off.
- Mouse drag. This gives users the option of moving between slides by clicking, holding down the mouse button and dragging it away. I’ll leave this turned on.
- Touch. This gives mobile phone users the option of moving images by touching and dragging. As you can see, we have the option of disabling the touch control or letting user drag either vertically or horizontally. I’ll leave the horizontal option on. So smart phone users can touch and drag an image horizontally to move between them.
- Keyword. This I guess means moving between the images using the keyboard arrows. I’ll leave this on.
So here we are.
Now let’s look at the alignment options.
I want my slider to be aligned in the center of the page, so I’ll select that option. Here we go.
Let’s look at the next option.
That’s the background image fill, and I’ll leave that at its default settings.
Now lets look at our animation settings.
This is basically the effect by which one slide disappears and another appears. For now, I’ll choose the “Fade,” effect.
OK, so our next option is the Size menu. I’ll just leave that at default settings for now and jump right over to the Autoplay Menu.
Autoplay is the images sliding by themselves without anyone clicking the arrows. At present, this feature is turned off, but I’ll turn it on.
Once we enable this option, a few other options get turned on.
I’ll just leave all those at default settings and move on.
OK, I’ll also leave all other settings at default for now, because I’m enthusiastic to go test out my slider on my web page.
So I’ll just click the “Save” button, and see you in the next lesson, “Inserting the Smart Slider into our Homepage.”
