OK. So we’ve installed the Slide Anything Plugin and we’ve created our first slider using it. Now it’s time to insert that slider into our homepage. Let’s do this!
To insert the slider onto the homepage, we need to use something called a shortcode. What’s a shortcode? It’s just that: a short code. Yes, a very short line of code which, when written on a page, will display the slider that we just created.
What is this shortcode and where do we find it? We can find right on that sliders dashboard we used to create our first slider.
So let’s do this!
We’re going to place the slider in a widget area at the top of the page. In order to do this, we need to write the code into that widget area. We’ll have to use the “Text Widget” which allows us to write a shortcode into that widget area.
In order words, we’ll have to find this widget area where we want to place the slider, then drop the text widget inside, then write the shortcode (or copy and paste it) into that text widget.
So let’s look at our available widget spaces.
I’ll go back to my website’s Dashboard and type in hotelamazonasgy.com/wp-admin, enter username and password, hit Login.
Once inside the Dashboard, I’ll click on Appearances >> Widgets.
This will land us into the Widgets Dashboard.
And that’s all our widgets area shown above. As you can see, the Unicorn Theme offers us 14 different widgets area. The one highlighted in yellow above is where we want to put our slider. That is, the Top Sidebar.
So we’ll expand the widget area by clicking that handy “down arrow button” right next to it.
Now that the widget area is expanded, we can now drag and drop the Text Widget into it. We’ll have to look on the left hand side of the page for this.
There it is! That’s the guy we need! I’ll drag on drop it into the Home Page Top Sidebar widgets area.
So there it is. It has a title bar but we’ll leave this blank for now. It’s time to drop the shortcode into the widget. But what is the shortcode?
In order to get the shortcode, we need to navigate away from this screen and go back to our slider.
Let’s do this. I’ll first collapse the widget by clicking that “Up Arrow” right at the top right.
The widget is now collapsed and the arrow becomes a “down arrow.” To reopen the widget again, simply click the down arrow.
So let’s go back to our slider once again. I’ll click SA Sliders >> SA Sliders.
This brings us back to our sliders dashboard which shows a list of our sliders and their shortcodes.
There you can see the list of Sliders, one of which is a Sample Slider which came with the Plugin Installation, and the top one is the “To of Page Slider,” which I had just created. And if you look over to the right there, you will see the shortcode highlighted. This is the shortcode we need to copy to the widget area in order to insert or slider at the top of the home page. So instead of manually memorizing and retying, I’ll just copy and then page.
So I highlight the shortcode, right click and “copy” it.
Now it’s time to go back to the widgets area: Appearance: Widgets.
As you can see, I’ve pasted the shortcode in there; now all I have to do is click “Save,” and I did that.
So let’s go back to our other browser and refresh the homepage and see how our slider is looking!
Wow! As you can see, it’s working great. Sorry I did not have time to do a video of it. But maybe another time.
There are still quite a few things we can do to make our slider more beautiful.
But I figure you’re skilled by now to go and do little experiments with your sliders, such as:
- Changing the Transition Effect.
2. Changing the background color for each slide.
Experimenting with Slide Style Features…
…changing the color scheme, removing auto height feature, etc, until you’ve got the perfect slide, or nearest to your dreams as possible.
Remember that each time you make a change to a slider option or add something, you need to click the “Update” button.
Then go back to the other browser and refresh the homepage to see the changes take effect.
So, see you in the next lesson: Changing the Color Scheme of Our Website Template.
