Visual Composer: A Drag-and-Drop WordPress Page Builder
WordPress powers a large percentage of the web, and it’s a famously easy-to-use content management system. But creating immersive, in-depth pages and layouts can be a tricky process.
Visual Composer is a plugin that lets you take full control over your WordPress site, and build any layout you can imagine. It’s all based around adrag and drop page builder interface, doesn’t require any programming knowledge, and is really simple to get started using. Today we’re going to be taking a look at how it works, and sharing a few examples of how it’s powering some lovely WordPress designs!
Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.
Logos, Print & Mockups
PowerPoint & Keynote
Shopify, Tumblr & More
What is Visual Composer?
Visual Composer is a WordPress plugin that makes it simple to create interesting page layouts, without needing to fiddle around with HTML and CSS code. There’s a front-end, visual editor, or a back-end editor for arranging “content elements” on your page, with over 40 different types of content block supported. It’s one of the most powerful and most customisable WordPress plugins available.
Complete Drag-and-Drop Editor
The drag-and-drop editor built into Visual Composer lets you create stunning and beautiful content blocks. It’s a true way to experience “What You See Is What You Get” design, building the page or layout you want by simply moving content elements around.
- Add and drag elements across the screen to quickly build unique layouts inside your WordPress theme.
- Visual Composer determines the type of elements you add, and highlights them with different colors in order to improve usability and navigation.
- Switch between Guide Modes to enable or disable menu elements and row/column borders.
- Control your content on different devices with brand new responsive design options.
Once you enable the “responsive” option, your content will be accessible on desktop and mobile platforms, and it’ll look great on any device. You can control how stacking behaves on different devices, define offsets of your choice, and show or hide particular elements on specific device types. Responsive design can be a tricky beast to master — especially when working in a WYSIWYG-type environment, but Visual Composer handles it rather well!
Forget about media queries, screen sizes, and worrying about complicated responsive layouts. Just choose device type of your choice and simply fine tune settings as you need.
40+ Content Elements
Visual Composer comes with over 40 different built in content elements — enough to build almost any layout you could need. Everything works in a simple drag-and-drop way, and you can add, edit, duplicate or remove elements with just a few clicks.
Whether you’re wanting to add layout elements like grids and rows, social media embeds, interactive layouts like accordions or sliders, or any of WordPress’ default widgets, the plugin has you covered.
Of course, if these don’t fit the bill, there are over a hundred different premium add-ons that you can buy to further extend the plugin. Take a look at the full collection to see just how powerful the platform can be!
Roll Your Own Color Theme
No two websites are the same, and you can easily use the built in “skin builder” to tweak Visual Composer elements styling, to make a perfect match with your corporate and brand identity.
There’s a built-in design options panel, through which you can choose which parts you want to change the style of. By combining your WordPress theme with a custom Visual Composer powered skin, you can create a completely unique design that’s unlike anything else on the web.
Of course, if you’re a CSS expert, that’s fine too. Just add your own code within the settings, and come up with even more custom result for a completely unique website! You can tweak everything in a detailed way, including the number of columns in the grid layout, gutter values, any dozens of other options.
Integrated With 200+ WordPress Themes
Visual Composer has been adopted fairly widely by WordPress theme developers, who have integrated in right into their theme from the outset. It forms part of the experience they offer from the word go, and makes working with their themes much easier than it would be otherwise!
We’ve collected a few examples of these, but there are hundreds more to look through as well!
How to Give it a Try
If you’re interested in watching the plugin in action, the following video is a good starting point. Over the course of ten minutes, you’ll see an entire design and layout come together, without a single line of code in sight! If you want to get your hands dirty and give it a try yourself, there’s a free demo to experiment with as well.
Visual Composer is priced at $33, and available to buy on CodeCanyon. If you’re a regular user of WordPress, and want to give yourself an bit more flexibility with what you’re able to achieve on your site, this is a great way to get started!