WordPress is a widely used CMS around the world due to its simple interface, highly customizable themes, and endless variety of plugins powerful. It has simplified the creation, development and management of websites, even for the most amateur users.

Today, and thanks to WordPress, you no longer need to have specific knowledge to create attractive web pages. However, you are peut being already stumbled upon a website that offers a truly incredible design, and you've probably wondered: How did he do that?

Unfortunately, if you are an amateur or beginner, you can not do much, even with WordPress, since to modify your theme, you need a certain degree of expertise in HTML, CSS, PHP and several other skills depending on the nature of your theme, but also your project or objective.

However, even if you are an experienced coder, you certainly need a tool that allows you to save time and quality on the end result.

Heureusement, le Plugin WordPress « Page Builder Pagers Formerly known as " Visual Composer » provides a solution to this problem. With the latter, even most beginner bloggers can create pages with a completely unique look for their website.

With this plugin you can create:

  • Attractive landing pages (landing page)
  • From sales pages to professional look
  • "Showcase" sites for your business
  • Module pages for your training
  • short while

It is in my opinion the best formatting (or layout) tool on the internet. Especially for WordPress users.

In this tutorial therefore, I will show you how to give a unique look to your website (Or blog) with the Plugin Visual Composer.

So…

How to install and configure WPBakery Page Builder plugin

Page Builder Pagers is a Plugin premium that you can buy on Codecanyon : The best platform for selling plugins on the internet.

OKAY. Once you have purchased and downloaded this layout plugin on WordPress, all you have to do is install it and activate it.

Then we will begin by making some basic adjustments. To do this, navigate to the location "Settings >> Visual Composer » On your dashboard.

General Settings

general settings visual composerThe first tab (general settings), Allows you to change:

  • The content on which visual compose will be available. You can check the items (post) and / or pages (page)
  • The different rules ofaccès different roles. With this option you can determine that changes what. The different roles available will be displayed. You will have to click on each one to check the elements to which it (the role) will have access. You have the option to prohibit the use of " visual composer ”to users of a specific role.
    activate the editor on WPbakery page builder
  • Enable or disable items responsive
  • Define subsets for Google fonts

selection of wpbakery rolesDesign Options

On the design options, you have the possibility to modify the default visual appearance of the various elements of the " visual composer ». Before using it, make sure you have checked the option « Use custom design options ».

css settings

These options will allow you to define the color that applies to all the elements. 

  • The " Custom CSS »Gives you the opportunity to further customize each element, only developers can know what it is.
  • The tab « Product Licensing »Allows you to activate your Plugin to receive automatic updates.
  • The tab « shortcodes workers Is essentially about developers.

Okay, now we're going to create a custom web page with Visual Composer.

How to create a custom page with visual composer

To easily create personalized web pages, you have the choice between the editor of the " back-office ", That is to say that you modify the site from your WordPress dashboard, where that of" front office ».

editor-the-front-end-of-editor-backend

If you are using Gutenberg, you will notice a "Page Editor" button on the top task bar.

editor visual composer dashboard editor gutenberg

The advantage with the editor of Front office is that you can edit live your pages and see how the different elements appear on your theme.

With the back office editor

To access the editor of the " back-office », I invite you to click on« Publisher BACK-OFFICE ». You can return to the WordPress visual editor at any time by clicking on " Fashion ". But I think it will not be necessary, so this plugin webpage formatting is complete.

Once in the Back-office editor, you can choose a global layout that will apply to the page.

The updates page vary depending on what you plan to do with the page. So you can choose « landing page " to create a home page, "List of services" for a page that shows services, and so on. With experience you will even be able to create bets en pages custom designed very pro.

Whatever the choice of your setting page, the presentation of the elements is similar on all the latter. You can add a new élément clicking on "+" at the very top of the arches box « visual Editor », Or add a model by clicking on the icon "Model".

On each line, you can (from left to right) :

  • Move the line
  • Manage columns in the row
  • Add a new column

wpbakery page builder interfaceOther options are available to the right of the box. These options allow you to (from left to right) Of:

  • reduce the line
  • edit a row
  • duplicate a row
  • delete a row

wpbackery layoutIn the middle of each column, you can add an item before, edit a column, or delete it.

wpbackery section optionswpbackery section options

Recommended Resources

Here are some extensions visual composer that we highly recommend:

1 - How to manage the columns

On the column management tab, you can choose the number of columns you want to add to the row. To understand the different column models, know that each fraction corresponds to the width that the column will occupy. As much as a template has fractions, so many times the page will have columns.

