In this post we are going to have a look at the Visual Composer. The Visual Composer is a drag and drop page builder that allows you to create custom layouts for WordPress pages – without coding.
The Visual Composer is available from CodeCanyon, the plugin division of Envato. The Visual Composer comes as a plugin and should work with any WordPress theme.
For the purpose of this review, we are going to use the Visual Composer with the Genesis Sample theme. The Sample theme is a free theme packed with the earlier reviewed Genesis Framework.
Installation of the Visual Composer
Please note that you should not upload the Visual Composer zip-file as downloaded from CodeCanyon. This archive is named something like codecanyon-242431-visual-composer-page-builder-for-wordpress.zip. WordPress will not recognize the plugin when you upload this zip.
When you unpack the downloaded archive, you will see at least one other archive named js_composer.zip. You can upload this zip through the WordPress backend (Plugins >> Add New >> Upload Plugin).
Another option is unpacking the zip, and uploading the folder inside the js_composer.zip over (S)FTP. You need to add the js_composer folder to the plugins directory of your WordPress install.
Now you can activate the Visual Composer just like any other WordPress plugin.
Visual Composer Settings
After activation, you will notice that the Visual Composer has added two entries to the WordPress Admin menu: Grid Elements, and the Visual Composer Settings within the WordPress Settings panel.
With the Grid Elements you can build and modify templates for the Post Grid, Masonry Post Grid, Media Grid and Masonry Media Grid. These grid layouts allow you to compose Pinterest like pages from posts or images.
Let us first have a closer look at the Settings. As you can see in the image above, the Visual Composer Settings comprise five tabs.
The Visual Composer is intended for pages, but also works with posts, and custom post types. You enable the Visual Composer for the relevant pages and/or posts, by clicking the check box before the Content Types regarding.
For each of the user role, from Administrator to Contributor, you have the opportunity to check which of the 54 features of the Visual Composer are available for each of these user groups.
The default content elements of the Visual Composer use a light gray styling. This makes it possible to coexist with the designs of most WordPress themes.
With the Design Options, you have the ability to set your preferred colors for design elements like accents colors (links), hover colors, and call-to-action backgrounds.
You can configure the Visual Composer to auto-update, provided that you have purchased your license directly from CodeCanyon.
For automatic updates, you need to enter your Envato user name, the API key, and your product license.
The product license is available from the Envato Download page. You can generate the API key within the Settings of your Envato Account.
Editors of the Visual Composer
We need a project to get a grasp of the possibilities of the Visual Composer. Let us create a static homepage for the Genesis Sample theme – a blogging theme. You can, of course, also use the TwentyFifteen or the TwentyTwelve theme.
When you add or edit a page, you will notice that the Visual Composer has added two buttons just below the page title field.
Let us create our homepage with the Backend Editor. Once we are finished, we will open the page in the Frontend and make any necessary adjustments.
By the way, it is also possible to open an existing WordPress page with the Backend or Frontend Editor.
The Visual Composer will instantly create a Text Block with the content of the existing page. After that, you can insert content rows before and after the text area, add elements, create columns, etc.
Backend Editor
The Welcome page of the Visual Composer offers three options:
- add content – an element or text
- use a predefined layout
- choose from more layouts
When you have created a page with Visual Composer, you can save that page as a template. Your custom templates become available for future projects by clicking the [More Layouts] button.
The Visual Composer comes with six predefined page layouts: Landing, Call-to-Action, Feature List, Description, Service, and Product.
We are going to create a homepage layout from scratch. Any layout is composed from elements and texts.
You have to create your own text, but you can choose from a myriad of elements by clicking the [Add element] button:
You can filter these elements with the links at the top: Content, Social, Structure, and WordPress widgets.
The Facebook Like, Tweetme, Google+, and Pinterest buttons belong to the Social elements.
The three Structure elements are Widgetised Sidebar, RAW HTML, and Raw JavaScript.
Clicking the WordPress Widgets link displays just the default WordPress widgets.
All other elements are Content elements. This includes image galleries, sliders, accordions, and toggle boxes.
In this case even Contact Form 7 (actually also a custom post type) is included, since I have activated this plugin. Other supported third party plugins are Layer Slider, Revolution Slider, Gravity Forms, and Ninja Forms.
In case you prefer a drag and drop form builder, have a look at WPForms Lite.
When you add an element, you can select one of the default animations and/or enter your own CSS class.
Visual Composer Project
Let us start with a brief welcome message. We click [Add element], and choose Text Block. A windows pops up with the default WordPress editor, where we can create our text.
Here we enter “Welcome to WPfy.me, We evaluate WordPress frameworks, plugins and themes for you”.
Creating a page is a matter of stacking rows. The welcome message above, is an example of a full width row – or a row with only one column.
Depending on the content that you want to showcase, you might prefer to divide a row in more than one column.
Well, the Visual Composer lets you choose from: 1/1, 1/2 + 1/2, 2/3 + 1/3, 3 * 1/3, 4 * 1/4, 1/4 + 3/4, 1/4 + 1/2 + 1/4, 5/6 + 1/6, 6 * 1/6, 1/6 + 4/6 + 1/6, 3 * 1/6 + 1/2. And when any of these suits your taste, you can add your own custom row layout.
Now, let us add a row with three 1/3 columns so that we can display the latest posts from the categories frameworks, plugins, and themes.
Usually, I would turn to the Genesis Featured Posts widget for this. Unfortunately, the Visual Composer does not recognize any of the Genesis plugins.
However, we can use Visual Composer’s Post Grid element instead. We want to add one post to each column.
To display only a post from the selected category, we enter the desired category name in the Narrow data source field. Next we enter 1 for the Total items, and 1 Grid element per row.
We have to iterate this three times, since we want to display a post from each of the categories frameworks, plugins, and themes.
The advantage of this solution, is that the next time we publish a new post in one of these categories, that post will automatically show up the appropriate post grid column.
The top row has only one column, and the third row has 3 columns – each 1/3 width.
When you noticed that I skipped row #2, then you are right. I decided to add a row with a horizontal separator – a horizontal line – after each content row.
Let us create another content row. This time with two columns – a 2/3 and a 1/3 column.
The predefined layouts include a 1/2 and 2/3 layout, but not a 2/3 and 1/3 layout. Hence, we have to create a custom layout. How does that work?
Click the the Custom-link, and enter the desired layout. Here that is “2/3 + 1/3”. Click the [Update] button. That is all.
Let us add a Google Map to the left column. Find your location with Google Maps, and click “Share or embed map”. When you choose Embed map, Google will present you an iframe. Copy that iframe in the Map embed iframe of the Visual Composer as in the image above. Hit [Save changes], done.
In the right column, we are going to add Contact Form 7 form and a Custom Heading. The Custom Heading element offers a text field and lets you choose a Google Font.
This is how our Visual Composer page looks at the backend:
Six rows. Three content rows, and three rows with a horizontal separator.
Here is the same page, opened on the Frontend:
Another way to inspect the page in live mode, is by opening it in the Frontend Editor.
When you hover over a content element in frontend mode, you will notice several handlers.
With the blue handler, you can drag complete rows, and drop these somewhere else on the page.
The yellow handlers, allow you to switch columns in within a row, like here above in the post grid. Or you could swap the contact form with the map. It is all a piece of cake.
And last but not least, by clicking the green handler, you can edit the content itself – without the need to return to the backend.
From Template to Page
As mentioned earlier, the Visual Composer comes with six predefined page layouts: Landing, Call-to-Action, Feature List, Description, Service, and Product. Let us create a Services page based on the Service template.
Here above you see the before shot and after shots. What did it take to get from the bare bones template on the left to the page on the right?
Well, it is almost as easy as connecting dots. I started by replace the image placeholders, with my own images. After that, I replace the default text – which is done with the default WordPress editor.
Next, I added an introduction text at the top, and a call-to-action on the bottom. Examining my hard work, I found that the rows with the images need a custom header. For a final tweak, I added some margins here and here.
Everything is done by clicking. As soon as you click an element, a dialogue wizard pops up guiding you through the necessary steps. Even adding margins, borders, and padding is a blanks exercise – jut fill in the form.
Of course, the Service page still needs a finishing touch. What I wanted to show, is that it is not difficult to get from a template to a page that you can publish on your website.
Final Words
The Visual Composer allows you to create custom layouts for pages, posts and custom post types. Without coding. Just drag-and-drop the elements where you want them.
Your clicks with the keyboard and mouse are transformed into shortcodes. You can verify this by clicking the [Classic Mode] button when you are in Backend Mode.
What you have seen here is just a tip of the iceberg. We have touched only six content elements: text block, post grids, Google Maps, form, custom heading, and separator.
With the Visual Compser, however, you have 49 content elements at your fingertips. Just think of image galleries, videos, FAQ toggle boxes, social media buttons, and let your imagination flow…
A license for the Visual Composer is only $28, which allows you to use the Visual Composer on one site. For these $28, you also get lifelong support and product updates. That is a lot of bang for the buck.
Leave a Reply