WPBakery Page Builder

WPBakery Page Builder

WPBakery Page Builder

WPBakery Page Builder

Basics

Moon Shop 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. 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: http://kb.wpbakery.com/index.php?title=Visual_Composer.
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.

WYSIWYG editor changes to Visual Composer canvas. You can work with it as you do with regular Visual Composer.

It is easy to edit columns and rows: just click the “pen” icon on corresponding row or column:

After clicking Add element button and applying ”Moon” filter, you’ll notice a vast set of interface elements (shortcodes) developed exclusively for Moon Shop Theme. Their interface is built 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!

Change the gap between columns

In order to control gaps between columns navigate to row parameter window and change column gap option – the gap will be introduced between all columns within this row. The default value of gap is set to 0.

Important: In the case of mobile stacking gap will be introduced between stacked columns as well.

Set columns to the equal height

In order to set columns within the row to be the equal height, you must navigate to row parameter window and check Equal height option to be active. All columns within this row will have equal height and align to the longest column.

Reduce vertical space between rows

Starting from version 4.1 you can use built-in Design Options to control margins, borders, and paddings of rows, columns, images, and text.

Add Full Height Row and Video Background

See how you can easily convert any Visual Composer row into full height row.

Starting from version 4.6 it is possible to YouTube video to background of Visual Composer row by simply copying link into row video background parameter. It is allowed to apply parallax effect to rows which has video background.

Element Design Options

Starting from version 4.1.0 Visual Composer offers additional design controls for Row, Columns, Text block, Single image and Video block which can be found under element param window ‘Design Options’ tab.

Within Design Options it is possible to control:

  • Margins, Paddings and Border for overall element or just left, right, top or bottom part
  • Border style
  • Border color
  • Border radius
  • Background color
  • Background image and position style

Have any recommendation to improve the documentation?

Submit your Feedback

Submit your feedback