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.
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
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.