Make Advanced Layouts with Visual Composer – Part 1


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 support 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.