Of course, 11 different column templates are available, but you can create as many as you want by clicking on the link "Personalized" just below the list of columns.

For example, to display a section of the page with 2 columns at equal widths, you must choose (Or add) "1 / 2 + 1 / 2". 

The columns will be displayed on your blog and their widths will be distributed proportionally to the dimensions of the theme. A column can contain as many items as possible, so you don't have any limits on this level.

layout wpbakery section

The different elements can be moved to any columns.

moving wordpress text box wpbakeryBy hovering over each element, you will be able to access its options, in particular the button which allows to:

  • move element
  • change element
  • duplicate element
  • Supprimer element

options-the-elements

2 - How to add elements

You have the option to customize each column with the elements proposed by " Visual Compose ». To add an item, click on the button "+" on a specific column or on the button "+" From the main menu of the plugin.

add a wpbakery element
When a column is empty (ne contains no content)she has a button "+" inside.
 To add a video for example, click on this button and choose the video element.

add a video

Clicking on it will open a new window. On this window, you must provide the title, the link to the video and an additional class (which is not obligatory). When you have finished entering the various information about your video, don't forget to save your changes.

wpbakery video tuningYour video will be available on the back office editor. Save your changes once more. You can now view it by simply clicking " preview ".

add video wpbakery wordpressThe process for adding an item is the same for all others, with a few exceptions. The information to be completed may vary depending on the elements. 

By selecting the text element for example, you will find a classic visual editor (the one available when writing articles or pages), but also an option that allows you to add an animation during the display of the element. The latter may therefore fade from one position to another, depending on your settings.

text block settingsThe most interesting with this Plugin, is that you will be able to create sidebars if your theme does not, for example. To do this, click on the add button (" + "), and choose the element " WP Comments Recent "," Facebook like " and finally " Wp Categories ».

Now create this custom column template 1 / 3 + 2 / 3 »Or any other and add the element sidebar on the left column or on the right one. It doesn't matter because it all depends on how wide you want to give your sidebar created under this layout extension than in Visual Composer.

wpbakery columns configuration

You will notice a new empty column on the right, add a new element of your choice (I recommend you add a simple text). Now save the page and go to the preview to see the result of this exercise.

3 - How to save and reuse a page template

It is possible to save the template of your page and use it later. I love this option because it saves you spending hours trying to copy a template from a page. Here everything is done with one click. Yes you heard right, IN ONE CLICK… or in two 🙂

To save a template, click on the templates icon. On the window that will appear, enter the name of your model in the " Save the current layout as a template », Then click on« Save template ».

Important: You must do this on the page you want to save as a template and not on a blank page.

register a model wpbakery

It is in the same way that you will find the different models that you saved, further down on the same window in the section "Load a model".

my models wpbakeryAll you have to do in this case is create a new page, then, go to templates and choose the one you want to give your page.

With the front-office editor

The front office editor has the advantage de allow you to edit your page in real time. In other words, it lets you see what every change you make to your site will look like using Visual Composer. The advantage with this approach is that you don't have to work blindly like you do with the back-office page editor.

You can switch from one option to another at any time (Back office or front office).

The front-office editor is not that different from the back-office editor, in that there is a bar user identical, but also all the options of the back office editor are the same as on the front office editor.

wpbakery toolbarHowever, five new buttons have been added, these include:

  • Activation or deactivation of guides
  • The emulator, which lets you see what your blog will look like on different devices
  • The back button to the back office
  • The save changes button
  • The exit button visual composer

wpbakery optionsEach element of a page can be modified, you will be able to see the options available by hovering over each element. The button shaped "PLAY", will allow you to display more options for an element.

options-the-elements-of-the-front office

Your first steps may be difficult, but with practice you will achieve a home page Of this genre.  If you wish, before you get the Plugin, You can test it for free (login, user: demo, password: demo).

Here is what I was able to achieve in 1 minute at home. With practice, you can achieve very satisfying results. And if you need help building your WordPress website with this powerful plugin, then don't hesitate to contact the BlogPasCher teamwho will be happy to realize your projects.

I hope this tutorial entirely in French will help you take your first steps with the Plugin « Visual Composer ». If you have a problem, we (or assistance) will be happy to help you. Do not forget: a beautiful web page converts more curious customers.

Recommended extensions

Here are some extensions visual composer that we highly recommend:

Discover more plugins on Codecanyon

Share this tutorial with those who need it.