Gutenberg Element

With Visual Composer, you can use a new WordPress editor – Gutenberg. The core idea of the Gutenberg is to replace the shortcodes with the modules that can be used anywhere on your site. Additional modules created for the Gutenberg will significantly expand your design capabilities.

Gutenberg element in Visual Composer Hub

This is why Visual Composer is now fully compatible with the Gutenberg editor. This means that you will have several options available:

  1. Use Gutenberg editor within your Visual Composer layout;
  2. Add Visual Composer templates in your Gutenberg layout;
  3. Disable/Enable Gutenberg editor (in case you wish to stick to the WordPress Classic editor.)

Note: In order to access Gutenberg editor, you will need to have Gutenberg editor installed on your WordPress site.

How to use Gutenberg in Visual Composer

For the Premium users of the Visual Composer Website Builder, we offer an element ‘Gutenberg’ which can be downloaded from the Hub. Once downloaded, it can be inserted anywhere in your Visual Composer layout.

Important: With Visual Composer, you can insert an unlimited number of Gutenberg editor blocks within the same layout.

To use Gutenberg within Visual Composer:

  1. In Visual Composer open the Hub and locate Gutenberg element;
  2. Download Gutenberg element to add it to your elements’ list;
  3. Make sure that separate plugin ‘Gutenberg’ is installed on your WordPress site;
  4. Add Gutenberg element anywhere on your layout
  5. In the editor, form click the button ‘Open Gutenberg’;
  6. Create your layout or part of the layout with the Gutenberg;
  7. Close the Gutenberg editor;
  8. Save changes to your page.

How to add Visual Composer template in Gutenberg

You can insert any template created with Visual Composer in your Gutenberg layout.

To add the template:

  1. Download Gutenberg template block from the Visual Composer Hub;
  2. In your Gutenberg layout, select to add new block;
  3. Find Visual Composer Template;
  4. Specify the template from the drop-down list;

How to disable Gutenberg

We understand that not all people are excited about Gutenberg. Especially if you already have your content made up. So, this is obvious that you may want to disable the Gutenberg editor.

The good news is that option to disable Gutenberg is right here:

  1. Open your WordPress Admin Dashboard;
  2. Navigate to Visual Composer – Settings;
  3. Locate the Gutenberg settings and select disable (Off);
  4. Save changes.