How to easily design a page without programming

Thinking about making a wordpress site?

YES!

But you don't have any programming knowledge like HTML, CSS, PHP etc...

Are you thinking about hiring someone to do this for you?

Wait! you could do this yourself.

I will show you how you can design a page without programming.

Let's dive into it:

Wordpress has many page builder plugin that can help you design a web page very easily. Among them visual composer is one of the most popular one, it is a premium plugin from the house of wpbakery.

It's a complete drag and drop page builder and one the most successful item in codecanyon.

How to get visual composer

You can get visual composer in two ways-

1. Buy a separate copy of visual composer plugin

You can buy this as a standalone plugin from codecanyon, it supports most themes. You need to install it like any other plugin and then activate your license copy.

2. Visual composer is bundled within the premium theme

Many premium theme include visual composer within their theme package, if you buy such a theme then you just need to activate the plugin after theme installation. This may vary depending on different themes.

Now you have the plugin installation out of the way let's move on.

Overview of visual composer

Visual composer comes with many options and features let's go through them quickly.

The front-end and back-end editor

One of the best thing about visual composer is that it has both front-end and back-end editor.

design a page without programming

Choose between the two which one you are more comfortable with. I like to use backend editor because the interface is lighter than front-end.

Ready to use content blocks

It has more than 45 ready to use content blocks which can be used to design a page very quickly. Will discuss about few of them later.

vc-content-block

Visual composer extensions

Visual composer is a growing community and various developers are adding value to it by developing different extensions. You need to buy extensions according to your need but you might get few extensions included in a premium theme.

Now you have some idea of visual composer let's look at some elements in more details.

Adding an element

Adding an element in visual composer is very easy.

Click on the + icon and choose the element you want to add.

vc-add-element

Splitting a row

Splitting a row can be bit tricky without proper knowledge of html and css but visual composer makes it very easy for its users to split a row with just one click.

vc-splitting-row

Re-arrange columns

If you are not happy with any column position you can simply drag and change its position.

vc-re-arrange-column

How to create full width background

It is very easy to create a full-width background with visual composer even if your theme doesn't support full-width rows.

Click on the Pencil icon (edit row) > Row stretch choose your option.

vc-fullwidth-bg

Creating a parallax background

Creating a parallax background can be a challenge specially if you don't know any coding but not with visual composer.

You can create parallax background effect in just few clicks.

Row setting > Parallax(choose option)> Add image

Adjust parallax speed.

vc-parallax-bg

Create a video background

If you want to use a youtube video as background you can do that quickly with visual composer.

vc-video-bg

Want a pintrest like gallery?

Are you looking to create a gallery like pintrest i.e. masonry style, well visual composer has 2 elements for you to create a masonry style :

Masonry media grid: For creating masonry grid with simple images.

Post masonry grid: For creating masonry grid with blog posts.

vc-masonry-grid-element

Create custom templates

What if there was an option to turn any section or an entire page into a template so that it can be imported into a new page.

Visual composer has that option but you need to buy an extension called Templatera. This add-on will allow you to create and save new templates that can be used later.

vc-templatera

As you can see designing a page in wordpress has never been easier before with visual composer you can too design a page like professionals but without writing any code. So go ahead and use visual composer and share your experience with us.

Ananda is a freelance front end developer and css expert from India. He writes about front end development in his blog designtheway.com

Leave a Reply

Your email address will not be published. Required fields are marked *