Elementor: Extend Widget by Adding Control in Tab

Created on 19 Dec 2018  路  3Comments  路  Source: elementor/elementor

It appears that there are only hooks to add widget controls before/after sections when extending a widget. For example - elementor/element/column/section_style/before_section_end

A hook to add control in a tab (like Hover) will be very nice.

typdeveloper-api

Most helpful comment

@pnpetroff

for cases like that, we have the start_injection and end_injection methods which let you insert a control at the position you want ex:

add_action( 'elementor/element/button/section_style/before_section_end', function( $element, $args ) {
    $element->start_injection( [
        'at' => 'before',
        'of' => 'button_text_color',
    ] );
    // add a control
    $element->add_control(
        'btn_style',
        [
            'label' => 'Button Style',
            'type' => \Elementor\Controls_Manager::SELECT,
            'options' => [
                'fancy' => 'Fancy',
                'stylish' => 'Stylish',
                'rounded' => 'Rounded',
                'square' => 'Square',
            ],
            'prefix_class' => 'btn-style-',
        ]
    );

    $element->end_injection();
}, 10, 2 );

All 3 comments

@pnpetroff

for cases like that, we have the start_injection and end_injection methods which let you insert a control at the position you want ex:

add_action( 'elementor/element/button/section_style/before_section_end', function( $element, $args ) {
    $element->start_injection( [
        'at' => 'before',
        'of' => 'button_text_color',
    ] );
    // add a control
    $element->add_control(
        'btn_style',
        [
            'label' => 'Button Style',
            'type' => \Elementor\Controls_Manager::SELECT,
            'options' => [
                'fancy' => 'Fancy',
                'stylish' => 'Stylish',
                'rounded' => 'Rounded',
                'square' => 'Square',
            ],
            'prefix_class' => 'btn-style-',
        ]
    );

    $element->end_injection();
}, 10, 2 );

How can i add control to all existing widgets? What action should i use? @bainternet

@bainternet

the start_injection and end_injection dont work with tabs, like tabs in form repeater.

how to add custom control to tabs in form repeater? (ex in tab advanced with shortcode, value...)

@pnpetroff

for cases like that, we have the start_injection and end_injection methods which let you insert a control at the position you want ex:

add_action( 'elementor/element/button/section_style/before_section_end', function( $element, $args ) {
  $element->start_injection( [
      'at' => 'before',
      'of' => 'button_text_color',
  ] );
  // add a control
  $element->add_control(
      'btn_style',
      [
          'label' => 'Button Style',
          'type' => \Elementor\Controls_Manager::SELECT,
          'options' => [
              'fancy' => 'Fancy',
              'stylish' => 'Stylish',
              'rounded' => 'Rounded',
              'square' => 'Square',
          ],
          'prefix_class' => 'btn-style-',
      ]
  );

  $element->end_injection();
}, 10, 2 );
Was this page helpful?
0 / 5 - 0 ratings