Solutions to Potential Setup Issues: Visual Composer

This article was last updated on the January 2, 2017.

It is of critical importance to us that X maintains the highest standards in theme development. We are continually building upon our platform to not only bring you new features, but architectural solidarity. While we have done everything we can to ensure that your setup and usage of X goes as smoothly as possible, occasionally errors do arise. Oftentimes, these issues occur simply due to a server configuration or rogue plugin interfering with X. We have put this section together in an attempt to help you better troubleshoot these potential problems should they occur.

Not Displaying All Shortcodes

Sometimes Visual Composer will not display all of the shortcodes available to you by default. To solve this problem, go to Settings > Visual Composer in the WordPress admin panel. Once you are there, select Administrator under User groups access rules, then click the Select All link at the bottom to enable all shortcodes for administrators. Finally, select the Save Changes button at the bottom of the screen to ensure that your changes are kept.

Can’t Close Windows or Some Controls Become Unresponsive

This situation is typically related to the Visual Editor being disabled for your user profile. To remedy this, go to Users > Your Profile in the WordPress admin area and look for the Visual Editor setting, which should appear near the top of your profile. To the right of this setting is a checkbox labeled Disable the visual editor when writing. Make sure that the checkbox is unchecked. Visual Composer requires the Visual Editor to be active and without it you may have issues saving element settings.

Encountering Page Layout Error Message

At times you may find that you come across an error message when attempting to layout your page. This error will display when switching to the Backend Editor from Classic Mode with the Visual Composer plugin. This error message reads like so:

Your page layout was created with previous Visual Composer version. Before converting your layout to the new version, make sure to read this page.

Convert to new version

In newer versions of X, this message will appear like so:

The layout you are trying to use on this page does not conform to Visual Composer’s layout guidelines. For more information on this situation and how to avoid this error going forward, please see our Knowledge Base article in the X Member Area.

This message occurs due to the fact that Visual Composer is particularly finicky about how shortcodes must be structured on the page in order for the plugin to work correctly. For example, when you add a Row to your page using Visual Composer, it actually outputs the following code in your Classic Mode editor:

[vc_row][vc_column width="1/1"][/vc_column][/vc_row]

As you can see, adding a Row means that all of your content is placed within at least the [vc_row] and [vc_column] shortcode. This is not readily apparent as using the Backend Editor does not show this since it covers up the Classic Mode editor, but this is how things work behind the scenes.

The warning you’re seeing (as listed above) displays if you have tried to start editing a page in Classic Mode and then switched to Backend Editor, or if you have started editing a page in Backend Editor then switched to Classic Mode to make some changes and then switched back. Essentially, if you make edits to the output of Visual Composer in Classic Mode, it is very likely that you will not implement your changes appropriately with how Visual Composer requires things to be structured. It is for this reason that we always tell our users if you start using the Backend Editor that you must keep using that and cannot switch back and forth between the Backend Editor and Classic Mode due to the nuances of the plugin.

Likewise, if you start out in Classic Mode, you cannot just switch to the Backend Editor all of the sudden without experiencing this issue. One of the biggest problems with this is the fact that Visual Composer’s API does not provide us with any way of changing out their [vc_row] and [vc_column] shortcodes to the X theme equivalent (i.e. [content_band] and [column] respectively). This is why we provide “Visual Composer Compatible Page Layouts” in the Demo Content section. They are the exact same page layouts as the non-Visual Composer compatible ones, but they use [vc_row] and [vc_column] instead, and also restructure some other shortcodes as necessary as you cannot edit things as freely with the Backend Editor as you can in Classic Mode.

Unfortunately, selecting the Convert to new version button in this message does not really fix anything, and can ultimately make your layout have bigger problems. Our recommendation is that if you have started in one “mode,” to always stick with that mode unless you are starting completely from scratch (i.e. deleting all page content).