A popular alternative to industry-leading tools like the Elementor page builder, Visual Composer is a beginner-friendly page builder plugin for WordPress that makes it easy to create professional websites for any niche.
Combining effortless drag-and-drop capabilities with a host of fully-customizable content elements, the plugin triumphs over its competitors in simplicity without compromising on the kind of high-quality visual appeal and responsive functionality you need to succeed online.
Don’t just take our word for it.
In this guide, we’ll walk you through the basics of Visual Composer, showing you how to create pages, arrange those pages into sections with custom layouts, and populate them with content that strikes the right note with your audience.
How to Create a Professional Website with Visual Composer
1. Install Visual Composer
Begin by installing the free version of Visual Composer. You can do this by going to Plugins – Add New from your WordPress dashboard and searching for Visual Composer.
Install and activate the plugin as you would any other; once your new drag-and-drop builder is activated, you’ll be taken to a starter page.
Suppose you prefer to use the Premium version of Visual Composer to access the additional tools and templates. In that case, you can follow the links highlighted in the image above to generate and activate a premium license.
Otherwise, let’s get on and create your site.
To start that process, simply click Create a New Page.
2. Select a Layout Template
Next, the page builder plugin asks you to select a layout. Here, you can choose either the default WordPress layout or a blank page, while premium users also can choose a custom layout with pre-set columns and widget areas.
Alternatively, you can select from one of many pre-built templates with existing content elements that you can customize.
For the sake of this tutorial, we will use a blank template to give you a more thorough overview of Visual Composer’s features.
3. Arrange Your Page Content With Columns
If you load a blank template as we have, your first task is to populate your page with columns, which essentially act as containers for your content.
For example, if you want to create a page header with an image on one side, and a header, text, and CTA button on the other, you’d select the two-column layout like so:
4. Add a Page Heading
Next, click on the Add Element icon within one of your columns. This looks like a horizontal rectangle with a plus (+) sign in the middle.
This gives you many pre-set content elements to drag and drop into your design.
To begin, let’s add a page header powered by Google Fonts.
Select the Element from the menu provided by clicking on it, then hold down your click to grab that item and drag it into your column.
You’ll know this works because you’ll see a green icon moving around the screen with your mouse.
Once your header is in place, you’ll have three ways to customize it:
A. Customize the Header Content
First, you can use the Content tab to replace the dummy placeholder text with something more relevant to your page.
If you’re using Visual Composer Premium, you can also click on the small plug icon next to the Title Text field to replace your title with dynamic content based on default WordPress and custom fields.
Elsewhere on this tab, you can change the title tag of your header and link your header to another resource on your site.
B. Customize the Header Design
Switching to the Design tab allows you to customize the way your header looks.
You can select from the entire Google Fonts library and change the color and styling options here.
C. Customize With HTML and CSS
Finally, you can switch to the Advanced tab, using custom HTML and CSS code to fine-tune your header further.
5. Add an Image
Visual Composer offers multiple options for adding images to enhance the visual appeal of your pages.
These options included assorted gallery layouts, sliders, and static images.
For now, let’s stick with a static image.
To add one to your design, click in the column where you want to place your image and tap Add Element.
Then, select Single Image from the Elements menu and drag it into place just as you did with your header.
When you first do this, visual Composer will fill your column with a placeholder image.
To replace it, look in the element editing menu on the left.
Again, you’ll see three tabs:
- Content
- Design
- Advanced
Under content, there’s a thumbnail of your image, its name, and a pencil icon.
Clicking the latter will open up your WordPress media library so that you can select a new image.
Once you’ve chosen your image, you can use one of the platform’s “Instagram-like filters” to give it a unique look before moving on to the Design and Advanced tabs for further customization options.
6. Build Your Sections With More Elements
If you were wondering, you could add multiple elements to each column.
To do that, simply hover toward the bottom of that column until the Add Element icon (a blue square with a white + sign) appears.
Click that, and the Elements menu will reappear.
Now all you have to do is repeat the process:
Select your Element, drag it into place, then use the three-element editing tabs to change the content, design, and functionality of your Element.
In this example, you can see that we’ve used this same approach to add a text box and a Call to Action (CTA) button.
7. Preview Your Design
You can continue this process for as long as you need to. Create a new section using columns, then populate each section with a host of different elements, including not only the basic ones we’ve shown you above but also:
- FAQS
- Hero sections
- Icons and graphics
- Shortcodes
- Videos
- Social media content
- Google Maps
Plus, lots more.
Once you’re happy with your page, click the Preview tab to test your site’s appearance on different devices and screen sizes.
This is imperative for ensuring that your site performs well and delivers the best possible user experience no matter what device your visitors use.
8. Publish Your Page
If you’re 100% confident that your page is ready to go live, you can make that happen by looking at the bottom of your Visual Composer menu for the check mark icon and selecting Publish.
With that done, all that’s left is to repeat this process for as many pages as you need.
Creating Professional Websites With Premade Templates
In the tutorial above, we used a blank default template to show you how to add elements to your pages and customize them.
If you prefer to use one of the attractive premade templates, you’ll find that the process is almost the same, except that your elements are already in place and simply need customization.
For example, in the image above, you can see that we’ve loaded up a beautiful template for a product page that gives us all the same editing and customization tools we had when using the blank template.
Frequently Asked Questions
1. What’s the difference between Visual Composer’s free and premium versions?
The premium version of Visual Composer offers more tools that give you complete control over your website’s design, including header, footer, sidebar builders, popup creator, and eCommerce features.
2. Which website builder is better: Visual Composer or Elementor?
Elementor offers more customizable options and greater design flexibility. However, in our experience, Visual Composer offers a much smoother user experience, making it the better page builder for beginners.
3. What’s the difference between Visual Composer and WPBakery?
Visual Composer is a full website builder for WordPress that allows you to create different layouts, while WPBakery only allows you to edit content within those layouts.
How to Create a Professional Website With Visual Composer: A Recap
As you’ve learned by now, creating a professional website with Visual Composer for WordPress is just about as easy as any first-time website owner could ask for.
Once you’ve mastered the basics of creating layouts, adding content elements to them, and customizing those elements to meet the needs of your visitors, you’ll have all the skills and technical know-how required to create eye-catching, dynamic pages in no time.
If there’s anything you’re still unsure of, here’s a quick recap of the main lessons from this guide.
- Use premade or blank templates to simplify the page creation process – We recommend using Visual Composer premium to access a wider variety of templates and design options. However, the free version still offers much.
- Add and customize content elements in just a few clicks – From image galleries to social media content via standard design elements like text and headers; Visual Composer offers many elements for all types of content.
Regardless of which Element you pick, the process of including it on your page is the same:
-
- Select the Element
- Drag and drop it into place
- Use the Content, Design, and Advanced tabs to change it to your liking.
- Remember to preview before you publish – To ensure your visitors have a smooth experience no matter how they access your site, test each new page, checking that it looks right and functions correctly on all devices.
For more options to boost the visual appeal of your new website, see our guide to 2023’s top ten WordPress themes.
