protected function _register_controls()
{
$this->start_controls_section('section_style', ['label' => __('Background & Border', 'elementor'), 'type' => Controls_Manager::SECTION]);
$this->add_group_control(Group_Control_Background::get_type(), ['name' => 'background', 'selector' => '{{WRAPPER}} > .elementor-element-populated']);
$this->add_group_control(Group_Control_Border::get_type(), ['name' => 'border', 'selector' => '{{WRAPPER}} > .elementor-element-populated']);
$this->add_control('border_radius', ['label' => __('Border Radius', 'elementor'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%'], 'selectors' => ['{{WRAPPER}} > .elementor-element-populated' => '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-element-populated']);
$this->end_controls_section();
// Section Typography
$this->start_controls_section('section_typo', ['label' => __('Typography', 'elementor'), 'type' => Controls_Manager::SECTION]);
$this->add_control('heading_color', ['label' => __('Heading Color', 'elementor'), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => ['{{WRAPPER}} .elementor-element-populated .elementor-heading-title' => 'color: {{VALUE}};']]);
$this->add_control('color_text', ['label' => __('Text Color', 'elementor'), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => ['{{WRAPPER}} > .elementor-element-populated' => 'color: {{VALUE}};']]);
$this->add_control('color_link', ['label' => __('Link Color', 'elementor'), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => ['{{WRAPPER}} .elementor-element-populated a' => 'color: {{VALUE}};']]);
$this->add_control('color_link_hover', ['label' => __('Link Hover Color', 'elementor'), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => ['{{WRAPPER}} .elementor-element-populated a:hover' => 'color: {{VALUE}};']]);
$this->add_control('text_align', ['label' => __('Text Align', 'elementor'), 'type' => Controls_Manager::CHOOSE, 'options' => ['left' => ['title' => __('Left', 'elementor'), 'icon' => 'align-left'], 'center' => ['title' => __('Center', 'elementor'), 'icon' => 'align-center'], 'right' => ['title' => __('Right', 'elementor'), 'icon' => 'align-right']], 'selectors' => ['{{WRAPPER}} > .elementor-element-populated' => 'text-align: {{VALUE}};']]);
$this->end_controls_section();
// Section Advanced
$this->start_controls_section('section_advanced', ['label' => __('Advanced', 'elementor'), 'type' => Controls_Manager::SECTION, 'tab' => Controls_Manager::TAB_ADVANCED]);
$this->add_responsive_control('margin', ['label' => __('Margin', 'elementor'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%'], 'selectors' => ['{{WRAPPER}} > .elementor-element-populated' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};']]);
$this->add_responsive_control('padding', ['label' => __('Padding', 'elementor'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', 'em', '%'], 'selectors' => ['{{WRAPPER}} > .elementor-element-populated' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};']]);
$this->add_control('animation', ['label' => __('Entrance Animation', 'elementor'), 'type' => Controls_Manager::ANIMATION, 'default' => '', 'prefix_class' => 'animated ', 'label_block' => true]);
$this->add_control('animation_duration', ['label' => __('Animation Duration', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => ['slow' => __('Slow', 'elementor'), '' => __('Normal', 'elementor'), 'fast' => __('Fast', 'elementor')], 'prefix_class' => 'animated-', 'condition' => ['animation!' => '']]);
$this->add_control('css_classes', ['label' => __('CSS Classes', 'elementor'), 'type' => Controls_Manager::TEXT, 'default' => '', 'prefix_class' => '', 'label_block' => true, 'title' => __('Add your custom class WITHOUT the dot. e.g: my-class', 'elementor')]);
$this->end_controls_section();
// Section Responsive
$this->start_controls_section('section_responsive', ['label' => __('Responsive', 'elementor'), 'tab' => Controls_Manager::TAB_ADVANCED]);
$responsive_points = ['screen_sm' => ['title' => __('Mobile Width', 'elementor'), 'class_prefix' => 'elementor-sm-', 'classes' => '', 'description' => ''], 'screen_xs' => ['title' => __('Mobile Portrait', 'elementor'), 'class_prefix' => 'elementor-xs-', 'classes' => 'elementor-control-deprecated', 'description' => __('Deprecated: Mobile Portrait control is no longer supported. Please use the Mobile Width instead.', 'elementor')]];
foreach ($responsive_points as $point_name => $point_data) {
$this->add_control($point_name, ['label' => $point_data['title'], 'type' => Controls_Manager::SELECT, 'default' => 'default', 'options' => ['default' => __('Default', 'elementor'), 'custom' => __('Custom', 'elementor')], 'description' => $point_data['description'], 'classes' => $point_data['classes']]);
$this->add_control($point_name . '_width', ['label' => __('Column Width', 'elementor'), 'type' => Controls_Manager::SELECT, 'options' => ['10' => '10%', '11' => '11%', '12' => '12%', '14' => '14%', '16' => '16%', '20' => '20%', '25' => '25%', '30' => '30%', '33' => '33%', '40' => '40%', '50' => '50%', '60' => '60%', '66' => '66%', '70' => '70%', '75' => '75%', '80' => '80%', '83' => '83%', '90' => '90%', '100' => '100%'], 'default' => '100', 'condition' => [$point_name => ['custom']], 'prefix_class' => $point_data['class_prefix']]);
}
$this->end_controls_section();
}
protected function _register_controls()
{
$this->start_controls_section('section_image', ['label' => __('Image', 'elementor')]);
$this->add_control('image', ['label' => __('Choose Image', 'elementor'), 'type' => Controls_Manager::MEDIA, 'default' => ['url' => Utils::get_placeholder_image_src()]]);
$this->add_group_control(Group_Control_Image_Size::get_type(), ['name' => 'image', 'label' => __('Image Size', 'elementor'), 'default' => 'large']);
$this->add_responsive_control('align', ['label' => __('Alignment', 'elementor'), 'type' => Controls_Manager::CHOOSE, 'options' => ['left' => ['title' => __('Left', 'elementor'), 'icon' => 'align-left'], 'center' => ['title' => __('Center', 'elementor'), 'icon' => 'align-center'], 'right' => ['title' => __('Right', 'elementor'), 'icon' => 'align-right']], 'default' => 'center', 'selectors' => ['{{WRAPPER}}' => 'text-align: {{VALUE}};']]);
$this->add_control('caption', ['label' => __('Caption', 'elementor'), 'type' => Controls_Manager::TEXT, 'default' => '', 'placeholder' => __('Enter your caption about the image', 'elementor'), 'title' => __('Input image caption here', 'elementor')]);
$this->add_control('link_to', ['label' => __('Link to', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => 'none', 'options' => ['none' => __('None', 'elementor'), 'file' => __('Media File', 'elementor'), 'custom' => __('Custom URL', 'elementor')]]);
$this->add_control('link', ['label' => __('Link to', 'elementor'), 'type' => Controls_Manager::URL, 'placeholder' => __('http://your-link.com', 'elementor'), 'condition' => ['link_to' => 'custom'], 'show_label' => false]);
$this->add_control('view', ['label' => __('View', 'elementor'), 'type' => Controls_Manager::HIDDEN, 'default' => 'traditional']);
$this->end_controls_section();
$this->start_controls_section('section_style_image', ['label' => __('Image', 'elementor'), 'tab' => Controls_Manager::TAB_STYLE]);
$this->add_control('space', ['label' => __('Size (%)', 'elementor'), 'type' => Controls_Manager::SLIDER, 'default' => ['size' => 100, 'unit' => '%'], 'size_units' => ['%'], 'range' => ['%' => ['min' => 1, 'max' => 100]], 'selectors' => ['{{WRAPPER}} .elementor-image img' => 'max-width: {{SIZE}}{{UNIT}};']]);
$this->add_control('opacity', ['label' => __('Opacity (%)', 'elementor'), 'type' => Controls_Manager::SLIDER, 'default' => ['size' => 1], 'range' => ['px' => ['max' => 1, 'min' => 0.1, 'step' => 0.01]], 'selectors' => ['{{WRAPPER}} .elementor-image img' => 'opacity: {{SIZE}};']]);
$this->add_control('hover_animation', ['label' => __('Hover Animation', 'elementor'), 'type' => Controls_Manager::HOVER_ANIMATION]);
$this->add_group_control(Group_Control_Border::get_type(), ['name' => 'image_border', 'label' => __('Image Border', 'elementor'), 'selector' => '{{WRAPPER}} .elementor-image img']);
$this->add_control('image_border_radius', ['label' => __('Border Radius', 'elementor'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%'], 'selectors' => ['{{WRAPPER}} .elementor-image img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};']]);
$this->add_group_control(Group_Control_Box_Shadow::get_type(), ['name' => 'image_box_shadow', 'selector' => '{{WRAPPER}} .elementor-image img']);
$this->end_controls_section();
$this->start_controls_section('section_style_caption', ['label' => __('Caption', 'elementor'), 'tab' => Controls_Manager::TAB_STYLE]);
$this->add_control('caption_align', ['label' => __('Alignment', 'elementor'), 'type' => Controls_Manager::CHOOSE, 'options' => ['left' => ['title' => __('Left', 'elementor'), 'icon' => 'align-left'], 'center' => ['title' => __('Center', 'elementor'), 'icon' => 'align-center'], 'right' => ['title' => __('Right', 'elementor'), 'icon' => 'align-right'], 'justify' => ['title' => __('Justified', 'elementor'), 'icon' => 'align-justify']], 'default' => '', 'selectors' => ['{{WRAPPER}} .widget-image-caption' => 'text-align: {{VALUE}};']]);
$this->add_control('text_color', ['label' => __('Text Color', 'elementor'), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => ['{{WRAPPER}} .widget-image-caption' => 'color: {{VALUE}};'], 'scheme' => ['type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_3]]);
$this->add_group_control(Group_Control_Typography::get_type(), ['name' => 'caption_typography', 'selector' => '{{WRAPPER}} .widget-image-caption', 'scheme' => Scheme_Typography::TYPOGRAPHY_3]);
$this->end_controls_section();
}
protected function _register_controls()
{
$this->start_controls_section('_section_style', ['label' => __('Element Style', 'elementor'), 'tab' => Controls_Manager::TAB_ADVANCED]);
$this->add_responsive_control('_margin', ['label' => __('Margin', 'elementor'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%'], 'selectors' => ['{{WRAPPER}} .elementor-widget-container' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};']]);
$this->add_responsive_control('_padding', ['label' => __('Padding', 'elementor'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', 'em', '%'], 'selectors' => ['{{WRAPPER}} .elementor-widget-container' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};']]);
$this->add_control('_animation', ['label' => __('Entrance Animation', 'elementor'), 'type' => Controls_Manager::ANIMATION, 'default' => '', 'prefix_class' => 'animated ', 'label_block' => true]);
$this->add_control('animation_duration', ['label' => __('Animation Duration', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => ['slow' => __('Slow', 'elementor'), '' => __('Normal', 'elementor'), 'fast' => __('Fast', 'elementor')], 'prefix_class' => 'animated-', 'condition' => ['_animation!' => '']]);
$this->add_control('_css_classes', ['label' => __('CSS Classes', 'elementor'), 'type' => Controls_Manager::TEXT, 'default' => '', 'prefix_class' => '', 'label_block' => true, 'title' => __('Add your custom class WITHOUT the dot. e.g: my-class', 'elementor')]);
$this->end_controls_section();
$this->start_controls_section('_section_background', ['label' => __('Background & Border', 'elementor'), 'tab' => Controls_Manager::TAB_ADVANCED]);
$this->add_group_control(Group_Control_Background::get_type(), ['name' => '_background', 'selector' => '{{WRAPPER}} .elementor-widget-container']);
$this->add_group_control(Group_Control_Border::get_type(), ['name' => '_border', 'selector' => '{{WRAPPER}} .elementor-widget-container']);
$this->add_control('_border_radius', ['label' => __('Border Radius', 'elementor'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%'], '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_section();
$this->start_controls_section('_section_responsive', ['label' => __('Responsive', 'elementor'), 'tab' => Controls_Manager::TAB_ADVANCED]);
$this->add_control('responsive_description', ['raw' => __('Attention: The display settings (show/hide for mobile, tablet or desktop) will only take effect once you are on the preview or live page, and not while you\'re in editing mode in Elementor.', 'elementor'), 'type' => Controls_Manager::RAW_HTML, 'classes' => 'elementor-descriptor']);
$this->add_control('hide_desktop', ['label' => __('Hide On Desktop', 'elementor'), 'type' => Controls_Manager::SWITCHER, 'default' => '', 'prefix_class' => 'elementor-', 'label_on' => 'Hide', 'label_off' => 'Show', 'return_value' => 'hidden-desktop']);
$this->add_control('hide_tablet', ['label' => __('Hide On Tablet', 'elementor'), 'type' => Controls_Manager::SWITCHER, 'default' => '', 'prefix_class' => 'elementor-', 'label_on' => 'Hide', 'label_off' => 'Show', 'return_value' => 'hidden-tablet']);
$this->add_control('hide_mobile', ['label' => __('Hide On Mobile', 'elementor'), 'type' => Controls_Manager::SWITCHER, 'default' => '', 'prefix_class' => 'elementor-', 'label_on' => 'Hide', 'label_off' => 'Show', 'return_value' => 'hidden-phone']);
$this->end_controls_section();
}
protected function _register_controls()
{
$this->start_controls_section('section_layout', ['label' => __('Layout', 'elementor'), 'tab' => Controls_Manager::TAB_LAYOUT]);
$this->add_control('stretch_section', ['label' => __('Stretch Section', 'elementor'), 'type' => Controls_Manager::SWITCHER, 'default' => '', 'label_on' => __('Yes', 'elementor'), 'label_off' => __('No', 'elementor'), 'return_value' => 'section-stretched', 'prefix_class' => 'elementor-', 'force_render' => true, 'hide_in_inner' => true, 'description' => __('Stretch the section to the full width of the page using JS.', 'elementor') . sprintf(' <a href="%s" target="_blank">%s</a>', 'https://go.elementor.com/stretch-section/', __('Learn more.', 'elementor'))]);
$this->add_control('layout', ['label' => __('Content Width', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => 'boxed', 'options' => ['boxed' => __('Boxed', 'elementor'), 'full_width' => __('Full Width', 'elementor')], 'prefix_class' => 'elementor-section-']);
$this->add_control('content_width', ['label' => __('Content Width', 'elementor'), 'type' => Controls_Manager::SLIDER, 'range' => ['px' => ['min' => 500, 'max' => 1600]], 'selectors' => ['{{WRAPPER}} > .elementor-container' => 'max-width: {{SIZE}}{{UNIT}};'], 'condition' => ['layout' => ['boxed']], 'show_label' => false, 'separator' => 'none']);
$this->add_control('gap', ['label' => __('Columns Gap', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => 'default', 'options' => ['default' => __('Default', 'elementor'), 'no' => __('No Gap', 'elementor'), 'narrow' => __('Narrow', 'elementor'), 'extended' => __('Extended', 'elementor'), 'wide' => __('Wide', 'elementor'), 'wider' => __('Wider', 'elementor')]]);
$this->add_control('height', ['label' => __('Height', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => 'default', 'options' => ['default' => __('Default', 'elementor'), 'full' => __('Fit To Screen', 'elementor'), 'min-height' => __('Min Height', 'elementor')], 'prefix_class' => 'elementor-section-height-', 'hide_in_inner' => true]);
$this->add_control('custom_height', ['label' => __('Minimum Height', 'elementor'), 'type' => Controls_Manager::SLIDER, 'default' => ['size' => 400], 'range' => ['px' => ['min' => 0, 'max' => 1440]], 'selectors' => ['{{WRAPPER}} > .elementor-container' => 'min-height: {{SIZE}}{{UNIT}};'], 'condition' => ['height' => ['min-height']], 'hide_in_inner' => true]);
$this->add_control('height_inner', ['label' => __('Height', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => 'default', 'options' => ['default' => __('Default', 'elementor'), 'min-height' => __('Min Height', 'elementor')], 'prefix_class' => 'elementor-section-height-', 'hide_in_top' => true]);
$this->add_control('custom_height_inner', ['label' => __('Minimum Height', 'elementor'), 'type' => Controls_Manager::SLIDER, 'default' => ['size' => 400], 'range' => ['px' => ['min' => 0, 'max' => 1440]], 'selectors' => ['{{WRAPPER}} > .elementor-container' => 'min-height: {{SIZE}}{{UNIT}};'], 'condition' => ['height_inner' => ['min-height']], 'hide_in_top' => true]);
$this->add_control('column_position', ['label' => __('Column Position', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => 'middle', 'options' => ['stretch' => __('Stretch', 'elementor'), 'top' => __('Top', 'elementor'), 'middle' => __('Middle', 'elementor'), 'bottom' => __('Bottom', 'elementor')], 'prefix_class' => 'elementor-section-items-', 'condition' => ['height' => ['full', 'min-height']]]);
$this->add_control('content_position', ['label' => __('Content Position', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => ['' => __('Default', 'elementor'), 'top' => __('Top', 'elementor'), 'middle' => __('Middle', 'elementor'), 'bottom' => __('Bottom', 'elementor')], 'prefix_class' => 'elementor-section-content-']);
$this->add_control('structure', ['label' => __('Structure', 'elementor'), 'type' => Controls_Manager::STRUCTURE, 'default' => '10']);
$this->end_controls_section();
// Section background
$this->start_controls_section('section_background', ['label' => __('Background', 'elementor'), 'tab' => Controls_Manager::TAB_STYLE]);
$this->add_group_control(Group_Control_Background::get_type(), ['name' => 'background', 'types' => ['classic', 'video']]);
$this->end_controls_section();
// Background Overlay
$this->start_controls_section('background_overlay_section', ['label' => __('Background Overlay', 'elementor'), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => ['background_background' => ['classic', 'video']]]);
$this->add_group_control(Group_Control_Background::get_type(), ['name' => 'background_overlay', 'selector' => '{{WRAPPER}} > .elementor-background-overlay', 'condition' => ['background_background' => ['classic', 'video']]]);
$this->add_control('background_overlay_opacity', ['label' => __('Opacity (%)', 'elementor'), 'type' => Controls_Manager::SLIDER, 'default' => ['size' => 0.5], 'range' => ['px' => ['max' => 1, 'step' => 0.01]], 'selectors' => ['{{WRAPPER}} > .elementor-background-overlay' => 'opacity: {{SIZE}};'], 'condition' => ['background_overlay_background' => ['classic']]]);
$this->end_controls_section();
// Section border
$this->start_controls_section('section_border', ['label' => __('Border', 'elementor'), 'tab' => Controls_Manager::TAB_STYLE]);
$this->add_group_control(Group_Control_Border::get_type(), ['name' => 'border']);
$this->add_control('border_radius', ['label' => __('Border Radius', 'elementor'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%'], 'selectors' => ['{{WRAPPER}}, {{WRAPPER}} > .elementor-background-overlay' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};']]);
$this->add_group_control(Group_Control_Box_Shadow::get_type(), ['name' => 'box_shadow']);
$this->end_controls_section();
// Section Typography
$this->start_controls_section('section_typo', ['label' => __('Typography', 'elementor'), 'tab' => Controls_Manager::TAB_STYLE]);
$this->add_control('heading_color', ['label' => __('Heading Color', 'elementor'), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => ['{{WRAPPER}} > .elementor-container .elementor-heading-title' => 'color: {{VALUE}};']]);
$this->add_control('color_text', ['label' => __('Text Color', 'elementor'), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => ['{{WRAPPER}} > .elementor-container' => 'color: {{VALUE}};']]);
$this->add_control('color_link', ['label' => __('Link Color', 'elementor'), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => ['{{WRAPPER}} > .elementor-container a' => 'color: {{VALUE}};']]);
$this->add_control('color_link_hover', ['label' => __('Link Hover Color', 'elementor'), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => ['{{WRAPPER}} > .elementor-container a:hover' => 'color: {{VALUE}};']]);
$this->add_control('text_align', ['label' => __('Text Align', 'elementor'), 'type' => Controls_Manager::CHOOSE, 'options' => ['left' => ['title' => __('Left', 'elementor'), 'icon' => 'align-left'], 'center' => ['title' => __('Center', 'elementor'), 'icon' => 'align-center'], 'right' => ['title' => __('Right', 'elementor'), 'icon' => 'align-right']], 'selectors' => ['{{WRAPPER}} > .elementor-container' => 'text-align: {{VALUE}};']]);
$this->end_controls_section();
// Section Advanced
$this->start_controls_section('section_advanced', ['label' => __('Advanced', 'elementor'), 'tab' => Controls_Manager::TAB_ADVANCED]);
$this->add_responsive_control('margin', ['label' => __('Margin', 'elementor'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%'], 'allowed_dimensions' => 'vertical', 'placeholder' => ['top' => '', 'right' => 'auto', 'bottom' => '', 'left' => 'auto'], 'selectors' => ['{{WRAPPER}}' => 'margin-top: {{TOP}}{{UNIT}}; margin-bottom: {{BOTTOM}}{{UNIT}};']]);
$this->add_responsive_control('padding', ['label' => __('Padding', 'elementor'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', 'em', '%'], 'selectors' => ['{{WRAPPER}}' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};']]);
$this->add_control('animation', ['label' => __('Entrance Animation', 'elementor'), 'type' => Controls_Manager::ANIMATION, 'default' => '', 'prefix_class' => 'animated ', 'label_block' => true]);
$this->add_control('animation_duration', ['label' => __('Animation Duration', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => ['slow' => __('Slow', 'elementor'), '' => __('Normal', 'elementor'), 'fast' => __('Fast', 'elementor')], 'prefix_class' => 'animated-', 'condition' => ['animation!' => '']]);
$this->add_control('css_classes', ['label' => __('CSS Classes', 'elementor'), 'type' => Controls_Manager::TEXT, 'default' => '', 'prefix_class' => '', 'label_block' => true, 'title' => __('Add your custom class WITHOUT the dot. e.g: my-class', 'elementor')]);
$this->end_controls_section();
// Section Responsive
$this->start_controls_section('_section_responsive', ['label' => __('Responsive', 'elementor'), 'tab' => Controls_Manager::TAB_ADVANCED]);
$this->add_control('reverse_order_mobile', ['label' => __('Reverse Columns', 'elementor'), 'type' => Controls_Manager::SWITCHER, 'default' => '', 'prefix_class' => 'elementor-', 'label_on' => __('Yes', 'elementor'), 'label_off' => __('No', 'elementor'), 'return_value' => 'reverse-mobile', 'description' => __('Reverse column order - When on mobile, the column order is reversed, so the last column appears on top and vice versa.', 'elementor')]);
$this->add_control('heading_visibility', ['label' => __('Visibility', 'elementor'), 'type' => Controls_Manager::HEADING, 'separator' => 'before']);
$this->add_control('responsive_description', ['raw' => __('Attention: The display settings (show/hide for mobile, tablet or desktop) will only take effect once you are on the preview or live page, and not while you\'re in editing mode in Elementor.', 'elementor'), 'type' => Controls_Manager::RAW_HTML, 'classes' => 'elementor-descriptor']);
$this->add_control('hide_desktop', ['label' => __('Hide On Desktop', 'elementor'), 'type' => Controls_Manager::SWITCHER, 'default' => '', 'prefix_class' => 'elementor-', 'label_on' => __('Hide', 'elementor'), 'label_off' => __('Show', 'elementor'), 'return_value' => 'hidden-desktop']);
$this->add_control('hide_tablet', ['label' => __('Hide On Tablet', 'elementor'), 'type' => Controls_Manager::SWITCHER, 'default' => '', 'prefix_class' => 'elementor-', 'label_on' => __('Hide', 'elementor'), 'label_off' => __('Show', 'elementor'), 'return_value' => 'hidden-tablet']);
$this->add_control('hide_mobile', ['label' => __('Hide On Mobile', 'elementor'), 'type' => Controls_Manager::SWITCHER, 'default' => '', 'prefix_class' => 'elementor-', 'label_on' => __('Hide', 'elementor'), 'label_off' => __('Show', 'elementor'), 'return_value' => 'hidden-phone']);
$this->end_controls_section();
}
