BM Content Builder introduction

The creative BM Content Builder is a unique elements Drag & Drop LIVE mode 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.

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 10 modules: Text, Button, Grid, Masonry Grid, Single Image, Content Form, Embed, Social, Slider, 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.

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? (00:31)
  • How to set the top/bottom spacing? (00:50)
  • How to insert a template? (01:27)

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.

  • Click the left-arrow icon to exit this editor.
  • Click the disk icon to save the current content.
  • Click the plus icon to add new modules. 
  • Click “Insert Template”, you could insert some layouts. Learn more 

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.

Buttons on the tools bar

Order: To change the module order

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.

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.

Edit: click it to open the module panel

Clone: Click it to clone a new module from the current module.

Remove: remove the current module.

Add: add a new module below the current module.

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

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.

Top / Bottom Spacing

If you want to edit the top/bottom spacing for the mobile, please edit the module. Click “Spacing”, you could enter a number to set the “Top Spacing(desktop/mobile)” and “Bottom Spacing(desktop/mobile)” for this module.

Unique ID

There is a unique number ID for each module:

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.

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