elementor' ),
'type' => Controls_Manager::CHOOSE,
'toggle' => false,
'default' => 'start',
'options' => [
'start' => [
'title' => esc_html__( 'Top', 'elementor' ),
'icon' => 'eicon-v-align-top',
],
'end' => [
'title' => esc_html__( 'Bottom', 'elementor' ),
'icon' => 'eicon-v-align-bottom',
],
],
'render_type' => 'ui',
'condition' => [
'_position!' => '',
],
]
);
$this->add_responsive_control(
'_offset_y',
[
'label' => esc_html__( 'Offset', 'elementor' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => -1000,
'max' => 1000,
'step' => 1,
],
'%' => [
'min' => -200,
'max' => 200,
],
'vh' => [
'min' => -200,
'max' => 200,
],
'vw' => [
'min' => -200,
'max' => 200,
],
],
'size_units' => [ 'px', '%', 'vh', 'vw', 'custom' ],
'default' => [
'size' => '0',
],
'selectors' => [
'{{WRAPPER}}' => 'top: {{SIZE}}{{UNIT}}',
],
'condition' => [
'_offset_orientation_v!' => 'end',
'_position!' => '',
],
]
);
$this->add_responsive_control(
'_offset_y_end',
[
'label' => esc_html__( 'Offset', 'elementor' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => -1000,
'max' => 1000,
'step' => 1,
],
'%' => [
'min' => -200,
'max' => 200,
],
'vh' => [
'min' => -200,
'max' => 200,
],
'vw' => [
'min' => -200,
'max' => 200,
],
],
'size_units' => [ 'px', '%', 'vh', 'vw', 'custom' ],
'default' => [
'size' => '0',
],
'selectors' => [
'{{WRAPPER}}' => 'bottom: {{SIZE}}{{UNIT}}',
],
'condition' => [
'_offset_orientation_v' => 'end',
'_position!' => '',
],
]
);
$this->add_responsive_control(
'_z_index',
[
'label' => esc_html__( 'Z-Index', 'elementor' ),
'type' => Controls_Manager::NUMBER,
'selectors' => [
'{{WRAPPER}}' => 'z-index: {{VALUE}};',
],
]
);
$this->add_control(
'_element_id',
[
'label' => esc_html__( 'CSS ID', 'elementor' ),
'type' => Controls_Manager::TEXT,
'dynamic' => [
'active' => true,
],
'default' => '',
'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
'style_transfer' => false,
'classes' => 'elementor-control-direction-ltr',
]
);
$this->add_control(
'_css_classes',
[
'label' => esc_html__( 'CSS Classes', 'elementor' ),
'type' => Controls_Manager::TEXT,
'dynamic' => [
'active' => true,
],
'prefix_class' => '',
'title' => esc_html__( 'Add your custom class WITHOUT the dot. e.g: my-class', 'elementor' ),
'classes' => 'elementor-control-direction-ltr',
]
);
$this->end_controls_section();
}
/**
* Register the Motion Effects section.
*
* @return void
*/
private function register_effects_section() {
$this->start_controls_section(
'section_effects',
[
'label' => esc_html__( 'Motion Effects', 'elementor' ),
'tab' => Controls_Manager::TAB_ADVANCED,
]
);
$this->add_responsive_control(
'_animation',
[
'label' => esc_html__( 'Entrance Animation', 'elementor' ),
'type' => Controls_Manager::ANIMATION,
'frontend_available' => true,
]
);
$this->add_control(
'animation_duration',
[
'label' => esc_html__( 'Animation Duration', 'elementor' ),
'type' => Controls_Manager::SELECT,
'default' => '',
'options' => [
'slow' => esc_html__( 'Slow', 'elementor' ),
'' => esc_html__( 'Normal', 'elementor' ),
'fast' => esc_html__( 'Fast', 'elementor' ),
],
'prefix_class' => 'animated-',
'condition' => [
'_animation!' => '',
],
]
);
$this->add_control(
'_animation_delay',
[
'label' => esc_html__( 'Animation Delay', 'elementor' ) . ' (ms)',
'type' => Controls_Manager::NUMBER,
'default' => '',
'min' => 0,
'step' => 100,
'condition' => [
'_animation!' => '',
],
'render_type' => 'none',
'frontend_available' => true,
]
);
$this->end_controls_section();
}
/** Register the Background section.
*
* @return void
*/
private function register_background_section() {
$this->start_controls_section(
'_section_background',
[
'label' => esc_html__( 'Background', 'elementor' ),
'tab' => Controls_Manager::TAB_ADVANCED,
]
);
$this->start_controls_tabs( '_tabs_background' );
$this->start_controls_tab(
'_tab_background_normal',
[
'label' => esc_html__( 'Normal', 'elementor' ),
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => '_background',
'selector' => '{{WRAPPER}} > .elementor-widget-container',
'fields_options' => [
'image' => [
'background_lazyload' => [
'active' => true,
'keys' => [ '_background_image', 'url' ],
'selector' => '.elementor-widget-container',
],
],
],
]
);
$this->end_controls_tab();
$this->start_controls_tab(
'_tab_background_hover',
[
'label' => esc_html__( 'Hover', 'elementor' ),
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => '_background_hover',
'selector' => '{{WRAPPER}}:hover .elementor-widget-container',
]
);
$this->add_control(
'_background_hover_transition',
[
'label' => esc_html__( 'Transition Duration', 'elementor' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'max' => 3,
'step' => 0.1,
],
],
'render_type' => 'ui',
'separator' => 'before',
'selectors' => [
'{{WRAPPER}} > .elementor-widget-container' => 'transition: background {{SIZE}}s',
],
]
);
$this->end_controls_tab();
$this->end_controls_tabs();
$this->end_controls_section();
}
/**
* Register the Border section.
*
* @return void
*/
private function register_border_section() {
$this->start_controls_section(
'_section_border',
[
'label' => esc_html__( 'Border', 'elementor' ),
'tab' => Controls_Manager::TAB_ADVANCED,
]
);
$this->start_controls_tabs( '_tabs_border' );
$this->start_controls_tab(
'_tab_border_normal',
[
'label' => esc_html__( 'Normal', 'elementor' ),
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => '_border',
'selector' => '{{WRAPPER}} > .elementor-widget-container',
]
);
$this->add_responsive_control(
'_border_radius',
[
'label' => esc_html__( 'Border Radius', 'elementor' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%', 'em', 'custom' ],
'selectors' => [
'{{WRAPPER}} > .elementor-widget-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => '_box_shadow',
'selector' => '{{WRAPPER}} > .elementor-widget-container',
]
);
$this->end_controls_tab();
$this->start_controls_tab(
'_tab_border_hover',
[
'label' => esc_html__( 'Hover', 'elementor' ),
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => '_border_hover',
'selector' => '{{WRAPPER}}:hover .elementor-widget-container',
]
);
$this->add_responsive_control(
'_border_radius_hover',
[
'label' => esc_html__( 'Border Radius', 'elementor' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%', 'em', 'custom' ],
'selectors' => [
'{{WRAPPER}}:hover > .elementor-widget-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => '_box_shadow_hover',
'selector' => '{{WRAPPER}}:hover .elementor-widget-container',
]
);
$this->add_control(
'_border_hover_transition',
[
'label' => esc_html__( 'Transition Duration', 'elementor' ),
'type' => Controls_Manager::SLIDER,
'separator' => 'before',
'range' => [
'px' => [
'max' => 3,
'step' => 0.1,
],
],
'selectors' => [
'{{WRAPPER}} .elementor-widget-container' => 'transition: background {{_background_hover_transition.SIZE}}s, border {{SIZE}}s, border-radius {{SIZE}}s, box-shadow {{SIZE}}s',
],
]
);
$this->end_controls_tab();
$this->end_controls_tabs();
$this->end_controls_section();
}
/**
* Register the Mask section.
*
* @return void
*/
private function register_masking_section() {
$this->start_controls_section(
'_section_masking',
[
'label' => esc_html__( 'Mask', 'elementor' ),
'tab' => Controls_Manager::TAB_ADVANCED,
]
);
$this->add_control(
'_mask_switch',
[
'label' => esc_html__( 'Mask', 'elementor' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => esc_html__( 'On', 'elementor' ),
'label_off' => esc_html__( 'Off', 'elementor' ),
'default' => '',
]
);
$this->add_control(
'_mask_shape',
[
'label' => esc_html__( 'Shape', 'elementor' ),
'type' => Controls_Manager::SELECT,
'options' => $this->get_shapes(),
'default' => 'circle',
'selectors' => $this->get_mask_selectors( '-webkit-mask-image: url( ' . ELEMENTOR_ASSETS_URL . '/mask-shapes/{{VALUE}}.svg );' ),
'condition' => [
'_mask_switch!' => '',
],
]
);
$this->add_control(
'_mask_image',
[
'label' => esc_html__( 'Image', 'elementor' ),
'type' => Controls_Manager::MEDIA,
'media_type' => 'image',
'should_include_svg_inline_option' => true,
'library_type' => 'image/svg+xml',
'dynamic' => [
'active' => true,
],
'selectors' => $this->get_mask_selectors( '-webkit-mask-image: url( {{URL}} );' ),
'condition' => [
'_mask_switch!' => '',
'_mask_shape' => 'custom',
],
]
);
$this->add_control(
'_mask_notice',
[
'type' => Controls_Manager::HIDDEN,
'raw' => esc_html__( 'Need More Shapes?', 'elementor' ) .
'
' .
sprintf(
/* translators: 1: Link open tag, 2: Link close tag. */
esc_html__( 'Explore additional Premium Shape packs and use them in your site. %1$sLearn More%2$s', 'elementor' ),
'',
''
),
'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
'condition' => [
'_mask_switch!' => '',
],
]
);
$this->add_responsive_control(
'_mask_size',
[
'label' => esc_html__( 'Size', 'elementor' ),
'type' => Controls_Manager::SELECT,
'options' => [
'contain' => esc_html__( 'Fit', 'elementor' ),
'cover' => esc_html__( 'Fill', 'elementor' ),
'custom' => esc_html__( 'Custom', 'elementor' ),
],
'default' => 'contain',
'selectors' => $this->get_mask_selectors( '-webkit-mask-size: {{VALUE}};' ),
'condition' => [
'_mask_switch!' => '',
],
]
);
$this->add_responsive_control(
'_mask_size_scale',
[
'label' => esc_html__( 'Scale', 'elementor' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', 'em', '%', 'vw', 'custom' ],
'range' => [
'px' => [
'min' => 0,
'max' => 500,
],
'em' => [
'min' => 0,
'max' => 100,
],
'%' => [
'min' => 0,
'max' => 200,
],
'vw' => [
'min' => 0,
'max' => 100,
],
],
'default' => [
'unit' => '%',
'size' => 100,
],
'selectors' => $this->get_mask_selectors( '-webkit-mask-size: {{SIZE}}{{UNIT}};' ),
'condition' => [
'_mask_switch!' => '',
'_mask_size' => 'custom',
],
]
);
$this->add_responsive_control(
'_mask_position',
[
'label' => esc_html__( 'Position', 'elementor' ),
'type' => Controls_Manager::SELECT,
'options' => [
'center center' => esc_html__( 'Center Center', 'elementor' ),
'center left' => esc_html__( 'Center Left', 'elementor' ),
'center right' => esc_html__( 'Center Right', 'elementor' ),
'top center' => esc_html__( 'Top Center', 'elementor' ),
'top left' => esc_html__( 'Top Left', 'elementor' ),
'top right' => esc_html__( 'Top Right', 'elementor' ),
'bottom center' => esc_html__( 'Bottom Center', 'elementor' ),
'bottom left' => esc_html__( 'Bottom Left', 'elementor' ),
'bottom right' => esc_html__( 'Bottom Right', 'elementor' ),
'custom' => esc_html__( 'Custom', 'elementor' ),
],
'default' => 'center center',
'selectors' => $this->get_mask_selectors( '-webkit-mask-position: {{VALUE}};' ),
'condition' => [
'_mask_switch!' => '',
],
]
);
$this->add_responsive_control(
'_mask_position_x',
[
'label' => esc_html__( 'X Position', 'elementor' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', 'em', '%', 'vw', 'custom' ],
'range' => [
'px' => [
'min' => -500,
'max' => 500,
],
'em' => [
'min' => -100,
'max' => 100,
],
'%' => [
'min' => -100,
'max' => 100,
],
'vw' => [
'min' => -100,
'max' => 100,
],
],
'default' => [
'unit' => '%',
'size' => 0,
],
'selectors' => $this->get_mask_selectors( '-webkit-mask-position-x: {{SIZE}}{{UNIT}};' ),
'condition' => [
'_mask_switch!' => '',
'_mask_position' => 'custom',
],
]
);
$this->add_responsive_control(
'_mask_position_y',
[
'label' => esc_html__( 'Y Position', 'elementor' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', 'em', '%', 'vw', 'custom' ],
'range' => [
'px' => [
'min' => -500,
'max' => 500,
],
'em' => [
'min' => -100,
'max' => 100,
],
'%' => [
'min' => -100,
'max' => 100,
],
'vw' => [
'min' => -100,
'max' => 100,
],
],
'default' => [
'unit' => '%',
'size' => 0,
],
'selectors' => $this->get_mask_selectors( '-webkit-mask-position-y: {{SIZE}}{{UNIT}};' ),
'condition' => [
'_mask_switch!' => '',
'_mask_position' => 'custom',
],
]
);
$this->add_responsive_control(
'_mask_repeat',
[
'label' => esc_html__( 'Repeat', 'elementor' ),
'type' => Controls_Manager::SELECT,
'options' => [
'no-repeat' => esc_html__( 'No-repeat', 'elementor' ),
'repeat' => esc_html__( 'Repeat', 'elementor' ),
'repeat-x' => esc_html__( 'Repeat-x', 'elementor' ),
'repeat-Y' => esc_html__( 'Repeat-y', 'elementor' ),
'round' => esc_html__( 'Round', 'elementor' ),
'space' => esc_html__( 'Space', 'elementor' ),
],
'default' => 'no-repeat',
'selectors' => $this->get_mask_selectors( '-webkit-mask-repeat: {{VALUE}};' ),
'condition' => [
'_mask_switch!' => '',
'_mask_size!' => 'cover',
],
]
);
$this->end_controls_section();
}
/**
* Register the Responsive section.
*
* @return void
*/
private function register_responsive_section() {
$this->start_controls_section(
'_section_responsive',
[
'label' => esc_html__( 'Responsive', 'elementor' ),
'tab' => Controls_Manager::TAB_ADVANCED,
]
);
$this->add_control(
'responsive_description',
[
'raw' => esc_html__( 'Responsive visibility will take effect only on preview or live page, and not while editing in Elementor.', 'elementor' ),
'type' => Controls_Manager::RAW_HTML,
'content_classes' => 'elementor-descriptor',
]
);
$this->add_hidden_device_controls();
$this->end_controls_section();
}
/**
* Register common widget controls.
*
* Adds different input fields to allow the user to change and customize the widget settings.
*
* @since 3.1.0
* @access protected
*/
protected function register_controls() {
$this->register_layout_section();
$this->register_effects_section();
$this->register_transform_section();
$this->register_background_section();
$this->register_border_section();
$this->register_masking_section();
$this->register_responsive_section();
Plugin::$instance->controls_manager->add_custom_attributes_controls( $this );
Plugin::$instance->controls_manager->add_custom_css_controls( $this );
}
}