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 600.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 in the world because of its simple interface, its highly customizable themes and an endless variety of plugins powerful. It has simplified the creation, development and management of websites, even for the most amateur users.

Today, thanks to WordPress, you no longer need to have specific knowledge to create attractive web pages. However, you are peut be 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 WordPressBecause 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 goal.

However, even if you are an experienced coder, you definitely need a tool that will save you 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 company
  • Module pages for your training
  • short while

This is in my opinion the best formatting tools (or layout) 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.

OK. Once you've bought and downloaded this WordPress layout plugin, all you have to do is install 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

The 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 ofaccess 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 possibility to forbid the use of " visual compose "to users of a specific role.
  • Enable or disable items responsive
  • Define subsets for Google fonts

Design Options

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

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

  • The tabs 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 assets Is essentially about developers.

Well, now we will create a custom web page with Visual Composer.

How to create a custom page with visual compose

To easily create custom web pages, you have the choice between the editor of " back-office That is, you are editing the site from your WordPress dashboard, where the front office ».

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

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

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]

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

With the back office publisher

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

Once on 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 manage to create bets en pages personalized with very professional design.

Whatever the choice of your setting page, the presentation of the elements is similar on all the latter. You can add a new element clicking on "+" at the very top of the goal box « visual Editor , Or add a template 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

Other 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

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

Recommended Resources

Here are some extensions visual composer that we highly recommend:

1 - How to manage columns

On the column management tab, you can choose the number of columns you want to add to the row. To understand the different models of columns, know that each fraction corresponds to the width that will occupy the column. 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 have no limit on that level.

The different elements can be moved to any columns.

By hovering over each element, you will be able to access its options, in particular the button that allows you to:

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

options-the-elements

2 - How to add items

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.


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

add a video

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]

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 mandatory). When you have finished filling in the information on your video, do not forget to save your changes.

Your video will be available on the back office publisher. Save your changes once again. You can now view it by simply clicking " preview ".

The process of adding an element is the same for all others, with a few exceptions. The information to be completed may vary according to 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 lets you add an animation while the item is displayed. The latter can be faded from one position to another, depending on your settings.

The most interesting with this Plugin, is that you will be able to create sidebars if your theme does not offer it for example. To do this, click 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 something else and add the element sidebar on the left column or on the right. It does not matter because it all depends on the width you want to give to your sidebar created under this layout extension in Visual Composer.

