Make Advanced Layouts with Visual Composer – Part2


Hey y’all, welcome to another WordPress
Wednesday. My name is Kori Ashton and today we are continuing our two-part series
on the Visual Composer. I’ve already taught y’all a little bit about
the overall of what the Visual Composer can do. I have a link to that video in the description box
below. But, the other video I had, started this two-part
series on taking a simple theme like this one behind me here. This theme is called Olsen.
O-L-S-E-N Olsen is the WordPress theme that
I’m using here. It kind of has a very minimalist approach. Very simple, very clean layout structure. Sometimes, you wanna have a little bit more
of a wow factor to your website; but, you don’t really want to change the template. So, you can do cool stuff by having a page builder
inside of your WordPress website. And the page builder we’re talking about, of course,
is the Visual Composer. That’s this one right here. It’s $34 and I’ve already started this
tutorial, teaching you how you can take this exact same template and turn it into
a page that looks like this. Look at this, you guys. It has the full-width, parallax. We’ve got three columns. We have this
Mother Theresa quote here with the color behind it. And this really cool masonry blog area. Again this is the exact same theme. So, how do you do that? How do you make
something really cool like this? I’ve already started this tutorial. The link to
that video is in the description box below. I taught you how to make this parallax area
here and these three columns. Now, I’m gonna continue on, on how to make
this break out block quote area and this post area in the masonry grid. So, let’s get to it. Of course, we’re already working inside
of this page. We have our “Call to Action” area up here. We have our three columns and now we just want
to click plus (+). We’re gonna add another row. And, of course, we want this row to have this
blue color here. So, I’m gonna just grab that blue color code. We’re gonna go back here. This is how you affect the background
of this row. We’re gonna click the pencil icon. Of course, last tutorial I taught you about
this stretching the row option. And then, we want to have design options
and put a background color on it. And, of course, I have that blue color on my
clipboard. So, I’m gonna click “Save Changes”. And now I’ve got this little blue dot sitting
right here that allows this whole row to be stretched across the full width and have that
blue background. Now, I want to put our quote inside of it. So, I’m just gonna grab that quote here and
put it on my clipboard. Copy. And we’re gonna go into our row and we’re going
to add a text block. Of course, it has default text. So, we’re just
going to put this in there. And…capitalize here. So, that looks good; but, of course, this is
way small. It’s not in the center and we want to just add some formatting to it, so I’m going
to click “Center”. I’m gonna take it up to an H1 to make it nice
and large. We’re gonna put a break in here, so that
Mother Theresa will be towards the bottom. And, of course, I need this text to be in white. So, if you don’t have this secondary row here,
you want to click the toolbar toggle icon. That will open up these additional options. We want to click “White”. Of course, in this preview, it looks like it disappears. But, it’s sitting there. It’s white text. I’m gonna click “Save Changes” and of course that’s
gonna sit in this area. I’m gonna go ahead and click “Preview” and see
what we’re doing on the front side of things. Here’s our parallax, there’s our three columns and
here’s our beautiful quote area. So, I love it. Let’s look at what we’re going to do for our
masonry grid area. So, I want to add another row. So, we’re gonna click plus (+) and
we’re gonna say “Row”, and we are going to stretch the row. We might even stretch the content. Let’s see what that does for us on this. Why not? That might be kind of cool. To just see
what happens. Let’s also put a photo behind this. I’m gonna do a parallax photo behind
all of these, just to give it some color and have it not be on just a plain, white
background. Who knows what background… How about this one? I like this one. We’re gonna do that one. “Set Image”, let’s do that. Who knows how this is going to look? Let’s see. “Save Changes”. So, that affects now, this row and the background. I want to put our grids on top of it (Our most
recent blog posts). We are going to choose this one. “Post Masonry Grid” There are different options; but, this is the one
we’re going to go for. “Post Masonry Grid” Now, again, sometimes my students and even our
YouTube fans don’t read what happens whenever these windows pop up. Stop for a second and just read down the options;
because, you might want this to look different and you’re not sure how to make it look different. You just tinker and play with these different options.
It wil help you. We do want post to come here and display how many
items total. We want 6. We want to display all. Sure the style. Why not? How many items per row?
We want 3 happening per row. How much space do you want between
each one? Up to you. Initial loading animation. Do you want it to fade
in or have just default? That’s up to you again. Do we want to show a filter? Do we want to
have a load more option? We could do that. How many posts per page? Let’s do 12, so that we’re staying consistent with
our math here. And just click “Save Changes” for now. Let’s see what we’ve got. I’m gonna click “Preview”. We’re gonna go back up over here. Here’s our testing parallax. Our three columns. And, check this out. You see our picture back here? You see our picture back here, so it’s not a
white background? And here’s our cool masonry blog area with
our footer. You guys, that’s how cool the Visual Composer
can be and I hope this helps you to stay tuned. Be sure to subscribe. Every single WordPress Wednesday we’re releasing
some sort of video like this for you. I have over 200 videos sitting right here on this
YouTube channel that can help you improve your online marketing. Have a great one. Look forward to hearing from y’all. Give us a shout out over on Twitter or come over
to our website and schedule a call with me if you’re having questions about the Visual Composer. I’d love to talk with you. Bye bye, y’all.