Add custom shape art

  • Available in: Beaver Builder 2.2
  • Applies to: Rows
  • Skill level: Developer
  • You can assign shape layers that overlay row backgrounds. There are a number of built-in shapes to choose from, or you can register custom SVG artwork that will appear in the dropdown list for the shape.

    For example, here's a simple SVG shape that we created and called "Boomerang," then created the plugin describe in this article to be able to use it as a custom shape layer in Beaver Builder.

    There are two steps to registering a custom shape:

    • Create a PHP file that contains an SVG shape definition.
    • Create a plugin that includes the PHP shape definition file plus code to register the shape.

    This article is written for developers. If you're not a developer, you can follow a step-by-step tutorial by clicking the Related Article below.

    Prerequisite:

    You'll need a Scalable Vector Graphic (SVG) shape that you have either obtained from somewhere or drawn yourself. SVG shapes are definitions of the shape's vectors and other attributes in XML format. The shape is contained within an <svg> tag

    The free Inkscape application uses SVG as its native format. Other vector graphic applications, such as Adobe Illustrator, can export vector drawings to SVG format.

    Custom shape plugin example for developers

    Here's an example of a PHP file that contains the SVG custom shape definition for the boomerang shape shown in the screenshot above.

    Notes:

    • Only include the interior shape definition without the wrapping <svg> element itself. It will be rendered for you.
      In the code example above, the shape definition starts with the <g> element.
    • To make your shape respond to the color and gradient fields in the UI settings for the shape, add the .fl-shape class to the outermost element in the shape definition, as shown in Line 4 of the code example.
    • In this example, the PHP file was saved with the name boomerang.svg.php. It will be used in the code below.

    Here's the code example for the plugin, with notes below.

    Notes:

    • Use the fl_register_art action to set up any shapes you wish to register.
    • Use the FLBuilder::register_shape() method to register a shape.
    • All shapes need a label (a human-readable name for your shape) and a name (an ID for your shape – lowercase, no spaces)
    • Set the width andheight of your shape. Optionally you can include the x and y origin points, if your art doesn’t start at the 0,0 coordinates. These values correspond directly to an svg element’s viewBox property, with the values x y width height (for example, 0 0 120 15). These are relative values and will tell your shape how to size itself in proportion.
      Do not use px or any other unit with these values.
    • Using the render key, register a path to your SVG file.