Visual Composer Primer

Visual Composer Primer

Hi! This is Dan Haak here from bloom360 and what we’re gonna be looking at during the course of this e-session? We’re going to have a play with Visual Composer. Now hopefully you and I have sat together, we’ve done a training session and this video should be more or less a refresher. If this is the first time that you’ve encountered Visual Composer in the context of WordPress, then try and keep up. OK.

So what we’re gonna be doing first up, we’ll create a new page. Welcome to the back-end! I’m sure you’ve seen this before. Come over to our Pages menu, I’ll just click Add New and this page that we’re gonna create is gonna be a little bit of a sandbox, so we’re just gonna get our fingers dirty. Alright. So we just wait for the new page to load. OK. We’ve all seen this before. Alright. So the title of the page, we’ll give it one. So we’ll call it Our Cool New Page. OK, very good. We’re half way there. Actually, we’re not quite half way there. Alright, let’s get rid of this. Alright.

So the first thing that we’re gonna be doing, we’re going to realize that what we’ve got right now is just native WordPress functionality. So this editor here that you can see, that’s just normal WordPress. What we wanna do is we wanna switch on Visual Composer. You’ll notice that when I put in some text here and I hover over it, I don’t get my magic green menu. If you don’t know what I’m talking about, I’ll show you in just a second. The way that we turn on Visual Composer is we click on this button over here that says Back-end Editor. It’s a little bit mysterious, it’s not a title that sort of explains what it does, but once we click on that it brings up our Visual Composer stuff. We can go back to the way it was just a second ago just by clicking on it once more. You can go back and forth this one if you like. Alright.

So we are in Visual Composer now. The first thing that it does is it asks us a couple of questions. If offers us some preordained layouts we can have a play with if we like. I’m not gonna go into these today, but from the comfort of your armchair at home why not have a go? OK, so it’s asking us “Add an Element” or “Add a Text block”. Adding a text block is just shortcut, a shortcut to predictably enough having some text. We’re gonna get the round about it. What we’re gonna add first is a row.

Now, I’m gonna click this button and what it’s gonna open up is the Visual Composer Element Library, or at least that’s what I call it. Don’t be put off by the number of elements here, most of it you’ll never ever gonna touch. There are a few that we are gonna touch and the first one is gonna be row.

The important thing to realize about Visual Composer is everything is split up into rows. So what’s a comparable example? So, it’s like a book where the paragraphs are in rows. That’s not a very good example, but anyway, you’ll see what I’m talking about in just a second. We have created a new row. Right now this row does not have any content in it, and we’re gonna change that by clicking this great big plus that’s in the middle. The magic plus is what brings up the Visual Composer Element Library and in this instance we’re gonna add some text. I click text block and it goes and puts some text there for us.

The next thing that it does is it opens up a Microsoft Word-like editor window and it allows us to edit some text. So I’m just gonna give it a bit more text just for the fun of it and there’s a whole bunch of stuff that we’re able to do, bold and italics and it even lets us change the size of the text. We can do that. Let’s put it back ‘cause that’s a little bit much. If you don’t see some of these buttons, then the reason you don’t see them is because this toolbar toggle thing, this tiny little button that does slightly much for its own good is deselected. So if you select that, you’ll get some more options. OK? So just remember that’s tools, the toggle thing.

Alright. So we’ve got some text, we’ve formatted it a little bit, we made it look just like we wanted it to look. I click Save Changes and just for the fun of it, we’ll have a look and see just what we’ve got so far. I’m gonna come over here and click Publish. So remember you must always click Publish. If you don’t click Publish, then what you’ve done to the website up to this point is not gonna be committed and you’ll all lose your changes. So the text editor Save and the Publish and then we’ll be able to have a look at the page.

I’ve got a link here of our new page and there’s another one here. I think it’s all over the place for your page. I’m gonna right click that and open in new tab. And we wait for our page to come up. It’s not gonna be very special but you can see what’s going on. I’ve got a bare-bones template here and here’s our little bit of text.

So let’s go back and we’ll make it a little bit more special. Let’s put in a title. If I wanna add a Visual Composer element at the top or at the bottom, I’ve got these two plus signs here. I’m gonna put something at the top ‘cause I’m gonna make a title and one more time, it’s a text block and it’s just gonna be a nice short little but of text and we’ll just make it big. So, let’s call it “Cool New Page” and you saw me do this a little while ago, I’ll just change the size of the text and now Save Changes. OK. Now, we’re not gonna click Update just yet ‘cause we’re gonna make some other changes. You can actually make a whole bunch of changes to the page and then click Update at the end and that’s gonna be a little bit faster and a little bit more efficient for you. Alright.

So, so far we’ve added some text and we’ve added a heading. The next thing that we’re gonna add is an image, sure. Let’s put in an image. Alright. So I’m gonna put the image at the bottom, below the text, so this time I’m gonna click this plus sign below the text. I’m gonna click that and one more time I’ve got my Visual Composer Element Library. We’ve already had a look at row and text block. What we’re gonna be looking at next is Single Image. So, it’s always a little bit of a game of spot over here in this thing, but I found it pretty quickly this time, single image. They’re all in different places, depending on when you load the screen up. Sometimes it’s a bit hard to find things, but just be persistent. Alright.

