The7 comes with Visual Layout Builder. This software allows you to forget about shortcodes and create most complex layouts within minutes without writing a single line of code!

Our Visual Layout Builder is based on widely popular Visual Composer by mixey. It has very simple and intuitive interface, but before getting started with building layouts, you may find it useful to get accustomed with Visual Composer documentation:

By default, Builder is enabled for all post types except Slideshows and Logos. These settings can be overwritten via “WP-admin > Settings > Visual Composer”.

To  start creating new layout click “BACKEND EDITOR” button (see fig. 1) on the top left of WYSIWYG (text editor). You can also edit layouts in front-end using the “FRONTEND EDITOR”. But please note that front-end editing tool is still just a bit sloppy (though it improves constantly) and we still recommend using back-end editor over it.

Fig. 1. Enable Visual Composer.

Fig. 1. Enable Visual Composer.

WYSIWYG editor changes to Visual Composer canvas (see fig. 2). You can work with it as you do with regular Visual Composer.

Fig. 2. Visual Composer canvas.

Fig. 2. Visual Composer canvas.

It is easy to edit columns and rows: just click the “pen” icon on corresponding row or column (see fig. 3 for details):

Fig. 1. Edit row/column button.

Fig. 3. Edit row/column button.

After clicking Add element button and applying “by Dream-Theme” filter, you’ll notice vast set of interface elements (shortcodes) developed exclusively for The7 Theme (fig. 4). Their interface is build on same principles as standard Visual Composer shortcodes. Therefore if you’re already familiar with Visual Composer, working with our shortcodes will be a breeze for you!

Fig. 3. VC elements by Dream-Theme.

Fig. 4. VC elements by Dream-Theme.

You can use the CSS button on the right to insert custom css rules to a page/post; those rules will only apply to that specific page/post.

Note that you can use the search filed and filter to easily find required elements.