Check out the advanced layouts with Visual Composer Plugin tutorial. This will be the first part of a two part series on Visual Composer.
Full Video Transcript
Hey y’all, welcome to another WordPress Wednesday. My name is Kori Ashton, here in San Antonio, TX at WebTegrity and this is another WordPress Wednesday where every single Wednesday I’m bringing to you a tutorial video on how to improve your WordPress website.
Today I wanna teach you how to use the visual composer page builder a little bit further. I already have a video that gives you the basics over all of what the capabilities are of the visual composer. If you haven’t seen that yet, check out the description box below and I’ll put the link in there to that video; but, this one’s actually going to take you step-by-step through how to make a certain page template layout.
I’m gonna show you. I’m gonna use this exact, same template that I have here. This theme going on. This looks pretty boring, right? I mean, it’s very simple, minimalist. Which is nice; but, at the same time, you definitely want to have some sort of a wow factor happening on your website.
A lot of times, you already have so much content happening in here, you’ve already spent so much time and effort in this one particular theme, you might not want to change themes, to have something cool happen.
Check this out. This is the exact same theme. I’m just gonna slide off the screen so you can check out the page.
I want you to see the header here with these icons. This is the exact same theme. Now, I have an edge to edge, parallax, cool layout. I’ve got the three columns. I’ve got a cool quote area and then a masonry blog area.
How nice is that?
This is the exact-same theme still, I’m using here. All done with a visual composer.
So, let’s see how I did it.
Of course, you would purchase the visual composer. I have a link to that in the description box below. You would install it just like you would any normal premium plugin and activate it. Once you have it activated, you can go to your pages or posts and just click “Add New”. For now, I’m gonna ask you to just create a new blank page.
Just to start to learn the visual composer. Try not to use this on an existing page, just yet. I just want you to get used to it. I’m just gonna say I’m testing this page. When you have the plugin activated, now you’ve got these two new options sitting here and we want to use the back-end editor.
I’m gonna say that again. This is the back-end editor.
Once I do that, it kind of takes over this area and allows us to do some cool dragging and dropping. So, I’m gonna add an element. This is the step-by-step tutorial to get it to look like this. I’m gonna add an element. I’m gonna add a row.
Now, this is gonna stretch as far as the page will allow it to stretch. So, if I want it to stretch edge to edge, there is one thing that your theme has to allow. It has to have an inside page template called “Full Width”.
So, how you check that is over here, inside of page you’ll go to template on the right side. Open this up and see if you have a full-width option. If you do, that will allow the content to stretch edge to edge. So, be sure to have that setting set in place. Now, what I’d like to do is put in our call to action block here.
So, I’m gonna click the plus (+) sign in the middle of my new row and here is our “Call to Action” button. I’m gonna click that. I’m just gonna use the default content that’s sitting in there for now. One of the things I am gonna do is I’m going to add a button to the bottom of this area.
And as soon as you do that, you have this button option that comes into play here. I’m gonna click that and just take time to read through each one of these tabs to see all of the different options that you can do; because, you can really get creative with how you set these things to look.
So, we want to have that link there and so I’ve set the link together.
The style: I’m just gonna say “Classic”.
I’m gonna keep the same rounded color. I’m gonna change the size. I want it to be large. You can go through every single one of these settings. If you want to add that phone icon, you can click there and add the icon. For now, I’m gonna go ahead and click “Save Changes”. So, let’s see what this looks like currently on the front side of our website.
I’m gonna click “Save Draft”. Let’s go ahead and preview and see what we’re up to. So, alright, we’ve got this block that sits there kinda like this. But, we don’t have a picture in there yet, so how do we get a background picture to stretch this full width?
The thing that’s really cool about Visual Composer is that we have layers. That’s what’s really amazing about this. Everything sits in layers. So, we have our “Call to Action” text that sits on the front side. Now, we want to put a picture behind it. So, here’s how you get to that area. Here’s our “Call to Action” area here. Right behind it. Now, we want to affect this row, which is this light grey area. We want to click on this pencil icon that affects the row behind it and we want to stretch that row (not the content inside of it). We just want to stretch the content itself and, scrolling down you can see all the other options; but, we definitely want a parallax in this area and we just want it to be a simple parallax. This is where we set the image for what sits behind us.
The image that I’m using is size 1280 X 400.
And I’m gonna click “Set Image”.
That’s gonna put that image in there and I’m gonna go ahead and click “Save Changes” and kind of let you see where we are, so far. Now, if I’m moving too quickly just pause the video, rewind it and kind of go through this step-by-step; but, I want to get through this pretty quickly so you can see how the results end up.
So, here we go. Edge to edge. Beautiful. And now, of course, on my example I have a little bit more padding in there. So, how do we get that in there?
We’ll go ahead and go to the behind the scenes. The background area and we have design options here and just for the sake of this layout, I went ahead and put in 150 pixels on the top of our text and 150 pixels on the bottom of our text. I’m gonna click “Save Changes”.
“Save Draft” of course, because we’re just doing this for the sake of an example. Click “Preview” and now we’ve got our beautiful padding just the way like our example, you guys.
Isn’t that amazing?
So, let’s see now what we can do with three columns. I’m gonna move through this a little more quickly. I’m gonna add a new row.
“New Row”
Inside of this row I’m going to have our…
Actually, we can jut take this row to three
columns.
Check this out.
1-2-3.
There are our three columns.
How did I do that?
I hovered over this little second icon that allows you to have totally different layouts in these rows. This particular layout allows me to have three columns. I’m gonna click “Add Something New” to this column. I’m just gonna add a simple image. Right here is our simple image. I’m gonna click “Add Image”. These are our images here that we’re playing around with. “Set Image”
We can give it a title and we can say “Meet the Team” or whatever you would like it to say. This is where you go ahead and set the size of the picture and for the sake of this design. I’m gonna go ahead and say “Full”. You have other options here, so just go ahead and read through them. I’m gonna say center the image alignment.
Do we want it to link anywhere? Yes, I want it to link to my page called “Our Team”. Of course, you can do any of the links here. You can do any of the links here, you just figure out what link you want it to go to and drop it in there. We want it to be in the same page. We’re just gonna go ahead and click “Save Changes”.
So, there’s our image.
Now, if we wanted to not have to set every single one of those things the same over and over again, you can duplicate this.
Check this out.
I’m gonna click the middle icon that duplicates that image. I’m gonna duplicate it again. Then, I can drag and drop them. Oh, how cool is this, you guys? Then, of course, we don’t the exact same image there, so I’m gonna click on the little pencil icon that takes me in and allows me to change out what image I do want in there. These images are 714 X 500.
I’m gonna click “Save” and then, this image needs to change, as well. Let’s see what else we have in here for an image. Let’s do that one, why not? “Set” Oops. That’s the same one. We want a different one. Let’s try this one. Why not? “Set Image” Alright, and “Save Changes”.
So, let’s see what the front side is starting to look like. We’ve got our testing area. Oh, wow. These aren’t nearly as big as we would like them to be. So, this is when you start playing around with the row settings and we want to stretch the content.
So, the row here. We definitely want to stretch the row and the content. You just want to play around with the different settings inside of this thing. There you go “Meet the Team” and, of course, we wanted to change that title as well. They all link somewhere, so that’s cool. You can put text boxes down below them. You just want to play and have fun. I want to add something to this column, so I’m gonna click the little plus (+) icon. I’m gonna add a text block to this column.
For the sake of this, I’m just gonna leave it with the default text. I’m gonna duplicate it, drag and drop it underneath this next image. I’m gonna duplicate it, drag and drop it under this next image and click “Preview” again. Let’s go see what it’s looking like now, you guys. It looks so much like our example.
How fun is that?
That’s how this works, you just keep going down the page playing around with all the different elements that are available inside the Visual Composer. I hope this has helped you.
If you have questions specifically about the Visual Composer realize, because, you’ve purchased it, you have access to their support team. So, you can come here to support and connect with them the way they’re asking you to connect with them. I am not a supporter for Visual Composer. I just do these videos so I can help y’all improve your websites online.
So, check them out. Go there. Connect with them. I’ll put the link specifically to this tab in the links below. Hope you’re having a great WordPress Wednesday. I will see y’all next week. Bye, y’all.
