Using a Visual Content Composer

Visual Content Composer is a tool, customly created by CMSMasters team  to help you easily create unique page layouts. It works as a WYSIWYG (What You See Is What You Get) builder, letting you:

  • create content parts using ready shortcodes

  • easily re-size these pieces of content, set custom width

  • move content parts with drag'n'drop feature

  • set animation for content (not in all themes)


Visual Content Composer is located in the editing section of every Page, Post, Project or a Testimonial. Here is what it looks like in your admin panel:

content-comoser

In Visual Content composer all the shortcodes you use are inserted in wrapping columns, that can be subsequently re-sized in their widths. The wrapping columns can be added before you add the actual shortcodes, they are also added automatically each time you click to choose a shortcode to add.

Wrapping columns:

composer-2

The shortcode collection is located in a row below:

composer-8


To add a shortcode to your page you need to click on it in the shortcodes:

composer-9


After the shortcode is added you can click on the editing button to add content to it:

composer-10


 

Shortcode width

You can also change the shortcode width by clicking +/- buttons. Shortcodes can be of the following widths: 1/6, 1/5, 1/4, 1/3, 2/5, 1/2, 3/5, 2/3, 3/4, 4/5, 5/5, 1/1.

composer-11


 

Duplicate your shortcodes

You can also duplicate any of the shortcode blocks in one click. The is a useful feature when you need to have several blocks with either identical content of settings. You can also use this feature when several part of your content are pretty mush the same, but still need to have some differences. After you have duplicated your shortcode you can afterwards edit content inside of it to change it completely or partially:

composer-12

You can as well duplicate a whole shortcodes block that can have more than one shortcodes inside:

composer-13

 See the result:

composer-14

Drag'n'Drop feature:

You can drag and drop your shortcodes to change the way they are arranged:

composer-15

You can also drag'n'drop whole shortdode blocks, as well as move certain shortcodes from one block to another.

composer-16

Animation for shortcodes

In some themes, like Leskanor Wordpress, there is also an option of adding animation to a shortcode block, it will appear when scrolling through the page.

composer-17