Skip to content

Instantly share code, notes, and snippets.

@dtbaker
Last active May 21, 2022 10:48
Show Gist options
  • Save dtbaker/aacac996beddc3bcfb1632c3b3d5347b to your computer and use it in GitHub Desktop.
Save dtbaker/aacac996beddc3bcfb1632c3b3d5347b to your computer and use it in GitHub Desktop.
Add a custom control to an existing Elementor widget
// This example will add a custom "select" drop down to the "Image Box"
// This will change the class="" on the rendered image box so we can style the Image Box differently
// based on the selected option from the editor.
// The class will be "my-image-box-style-blue" or "my-image-box-style-green" based on the selected option.
add_action('elementor/element/before_section_end', function( $section, $section_id, $args ) {
if( $section->get_name() == 'image-box' && $section_id == 'section_image' ){
// we are at the end of the "section_image" area of the "image-box"
$section->add_control(
'my_custom_control' ,
[
'label' => 'My Label Here',
'type' => Elementor\Controls_Manager::SELECT,
'default' => 'blue',
'options' => array( 'blue' => 'Blue Style', 'green' => 'Green Style' ),
'prefix_class' => 'my-image-box-style-',
'label_block' => true,
]
);
}
}, 10, 3 );
@lmoncany
Copy link

hey @shikharpatel5 that's exactly what i'm looking for, did you find a solution ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment