Visual Composer is a very useful plugin for front-end editing. It provides many pre-defined elements for you to place. Being a very popular plugin, it also comes with a variety of addons. Together they provide everything you need to create beautiful and responsive web pages. The sky is the limit and you don’t need to have any programming skills or knowledge. In this guide, I will cover the basics of using this plugin which should prove enough in 80% of the cases.
The plugin isn’t free and neither are its addons. Head to https://codecanyon.net/item/visual-composer-page-builder-for-wordpress/242431 and purchase a license. Install and active the plugin, for a complete guide to installing WordPress Plugins look here.
Designing with Visual Composer
For the purpose of this example we are going to create a new page. To do this, go to your WordPress Dashboard and click on Pages then click on Add New.
This is the usual WordPress page editor. Here you can write text, insert images and even code in HTML. We will do none of those, but instead chose the much simpler option: using Visual Composer.
First, give the page a name and then click Publish.
Visual Composer has two operating modes. Backend Editor and Frontend Editor. Backend Editor allows you to edit the website without viewing the result in real time. In which case, you have to click Preview in order to see how the design looks. The Frontend Editor allows you to edit the page and view the changes as you make them. This is very useful but also slower than the backend editor.
Click on the Frontend Editor. Depending on the speed of the server and also on the amount of content the page has, Visual Composer Frontend Editor can take some time to load. Yet, it can sometimes get stuck along the way, if you feel like this has happened, reload the page, no harm will come.
Visual Composer offers a couple of pre-defined templates which you can place by clicking on the Add Template orange button. They offer an arrangement of elements you can customize, but most of the time it’s better to place them manually according to your needs. We aren’t going to use them, as they do not fit our purpose. But it’s good to know you have them there.
Click on Add Element.
A new window will open with lots of elements you can add. At a first glance, it looks overwhelming. Don’t worry, not all of them are usable on a daily basis. They are also categorized on the type on the elements (green square), such as Content, Social and so on. To add an element, click on it.
We are going to discuss about the most important elements that you will certainly use at some point while designing a website.
The Row Element
The basic element on which you place other elements. A lot of design customization comes from the Row element. All the other elements are placed on rows. After placing a row, you can see a new Plus Sign. By clicking on it you can add new elements on the row.
Hover the cursor over the new row. A new set of options will appear. By clicking on the arrow near the row you access the row options.
By clicking on the crayon, you can change things like borders, backgrounds, parallax images and so on. By clicking on the two columns icon (red square), you get to choose how many columns has the row, in which you can place different elements.
A new window will open (green square). Here you choose the column alignment you want (red square). Select the second option, two columns alignment. As you can see in the purple box, the row now has two pluses (+) in which you can add content.
The Text Box
The text block is the second most important element you can add. It’s a powerful text editor with HTML and CSS support and it allows you to display formatted text anywhere on page.
In the red box, you type your text. In the green box, you have your text formatting options. All the classic options are present such as bold, italic, bullets and so on.
After you have typed your text, click Save Changes to view your text on the page. In the purple box, you can see that the text was updated with my changes. From the CSS Animation drop-down menu, you can pick what animation you want your text have once the page was loaded. Note that the CSS Animation box is present on 90% of all Visual Composer elements. You can animate almost anything. In the text box, you can also add pictures, videos or galleries of pictures by clicking the Add Media button.
The Single Image
The single image is the block by which you can insert pictures into your page. One of the greatest aspects of this element is responsiveness. The image will be resided according to the user’s device.
After adding the element to the desired place, an option windows will appear. To choose the image you want to add click on the plus icon. In the Image size drop-down menu, you can choose the display size. You can either use sizes such as “low”, ”medium” and ”large”, which are the default WordPress sizes, or you can type the size you want in pixels such as 200×100. In the orange box, you have the image alignment. You can align your image left, right or center. This will align it according to the space in which you placed the image box. In our case, the right column.
After clicking on the Plus Icon to set a new image, a new window will open.
In this window, you chose the picture you want to insert (red square) and the click Set Image. You can also upload new pictures by clicking Upload Files.
Click Save Changes when you are finished.
The Map Element
With the map element, you can integrate an interactive Google Map into your page. Users can zoom in and out and move along the map to find the way from their location to yours. You will need an embed code.
To get an embed code, go to the location you want on Google Maps then click on the Menu.
From the menu pick Share or embed map.
From the new dialog, click on Embed map and copy the embed code.
Place a new map element into the page. Paste the embed code and click Save changes. You can also choose custom height in pixels for your map. The width will be as large as the row or column it is place upon.
The Video Element
With the Video Player element, you can add videos from YouTube and Vimeo and make them playable within your page.
Paste the link to the video into the box. You can customize settings such as width, aspect ratio and alignment. Press Save changes when you are done.
The Custom Heading Element
One of the greatest elements Visual Composer has to offer. It allows you to use choose from the huge collection of Google Fonts and use it for your text.
The usage is pretty simple, you type the text (red square), type the font size (green square) and choose the Text Alignment. You can also make it a link by setting an URL.
Scrolling down will reveal more options such as Text color, CSS animation and Font Family. As a nice addition, you can preview the font before using it. Click Save changes when you are done.
The Button Element
Buttons are important when making a website. They help by adding interactivity and along with other elements create a nice design. Visual Composer offers an easy way to create buttons.
First you type the text that will be on the button (orange square), then you insert the URL. You can choose from a lot of option such Shape, Color, Size and Style. Click Save changes to save your new button.
The Empty Space
The last element we are going to talk about is the Empty Space. It’s a very simple element with the sole purpose of adding an empty space between elements. You never know when you are going to need to space two elements by a couple of pixels.
The usage is just as simple as its purpose. You type the Height in pixels and the you click Save Changes.
Those are the basic elements of Visual Composer. As simple as they look, together they can form a mighty website and earn you a lot of returning visitors because of the appeal.