Full Disclosure: This article is sponsored by BAWMEDIA.
How many times have you wondered if you could find a way to build a complete landing page, including a header and a footer, without having to resort to writing code?
And if so, how difficult would it be?
The truth is, it’s not only possible to do so on WordPress, but doing so is about the same level of difficulty as solving a puzzle designed for an 8 year old.
Today, we’re going to show you step by step exactly how you can do it, with an intuitive tool called the Visual Composer Website Builder.
What Do I Need to Know About the Visual Composer Website Builder?
Simply put, the Visual Composer (VC) Website Builder plugin consists of a live-preview, drag and drop editor, and a comprehensive selection of ready-to-use content elements stored in a cloud-based Hub.
We’ve already hinted that building a complete landing page is not at all difficult, although the reason for that naturally lies with the tool your using. Because it enables you to do everything 100% visually, the VC builder makes building a page as easy as it gets.
The following 3 integrated features have made this tool the most popular editor and page builder on the market:
1. The Hub
The Visual Composer Hub is a cloud-based repository of design elements, templates, and blocks. As a VC user, these UI design aids are always readily available to you.
Although their number is large, and more are constantly being added, you can select and download only those you intend to use.
2. New technical stack
The VC Website Builder resides on a new ReactJS technology stack platform that’s totally devoid of shortcodes. This lack of shortcodes results in higher performance and avoidance of problems that otherwise might be encountered when uninstalling the plugin.
3. API
Although you don’t need coding or coding skills to build a page, if you have coding skills and you would like to extend Visual Composer with custom elements of your own, VC’s well-documented open API will make it easy for you to do so.
Several of VC’s main features you’ll find useful and appealing include:
- Page editing using a visual frontend editor. There’s also a tree view that helps easily navigate through the elements.
- There’s a large selection of ready-to-use WordPress templates for all types of pages;
- Visual Composer works with any theme, including any you might currently be using;
- Every design element and template is responsive and mobile-ready;
- You have access to an impressive collection of add-ons that are available in the Hub or offered by third-party developers;
- Header, footer, and sidebar editors make it easy to quickly modify a layout using the visual editor*.
*This feature is available in the Premium version of the product.
How Does Visual Composer Differ from WP Bakery?
Since the same team created the WPBakery Page Builder and the Visual Composer Website Builder, many web designers believe the latter is merely an advanced version of the former. It’s not.
The Visual Composer Website Builder plugin is completely different from the WPBakery Page Builder. It is not an “advanced” version.
Two key differences:
- WPBakery addresses only the content part of a page, whereas Visual Composer lets you build content, header, and footer, i.e., a complete page and a complete website.
- WPBakery is shortcode-based; the Visual Composer website-building platform is ReactJS-powered and does not use shortcodes.
You’ll find a full list of differences between the two plugins here.
Build a landing page with Visual Composer in 7 Easy Steps
Follow these steps to see how you use Visual Composer’s drag and drop editor to build a complete landing page:
Step 1: Create the layout
To select one of Visual Composer’s ready-to-use layouts, go to the Add Template option, choose one that suits your content type, and click “+” to apply it.
Step 2: Customize the layout
The ready-to-use layouts consist of rows and columns where the row is a base that defines the page’s logical structure and each row has a set of columns. Visual Composer lets you select and manage these columns.
Since the properties of the layout you choose are customizable, you can add or remove UI elements, change their styling options, or use drag and drop to alter the size of a column.
UI element properties can be modified using either the visual editor or the tree view of elements. Use the ‘Pen’ icon to display an element’s individual styling properties.
Step 3: Stretch the content
You can choose whether you want your layout boxed or stretched. If you want your content to display at full width, switch the ‘Stretch Content’ toggle to ‘On’.
Step 4: Add the top menu
To add a menu, go to Headers, click on the Add Header button, write a Header title, and click on Start Building.
Having done that, you’ll be directed to the Visual Composer Hub where you can select the UI elements you need for your header. Next, type Menu in the search box and select either the Basic or Sandwich menu option.
Finally, choose the menu source, align your menu, and modify the appearance of the navigation options to suit your taste.
Step 5: Add a header
Now it’s time to add a header to your page. To do so, hover over the Please Select Your Header button and click Add Header.
Go to the left side of the screen and select the type of header you want, and a menu will appear at the top of your page. Note that this option of adding headers is only available in the Visual Composer Website Builder; and not in WPBakery.
Step 6: Pair image with text
You’re not quite done. You still have to add your personalized content to your landing page.
Click on the default image to upload your own image to replace it. You can then select the row to change the background color option.
Do the same for the text by clicking on the default text to replace it with your own; after which you can change the text color if you wish.
Step 7: Create a group of elements
Typically, you’ll want to place one or two CTA buttons above the fold and under your product or service description.
For example, if you want both a ‘Buy Now’ and a ‘Learn More’ button, you’ll want to differentiate them in terms of their color and size, and placing greater emphasis on the Buy Now button.
It’s easy to customize the general parameters for any UI element as well as its individual styling options. Simply click on ‘Edit’ for a particular element or button.
Now it’s simply a matter of using the editor to polish your page by playing around with text size, changing an image, adding a logo, etc.
Your done! Good job!
Click here to see a full view version of the landing page
Conclusion
As you can see, with the Visual Composer Website Builder it’s not at all difficult to build a complete page in WordPress. It doesn’t require any coding or having to work header and footer design separately.
Beginners will have no problem building a page or a complete website with Visual Composer. Professional web designers rely on this plugin as well since it frees them up to focus on their creative work and also saves them a ton of time.
Ready to have some fun working with Visual Composer? Give it a try!
Full Disclosure: This article is sponsored by BAWMEDIA.