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