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.
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.
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.
- 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.
Buttons on the tools bar
Edit: click it to open the module panel
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.
Top/bottom spacing quick tool: Increase / Reduce the top/bottom spacing quickly(20px click once) for desktop only.
More: it is a drag handle to reorder module. (you can drag the whole area of the module itself in fact)
Show more Icons
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.
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.
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.