Back to Docs

Custom Elements

Overview

Developers can create custom elements that appear in the RAVENCIBuilder element library alongside the built-in elements.

Registering an Element

Create a PHP class that extends the base element class and register it:

add_action('zionbuilder/init', function() {
    \ZionBuilder\Plugin::instance()->elements_manager->register_element(
        new My_Custom_Element()
    );
});

Element Class Structure

class My_Custom_Element extends \ZionBuilder\Elements\Element {
    public function get_type() {
        return 'my-custom-element';
    }

    public function get_name() {
        return 'My Custom Element';
    }

    public function get_category() {
        return 'content';
    }

    public function options($options) {
        $options->add_option('title', [
            'type' => 'text',
            'title' => 'Title',
            'default' => 'Hello World',
        ]);
    }

    public function render($options) {
        $title = $options->get_value('title');
        echo '<div class="my-element">';
        echo '<h3>' . esc_html($title) . '</h3>';
        echo '</div>';
    }
}

Option Types

Available option types for your element settings:

  • text, textarea, number, url, email
  • select, checkbox, toggle
  • colorpicker, typography
  • image, media
  • code (CSS/HTML/JS editor)
  • repeater (repeatable groups of options)

Editor Preview

Custom elements render a live preview in the editor by default. For complex elements that need JavaScript, you can provide a Vue component for the editor rendering.