Working with WordPress Layerslider

Working with WordPress Layerslider

Hi and welcome to another bloom360 e-session! And during the course of this short video what we’re gonna be looking at is a slightly more advanced topic compared to some of the things we’ve spoken about. What we’re gonna be doing is we’re gonna be changing or adding an image to this sliding banner that you can see here in the middle of the screen. It’s based on a plug-in called Layerslider. So if you’re using WordPress and you’ve got Layerslider installed, and it’s running your slide embedded on your homepage or wherever it is it might be, the following tutorial is going to show you how to add and change images in the slider.

So, let’s get cracking. OK. So, as is always the case in WordPress, you’re going to need to go into the back-end Dashboard and the address for that is your usual URL with wp/admin put on the end and generally you’ll have to login; I’m already logged in, so I don’t have to. Alright.

So here on the left-hand side we’ve got an extraordinarily busy menu; you’re not gonna have all of the options here. But if this video is right for you, what you’re gonna have is Layerslider WP over here on the left-hand side. If I click on this, what it’s gonna do is it’s gonna show me a very, very complicated screen that actually has one thing that you’re gonna need to click on. The reason this screen is so complicated is because in any particular website you can have more than one slideshow. You can have a little one for small pages and a big one for the homepage. And yeah, you can have as many slideshows as you like. So this screen is giving you options to manage all of those potential sliders. Alright.

But in this instance we’ve got one, it’s just on the homepage. It’s a nice and simple one, it’s only got 3 images in it, and it’s named Homepage Slider. Pretty straightforward so far, so if I click on that it’s gonna take me to the screen that allows me to change the options for this particular slider.

Alright. So it’s already starting to make a little bit of sense. Again, there’s a lot of options here, most of which you’ll never gonna need to touch. The first thing that I’ll mention is you can see that this image matches up with the first slide that we’ve got on the website. So let’s go over here. It’s got a little bit of a thumbnail. I’ll set it up like that.

So you can see that we’ve got a spike-looking mountain range here and that matches up with what we’ve got here. Very greyed out, but definitely there… There are some more tabs over here, Slide 2 and Slide 3. So if I click on Slide 2, what’s gonna happen? I’ll just give that a proper click. OK, so Slide 2 and you can see that we’ve got our air conditioning vents and that marries up with what we’ve got here on Slide number 2. I’ll just click on that. OK, and there’s the air conditioning vents.

And following the pattern, if I click on this tab here, it says Slide 3, there’s a lawn mower heading directly for us. So, for the purpose of this example what we’ll do is we’ll get rid of this lawn mower that’s acting increasingly aggressively towards us. So what we need to do is first of all be in Slide 3 and we just need to click on this button over here. You can see that it says Slide Image and Thumbnail. So this, the first one here is the Slide Image and you’ll see that when I’ve hovering over it you get a little red cross up in the top right-hand corner. That’s the Delete button, so I’m just gonna get rid of that. It doesn’t actually delete the image, it just says we’re not gonna use it for this slider anymore. And you can see that it’s gone. Pretty straightforward stuff! OK.

It’s got a little prompt there that’s saying “Click to Set” so I’m just gonna do what it says and I’m gonna click on it. And it’s gonna take us into the WordPress Media Library, where we’re able to select an image or if we’re feeling more adventurous, we can click on the Upload Files button. It’s gonna take us into our computer and we’re able to select an image. And we’ll select something a little bit more relaxing than a lawn mower heading right towards us. That’s a surf ski or a sailboard, depending on how you refer to them. The image uploads and once it’s finished its business, you can see that the thumbnail’s there. As is always the case in WordPress, we’ve got a little tick saying that it’s ready and queued up to go. All we need to do now is click on Insert and we’ll see that the image, once it’s finished its business, will be queued up and ready to go.

So that’s basically it for changing an image and just a sanity check that we’ll do, we’ll commit this change. So we need to click on this blue button that says Save Changes, down here on the bottom left-hand corner. You must remember to do that. If you don’t do that, then all your work is wasted.

So, we’ll just go back into the homepage. We’ll click on Refresh now. And what that’s gonna do is it’s gonna go to the server and say “Hey, give me a new version of the website” and what we’ll find now is that on this third slide we’ve got a picture of a guy on a sailboard. Now, if we were playing this game properly, we would crop that image and make it the proper size. Just because I’m just showing you how to do things, you know, I’m not gonna go through that. But you can see that it’s worked and the image has changed. And it was all pretty straightforward.

Alright. So what we might do now is we’ll add an extra slide and we’ll give its own image, because we lost the one we got but we want an extra one. So once again, we’re gonna go back into Dashboard and we’re still kind of where we wanna be. Here in Layerslider, we’ve clicked on the homepage slider, remember? And right now we’re on slide number 3. Now, I can click on this green plus and it will create a new slide for me and then I just click on Click to Set and it brings me back to our Media Library. And once again, let’s upload another image. Pretty straightforward stuff! OK, this one’s looking nice and green. Hopefully there’s no nasty animal living in that green. OK. And the image uploads. It takes a little bit of time ‘cause it’s a nice big image, but once it gets there it’s gonna look pretty good I think. OK. Alright.

That’s pretty good! Alright. So now that we’ve selected our picture there, we’ll click on Insert and we’ll see that the slide will update with our new image. OK, looking pretty good! Now we just click on Save Changes. And as is always the case, I come back up to my Homepage, I click on Refresh and we are going to now have 4 slides and if I click on that, there’s a happy little frog. And like I was saying, if we’re spending more time with this and crop that image so that it fits properly and look pretty sharp, but not now. I’m not gonna waste your time. I’ll leave that as an example for you, or an exercise would be a better way to put it. I’ll leave that as an exercise for you, when you have a go with this yourself.

Upon that occasion, if you have any questions, hit us up here at bloom360 and we’re only too happy to help. Until then, thanks and see you later.