Visual Composer Intro

So what is visual composer it is a

drag-and-drop page builder for your

WordPress site when we say drag and drop

we literally mean drag and drop that you

can place things where you want it the

layout of your page it’s all up to you

it’s not only user friendly for the

owner of the site but it also makes it

easier for the developers to design new

pages and their layouts so where do we


once the plug-in has been installed and

activated go to your pages click on your

pages and you can create a new one you

can add a new page or edit a page that

you already have so once you click

choose a page we have a test page for

this once you choose your page edit the

page and when upon arriving – to edit

your page you’ll see this visual

composer section here by the title you

have the options of backend editor or

front-end editor back-end isn’t making

edits in the original page editor that

WordPress gives you which is this area

you make it make all your changes on

here and the front-end

is actually like the live editor of your

page so you can have your page click on

front-end editor and it’ll actually take

you to your page where you can add new

elements new rows live on your page but

for now we’re just going to use the

backend editor’ the visual composer

website actually has a really good

tutorial on the front-end editor but

we’re going to use the back end editor

to activate it just click on the backend

editor button and visual composer will

pop up from here we can choose different

you can add an element add row choose a

template that you already have we’ll

explain that later and go your front-end

editor for now let’s do add row and

you’ll see a pop up over here on the

right there’s a pencil some papers

X this will edit your row you can clone

your row like duplicate it and this is

to delete it and then over here is the

column layout right now it’s just a one

column layout if you hover over this it

gives you the different column options

to a big one and like a little little

second a three column and four column

and a couple others but for now let’s

say we want to do like a picture some

text and another picture so we’ll choose

the three column layout and it’ll

separate your row into three columns so

for the first one let’s click on this

plus sign and all the elements will pop

up there’s a lot there to go through so

I would kind of encouraged you to check

them all out and see what they do and

just kind of get familiar with them and

there’s a lot that you can use and

there’s a lot of them are very good so

for now let’s just do the single image

that’s a common one that you’ll probably

use you can give a title to the section

that will appear above that the column

that you or this section like the single

image section that you choose so click

on the green plus sign where it says

image and you can choose it you can

choose an image from your library or you

can go to upload files and select a file

and you can upload one from the computer

you haven’t done that already

for now we’ll just choose picture that’s

already in here let’s choose this and

click set image when you have it and

you’ll see it pop up there below that is

CSS animation this is something that

each element has when you choose an

element it’s really fancy and it’s it’s

really nice option that you can choose

what it does is when your page loads

what you have this element set add the

animation that’s what it will do when

your page loads so if you have left to

right it’ll fade in from left to right

just like a little bit and it’s just

really fancy so choose left to right or

whichever you want

image size it gives you some examples

like the the common examples like

thumbnail medium large full if you don’t

set anything if you leave it empty it’ll

use the thumbnail size so let’s just use

large see how that looks

scroll down and you’ll see image

alignment that’s left center or right

the image style you can give it a

different style I give it a shadow

rounded give it a border so let’s just

do circles see how that looks

scroll down you can give a link to the

image you can tell it to go to a

different page let’s we’ll just leave

that blank if you don’t want it to link

anywhere once you have everything set

click Save and you’ll see your little

element pop up in the column so what we

can do we can actually edit the column

if you hover over the element that you

did there’s a pencil some papers and a

red X this will edit duplicate and

delete just like your row so let’s put

another image in the right column so

duplicate your element and it’ll pop up

right below it and this is where the

drag-and-drop comes in you can just

click and drag to where you want it so

that’s really nice to use and this

middle column let’s do some text let’s

give it a text block this is where the

wordpress page editor can’t comes in

it’ll pop up again

you have your visual and text tab the

visual tab is nice to use if you just

throw in some text in there or if you’re

adding some like alignment to it if you

want to center a line you know it’ll

show it it’ll show it write a line stuff

like that the text tab is like let’s say

you want to do a shortcode always use

the text tab when you put it in a

shortcode if you put in the visual tab

it just won’t work right so so we have

some text center lined it lets give it

maybe like a heading no kind of

we cool fancy and then once you have

that you can scroll down to your CSS

animation again let’s do this from

bottom to top and click Save and there

it’ll show you where it is so that’s

just kind of like the basics of the

layout you can add a lot of different

things like you can add a new row inside

a column you can actually add another

row like you know there’s just so much

you can do you can add you know video

you can add a like a YouTube or Vimeo

video and terror it’s kind of embeds it

into the website all your different

social medias add some text with like a

separator in them that looks really nice

accordion lists there’s just like a lot

that you can do so you know just kind of

go through and kind of get familiar with

them suppose delete this row we don’t

need this

this templates button right here you can

actually save a template like if if you

think that you’re going to use this page

over and over again this this layout

instead of creating the same layout over

and over again just save the current

page as a template let’s just do a test

and it’ll be there for when you create

another page and you bring up visual

composer come here to templates and

click your template that you made it’s

really nice to use when you have

multiple pages that are look the same so

there’s um just a lot that you can do

with this visual site for visual

composer they have they actually have a

video section with a lot of different

videos of how to use visual composer and

it’s just there’s just so much you can

do with it and they’re constantly

improving the plug-in to use more and



so once you have once you have your page

also laid out the way you want it come

over here and click publish or update or

whichever one it is this one we have a

draft going right now so we’ll just save

the draft but you have your page done

click publish or it’ll say update and

then check out your page and see how it


Get Website Results
to our Youtube Channel

Follow Us

Stay in the Know Via Email

Request Free Consultation