So we’ve clicked Single Image and another screen has come up. It’s a little bit different to what we had for the text block. So this time is predictably enough asking us about what we want to display as an image. You’ll see this nice, inviting little green plus and if we click on that it’s gonna let us select the image we want to display. And in this case we’ve got these foreboding mountains and we’ll select those. And we’ll say Set Image. And you can see here that it’s getting ready to go and it’s lined down the image. Now, there’s a couple of things that we can set here.

The first thing that it’s asking us is the image size. It’s actually got some help text here at the bottom, so you’re never quite alone. One of the ways you can play with these images is you can specify the size by pixels; so in this case I’ve said 300px wide by 600 px down. It’s x by y, just in normal mathematical terms. And there’s actually also some keywords here that you can use as well. Let’s just call it large for this instance. You can see that the keyword large is there, as is full. OK, so it’s large. We’ll say that we want to centre the image, so we’re gonna align it to the centre and the rest of the stuff you can have a play with, but we won’t bother today, it’s OK. And we click Save Changes and we’ve got a single image here. Now just to see how we’re going, we’ll click Update and we’ll refresh the page out on the website. Just wait for the busy signal to finish. OK.

Now, if I click Refresh here, first off we’re gonna see is we’re gonna have a title and we’re gonna have our image as well. OK. So you can see we’ve got our title and there’s our image looking nice and large, which is what we specified. Alright. So what we’ll do next is we’ll add another element. What we’ll do is we’ll add a Image Gallery, ‘cause they’re very cool and useful also. Alright. One more time, I’m gonna be adding this to the bottom so I’m gonna click this plus. We’ve already played with single image and what we want now is an image gallery. I’m gonna click on that and this time we’re gonna have a slightly different screen open up and the first thing it’s asking is what type of gallery we want.

Now, because I’ve played this game before, I know the one that I wanna use is image grid and that’s just gonna make a nice tight grid of images, each one a little thumbnail square. The next thing it’s asking is what images we actually want, so I’m gonna click the plus. And as you saw before, in our media library we haven’t got enough images uploaded for an image gallery, so I’m gonna upload some just very quickly. So I’m going to my stock photo library and details, and get the nice small ones. OK. So hopefully these will be suitable. We’ll just upload those, and then we click open and they should upload pretty quickly ‘cause they were all pretty small. OK. Depending on how long it takes, I’ll maybe skip this part of the video or I’m not. Looks like it’s doing alright so far. You can see that as the images upload, there’s a tick in the corner of each one and if we decide that we don’t want a particular image like this one, we just click the tick and it’s gone from the image gallery. Alright, so we’ve got 8. A nice even number is always good and with that we will click Add Images. Alright.

So you can see what it’s doing, it’s lined up the images ready for the gallery. Again, we’re able to select the size of the images if we like. So if you decide that you wanna get something just pixel perfect and you want your image gallery to be exactly the right size, you can specify size for each thumbnail if you like. Otherwise, you can just leave this blank and it will default to thumbnail and that’s fine. OK, so I’ll click Save Changes and we must be really getting somewhere now. I’m gonna click Update and we’ll wait for that to upload. You can see it from the little busy sign that’s up here what it’s doing. Alright.

We’ll come out here and we’ll click Refresh. And it’s not taking us very long at all to get this page together. Remember, this is just a bare-bones template, so there’s nothing very special happening here. This is just for me to show you what’s going on. Alright, so just waiting for the gallery to get the start of the game…I’ll click on one of these images and you can see that it comes up with a larger image. Not terribly large, they were small images right from the very beginning. OK. So you can see that that works. We’ve got our image gallery down here and now what we’ll do is we’ll have a play around with rows and columns.

So one of the cool things that Visual Composer does is it does put everything into rows, but then furthermore it allows to divide those rows up into columns. The way that we do that is you can see here or at least I hope you can see anyway, there’s a grey box going around all the content that we’ve added so far. Here at the top of the grey box there’s a couple of buttons. The one that you’re gonna play with most of all is this one here that’s in the middle; this is the one that allows us to divide the row up into columns. Now, if you’ve got a keen eye you’ll see that the icons here are sort of representative of ratios and if I hover over one you can see that it’s actually indicating that as well.

This one’s saying half-half and I think this one’s two thirds – one third. Yes, exactly. So these buttons here divide our row into columns. So if I click on one you can see that half-half has gone and created a second division over here on the right-hand side. It’s completely empty, it doesn’t have any content. If I come back over to this button one more time and I click on all thirds, you can see that it creates three columns. And that’s pretty cool! There’s lots of stuff you can do with that. Now let’s go back to half-half and that’s where we leave our pages. Just so you can see what’s going on, I’m gonna click Update one more time and we’ll go back out to the website and we click Refresh, and you’ll see what it looks like. OK, so you can see what’s going on. All of the sudden our page is cramped out into half a page and over here on the right-hand side there’s no content at all.

