Creating your first element

An element in ZIon Builder contains the php file of the element and the vue.js file of the eleement.

Creating a new element class should have the following basic structure in PHP file:

class MyElement extends Element {
    public function get_name() {
      return __( 'My element', 'text-domain' );
    }

   public function get_type() {
     return 'my_element';
   }

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

     public function render( $options ) {
       // HTML elements
     }
}

Optional functions that may be added to this Class are:

public function get_keywords() {
   return [ 'keyword1', 'keyword2', 'keyword3' ];
}

public function before_render( $options ) {
  // return HMTL entities
}

public function enqueue_styles() {
   // loads styles for the frontend and editor pages 
   $this->enqueue_element_style( Utils::get_file_url( 'dist/css/elements/MyElement/frontend.css' ) );
}

public function enqueue_scripts() {
   wp_enqueue_script( 'my-script' );     
   $this->enqueue_editor_script( Utils::get_file_url( 'dist/js/elements/MyElement/editor.js' ) );
   $this->enqueue_element_script( Utils::get_file_url( 'dist/js/elements/MyElement/frontend.js' ) );
}

public function on_register_styles() {
   $this->register_style_options_element(
        'inner_wrapper_styles',
            [
                'title'                   => esc_html__( 'Inner Wrapper', 'text-domain' ),
                'selector'                => '{{ELEMENT}} .specialClass',
                'allow_class_assignments' => false,
            ]
        );
}

public function options( $options ) {
   $options->add_option(
            'option',
            [
                'type'        => 'text',
                'default'     => 'Placeholder',
                'layout'      => 'inline',
                'title'       => esc_html__( 'My option', 'text-domain' ),
                'description' => esc_html__( 'Type text to appear on option', 'text-domain' ),                
            ]
        );
}

Element type

Returns the unique id for the element. This id should be the same id from the javascript component. If the Element is developed purely in PHP, then this function is optional.

public function get_type() {
     return 'my_element';
}


Element name

Returns the name for the element

public function get_name() {
   return __( 'My element', 'text-domain' );
}

Keywords

Returns an array the keywords for this element

public function get_keywords() {
   return [ 'keyword1', 'keyword2', 'keyword3' ];
}

Category

Returns the element category from the categories added in Class Elements.

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

Element icon

Inside the element folder, a media file ( svg, jpg, png ) should exist and it will be loaded automatically, without any function.

Frontend rendering functions

public function before_render( $options ) {
  // optional to add wrapper classes in case are needed for javaScript code
  $this->render_attributes->add( 'wrapper', 'class', 'js-class' );
}
 public function render( $options ) {
   // echo HTML entities
   $title                   = $options->get_value( 'title' );
   <div class="myElementClass"><?php echo __( $title ); ?></div>
 }

For adding extra attributes to an element use the functions

$this->render_attributes->add( 'wrapper', 'class', 'js-class' );