Developer Tutorials
Periodically we update our "How To" section with new materials.
This comprehensive collection of guides covers everything from creating custom elements to advanced customization techniques for WPBakery Page Builder.
Getting started
How to create custom element
Learn the fundamentals of creating custom content elements for WPBakery Page Builder.
Asset management
Manage CSS and JavaScript assets for your custom elements efficiently.
Nested shortcodes (container)
Create container elements that can hold other elements inside them.
Examples pages
Browse through practical examples and code samples for common use cases.
Parameters & customization
Add animation param to the element
Add animation options to your custom elements.
Add iconpicker param to the element
Enable icon selection in your custom element parameters.
Add "Design options" tab
Add the CSS editor and design options tab to your custom elements.
Create new param type
Build completely custom parameter types for your elements.
Change default value of param
Modify default parameter values for existing elements.
Save param values in shortcode string
Control how parameter values are saved in shortcode strings.
Param position control with vc_add_param
Add and position parameters in existing elements using vc_add_param.
Update single param values
Programmatically update parameter values in existing elements.
Use param group in elements
Create repeatable groups of parameters in your elements.
Use param section in elements
Divide element attributes into structured sections inside the Edit Element modal.
Styling & output
Change shortcode's HTML output
Modify the HTML output of existing shortcodes.
Change CSS class names in output
Customize CSS class names in element output.
Add custom row layouts (presets)
Create custom row layout presets for quick page building.
Control default presets in content elements
Manage which presets are available in your content elements.
Set content element icon
Add custom icons to your elements in the element panel.
Adding icons to vc_icon
Extend the icon library with your own custom icon fonts.
Grid builder & integration
Adding custom shortcode to grid builder
Make your custom shortcodes available in the grid builder.
Remove content element from grid builder
Hide specific elements from appearing in the grid builder.
Remove WooCommerce mapped content elements
Disable WooCommerce elements if you don't need them.
Custom types ready with Toolset
Integrate WPBakery Page Builder with Toolset custom post types.
Fonts & typography
Add Google Fonts parameter
Add Google Fonts selection to your custom elements.
How to manage list of Google Fonts
Customize which Google Fonts are available in the font picker.
Interface & UX
Editor events
Hook into editor events to extend functionality.
Disable instructional/help pointers
Turn off the help tooltips and instructional pointers.
Remove "Edit with WPBakery Page Builder" from admin bar
Hide the page builder link from the WordPress admin bar.