BM Content Builder introduction(Video included)

The creative BM Content Builder is a unique elements Drag & Drop LIVE mode WordPress builder. You can create a unique webpage with no coding skills. You can use the builder in a Page, Portfolio or Post.

After install and activate the BM Content Builder plugin, you’ll see the BM Content Builder button in Page/Post/Portfolio editing panel:

The BM Content Builder only works well with the WordPress block editor. Please don’t activate the WordPress Classic editor by Classic editor plugin or other way.

BM Content Builder Button

Press the button to pop up the interface of BM Content Builder.

Add a new Module

If you edit a new page, you will see the 11 modules: Text, Button, Grid, Masonry Grid, Single Image, Content Form, Embed, Social, Slider, Tabs, and Group. If you are editing a single Post or Portfolio, you will see 11 modules. The Post-Navigation module is not available on a Page.  You can click an icon to add a module.

BM Content Builder interface

For a page which has created modules, click the + icon on the top bar to add a new module.

Quick video guide

Check the video tutorials how the BM Content builder works, the video includes:

  • How to use the tools bar?
  • 12 columns width system(width, move left/right)
  • How to make 2 modules to stay within one line? (01:06)
  • How to set the top/bottom spacing? (00:50)
  • How to insert a template? (02:03)

Buttons on top bar

If there are existed content on BM Content Builder, there are several buttons on the top bar: Quit, Save, Add Module, Save Layouts as Template, Insert Template.

BM Content Builder - Top buttons
  • Click the left-arrow icon to return to the WordPress default block editor.
  • Click the disk icon to save the current content.
  • Click the eye icon to preview the current layout, it will save the layout automatically .
  • Click the plus icon to add a new module. 
  • Click “Insert Template”, you could insert some layouts. Learn more 
  • Click “Save Layouts as Templates”, you could save the current layout as your own templates, you could find the the templates in the “User” tab of the opened templates selection panel.

Tools bar on each module

For the builder is a live model editor, you’ll see the change that you have edited. Move the mouse cursor over the module. The tools bar would be shown.

Module Tools bar - BM Content Builder

Buttons on the tools bar

Edit - Module Tools bar - BM Content Builder

Edit: click it to open the module panel

Width Adjust of Module- BM Content Builder

Width: To increase/reduce the width. It is a 12 columns width system. The module will be fullwidth if the width is over 12 columns. If you want the 2 or more modules to stay in the same row. Please make sure the width of all modules is less than or equal to 12 columns.

Add: add a new module below the current module.

Configure Top and Bottom spacing of Module - BM Content Builder

Top/bottom spacing quick tool: Increase / Reduce the top/bottom spacing quickly(20px click once) for desktop only.

Move module - BM Content Builder

More: it is a drag handle to reorder module. (you can drag the whole area of the module itself in fact)

Show more Icons

More - BM Content Builder

The more icons(below) will be shown if the icon is clicked:

Order: To change the module order(position)

Move to Left/Right: It will obey the rule of 12 columns width. If click the Right arrow one time, it means to move the module to right one column. If it’s width is 12 columns, click once(or more) the Right arrow, it will be moved out of the right edge of the page. Click the Left arrow to move to the left. It will not make the module to move out the left of the page.

You could make a 6-cols width module be centered by click 3 times. It will obey the rule of 12 columns width.

Clone: Click it to clone a new module from the current module.(Clone is not available on Group module for now)

Remove: remove the current module.

Move our from Group: the icon will be shown only for the modules in a Group module. The module will be moved out from the Group if the icon is clicked.

Tool icons on Group module

Group is a special component, and its tool icon is blue.

Save as template: it will save the layouts of the Group module(including the modules in the Group) as a template.

Adjust Top / Bottom Spacing in the Module editing panel

You can also edit the top/bottom spacing in a module editing panel, please edit the module(click the pencil icon on the toolbar). Click “Spacing”, you could enter a number to set the “Top Spacing(desktop/tablet/mobile)” and “Bottom Spacing(desktop/tablet/mobile)” for this module.

If you want to set different number for tablet or mobile, please un-lock it.

Unique ID

There is a unique number ID for each module:

unique number ID - BM Content Builder

The ID would be within the class name of the module, the class name format would be module-id-1572937975619

ID Name

You could enter an ID Name for a module. It can be used as an anchor. It will be shown as id="xxx" in the module HTML tag. It must be unique on the same page.

ID name - BM Content Builder

Dividing Line

Click here to check how to define dividing line.

Scroll in Animation

Click here to check how to define the animation

Was this article helpful?

Related Articles