Hey everyone, welcome to another WordPress Wednesday.
My name is Kori Ashton. I'm going to walk you through today the Visual Composer
for WordPress websites.
It's an extra plug-in that you can purchase and install on your website
that gives you a lot of crazy cool functionality within just few simple clicks.
Very excited stuff.
Before we dive in,
I want to say thank you to all of our partners.
Thanks so much to WP Engine and their awesome hosting
exclusive for WordPress websites. If you're looking for something fast
and a great support, you want to check those guys out.
WP Elevation- if you are a WordPress
Entrepreneur out there that's either a freelancer, contractor or a company owner
you've gotta check them out and their awesome tracks that they have
you walk through and learn.
Really cool effective ways to gain new clients even.
Very cool resource.
Of course, WP 101-
they do WordPress videos and tutorials even better than we do.
We love those guys.
They have a lot of free, awesome
opportunities for you to watch.
They also have some paid versions (which are extremely valuable as well. )
So check them out.
Let them know that WebTegrity and Kori Ashton sent you their way
(I'd really appreciate it.)
Let's dive in, alright.
I'm going to walk you through
(let's zip me down here)-
this is the plugin I want to walk you through today.
It is over on codecanyon.
It's called the Visual Composer.
It is $33.
Now,
y'all know me,
I'm always about free is in the budget right?
But, $33 is extremely minimal when it comes to the powerful punch that this
plugin can give your website
(the functionality it can bring.)
It's all completely responsive (which is amazingly wonderful.)
Several themes here on themeforest actually include this valuable resource
already inside of a theme.
If you're in the market for purchasing a theme, you might want to look for this as
an added feature
that you can actually get with a purchased theme.
If you've already got a theme and you're up and running thinking, "Ya but I really
need to figure out how to do columns correctly or I really want to figure out
how to make some cool animation (the lazy load) take place."
Check this out.
I'm going to walk you through a couple of things.
You'll want to go ahead and purchase this plugin.
I'm going to put the link down below to this page so you'll be able to get here.
Once you do that, you're going to download it
and it will come in a zip file like this. You're going to want to
open it up
because inside of it, this is the actual file that you'll want to be installing
into your website.
So you just go to plugins and go ahead and click 'install'
and upload that plugin.
Once it's active any time you go to a page or a post now, you're going to be
able to have these options sitting here.
Backend.
Frontend.
What we want to do (I've not built anything yet on this page)
is go ahead and click to
'backend.'
Now
it gives us some options here.
It's now engaged this Visual Composer
in my page and is going to allow me to go ahead and add some elements
and start to build my page content.
They do have some pretty typical
structures here that you can just go ahead and click (kind of like templates.)
You can go ahead and start building in these areas.
If you'd like to just code completely from scratch and kind of figure out
what you want to do as you build the page,
you can do that by either adding an element or adding a text block
(if you want to go ahead and do that.)
I'm going to go ahead and add a text block and let you see what happens.
Immediately
this window opens up (kind of drops in here.)
You've got a bunch of different areas you can go so I'm going to quickly walk you
through what these do.
This one allows you to grab a hold of it and drag it up and down.
If you want to move these elements and rearrange your page, it's literally done
with a drag and drop environment.
This particular icon allows you to very quickly set this particular block into
what type of column spacing you would like this to take up.
If you want it to be half the page, you can click that and it will immediately
set it to the left column.
If you wanted it to be over here in the right you would just drag it-
(i'm sorry you would drag this part)
drag that over there.
Now it's sitting in your right column.
How crazy cool is that?
Drag and drop- fantastic environment.
If you want it to be kind of 2/3 1/3 and so forth and so on.
You can play around with those different options.
If you wanted to add something else to this column spacing, you would just click
'add' (and it would open up this window) and now you can just start to build and
add blocks (basically) as you go through this whole
incredible process of building a page.
Let's say (obviously) I don't want ' I am a text block'
to be visible on my page. I actually want to put content in there.
How do I get into this particular space?
You'll notice as soon as you hover over, you get this pencil icon which means "edit."
You get this two page type of icon which means 'clone this area.'
If you've created a space that you really liked and you just wanted to duplicate it
you can click that icon (it would produce that for you) and you would be able to
move it to whatever space you would like that to be on.
Obviously the trash can would mean, 'go ahead and remove this box.'
I'm going to go ahead and click on the 'edit' mode and (obviously)
I get this cool little "wysiwyg" environment now (the what you see is what
you get-wysiwyg.)
Visual composer or text editor here.
You can go in here, make all your changes.
(Oops-if we spelled correctly.)
Now I've got my content.
Of course you can add images in here.
You can do whatever you want in here,
coding the regular way that you normally would inside
of your normal text editor in WordPress.
You can even add any sort of
Rev Slider-any other plugins that you have.
All of those icons would be here, available for you to drop into this space.
Pretty cool.
You click, 'save changes'.
Automatically it shows it reflected here- it's been changed.
Now if I wanted it to, I could click 'publish' and see what my change looks like.
Let's keep building. I'm not quite done yet. I want to show you some other cool
elements this thing has.
Look at all of these options. I want you to see what I did again (hold on.)
All I did was, there's this empty space over here (I'm going to take this back to
50/50.) This is my right column.
I want to put something in this block.
What do I want to put here? I want to put a picture here.
I'm going to click
and now it opens up all the options inside of the Visual Composer that makes this
such an amazing, powerful plugin.
It's going to allow me to do all sorts of fun stuff.
Let's say, that I wanted to have a picture kind of fade in right there.
I'm going to start with an animation block.
It's going to tell me, "what do you want this block to do to whatever's inside of it?"
You can have it bounce, flash, pull, shake, whatever-all sorts of fun stuff.
I want a fadein effect.
What do you want?
Notice right here, it just gave me a visual of what it's doing.
If I want to change this to bounce out left, (whoa) see it fly out?
That's crazy.
I want it just to fadein- let's say fadein and down. That's nice.
Fadein and left. That's nice.
This is sitting on the right side. Let's have it fadein and right.
There you go.
It looks like it's kind of flying in on the right side there.
You can have the animation duration (how long you want that effect to last.)
What you want to do is just read down through all these different options.
I'm going to click, 'save change.'
Now, anything that I put inside of this is going to be animated.
How cool is that!
Now, I'm going to click. Now I'm going to add my picture.
I'm just going to do a search up here for image
and see what my options are for adding an image.
Here's one of the easiest ones. It's just a single image and that's all I'm gonna do.
I'm going to click 'add image.'
It's going to open up
and ask me what image would you like to add.
I'm going to go here to my really cool options for our trampoline park
and click, 'set image.' Now it's got what image I want in there.
Do we want any CSS added to it?
What size image? I'm going to say 'medium.'
Do we want it aligned? I'm going to say, 'center align'.
Do we want it linked anywhere? No. I'm going to ahead and click, 'save change.'
Now you see I've got my image in there.
Let's see what this is starting to look like on the front side of our website.
As I click, 'preview' let's see what we've got.
It should have our one line of code here. Look at this fadein here to the right.
How nice is that?
My content (all of it) if I had
a whole big long paragraph, I can have that sitting here
on the left side and then have a picture here on the right side.
Of course
as we
drag this all around, (because it's responsive) look how it stacks perfectly.
We don't have to worry about our website breaking in responsive mode
because Visual Composer is completely 100% responsive.
Brilliant!
You can just keep going.
The options are endless in this plugin. If I wanted to add another row here,
let's add something new.
What else? I mean, goodness we could do all sorts of fun stuff.
They've got
Pinterest options here where you can put your boards.
They've got your Rev Slider so we can throw in a Rev Slider. They've got your
Contact Form.
A Google Map if we wanted that there. A progress bar, a call to action-
all sorts of image options. There's a countdown clock here you can put in,
cool timeline,
a list icon (that's kind of cool.)
Just really, phenominal plugin.
Options are endless. I'm going to show you a page that I built with it earlier
so you can get an idea. Really quickly.
I'm going to go to our homepage here.
Check this out. As the whole website loads, watch what happens.
We've got
this kind of playing and bouncing in.
Watch as I scroll down the page. Watch the lazy load happen.
That was lazy load there as the text just kind of fades in.
Here are these guys spin- they all rotated and spun in.
Look at these party packages happening. They kind of fly in.
Those zoomed in.
Then these guys 'hang loose.'
They kind of swing in and wiggle down low.
This is just a fun website.
You don't necessarily need all of this animation taking place in your website
(especially if you're more of a corporate look, right?)
I just wanted you to see the power of what a Visual Composer can actually do.
Again, fully responsive so these three columns right here (once they get on a
cell phone-single column environment)-
look at this as they stack beautifully right up perfect.
Of course, you do already have to have a responsive website.
This doesn't turn your website responsive.
If your theme is already responsive, you obviously want your content
(no matter what you're doing with your columns or your content page structure)
you always want that to even flow as well.
Sometimes (if you've tried it in the past)
you want to put things in there you think, "oh that's going to look great" but
when you get on your cell phone mode you realize...
'Poop, that does not look great."
Well this is plugin to guarantee that it's always going to stack correctly and
look phenomenal.
I highly recommend these guys. I am not an affiliate marketer. I don't get any
percentage of the sales if you guys go over and purchase this right now.
I also let you know that there are other add ons
like this plugin has even more add ons.
You can go purchase another set of add ons for like $17.
All of a sudden you've got even more options in there.
It's kind of option overload.
If you walk through it step by step, (pay attention to what each one can possibly do
for you) you could really potentially build a
beautiful responsive website without ever having to write one bit of nerd code.
I hope this helps y'all.
If you have any questions on your WordPress website
would you consider giving me a tweet at @WebTegrity
(I'll put the information in the description box below)
or always shoot us an email over on WPWed.com which is WordPress Wednesday.
I'll put that link down below as well.
Look forward to seeing y'all next WordPress Wednesday.
Bye, y'all!