Skip to main content

Custom module guide

Creating custom modules for Beaver Builder can open up a world of possibilities for you and your clients. You can extend and modify our existing modules to fit a specific use case, or create brand new modules.

To get started, you can download our example plugin below and explore the code or read through the step-by-step guide provided here. Each chapter appears in a separate article that starts with CMDG.

In this step-by-step guide, we'll go over how to code custom modules with their own settings panel just like the modules included with the builder.

A module reference and setting field reference is available at the end of this guide to further assist in your custom module coding.

Additionally, you can override any of the built-in modules by following the steps in CMDG 18: Override Built-In Modules.

Table of Contents

01: Create a plugin
02: Add a module to your plugin
03: Define module settings
04: Module settings CSS and JavaScript
05: Module HTML
06: Module CSS
07: Module JavaScript
08: Module property reference
09: Module method reference
10: Setting fields reference
11: Responsive fields reference
12: Repeater fields reference
13: Sanitize field values
14: Create custom fields
15: Helpers
16: Live preview reference
17: Partial refresh reference
18: Override built-in modules
19: Localization