Alright. So if we go back over here into the back-end, what we’re able to do next… I’m sure you understand this by now, but I’m gonna go through it anyway. As I hover over the content, you can see that this cool little green menu that pops up wherever I go is following me like the pied piper. OK. So it’s got a number of functions, this little button, this little control bar. The first one is the drag & drop. So using this button, I’m able to click on an item and then drag it down to another position somewhere in the page. So in this case I’ve gone and moved the text underneath the image, but just above the image gallery. Now, I’m also able to do that into other columns of course. So what we’ll do is we’ll just grab this text and we’ll just go and put it over here into this column here. OK, very good. Alright.

So what we’ll do next is we’ll put our image gallery underneath this bit of text here. OK. So one more time I’m gonna drag this and I’m gonna put it underneath my text and all working very well and we’re looking pretty good. Alright. So if I click Update now and we’ll just wait for the busy signal to finish and click Refresh, OK. And we should see our content starting to take shape into two columns and looking cool. Alright. So you can see what’s going on. We’ve got our heading, we’ve got our single image, we’ve got our text and we’ve got our image gallery here. It’s all looking a little bit wonky at the moment but I’m gonna fix that pretty easily. We might actually do that just quickly because it’s a valuable lesson to learn.

So basically what needs to happen is we need some empty space over here. So what we’re gonna do is we’re gonna add some empty space. Remember, if we wanna add something at the top or at the bottom, we’ve got these pluses. We actually wanna add something at the top of this text ‘cause we want some empty space here at the top. So what we do is we click plus and there’s actually a thing here, an element I should say to speak properly, I should click on this element here that says empty space. It’s as simple as that. All it’s gonna do is just add some empty space and it’s gonna ask us how many pixels of empty space we want. In this case I’m estimating; you do have to estimate a little bit with these things. I’m saying it’s about 100px.

You know, it’s OK to get it wrong in the first place. It’s alright. We’re supposed to be having fun here. OK, so wait for that to finish and now we’ll click Refresh and I think we’ll find that it’s starting to look a little bit better. OK, that’s much better. It could do another 10px, but that’s OK. It’s pretty good. Alright, so the page is really coming along now. What we might do is we might add a video as well because they’re very, very useful, but I don’t want the video in one of these little columns, I want a nice, big video.

So what we’re gonna do is we’re gonna add another row and the way we do that is: you can see there’s a plus here that’s all by itself, down here at the bottom, so I’m just gonna click on that. And of course, there’s a video player element. I’m gonna click on that and let’s just run quickly out to YouTube and grab a video. So Iggy Pop, do we dare? It’s only the URL we need, so we’re just gonna copy that URL and we just head back over to our back-end. And you can see here that after we’ve clicked Video Player, we’ve had a new screen open up that allows us to setup the video player. All we need is to paste in our video link. So we just copied the URL from the YouTube video, we’ve come over here into the back-end and we’ve pasted it into the video link. Click Save Changes and then we click Update one more time.

Cracking pace we’re setting! Click Refresh and we should have a nice big video here right at the bottom. OK. Alright. There’s our video, Iggy Pop looking totally rock&roll or like a very old rock&roll or anyway. Alright.

So we were talking about the magic green menu. We said that we’ve got our drag & drop and we had a look at that. The magic green pencil is what comes next and if I click on that on any of the elements that we might hover over, what it’s gonna do is it’s gonna open up our edit screen one more time, the same one we were presented with when we first inserted the element and it’s gonna allow us to change the element settings. I won’t do that right now, but as you can see, if I wanted to change the text, I can click the pencil here over the text and it’s gonna allow me to change the text however I need. That’s Visual Composer being nice and predictable. So here it is and I can play with that however I like.

There are two more buttons that I’ll show you just very quickly. This third one is the Copy button and that’s pretty cool ‘cause it makes copies of things. Let’s just go and put some text over here, more text is always better. There, OK. And deciding that we don’t want that text anymore, the last button on the magic green menu is garbage bin, so I’m just gonna click on that and it shows you this little prompt up here at the top – I don’t know why it’s at the top, it just is – saying “are you sure you want to delete that?” and we’re saying yes. And that’s it for your magic green menu. Remember, we’ve got our drag & drop, we’ve got our magic pencil which allows us to edit things and then we’ve got a clone button which predictably enough clones things. So if I click Update now, we should be able to see everything in all its glory on the page and that would be our page completed. I don’t think I’m gonna see any changes in this, I think we’re pretty much done.

Alright. So, that is Visual Composer. That is a crash course. Hopefully it made sense to you and if you already sat down with us and done your training session, then that would be a nice refresher and should the put the training wheels back on your tricycle. So, if you have any questions just hit us up here at bloom360. We’re always happy to help. And otherwise, I’ll talk to you later.