Skip to Main Content

Tuto Visual composer en français: How to create a Web page Pro

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

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 novice bloggers can create pages with a very unique look for their website.

With this plugin you can create:

  • Attractive landing pages (landing page)
  • Professional sales pages
  • "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, go 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.

Well, now we will 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

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

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 goal 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.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

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.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

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.

This article features 88 comments

  1. Hello,
    thank you for your very well done tutorial. I am resuming the update of a site that was created with wordpress and I have a problem. Indeed it was created a list of events, which we can reuse in the different pages (with 3 layouts) only I can not classify the events in the order of date? They appear randomly in a different order. In addition I have 5 events and only 4 are displayed?
    Could you help me?
    thank you very much in advance

  2. Hi,
    I have been using visual composer for a short time.
    I managed to integrate a video easily however there is no sound and I do not see or I have to modify this parameter ...
    Can you help me?
    Thank you in advance and very nice article.

    Marion

    1. Hello Marion,

      You must check the format of the video and also check that the sound is present on the video. Can you confirm that?

      1. Hello,
        Thank you for this quick response.
        In my media library: there is indeed the sound, that's what makes me suppose, there is surely a parameter to change on Visual composer. What do you think?
        And also on my .mp4 base file.
        Thanks in advance 🙂

  3. Hello,
    I would like to know if I install visual composer locally while I format my site, will I have to buy a new license when I migrate my site online?
    Thank you very much for this article !

  4. Hello,

    I bought a theme with Visual Composer but as I wanted to have the updates, the library… I bought Visual Composer. However, I have some concerns with the blogger “tool”.

    I would like to have a page with “colored tile / 3 colomuns with a small summary and not some kind of empty block. Is it possible to have at least 9 blocks?
    http://lune-ecarlate.com/blog/
    Bonne journée.

  5. Hi
    I am using Visual Composer with the Pro CarDealer theme.
    I can't put tags in my texts, especially in the grid. Visual composer m ”removes completely.
    Can you help me?
    Thank you

    1. Hello, you can only do this as a text editor. The goal of Visual Composer is precisely to simplify the design without using code.

  6. Hello
    I created my site and I want to create a page with a link that directs me directly to the home page of my site cited above. Is this plugins doing it?
    please

  7. Hello,
    I have a problem with the font size on Visual composer
    I set it to 50 but it has not changed when updating my web page.
    Also, when I want to center a text that does not make me

    Help
    thanks a lot

    1. Hello Delphine,

      Please share a screenshot here as visual composer is quite easy to use. Do you use the visual editor?

  8. My question is: if I buy a license for the Visual Composer plugin, can I use it on my different sites with this license? Thank you for your reply. And thank you also for the very nice VC tutorial.

    1. Yes you can, but it will be impossible to get free visual composer updates for each of your sites. You will need one license per site.

  9. Hello, a practical question… I bought a standard license some time ago, I am building a wordpress site for an association, how do I transfer the license to them when I have finished?
    Thanks for your help

    1. Hello,
      For this practical matter, I will say it depends. In fact, if you ask the plugin author the question, he will give you an answer. But under Envato's terms, the single license, or single license, allows you to create an end product that you can deliver to the customer. I guess in this case that also takes away license. But you will find some authors who oppose it (me being an author on CodeCanyon, I do not find any particular problem there). But I think for the avoidance of doubt you should contact the authors or the Envato team.

  10. Hello, I use the visual composer grid to highlight my articles on the home page. I would like to change the size of the image that highlights the article.

    Can you help me please?

    1. Hello, can you give more details on what you want to do? Because changing the size of the image can be done either with CSS or by actually modifying the image.

  11. Hello,

    Thank you and congratulations for this very useful tutorial. It should be said that this plugin is complete and offers a lot of possibilities.
    However, there is something that bothers me and I absolutely cannot find a way to do it. Maybe you have the answer. Is it possible to change the size and font of the texts?
    I thank you in advance.

    1. Hi,

      It all depends on the WordPress theme you use with Visual Composer. Otherwise, in the options of the chosen rows, there is the management of the margins between the columns.

      1. Hello,
        Thank you for your answer, it's BeTheme.
        In fact the error is only on the articles. I was able to settle three articles by transforming them into a page.
        But after I still have 70 articles.
        This seems very complicated to me.
        Best regards.

      2. Hello,
        Thank you for your reply,
        I just had a response from the creator of the theme, not understanding English, could you help me?
        We mean you need to remove theme files via FTP and upload the newest one again. But like we said, please don't do any changes in files because so far you did some and this is the reason why it does not work as should. Or just contact with your web developer if you do not understand what we mean.

        It seems that it is necessary to remove, the files of the theme and to put them back, by means of filezilia, or other?
        Thank you for your help.
        Didier Balse

        1. yes you have to go to the theme folder via filezilla and remove it completely, then put the new folder instead. And this without modifying any file.

          1. Hello Thierry,
            thank you very much for your advice, I tried to do as they said and the problem remains, it comes from the theme, I remain in contact with them.
            Thanks again.
            Didier

  12. Hello,

    I'm having a big problem with Visual Composer since 3 weeks ago.
    I made all the necessary updates with the extension as well as with my theme but as soon as I activate it my site stalls and ends up crashing.
    I don't know what to do at all, would the latest WordPress update be incompatible with the Visual Composer plugin?
    Could you help me please? I thank you in advance.

    1. Hello BEA

      Visual composer works well with the latest version of WordPress. Could you disable enable a default wordpress theme to see if it also crashes with it? If so, also deactivate all other plugins to see if the problem persists, if everything works fine, then activate your plugins one by one to find the one which conflicts with visual composer.

      Thierry

      1. Thanks for your answer, when I try with another theme everything works.
        I reactivated my theme, deactivate all the extensions Visual Composer jump and it lags a lot before arriving on my home page then total crash.
        Do you think the problem comes from my theme?
        In addition, the support option for my theme has expired, so I can't even create a ticket to find out where the problem comes from.

        1. Good evening BEA

          Yes you have to change the theme in my opinion. And if you don't have the skills to find, install and configure a premium theme, I invite you to contact our (paid) support who will do the job for you in less time and with much more expertise.

          1. Yes that's what I'm going to do ...
            When I think of the work done on it grrrrr….
            I'll do that for terms and conditions, thank you.

  13. Hello,

    I had Visual Composer with the purchased theme and I encountered a problem, with this plugin there is Contact Version (currently I use version 1 but whatever) it offers me "Address, phone and email" I would like that it appears in French, but from the WordPress editor I cannot find any code as well as in the FTP, is it possible to modify these lines of VC or am I looking for nothing?

    Great article.

    cordialement,

    Camille

    1. Hello,

      I invite you to search the .po language files to translate your visual format into French. This should correct the problem.

  14. Hello,
    thank you for this great tutorial,
    I would need your help.
    I use visual composer a lot,
    but I can't put a frame around my texts.
    For so I'm fine in style option and I put a colored border, and I save nothing happens.
    could you help me ?
    thank you in advance.
    Didier BALSE

    1. Hello,

      Try to verify that you have the latest version of Visual Composer, then, consider disabling all plugins except the latter. Then try.

    2. Hello,
      What version of visual composer do you use?
      What WordPress theme do you use?
      Did you verify that a CSS rule does not overwrite the ones you defined?
      did you verify that the problem is similar on other browsers?

      Try to answer these questions and I will bring you more precision.

      Best regards.

      1. Hi,
        Thanks for your reply, in fact I found it.
        I had to, in option style, enter values ​​in marging, border, padding.
        A simple value of 1px this allows to have the border all around, fine.
        Thanks again for responding.
        cordially
        DB

  15. Hi
    I would like to put an accordion but it is in closed position but I always have the first one which remains open… Can you help me? Thank you

  16. Hello,

    I cannot integrate a slider thanks to visual composer, I am not offered a slider button in my composer,

    Thanks in advance for your help and sorry I'm a novice,

    Margot

    1. Hi,

      Are you using a plugin such as slider Revolution slider and Layer Slider? If so, then create a slideshow and simply add the shortcode generated to a text module of your visual dial.

      Thierry

    1. Hello Gerard,

      It all depends on the theme you are using and are integrated with Visual Composer to create pages on WordPress.

      Your theme should normally offer this option in the WordPress editor.

  17. Hello,

    Sorry but our knowledge and content of our blog are limited to WordPress tools.

    cordialement,
    Thierry

  18. Hello,

    The page does not start from the high, the module created is lower.

    I have a white part with 2x the page title.
    How should we cover this part?

    Thank you in advance.

    Toni

      1. Hello,

        I thought we could start from a blank page.
        Start at the top with a slide and then go down by adding the modules as you go.

        I do not know on what basis (topic) I did the test.

        Thank you very much for the information.
        Enough to choose a good foundation to his liking and editing.

        Thank you for help again !!

        good week-end

  19. Hello,
    super visual composer, but the problem seems that it does not work with Ipad, unable to open PDF files of several pages?
    Is this normal.
    Thank you for your help.
    DB

  20. Hello,
    There is still a problem; It seems that visual composer is struggling with accordions and pages in pdf on an Ipad.
    Try to view (on an Ipad) the following page:http://micro-diffusion.com/site9/articles, then open the accordion and open the pdf: "Understand at all costs, make sense"
    Can we change this?
    Thank you for your help.
    Bonne journée.
    DB

      1. Hi,
        it seems that this is a different problem in view of the response of the editor of the Be theme.

        The stuff you used for popup, is just incompatible with iPad`s unfortunately.

        I confess I do not understand too much response.
        I do not know you?

        Thank you for your help.
        DB

  21. Hello,
    great tutorial,
    I created a page with 3 columns and I would like to reduce the space between the three columns is this possible and how?
    Thank you for your help.
    DB

    1. Hello,

      Just reduce the "left" "right" margins in the options for each row and you will be fine. Tell me if it worked.

      1. Hi,
        Great work. !
        I just figured out what these options are for.
        On the other hand, I was told that it was a heresy to use the rangers and that it was better to use tables, tablepress style less greedy in code.
        Personally I find simpler and more aesthetic visual dial.

  22. Very good tuto!

    I recently resorted to visual composer, I am a web designer but however for a first use it requires a little experimenting with the different components in order to see the look that it gives…

    another tutorial will really be a plus, in order to comment on each element with a demo next to the explanation ...

  23. Thank you for this excellent tutorial ...

    A simple question, when we buy this plug-in, can we use it for all the sites we make?

    Thank you for your reply.

      1. Hello,

        Your answer is precise, but on the envato site, where can you buy the plugin, the two licenses say that you have to buy one license per product? the google translation says: "Use, by you or a customer, in a single end product for which end users are not charged"

        What I understand is that if I make several different sites with wordpress, I have to buy a license per site that I produce, can you enlighten me? Well done for your tutorial.

        1. Hello, I will try to give you an opinion. Being an author on envato, I often have to answer this question. The single license entitles you to create a single final product (website that was made using the envato product) that product can only be sold once to one customer. The extended license allows you to create multiple derivatives of a product (multiple websites using revolution slider for example) and can be sold to more than one customer.

  24. Hello everyone!
    Here I would like to add a "Print Recipe" button to a recipe page such as this: http://deschenesetdeschiens.com/boulettes-vege-au-quinoa. Put a button, no problem. The javascript code, no problem. But what code to add to the button with Visual Composer (in the backend if possible) so that the recipe prints well? I'm a bit of a novice and my blog is under construction. But I don't want a single line of text. Thanks for helping me!

    1. Hello,

      Unfortunately Suzanne, our free help is limited to our tutorial, we cannot provide support for Visual Composer. Please contact our technical team if you require further assistance.

      https://blogpascher.com

      cordialement,
      Thierry

  25. Hello, I bought a theme with visual composer included. How to reference the pages created with this plugin?
    The other pages are processed with SEO by Yoast.

    Merci de votre réponse

    1. Hello,

      Sorry but we do not support visual composer on this blog. Please contact our technical department through our home page and submit your concern.

      cordialement,
      Thierry

  26. Hello !! Really great your article I really like !!
    But then with me, it does not correspond in the first picture. My VC settings are in a tab just above, until nothing alarming. Good .. there begins the problem: I only have access in these parameters to "general settings" + "shortcode". Great nothing else .. No design option + CCS + license. I bought the plugin I specify .. And there are only two parameters ..
    In short, I go to create a page and there bah I only have access to the backend editor and I don't have the front icon next to it .. Since October I composed my site with the backend but there I wanted to discover the benefits of the front once and for all! Can you help me Thierry? I implore you ..

    cordialement,

    Tommy

    1. Hello Tommy,

      While traveling, I could not answer your concern. Could you send me screenshots of your dashboard?

    2. It is quite curious all that. I think you really need help.

      In principle the option of the backend and the front end are independent of the compatibility with vc.

      So by installing the plugin the latter automatically added the two editing modes.
      with catches will help us to advise you what to do.

  27. Hello,
    Thanks for this tutorial
    I bought this plugin to create sales pages, the only concern I have left to resolve is that I want to replace the banner with the menus of my current pages (Template Sahifa) with personalized banners for each sales page that I would like to create.
    To date I have not found a solution
    How to do?
    Thank you
    cordially
    Michel

    1. Hello Michel,

      Sorry, but this tutorial is about Visual Composer and unfortunately we cannot provide support for your theme. Please contact the team that designed your theme.

      Thierry

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
40 shares
Share36
tweet1
Save3