What Is Visual Composer

Last Updated on

Visual Composer is a visual shortcode generator that you can build your layout painlessly without wasting your time with writing shortcodes. We have done some modifications on this plugin and made it compatible for our shortcodes. For more detailed information about this plugin please click here.

There’s one concept/design pattern you should know. In the Visual Composer editor mode you’ll have “Add element” (with + sign) button, which you should click or drag to the working canvas, to add content block or row to your page. Clicking the “Add element” button will show the content element selection menu. Content blocks are divided into categories so you can filter. Alternatively you can type the shortcode name to filter down the items instead of search them visually.

Installation of this plugin is mandatory both for Jupiter and The Ken. To install this plugin you need to go to WordPress Admin Menu > Appearance > Install Plugins. From the same menu item you also can activate this plugin.

x
Note: If you do not see the WordPress Admin Menu > Appearance > Install Plugins menu item, it shows that you already have installed the latest Visual Composer plugin compatible with the current version of the theme installed.

Main Buttons

  1. The button to switch between classic and visual mode. You can still modify generated shortcodes manually, if you know what you are doing.
  2. Add Elements, using this button you can drop all shortcodes available in Jupiter. You can drag this button and drop to a page section, row or a column.
  3. Page Section is a shortcode which acts as feature rich container, which has a huge amount of options such as backgrounds, parallax effects, background videos and many more. You can click edit to explore its options.
  4. Templates: You can save a page using this section and use it in other page. Its handy when you built blocks and columns that you might need them later in other pages.

Visual Composer Button

Elements Blocks

Here is a screenshot of some shortcodes that you can use to add into the canvas and configure.

Add Element Popup

Page Section

Page Sections are standalone shortcodes that play a full-width container role. It has huge optionality so you can add your own shortcodes. You can enable parallax backgrounds, videos, and much more using this huge shortcode.

Page Section can be used to divide your page into logic blocks with columns, columns which later will hold your content blocks. Page Sections can be divided into the layouts (eg. 1/2 + 1/2, 1/3 + 1/3 + 1/3, and so on). Your page can have an unlimited number of Page Sections. To change a Page Section’s position, click and drag its drag handler (on the top left corner) and drag it around (vertical axis). Now you can add shortcodes such as slideshows, Portfolios or divide a page with Page Divider…

x
Beware! Please be aware that Visual Composer does not support 1/5 columns on new versions, due to some conflicts which result from this setting.

Page Section Edit Options:

  1. Delete button to delete the Page Section and all elements inside it.
  2. Clone Button to duplicate the Page Section and all its columns and elements.
  3. Edit button to configure different options of Page Section.
  4. Dragger button to move vertical wise.
  5. Layout section to divide the Page Section into different column width combinations.
  6. Column Edit button inside this row.
  7. Plus button will bring up all elements pop up in order for you to choose which element to drop into this column.

Page Section

Columns

Columns are part of the Page Section and they hold your content elements inside them. Columns can be reordered. Click and drag the column around (horizontal axis). That way you can group elements in logical groups and then drag them around with your mouse (to reposition).

Columns

Content Elements (Shortcodes)

Content Elements or shortcodes can be added inside a Page Section or inside columns. Think of them as bricks with which you are building your layout. Most of the content elements have options, to set them click on the pencil icon. To save changes, click the Save button.

  1. Delete Button to delete the shortcode.
  2. Clone button.
  3. Edit button to view all options of this shortcode.
  4. Shortcode Name.

Content Elements

Visual Composer Settings

You can control Visual Composer global settings such as disable/enable in a post type and user roles that can use a shortcode. You can find these settings from Settings -> Visual Composer. In New versions a Menu called Visual Composer is available in the root of Dashboard menu for this.
Here is a brief explanation of options presented in this page:

Content Types:

This option allows you to choose which post type should have the Visual Composer feature. Please note that only post types will have this feature which have a WP editor feature. So for example, some clients will not have Visual Composer, even if you check mark its post type.

User Groups Access Rules:

This option will give you the ability to select which shortcode should be appeared in the specific user role. This is useful when you give subscribers the ability to post, so you can disable some shortcodes for them.

Visual Composer Settings

Disable Responsive Content Elements:

Check this checkbox to prevent content elements from “stacking” one on top of each other (on small media screens, eg. mobile devices).

Disable Responsiveness

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket