In Part I I started showing you some thing on layouts. We are continuing our two-part series on the advanced layouts with Visual Composer.
Full Video Transcript
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 blockquote 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 will 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.
***Here’s Part 1
***Purchase Visual Composer (Affiliate Link)***
***Getting Started with Visual Composer***
***Olsen WordPress Theme***
***Support for the Visual Composer***
