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( '_z_index', [ 'label' => __( 'Z-Index', 'elementor' ), 'type' => Controls_Manager::NUMBER, 'min' => 0, 'placeholder' => 0, 'selectors' => [ '{{WRAPPER}}' => 'z-index: {{VALUE}};', ], ] ); $this->add_control( '_animation', [ 'label' => __( 'Entrance Animation', 'elementor' ), 'type' => Controls_Manager::ANIMATION, 'default' => '', 'prefix_class' => 'animated ', 'label_block' => true, 'frontend_available' => 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( '_animation_delay', [ 'label' => __( 'Animation Delay', 'elementor' ) . ' (ms)', 'type' => Controls_Manager::NUMBER, 'default' => '', 'min' => 0, 'step' => 100, 'condition' => [ '_animation!' => '', ], 'render_type' => 'none', 'frontend_available' => true, ] ); $this->add_control( '_element_id', [ 'label' => __( 'CSS ID', 'elementor' ), 'type' => Controls_Manager::TEXT, 'default' => '', 'label_block' => true, 'title' => __( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ), ] ); $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', 'elementor' ), 'tab' => Controls_Manager::TAB_ADVANCED, ] ); $this->start_controls_tabs( '_tabs_background' ); $this->start_controls_tab( '_tab_background_normal', [ 'label' => __( 'Normal', 'elementor' ), ] ); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => '_background', 'selector' => '{{WRAPPER}} > .elementor-widget-container', ] ); $this->end_controls_tab(); $this->start_controls_tab( '_tab_background_hover', [ 'label' => __( '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' => __( 'Transition Duration', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 0.3, ], 'range' => [ 'px' => [ 'max' => 3, 'step' => 0.1, ], ], 'render_type' => 'ui', ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); $this->start_controls_section( '_section_border', [ 'label' => __( 'Border', 'elementor' ), 'tab' => Controls_Manager::TAB_ADVANCED, ] ); $this->start_controls_tabs( '_tabs_border' ); $this->start_controls_tab( '_tab_border_normal', [ 'label' => __( 'Normal', 'elementor' ), ] ); $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_tab(); $this->start_controls_tab( '_tab_border_hover', [ 'label' => __( 'Hover', 'elementor' ), ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => '_border_hover', 'selector' => '{{WRAPPER}}:hover .elementor-widget-container', ] ); $this->add_control( '_border_radius_hover', [ 'label' => __( 'Border Radius', 'elementor' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], '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' => __( 'Transition Duration', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 0.3, ], '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(); $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, 'content_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(); Plugin::$instance->controls_manager->add_custom_css_controls( $this ); } }