WordPress web design simplified with “visual composer” page builder

WYSIWYG Web Design: Page Builder

Building websites is getting easier for non-programmers. There are currently several hosted solutions such as SquareSpace, Weebly, Wix, and 1&1. If you know what you want to create in terms of website content, with pre-designed templates, these hosted solution website builders can be a great way to go.

If you want to have the ability to design your own page layouts, but prefer not to be tied to a specific hosting setup, then installing Visual Composer by WP Bakery into a WordPress website design may be a better solution.

According to the Visual Composer landing page on Envato Marketplace, 500,000 installations suggests that it’s an ideal way to add power and productivity to a WordPress website.

Visual Composer – A Shortcode Tool on Steroids

Visual Composer (VC) is a way to add complex “shortcodes” to your WordPress web design pages. A shortcode is an abbreviated way of adding snippets of code to a page. The developers at WP Bakery added a well-designed user-interface that “sits” on top of the classic WordPress editor and gives you very precise design control of your page content without having to write code.

VC works by inserting page “elements” to a grid of rows and columns. By working with a grid, elements can be stacked to deliver “responsive” (smartphone and tablet friendly) web pages. Content elements can be added to rows and columns through a simple drag and drop type interface.

When you first go to build a page in WordPress with Visual Composer installed, your editing view will look like the example below:

vortex-miami-mobile-friendly-web-design

All you have to do is decide what element you want to insert. The basic Visual Composer (VC) installation includes a slough of valuable elements that will address most of your design dreams. The menu of choices looks like the example below:

visual-composer-review-vortex-miami-web-design-2

With over a half-million installations, you can imagine you’re going to see the same design and animation effects across a number of websites. If you want a unique effect, you may have to tweak the settings or build it yourself. The good news is that you can add your own shortcodes to the VC interface.

VC gives you very precise control over margins, padding, borders at the element level. And rows can be fit or “stretched” allowing full-width visuals that correctly scale for responsive use.

Editing a a text element is simple, the screen looks like the example below:

visual-composer-review-vortex-miami-web-design-4

visual-composer-review-vortex-miami-web-design-5

To allow one to have a context for what they are designing or editing, VC can be accessed from a “website” view instead of the editing view and depending on your site layout will look something like the example below:

visual-composer-review-vortex-miami-web-design-8

You will enjoy a number of advantages by working with Visual Composer

  1. Design efficiency and productivity – There’s no question that drag and drop is fast and the visual interface is friendly. And once you have a page design you like, you can save it as a “template” for use elsewhere in the site.
  2. Precise control over elements – It’s easy to adjust various aspects of any content element. To allow for more complexity, you may need to know how to write CSS, and VC allows you to assign a class name to any element. Even without knowledge of CSS, the basic controls are powerful.
  3. Training – VC provides several video tutorials, although many of the features can be learned on the fly. Teaching someone how to use VC is simpler than explaining the classic editor.
  4. Low Cost – At less than $50 for a single site license, it’s a bargain.
  5. Compatibility – VC claims to be highly compatible. However, you may need to see if it conflicts with any other shortcode tool. If so, you need to replace the conflicting shortcodes with VC versions.

Add-ons

The popularity of VC has spawned several add-on plug-ins that fill in most of the gaps in imagination. To help ensure your are making the right choices when selecting add-ons, it’s a good idea to consider the number of sales, reviews, documentation and support issues.

Here are a few you can learn more about. 

  1. Visual Composer Extensions by Tekanewa
  2. Ultimate Addons for Visual Composer by BrainstormForce
  3. Templatera by WP Bakery
  4. DHVC Form by SiteSao

Next Steps

If you’re already using WordPress, give Visual Composer a try. It will definitely change the experience of creating pages for your website. If you’re new to website design, you may want to learn more about the advantages.
About the author: Tom Weinkle is a founder and partner of Vortex Communications, a graphic and website design firm who offers graphic and WordPress web design, build, troubleshooting and training services along with search optimization, social media and inbound marketing services. Based in Miami, Florida, Tom has over 25 years of experience in visual communications for the healthcare, medical, law, accounting, software, financial services and banking industries.

Scroll to Top