Changing Images in WordPress Visual Composer

Changing Images in WordPress Visual Composer

Hi and welcome to a new bloom360 e-session! During this short video, what we’re going to be looking at is changing an image in WordPress and Visual Composer. So this video assumes that you have a website that’s built in WordPress, number 1, and that also has Visual Composer installed. Visual Composer is a plug-in that allows you to create magazine layouts and add widgets throughout all of your pages. It’s very, very useful and once you get into it you’ll find it very, very productive and quite a bit of fun if that’s just how you roll.

Anyway, so what we’re gonna be doing is you will find us here on this Our Cool New Page and what we’re gonna do is we’re just gonna change this image. It’s simple enough stuff. Alright. So we’re already logged into the website. If you’ve been playing around with WordPress for a little while, you’ll notice that since we’ve logged in we’ve got this black bar at the top of the screen. One of the options here is Edit Page; that’s the shortcut to editing the page, but let’s now take the long cut just for the benefit of those who may not be brought up to our level yet. So, I’m gonna go into the Dashboard. I’m assuming that you know how to get into the Dashboard. The address is just your normal address with wp/admin typed at the end. Normally you would have to login, but I’m already logged in. So we didn’t have to.

Alright. So we’re gonna go to our Pages menu over here on the left-hand side. I click on that and what that’s gonna do is it’s gonna give me a list of all the pages in the website and the page that I’m looking for is Our Cool New Page. You’ll see the title here and if I just click on that, what it’s gonna do is it’s gonna open up this screen that allows me to change the content on this page.

So once the screen is loaded… Now, if you’re just using bare-naked WordPress, this is where our paths diverge. The grey boxes here are a product of Visual Composer. It is arranging the page content into rows and then each row is further broken up into columns. OK? You can see over here in this left column, we’ve got a little block that says Single Image and that’s actually a little thumbnail of the image that we’re looking to change. Here you can see that image there and that matches up with the little thumbnail over here on the right-hand. So we’ve got some text and that text matches up with what’s over here. Sticking to the aim of this e-session, we’re gonna be changing this image. So, you notice that in Visual Composer, wherever I go I’ve got my little green menu, and as you probably worked up by now, the cool little magic green pencil. If I click on that, what it’s gonna do is it’s gonna open the edit screen for that particular window. Sorry, the image is what I meant to say. Alright. So once again, you can see a little bit of a thumbnail there. And we don’t want that image anymore, we want something else. So I’m just gonna click on the cross on the top right-hand corner and once that’s gone, now I’m gonna click on the little green plus sign and that’s gonna add a new image.

That brings us to the Media Library and the Media Library is the repository for your website, where every single image that’s been uploaded so far is held. And I can use one of these easily enough if I like or I can upload something new. Maybe just for the fun of it we should do that. So, instead of clicking on one of these, that’s presented to me in the first place, I’m gonna click on this link in the left-hand corner. It says Upload Files. And then I’m shown a new screen and there’s this great fat button, right in the middle, that says Select File and I’m gonna click on that and it’s gonna show me My Computer and that’s gonna be different for you if you’re on a Mac, but it’s basically all the same stuff. And we’ve got a little image there and that’s uploaded pretty quickly, so it’s not a problem.

I just decided I don’t really wanna use that one. It’s not so special. So what we’ll do is we’ll use this person who’s excited about Christmas and we’ll take her. So we’ve just clicked on her, you can see there’s a little tick in the corner that means that she’s ready to go. If we didn’t wanna use her anymore, we can just click on the minus that’s there when we hover over her, but we do wanna use her. So we’ll just click that once more, we’ll put the tick back. Alright.

We’ve got this button on the bottom, right-hand corner, which says Set Image and I’m just gonna click on that. And you can see that she’s cute up and ready to go now. Alright. It does ask us what size we want, and in this case I’m saying large. There’s some help text here that tells you what you need, so you can actually be very specific about it if you like. It’s all written here. If you want to be so specific that you want to put the size of your image in pixels for whatever reason, you’re very welcome to do that. It’s x by y, so that’s length by breadth, but for most tasks I’m just putting large. That’s good enough. OK? It is very specific. It does want you to write it. It is case-sensitive, which will mystify you if you get that wrong. You can’t write “large” in capitals. That would be broken. It must be in lower case.

So, if I click on Save Changes now, Visual Composer normal stuff; and then I click on Update to commit my changes to the website. And then we just head into the website and we just click on Refresh; what we’re gonna see is that our image has been changed and it’s quite a bit more festive now.

Alright, so that’s the basics of changing an image in Visual Composer and WordPress. If you have any questions, hit us up here at bloom360. Otherwise, we’ll see you during the next e-session. Catch you then!