A Guide To Drag & Drop Page Building – Visual Composer

WordPress is great, and being able to customize your website running on WordPress is just the icing on the cake. However not all of us are coding gurus. Heck, some WordPress lovers don’t know anything about HTML or CSS. But this shouldn’t stop you from being able to customize your WordPress theme. This is where page builders come in.

Drag & drop page builders are widely available as plugins and are built into many popular WordPress frameworks and themes. They make it possible for users of all levels to make changes to the general layout of a theme, and it can make adding extra flourishes (icons, skill-bars, pricing tables, etc.) super easy. Specifically we want to introduce you to one of the favorite page building WordPress plugin – the Visual Composer.

What Is The Visual Composer

Visual Composer is a fantastic plugin developed by WP Bakery that adds a drag & drop page builder to your WordPress theme.  It gives you the tools you need to be able to create complex page layouts without needing to touch a single line of code.

A Guide To Drag & Drop Page Building with Visual Composer

Visual Composer is a WordPress plugin, so just install and activate to take advantage of all it’s wonderful features. You will need an active WordPress website hosted to do that.

Once activated, Visual Composer gives you control over the layout of your pages. Just add a new page and you will see new buttons so that you can toggle between classic mode and builder mode as well as a button to take you to the live front-end editor. You can add rows, columns, buttons, text, images and so much more using all of the Visual Composer’s options. Plus there’s an option to save your layouts as a templates to be reused over & over again.

It does not only support WordPress pages, it supports Posts and Custom Post Types as well. We generally don’t advice on using the Visual Composer on your News, Posts or Articles, as we think that these should be handled by the native WordPress Framework or WordPress Theme that you are using and also as it can affect your overall Search Engine Rankings in general. But it is up to you to decide on that. As said – Imagination is the only limit.

Use Rows & Columns

Included in the builder are page building elements. You can use these elements as literal building blocks for your page.

First Add A Row. Rows make it possible to add columns in one click. Just hover on the yellow paragraph tab at the top left corner of your row and select a layout. The row automatically breaks into columns according to the layout you choose.

Add Elements

The next step is to begin adding your page features. Just click the Add Element button to open a pop-up menu. There are lots of options for adding text boxes, headings, social sharing, images and galleries, toggles or tabs, accordions, recent posts (which also works with the custom post types of your theme in addition to the blog posts), buttons and even sidebar widgets.

Also, depending on the WordPress theme and compatible plugins you are using with the Visual Composer your will see more or less page elements. Click on any element to open the options for that element. As you can see each module can have many settings and even multiple tabs of settings.

The builder also supports four awesome third party plugins: Layer Slider, Revolution Slider, Gravity Forms and Contact Form 7. If you have any of these plugins installed, a page element will automatically appear for theme. When you choose to insert a page element for one of these plugins, Visual Composer displays a drop-down of the respective sliders/forms you’ve created, or displays an entry box for you to add your slider ID. No more copying and pasting shortcodes!

Simply Drag & Drop

At any point in the design process you can drag & drop any row or page element to rearrange them. You can also duplicate any row or element, which makes adding repetitive content quick and easy (great for similar columns, FAQs, toggles, etc.).

Row Options: Format, Clone & Delete Rows

There are three added features added to the far left corner of every row that can be used to clone or duplicate an entire row and all of its contents, add new modules, edit the columns, etc. Simply hover on any row you need to edit to access these settings:

Again, depending on the WordPress theme or framework you are using with the Visual Composer the formatting options available to you may be different. While some theme developers choose to leave the Visual Composer as-is, many customize it to fit the needs or style of their theme. Theme is responsible for a unique layout and presentation of your content while a layout building tool as Visual Composer makes it easier for you to design it to your liking.

Frontend Editor, WYSIWYG

Easy to say: What-You-See-Is-What-You-Get

The powerful Visual Composer now includes a front-end editor, which makes it easier than ever to get started building your own pages and layouts. The only caveat is that not all themes support the front-end editor just yet. Make sure to double check a theme’s feature list, or to contact the theme developer directly, to see if the Visual Composer front-end editor is compatible with your WordPress theme.

Extensions, Short-codes and Shortcuts

A ‘shortcode’ is a WordPress-specific code that lets you do nifty things with very little effort. They were introduced in WordPress 2.5 (2008 edition, named Becker), and the reason to introduce them was to allow people to execute code inside WordPress posts, pages, and widgets without writing any code directly. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line.

The Visual Composer comes with 34 standard page builder elements for many features you’d want to add to your pages. Many of the elements include added options for colors, borders, padding, margins, custom CSS, animations and more. Here’s a quick rundown of what’s included:

• Rows are the page of your pages. You’ll use the row element to create columns and to insert all of your other page elements.
• Text Blocks are exactly what they sound like – blocks of text. using the standard WordPress WYSIWYG editor you can add and format text with this module.
• Icons include font icons from the following icon libraries: FontAwesome, Open Iconic, Typicons, Entypo, Linecons and Mono Social.
• Separator & Separator With Text are ways to create line (and or text) breaks between sections you create on your pages.
• Message Boxes are great for adding notes, alerts or other boxed massages.
• Facebook, Tweet, Google+ and Pinterest are all simple social sharing buttons you can add for users to share the page you are creating.
• FAQs are toggles that can be used for adding hidden content users can reveal as they read through your page.
• The Single Image is just that – a simple image with added options for sizing, animation, link and more.
• Tabs, Tours & Accordions are similar to the FAQs in that they contain hidden or collapsable content but with the first section open.
• A Pageable Container is a basic content slider (but you can insert just about any page builder element into each container “page”).
• Custom Headings make it easy to add your own headings to sections using custom fonts, sizing, colors and more.
• Buttons allow you to add links to other pages or external websites.
• A Call to Action is a callout box with an added button that catches users attention and allow you to add a bit of convincing content.
• The Widgetised Sidebar allows you to insert your own custom sidebar anywhere on the page.
• The Video Player makes it easy to insert different video formats supported by WordPress.
• Google Maps is another straightforward option – just paste in your Google Map code to insert a map on your page.
• Progress Bars, Pie Charts, Round Charts and Line Charts are all ways to graph or display data or skills.
• Empty Space makes it simple to add a vertical break between elements.
• Post, Media, Post Masonry and Media Masonry Grids are all custom grids you can add to pages (with the option to mix and match post or media types).

The plugin also includes 8 widget elements that can be used to build your own sidebar if you choose to do so. These become helpful when creating custom landing pages where your sidebar might not be in a typical page location, or if your entire website is a large network of landing pages with no two using the same sidebar.

The last feature I’d like to touch on is Visual Composer’s extendability. If you happen to be an advanced coder or theme developer you can integrate your own shortcodes into the plugin. If you’re not a coder do a quick search for Visual Composer Add-ons or Contact us to find out more information on what can be done for you within any of our WordPress Hosting Bundles.