You will notice a new empty column on the right, add a new element of your choice (I recommend you to 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 plûtard. I love this option because it avoids spending hours trying to copy the template of a page. Here, everything is done with one click. Yes you heard right, IN 1 ONLY CLICK ... or in two 🙂

To save a template, click the templates icon. On the window that will be displayed, enter the name of your model in the field " 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.

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

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

With the publisher of the front office

The publisher of the front office has the advantage de allow you to edit your page in real time. In other words, it lets you see what each change to your site will look like with Visual Composer. The advantage with this approach is that you do not need to work blindly as is the case with the page editor of the back office.

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

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

However, five new buttons have been added, these include:

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

Each 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", you will display more options for an item.

Easily create your Online Store

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

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 could achieve in 1 minute home. With practice, one can achieve very satisfying results. And if you need help creating your WordPress website with this powerful plugin, then feel free to contact the BlogPasCher teamwho will be happy to realize your projects.

I hope this tutorial entirely in French will help you to take your first steps with the Plugin « Visual Composer ». If you have a problem, we (or assistance) we 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 tutorial very well done. I resume the update of a site that was created with wordpress and I have a problem. Indeed it was created a list of events, that can be reused in the different pages (with 3 layout) 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 Compos for a short time.
    I managed to integrate a video easily however there is no sound and I do not see where I have to change 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 the sound, it'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.
        thank you in advance

  3. Hello,
    I'd like to know if I'm installing visual composer locally to get my site up to speed, am I going to have to buy a new license when I'm going to 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 problems with the "tool" blogger.

    I would like to have a page with "colored tile / 3 colomuns with a little 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. Hello
    I'm using Visual Composer with the Pro CarDealer theme.
    I can not put tags in my texts, especially in the grid. Visual composer m "completely removes.
    Can you help me?
    Thank you

  6. Hello
    I create my site and I want to create a page with a link that directs me directly to the home page of my site listed above that this plugins does?
    merci

  7. Hello,
    I have a font size issue Visual deal
    I settled on 50 but it has not changed during updates to my web page.
    Also, when I want to center a text that does not make me

    Help
    thanks a lot

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

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

  9. Hello, a practical question ... I bought a standard license some time ago, I'm doing a wordpress site to an association, how to transfer the license to him when I finish?
    Thanks for your help

    1. Hello,
      For this practical question, I would say it depends. In fact, if you asked the author of the plugin, it will bring you an answer. But in the words of Envato, the single or simple license (single), allows you to create a final product that you can give the client. I guess in this case it also carries license. But you will find some authors who object (me being on CodeCanyon author, I do not find a particular disadvantage). But I think that for the avoidance of doubt, you should contact the authors or the team of Envato.

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

    You can help me please?

    1. Hello, can you give more details on what you like to do? For changing the image size can be done either with CSS or by actually changing 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.
    Yet there is something that bothers me and I do not find how. Maybe you have the answer. Is it possible to change the size and text typeface?
    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 is BeTheme.
        In fact the error is only on the items. I could set three articles by transforming them into page.
        But after I still have 70 articles.
        This seems very complicated to me.
        Best regards.

      2. Hello,
        Thank you for your reply,
        Exactly I just had a response of the theme creator, not understanding English, could you help me?
        We mean you need to remove theme files via FTP and upload the newest one again. Said we aim like, please do not do Any exchange in files Because You Did Some so far and this is the reason why it does not work as shoulds. Or just touch with your web developer if you Do not Understand what we mean.

        It seems that we should remove the files of the theme and put them through 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 and then put the new folder instead. And that, without changing any files.

          1. Hello Thierry,
            thank you very much for your advice, I tried to do as they said and the problem remains, although this comes the theme, I keep in touch with them.
            Thanks again.
            Didier

  12. Hello,

    I'm having a big problem with Visual Composer since 3 weeks ago.
    I do all the necessary updates with the extension as well as my theme but as soon as I activate my website oar and ended up crashing.
    I do not know at all what to do, last updated WordPress-it is incompatible with the Visual Composer extension?
    Could you help me please? I thank you in advance.

    1. Hello BEA

      Visual compose works well with the latest version of WordPress. Can you deactivate activate a default theme wordpress to see if it also plant with it? If so, also disables all other plugins to see if the problem persists, if all goes well, then your active plugins one by one to find the one that conflicts with visual dial.

      Thierry

      1. Thank you for your answer, when I try a different theme while working.
        I reactivated my theme, disable all extensions jump Visual Composer and he enormously train before arriving on my homepage and total crash.
        Do you think the problem comes from my theme?
        Besides the option support my theme has expired, so I can not even create ticket to know where the concern comes from.

        1. Good evening BEA

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

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

  13. Hello,

    I had Visual Composer with the purchased theme and I encounter a problem, with this plugin there is Contact Version (currently I use the 1 version but no matter) it offers me "Address, phone and email" I would like that it appears in French, but since the editor WordPress I find no code and in the FTP, it is possible to change these lines of VC or I look 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 need your help.
    I use many visual compose,
    but I can not put a border around my text.
    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 check that a CSS rule does not overwrite those that you have set?
      Did you verify that the problem is similar to other browsers?

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

      Best regards.

      1. Hi,
        Thank you for your reply, actually I found.
        It took me in style option, enter values ​​for margining, border, padding.
        A simple value 1px it helps to have the edge all around, fine.
        Thank you again for answering.
        cordially
        DB

  15. Hello
    I would like to put an accordion but it is in the closed position but I always the first that remains open ... Can you help me? Thank you

  16. Hello,

    I can not integrate with slider visual composer, we do not propose slider button in my composing,

    Thank you in advance for your help and sorry I am a newbie,

    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,

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

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

    Thank you in advance.

    Toni

      1. Hello,

        I thought we could start with 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 (theme) I had the test.

        Thank you a lot of information.
        Enough to choose a good foundation to his liking and editing.

        Thank you for help again !!

        good week-end

  18. Hello,
    great visual compose, but the problem looks like it does not work with the iPad, you can not open PDF files with multiple pages?
    Is this normal.
    Thank you for your help.
    DB

  19. 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 problem other given the response Be theme editor.

        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

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

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

  21. Very good tuto!

    I use these days to compose visual, I'm a web designer but however for a first ca use requires a little experiment with different component to see the air it gives ...

    another tutorial will be really a plus to comment on each item with one hand to demo the explanation ...

  22. Thank you for this excellent tutorial ...

    A simple question, when buying this plug-in, can you use it for all the sites that we produce?

    Thank you for your reply.

      1. Hello,

        Your answer is accurate, but on the site envato, where can buy the plugin, the two licenses say that have to buy a product license? the Google translation says, "Use, by you or a customer, in a single end product whose end users are not billed"

        What I understand is that if I make several different site with wordpress, I have to buy a license for site I products, can you enlighten me? Bravo for your tutorial.

        1. Hello, I'll try to give you an opinion. As author on Envato, I often have to answer this question. There simply license (single) entitles you to create a final single product (website which was made using the Envato Product) product can be sold only once to a single customer. There extended license allows you to create multiple derivatives of a product (website using several revolution slider for example) and can be sold to more than one client.

  23. Hello everyone!
    Here I would like to add a button "Print the recipe" to a recipe page like this one: http://deschenesetdeschiens.com/boulettes-vege-au-quinoa. Put a button, no problem. The javascript code, no problem. But what code to add the button with Visual Composer (backend if possible) to the recipe is good prints? I'm a little neophyte and my blog is under construction. But I do not want a single line of text. Thank you kindly help me!

    1. Hello,

      Suzanne Unfortunately, our free support is limited to our tutorial, we can not provide support for Visual Composer. Please please contact our support team if you need further assistance.

      https://blogpascher.com

      cordialement,
      Thierry

  24. 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 provide the visual media deal on this blog. Please contact our technical support via our home page and submit your concern.

      cordialement,
      Thierry

  25. Hello !! Really awesome I love your article !!
    But then at home, it does not fit in the first image. My VC settings are in a tab just above, nothing alarming. Well .. there begins the problem: I have access in these settings only "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 have access to only the publisher backend and I do not have the icon of the front side .. Since October I made my site with the backend but there I wanted to find the front boon once and for all! Can you help me Thierry? I implore you ..

    cordialement,

    Tommy

    1. Hello Tommy,

      On the road, I could not answer your concern. Could you send me screenshots of your dashboard?

    2. It is rather curious stuff. I think you really need help.

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

      So by installing the latter plugin automatically added both edit mode.
      with catches will help us to advise you what to do.

  26. 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 my current menu pages (Template Sahifa) by custom banners for each sale | 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 talks about Visual Composer and we unfortunately can not 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.

Cool WordPress Themes that I found on
And there are more 50 000 themes and models to choose from!

Back To Top
40 shares
Share36
tweet1
Save3
WhatsApp