Here are some free and premium WordPress plugins to help you create column layouts on your pages or posts. They are fully responsive too!
Full Video Transcript
Hey y’all, let’s talk columns inside of our WordPress website. If you’re trying to do a little bit more of a dynamic layout on your page, (maybe you want a video on one side) and you don’t really want it to look like this. Where you have all your text all the way across the page and your video down below.
Let’s say you want something where the text is here and the video is on the right side. How would you do that?
Alright, welcome to another WordPress Wednesday. This is a weekly video (every single Wednesday) that I produce to help you with all things WordPress.
So, I’m gonna show you today, a couple of ideas on how you can accomplish building columns inside of your website with som premium solutions, as well as a free option. So, stick around and be sure to subscribe, so that you can hang out with us every single week.
Alright, the easiest way to do something like this, where you might have maybe three columns, or even a four column layout, or look at these. Even five column layout. Pretty nice. Another two column layout.
The easiest way to accomplish something like this is to use a theme that already has this already innately (or by default) built inside of it. The Avada theme, if you watch our channel, is one that we highly recommend it’s over on ThemeForest. I’ll put the link to this in the description box below. It is a one-time fee of $59 US dollars.
It is a little bit pricey; but, it’s so worth all the bells and whistles that come with this incredible theme for $59.
One the things that it comes with, out of the box, is the Fusion Builder. That’s what they call it. It’s a page builder called Fusion Builder. It’s the Avada product.
Check this out, if you want to make columns, it’s this complicated or simple. Let’s say we want to half and half.
There’s one.
There’s two.
There’s your two columns and that is fully responsive. They stack beautifully on a cell phone.
If you say, “Okay, you made the two columns. Now, how do you get content inside there?” Here you go.
So, now that I have my two column layout, I can go over here to “Builder
Elements” and I can grab my text block, right here, and just drag it inside of it.
If I wanted a YouTube video I could drag it inside of it. Then, just be clicking the little pencil icon, I can edit what is now inside of that box. So, this should look familiar to you. Something like a little bit of a Wizzywig environment here, like our regular dashboard.
Of course, adding in a YouTube video is as simple as copying and pasting in the URL. (The link of where that video lives over on YouTube) These, of course, would stack beautifully.
Let’s say you want to get even more fancy and have different columns. They’ve got a one-third, one-third, one-third. You could do one-fifth.
All of this allows you to make your column layout however you want it to be. So, that’s the Fusion Builder inside of the Avada theme.
Let’s say, “Hey Kori, I don’t want to change my theme. I’d really like to use my existing theme. Do you have a solution for that?”
Of course we do. It’s another premium solution, though. It’s called Visual Composer. Now, I’ve spoken about this a few times and I’ve already got another video that I’ve created about the Visual Composer. So, I’ll be sure to put the link to this in the description box below. This is a $34 solution; but, it does the column layout and so much more. It’s really incredible, all the different options that this has. So, be sure to check this out.
This can plug into any WordPress theme that is free or premium. Doesn’t matter. If you watch our channel you also know that a while back I did a review on MotoPress’ page builder. Now this one is much more streamlined. It’s not nearly as complex; but, it’s also less expensive and, right now, for those of you watching this video, they’re running a 50% off coupon.
Code right here: SUMMER
It expires August 15th, so you might want to jump on that if you’d ever be interested in purchasing this. I also have another video for this, right here, inside of YouTube and I’ll put the link to that in the description box below.
Okay, so let’s say, you want this solution in a budget of “free’. If you watch our channel you know that I always say that free is always in the budget.
I have found you a solution. It is free plugin called “Lightweight Grid Columns”. Now, this again, only does columns. (This solution) Totally for free. Only does columns. So, I’m gonna show you. You can see it’s got the one-half, one-half. Your one-thirds and then your one-fourths.
I’ll show you how this actually works.
You would go ahead and do a search inside of your install plugins. Do a search for it and it’s called “Lightweight Grid Columns”. You go and activate it, which is what I have done.
Once that’s complete, inside of your pages or posts (either one) you’re gonna have a new icon sitting right here that says, “Add Columns”.
You’ll want to click on that.
Now, this is giving you some pretty cool options to allow you to have different structure depending upon what device is viewing your website.
So, do you want this one column to be half of a desktop screen or laptop?
Do you want this column (when someone is viewing it on a tablet) to be 50% of the screen?
When somebody is on a cellphone, would you like this one column to expand the full width and have everything stack below it?
That’s typical. This is typically the breakdown of a one-half, one-half column. So, let’s put some text in here. I’ve got some Lorem ipsum cupcake text that I can just grab and have fun. That we can throw into the page. I’m gonna put my content in there.
Is this the last column in the row? No; because, this is our first column. So, I’m gonna click “OK”. It’s gonna write all the nerd code for me. Really the only nerd code it wrote was right here.
Here to here, and then, it closes the column right here.
The rest of this is my lorem ipsum. I’m gonna go ahead and do the last column and I want a video in here.
So, let’s go over to YouTube really quickly and go down to our “Share” option to embed and I’m gonna grab the iframe nerd code here to embed a video inside of this second column.
I am gonna say that it’s our last column in the row, yes.
Then, click “OK”.
So, in this view it’s stacking everything; but, let’s go ahead and update the page or just preview the changes really quickly. See what it does for me. There it is.
There’s my column over here with all my silly text and there’s my videos happening right there.
Of course, if I wanted to see what this looked like on a cell phone: Drag and drop this and shrink it down. These are gonna stack beautifully. There’s my text and then my video down below it.
That’s a solution for you in the budget of “free” on how to make columns
inside your WordPress website.
I hope you’re gonna have a great day. Be sure subscribe so that you can
catch us every single week here for WordPress Wednesday. Bye, y’all. See
you then.
Avada Theme
https://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=WebTegrity
Visual Composer
https://codecanyon.net/item/visual-composer-page-builder-for-wordpress/242431/?ref=WebTegrity
Visual Composer How To Video
MotoPress Page Builder
https://www.getmotopress.com/?aff=145
Basics of MotoPress Video
Free Plugin – Lightweight Grid Columns
https://wordpress.org/support/view/plugin-reviews/lightweight-grid-columns
Find more WordPress tutorials on https://webtegrity.wpengine.com/blog/
