widget_icon_classes('section-title'); } /** * Get widget categories. * * Retrieve the list of categories the Section Title widget belongs to. * * @since 1.0.0 * @access public * * @return array Widget categories. */ public function get_categories() { return [ 'ai-elements' ]; } public function get_style_depends() { return [ 'themify-icons', 'bootstrap-icons' ]; } private static function get_additional_styles() { static $additional_styles = null; if ( null !== $additional_styles ) { return $additional_styles; } $additional_styles = []; /** * Additional Styles. * * Filters the styles used by Elementor to add additional divider styles. * * @since 2.7.0 * * @param array $additional_styles Additional Elementor divider styles. */ $additional_styles = apply_filters( 'elementor/divider/styles/additional_styles', $additional_styles ); return $additional_styles; } public function get_help_url() { return 'https://aiaddons.ai/section-title-demo/'; } private function get_separator_styles() { return array_merge( self::get_additional_styles(), [ 'curly' => [ 'label' => _x( 'Curly', 'shapes', 'ai-addons' ), 'shape' => '', 'preserve_aspect_ratio' => false, 'supports_amount' => true, 'round' => false, 'group' => 'line', ], 'curved' => [ 'label' => _x( 'Curved', 'shapes', 'ai-addons' ), 'shape' => '', 'preserve_aspect_ratio' => false, 'supports_amount' => true, 'round' => false, 'group' => 'line', ], 'multiple' => [ 'label' => _x( 'Multiple', 'shapes', 'ai-addons' ), 'shape' => '', 'preserve_aspect_ratio' => false, 'supports_amount' => false, 'round' => false, 'group' => 'pattern', ], 'slashes' => [ 'label' => _x( 'Slashes', 'shapes', 'ai-addons' ), 'shape' => '', 'preserve_aspect_ratio' => false, 'supports_amount' => true, 'round' => false, 'view_box' => '0 0 20 16', 'group' => 'line', ], 'squared' => [ 'label' => _x( 'Squared', 'shapes', 'ai-addons' ), 'shape' => '', 'preserve_aspect_ratio' => false, 'supports_amount' => true, 'round' => false, 'group' => 'line', ], 'wavy' => [ 'label' => _x( 'Wavy', 'shapes', 'ai-addons' ), 'shape' => '', 'preserve_aspect_ratio' => false, 'supports_amount' => true, 'round' => false, 'group' => 'line', ], 'zigzag' => [ 'label' => _x( 'Zigzag', 'shapes', 'ai-addons' ), 'shape' => '', 'preserve_aspect_ratio' => false, 'supports_amount' => true, 'round' => false, 'group' => 'line', ], 'arrows' => [ 'label' => _x( 'Arrows', 'shapes', 'ai-addons' ), 'shape' => '', 'preserve_aspect_ratio' => true, 'supports_amount' => true, 'round' => true, 'group' => 'pattern', ], 'pluses' => [ 'label' => _x( 'Pluses', 'shapes', 'ai-addons' ), 'shape' => '', 'preserve_aspect_ratio' => true, 'supports_amount' => true, 'round' => false, 'group' => 'pattern', ], 'rhombus' => [ 'label' => _x( 'Rhombus', 'shapes', 'ai-addons' ), 'shape' => '', 'preserve_aspect_ratio' => false, 'supports_amount' => true, 'round' => false, 'group' => 'pattern', ], 'parallelogram' => [ 'label' => _x( 'Parallelogram', 'shapes', 'ai-addons' ), 'shape' => '', 'preserve_aspect_ratio' => false, 'supports_amount' => true, 'round' => false, 'group' => 'pattern', ], 'rectangles' => [ 'label' => _x( 'Rectangles', 'shapes', 'ai-addons' ), 'shape' => '', 'preserve_aspect_ratio' => false, 'supports_amount' => true, 'round' => true, 'group' => 'pattern', 'view_box' => '0 0 60 30', ], 'dots_tribal' => [ 'label' => _x( 'Dots', 'shapes', 'ai-addons' ), 'shape' => '', 'preserve_aspect_ratio' => true, 'supports_amount' => false, 'round' => false, 'group' => 'tribal', 'view_box' => '0 0 126 26', ], 'trees_2_tribal' => [ 'label' => _x( 'Fir Tree', 'shapes', 'ai-addons' ), 'shape' => '', 'preserve_aspect_ratio' => true, 'supports_amount' => false, 'round' => false, 'group' => 'tribal', 'view_box' => '0 0 126 26', ], 'rounds_tribal' => [ 'label' => _x( 'Half Rounds', 'shapes', 'ai-addons' ), 'shape' => '', 'preserve_aspect_ratio' => true, 'supports_amount' => false, 'round' => false, 'group' => 'tribal', 'view_box' => '0 0 120 26', ], 'leaves_tribal' => [ 'label' => _x( 'Leaves', 'shapes', 'ai-addons' ), 'shape' => '', 'preserve_aspect_ratio' => true, 'supports_amount' => false, 'round' => false, 'group' => 'tribal', 'view_box' => '0 0 117 26', ], 'stripes_tribal' => [ 'label' => _x( 'Stripes', 'shapes', 'ai-addons' ), 'shape' => '', 'preserve_aspect_ratio' => true, 'supports_amount' => false, 'round' => false, 'group' => 'tribal', 'view_box' => '0 0 120 26', ], 'squares_tribal' => [ 'label' => _x( 'Squares', 'shapes', 'ai-addons' ), 'shape' => '', 'preserve_aspect_ratio' => true, 'supports_amount' => false, 'round' => false, 'group' => 'tribal', 'view_box' => '0 0 126 26', ], 'trees_tribal' => [ 'label' => _x( 'Trees', 'shapes', 'ai-addons' ), 'shape' => '', 'preserve_aspect_ratio' => true, 'supports_amount' => false, 'round' => false, 'group' => 'tribal', 'view_box' => '0 0 123 26', ], 'planes_tribal' => [ 'label' => _x( 'Tribal', 'shapes', 'ai-addons' ), 'shape' => '', 'preserve_aspect_ratio' => true, 'supports_amount' => false, 'round' => false, 'group' => 'tribal', 'view_box' => '0 0 121 26', ], 'x_tribal' => [ 'label' => _x( 'X', 'shapes', 'ai-addons' ), 'shape' => '', 'preserve_aspect_ratio' => true, 'supports_amount' => false, 'round' => false, 'group' => 'tribal', 'view_box' => '0 0 126 26', ], 'zigzag_tribal' => [ 'label' => _x( 'Zigzag', 'shapes', 'ai-addons' ), 'shape' => '', 'preserve_aspect_ratio' => true, 'supports_amount' => false, 'round' => false, 'group' => 'tribal', 'view_box' => '0 0 120 26', ], ] ); } private function filter_styles_by( $array, $key, $value ) { return array_filter( $array, function( $style ) use ( $key, $value ) { return $value === $style[ $key ]; } ); } private function get_options_by_groups( $styles, $group = false ) { $groups = [ 'line' => [ 'label' => __( 'Line', 'ai-addons' ), 'options' => [ 'solid' => __( 'Solid', 'ai-addons' ), 'double' => __( 'Double', 'ai-addons' ), 'dotted' => __( 'Dotted', 'ai-addons' ), 'dashed' => __( 'Dashed', 'ai-addons' ), ], ], ]; foreach ( $styles as $key => $style ) { if ( ! isset( $groups[ $style['group'] ] ) ) { $groups[ $style['group'] ] = [ 'label' => ucwords( str_replace( '_', '', $style['group'] ) ), 'options' => [], ]; } $groups[ $style['group'] ]['options'][ $key ] = $style['label']; } if ( $group && isset( $groups[ $group ] ) ) { return $groups[ $group ]; } return $groups; } /** * Register Section Title widget controls. * * Adds different input fields to allow the user to change and customize the widget settings. * * @since 1.0.0 * @access protected */ protected function register_controls() { $styles = $this->get_separator_styles(); //Title Section $this->start_controls_section( 'title_section', [ 'label' => esc_html__( 'Title', 'ai-addons' ), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->add_responsive_control( 'alignment', [ 'label' => esc_html__( 'Alignment', 'ai-addons' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'left' => [ 'title' => esc_html__( 'Left', 'ai-addons' ), 'icon' => 'eicon-text-align-left', ], 'center' => [ 'title' => esc_html__( 'Center', 'ai-addons' ), 'icon' => 'eicon-text-align-center', ], 'right' => [ 'title' => esc_html__( 'Right', 'ai-addons' ), 'icon' => 'eicon-text-align-right', ], 'justify' => [ 'title' => esc_html__( 'Justified', 'ai-addons' ), 'icon' => 'eicon-text-align-justify', ], ], 'default' => 'center', 'prefix_class' => 'ai%s-align-', 'selectors' => [ '{{WRAPPER}}' => 'text-align: {{VALUE}};', '{{WRAPPER}}.ai-align-center .section-description' => 'margin: 0 auto;' ], ] ); $this->add_control( 'title_head', [ 'label' => esc_html__( 'Heading Tag', 'ai-addons' ), 'type' => Controls_Manager::SELECT, 'default' => 'h2', 'options' => [ 'h1' => esc_html__( 'h1', 'ai-addons' ), 'h2' => esc_html__( 'h2', 'ai-addons' ), 'h3' => esc_html__( 'h3', 'ai-addons' ), 'h4' => esc_html__( 'h4', 'ai-addons' ), 'h5' => esc_html__( 'h5', 'ai-addons' ), 'h6' => esc_html__( 'h6', 'ai-addons' ), 'p' => esc_html__( 'p', 'ai-addons' ), 'span' => esc_html__( 'span', 'ai-addons' ), 'div' => esc_html__( 'div', 'ai-addons' ), 'i' => esc_html__( 'i', 'ai-addons' ) ] ] ); $this->add_control( 'title', [ 'type' => Controls_Manager::TEXT, 'label' => esc_html__( 'Title', 'ai-addons' ), 'default' => esc_html__( 'Section Title', 'ai-addons' ) ] ); $this->add_control( 'highlighted_title', [ 'type' => Controls_Manager::TEXT, 'label' => esc_html__( 'Highlighted Text', 'ai-addons' ) ] ); $this->add_control( 'highlighted_position', [ 'label' => esc_html__( 'Highlighted Text Position', 'ai-addons' ), 'type' => Controls_Manager::SELECT, 'default' => 'suffix', 'options' => [ 'prefix' => esc_html__( 'Prefix', 'ai-addons' ), 'suffix' => esc_html__( 'Suffix', 'ai-addons' ) ] ] ); $this->end_controls_section(); //Sub Title Section $this->start_controls_section( 'subtitle_section', [ 'label' => esc_html__( 'Sub Title', 'ai-addons' ), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'sub_title', [ 'type' => Controls_Manager::TEXT, 'label' => esc_html__( 'Sub Title', 'ai-addons' ), ] ); $this->add_control( 'sub_title_head', [ 'label' => esc_html__( 'Sub Title Tag', 'ai-addons' ), 'type' => Controls_Manager::SELECT, 'default' => 'h6', 'options' => [ 'h1' => esc_html__( 'h1', 'ai-addons' ), 'h2' => esc_html__( 'h2', 'ai-addons' ), 'h3' => esc_html__( 'h3', 'ai-addons' ), 'h4' => esc_html__( 'h4', 'ai-addons' ), 'h5' => esc_html__( 'h5', 'ai-addons' ), 'h6' => esc_html__( 'h6', 'ai-addons' ), 'p' => esc_html__( 'p', 'ai-addons' ), 'span' => esc_html__( 'span', 'ai-addons' ), 'div' => esc_html__( 'div', 'ai-addons' ), 'i' => esc_html__( 'i', 'ai-addons' ) ] ] ); $this->add_control( 'sub_title_pos', [ 'type' => Controls_Manager::SELECT, 'label' => esc_html__( 'Sub Title Position', 'ai-addons' ), 'default' => 'bottom', 'options' => [ 'bottom' => esc_html__( 'Bottom', 'ai-addons' ), 'top' => esc_html__( 'Top', 'ai-addons' ) ] ] ); $this->end_controls_section(); //Lead $this->start_controls_section( 'subtitle_lead', [ 'label' => esc_html__( 'Lead', 'ai-addons' ), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'lead_text', [ 'type' => Controls_Manager::TEXT, 'label' => esc_html__( 'Lead Text', 'ai-addons' ), ] ); $this->add_control( 'lead_tag', [ 'label' => esc_html__( 'Lead Tag', 'ai-addons' ), 'type' => Controls_Manager::SELECT, 'default' => 'p', 'options' => [ 'p' => esc_html__( 'p', 'ai-addons' ), 'span' => esc_html__( 'span', 'ai-addons' ), 'div' => esc_html__( 'div', 'ai-addons' ), 'i' => esc_html__( 'i', 'ai-addons' ) ] ] ); $this->end_controls_section(); //Separator Section $this->start_controls_section( 'separator_section', [ 'label' => esc_html__( 'Separator', 'ai-addons' ), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'sep_model', [ 'type' => Controls_Manager::SELECT, 'label' => esc_html__( 'Separator Type', 'ai-addons' ), 'default' => 'standard', 'options' => [ 'none' => esc_html__( 'None', 'ai-addons' ), 'standard' => esc_html__( 'Standard', 'ai-addons' ), 'pattern' => esc_html__( 'Border/Pattern', 'ai-addons' ), 'image' => esc_html__( 'Image', 'ai-addons' ), 'icon' => esc_html__( 'Icon', 'ai-addons' ) ] ] ); $this->add_control( 'sep_pos', [ 'type' => Controls_Manager::SELECT, 'label' => esc_html__( 'Separator Position', 'ai-addons' ), 'default' => 'bottom', 'options' => [ 'bottom' => esc_html__( 'Bottom', 'ai-addons' ), 'top' => esc_html__( 'Top', 'ai-addons' ) ] ] ); $this->add_control( 'sep_pattern', [ 'label' => esc_html__( 'Border/Shape', 'ai-addons' ), 'type' => Controls_Manager::SELECT, 'groups' => array_values( $this->get_options_by_groups( $styles ) ), 'render_type' => 'template', 'default' => 'solid', 'selectors' => [ '{{WRAPPER}} .elementor-divider-separator' => '--separator-border-style: {{VALUE}}', ], 'condition' => [ 'sep_model' => 'pattern' ] ] ); $this->add_control( 'separator_type', [ 'type' => Controls_Manager::HIDDEN, 'default' => 'pattern', 'prefix_class' => 'ai-separator-type-', 'condition' => [ 'sep_pattern!' => [ '', 'solid', 'double', 'dotted', 'dashed', ], 'sep_model' => 'pattern' ], 'render_type' => 'template' ] ); $this->add_control( 'separator_type_normal', [ 'type' => Controls_Manager::HIDDEN, 'default' => 'normal', 'prefix_class' => 'ai-separator-type-', 'condition' => [ 'sep_pattern' => [ '', 'solid', 'double', 'dotted', 'dashed', ], 'sep_model' => 'pattern' ], 'render_type' => 'template' ] ); $this->add_responsive_control( 'width', [ 'label' => __( 'Width', 'ai-addons' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ '%', 'px' ], 'range' => [ 'px' => [ 'max' => 1000, ], ], 'default' => [ 'size' => 100, 'unit' => 'px', ], 'tablet_default' => [ 'unit' => 'px', ], 'mobile_default' => [ 'unit' => 'px', ], 'condition' => [ 'sep_model' => [ 'pattern', 'standard' ] ], 'selectors' => [ '{{WRAPPER}} .elementor-divider-separator,{{WRAPPER}} .section-title-wrapper .title-wrap span.title-separator-standard' => 'width: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'sep_image', [ 'label' => __( 'Image', 'ai-addons' ), 'type' => Controls_Manager::MEDIA, 'dynamic' => [ 'active' => true, ], 'condition' => [ 'sep_model' => 'image' ] ] ); $this->add_control( 'sep_icon', [ 'label' => esc_html__( 'Icon', 'ai-addons' ), 'type' => Controls_Manager::ICONS, 'fa4compatibility' => 'icon', 'default' => [ 'value' => 'ti-heart', 'library' => 'themify', ], 'condition' => [ 'sep_model' => 'icon' ] ] ); $this->end_controls_section(); //Content Section $this->start_controls_section( 'content_section', [ 'label' => esc_html__( 'Content', 'ai-addons' ), 'tab' => Controls_Manager::TAB_CONTENT, ] ); // Openai part $this->add_control( 'aiea_content_opt', [ 'label' => esc_html__( 'OpenAI Content?', 'ai-addons' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'no' ] ); $this->add_control( 'aiea_pro_alert', [ 'type' => Controls_Manager::RAW_HTML, 'raw' => esc_html__( 'Only available in pro version!', 'ai-addons'), 'content_classes' => 'ai-elementor-warning', 'condition' => [ 'aiea_content_opt' => 'yes' ], ] ); $this->add_control( 'sec_tit_content', [ 'type' => Controls_Manager::WYSIWYG, 'label' => esc_html__( 'Content', 'ai-addons' ), 'default' => '' ] ); $this->end_controls_section(); // Button $this->start_controls_section( 'button_section', [ 'label' => esc_html__( 'Button', 'ai-addons' ), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'btn_enabled', [ 'label' => esc_html__( 'Enable Button', 'ai-addons' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'no' ] ); $this->add_control( 'button_type', [ 'label' => esc_html__( 'Type', 'ai-addons' ), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => [ '' => esc_html__( 'Default', 'ai-addons' ), 'info' => esc_html__( 'Info', 'ai-addons' ), 'success' => esc_html__( 'Success', 'ai-addons' ), 'warning' => esc_html__( 'Warning', 'ai-addons' ), 'danger' => esc_html__( 'Danger', 'ai-addons' ), ], 'prefix_class' => 'elementor-button-', 'condition' => [ 'btn_enabled' => 'yes' ], ] ); $this->add_control( 'button_text', [ 'label' => esc_html__( 'Text', 'ai-addons' ), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, ], 'default' => esc_html__( 'Click here', 'ai-addons' ), 'placeholder' => esc_html__( 'Click here', 'ai-addons' ), 'condition' => [ 'btn_enabled' => 'yes' ], ] ); $this->add_control( 'button_link', [ 'label' => esc_html__( 'Link', 'ai-addons' ), 'type' => Controls_Manager::URL, 'dynamic' => [ 'active' => true, ], 'placeholder' => esc_html__( 'https://your-link.com', 'ai-addons' ), 'default' => [ 'url' => '#', ], 'condition' => [ 'btn_enabled' => 'yes' ], ] ); $this->add_responsive_control( 'button_align', [ 'label' => esc_html__( 'Alignment', 'ai-addons' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'left' => [ 'title' => esc_html__( 'Left', 'ai-addons' ), 'icon' => 'eicon-text-align-left', ], 'center' => [ 'title' => esc_html__( 'Center', 'ai-addons' ), 'icon' => 'eicon-text-align-center', ], 'right' => [ 'title' => esc_html__( 'Right', 'ai-addons' ), 'icon' => 'eicon-text-align-right', ], 'justify' => [ 'title' => esc_html__( 'Justified', 'ai-addons' ), 'icon' => 'eicon-text-align-justify', ], ], 'prefix_class' => 'ai-btn%s-align-', 'default' => '', 'condition' => [ 'btn_enabled' => 'yes' ], ] ); $this->add_control( 'button_size', [ 'label' => esc_html__( 'Size', 'ai-addons' ), 'type' => Controls_Manager::SELECT, 'default' => 'sm', 'options' => [ 'xs' => __( 'Extra Small', 'ai-addons' ), 'sm' => __( 'Small', 'ai-addons' ), 'md' => __( 'Medium', 'ai-addons' ), 'lg' => __( 'Large', 'ai-addons' ), 'xl' => __( 'Extra Large', 'ai-addons' ), ], 'style_transfer' => true, 'condition' => [ 'btn_enabled' => 'yes' ], ] ); $this->add_control( 'button_icon', [ 'label' => esc_html__( 'Icon', 'ai-addons' ), 'type' => Controls_Manager::ICONS, 'fa4compatibility' => 'icon', 'condition' => [ 'btn_enabled' => 'yes' ], ] ); $this->add_control( 'button_icon_align', [ 'label' => esc_html__( 'Icon Position', 'ai-addons' ), 'type' => Controls_Manager::SELECT, 'default' => 'left', 'options' => [ 'left' => esc_html__( 'Before', 'ai-addons' ), 'right' => esc_html__( 'After', 'ai-addons' ), ], 'condition' => [ 'button_icon[value]!' => '', 'btn_enabled' => 'yes' ], ] ); $this->add_responsive_control( 'button_icon_indent', [ 'label' => esc_html__( 'Icon Spacing', 'ai-addons' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'max' => 50, ], ], 'selectors' => [ '{{WRAPPER}} .ai-button .ai-align-icon-right' => 'margin-left: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .ai-button .ai-align-icon-left' => 'margin-right: {{SIZE}}{{UNIT}};', ], 'condition' => [ 'btn_enabled' => 'yes' ], ] ); $this->add_control( 'button_view', [ 'label' => esc_html__( 'View', 'ai-addons' ), 'type' => Controls_Manager::HIDDEN, 'default' => 'traditional', 'condition' => [ 'btn_enabled' => 'yes' ], ] ); $this->add_control( 'button_css_id', [ 'label' => esc_html__( 'Button ID', 'ai-addons' ), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, ], 'default' => '', 'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'ai-addons' ), 'separator' => 'before', 'condition' => [ 'btn_enabled' => 'yes' ], ] ); $this->end_controls_section(); // Go premium section $this->start_controls_section( 'aiea_section_pro', [ 'label' => esc_html__( 'Go Premium for More Features', 'ai-addons' ) ] ); $this->add_control( 'aiea_get_pro', [ 'type' => Controls_Manager::RAW_HTML, 'raw' => ' Get the Pro version for more ai elements and customization options.', 'content_classes' => 'ai-elementor-warning' ] ); $this->end_controls_section(); // Style Title Section $this->start_controls_section( 'title_section_style', [ 'label' => esc_html__( 'Title', 'ai-addons' ), 'tab' => Controls_Manager::TAB_STYLE ] ); $this->add_control( 'pre_title_color', [ 'type' => Controls_Manager::COLOR, 'label' => esc_html__( 'Prefix Color', 'ai-addons' ), 'default' => '', 'selectors' => [ '{{WRAPPER}} .section-title-wrapper .section-title .title-prefix' => 'color: {{VALUE}};' ], ] ); $this->add_control( 'title_color', [ 'type' => Controls_Manager::COLOR, 'label' => esc_html__( 'Title Color', 'ai-addons' ), 'default' => '', 'selectors' => [ '{{WRAPPER}} .section-title-wrapper .section-title' => 'color: {{VALUE}};' ], ] ); $this->add_control( 'suffix_title_color', [ 'type' => Controls_Manager::COLOR, 'label' => esc_html__( 'Suffix Color', 'ai-addons' ), 'default' => '', 'selectors' => [ '{{WRAPPER}} .section-title-wrapper .section-title .title-suffix' => 'color: {{VALUE}};' ], ] ); $this->add_responsive_control( 'title_margin', [ 'label' => esc_html__( 'Margin', 'ai-addons' ), 'type' => Controls_Manager::DIMENSIONS, 'selectors' => [ '{{WRAPPER}} .section-title-wrapper .section-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ] ] ); $this->add_responsive_control( 'title_padding', [ 'label' => esc_html__( 'Padding', 'ai-addons' ), 'type' => Controls_Manager::DIMENSIONS, 'selectors' => [ '{{WRAPPER}} .section-title-wrapper .section-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ] ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'title_typography', 'selector' => '{{WRAPPER}} .section-title-wrapper .section-title' ] ); $this->end_controls_section(); // Style Subtitle Section $this->start_controls_section( 'sub_title_section_style', [ 'label' => esc_html__( 'Sub Title', 'ai-addons' ), 'tab' => Controls_Manager::TAB_STYLE ] ); $this->add_control( 'sub_title_color', [ 'type' => Controls_Manager::COLOR, 'label' => esc_html__( 'Color', 'ai-addons' ), 'default' => '', 'selectors' => [ '{{WRAPPER}} .section-title-wrapper .sub-title' => 'color: {{VALUE}};' ], ] ); $this->add_responsive_control( 'sub_title_margin', [ 'label' => esc_html__( 'Margin', 'ai-addons' ), 'type' => Controls_Manager::DIMENSIONS, 'selectors' => [ '{{WRAPPER}} .section-title-wrapper .sub-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ] ] ); $this->add_responsive_control( 'sub_title_padding', [ 'label' => esc_html__( 'Padding', 'ai-addons' ), 'type' => Controls_Manager::DIMENSIONS, 'selectors' => [ '{{WRAPPER}} .section-title-wrapper .sub-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ] ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'sub_title_typography', 'selector' => '{{WRAPPER}} .section-title-wrapper .sub-title' ] ); $this->end_controls_section(); // Style Separator Section $this->start_controls_section( 'section_divider_style', [ 'label' => __( 'Separator', 'ai-addons' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'sep_model!' => 'none', ], ] ); $this->add_control( 'color', [ 'label' => __( 'Color', 'ai-addons' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'render_type' => 'template', 'selectors' => [ '{{WRAPPER}}' => '--separator-border-color: {{VALUE}}', '{{WRAPPER}} .title-separator > *' => 'color: {{VALUE}}', ], 'condition' => [ 'sep_model' => [ 'icon', 'pattern' ], ], ] ); $this->add_control( 'icon_size', [ 'label' => __( 'Icon Size', 'ai-addons' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 20, ], 'range' => [ 'px' => [ 'min' => 1, 'max' => 100, 'step' => 1, ], ], 'selectors' => [ '{{WRAPPER}} .title-separator.separator-icon i' => 'font-size: {{SIZE}}{{UNIT}}', '{{WRAPPER}} .title-separator.separator-icon svg' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};', ], 'condition' => [ 'sep_model' => 'icon' ], ] ); $this->add_control( 'weight', [ 'label' => __( 'Weight', 'ai-addons' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 1, ], 'range' => [ 'px' => [ 'min' => 1, 'max' => 10, 'step' => 0.1, ], ], 'render_type' => 'template', 'condition' => [ 'sep_pattern' => array_keys( $this->get_options_by_groups( $styles, 'line' )['options'] ), 'sep_model' => 'pattern' ], 'selectors' => [ '{{WRAPPER}}' => '--separator-border-width: {{SIZE}}{{UNIT}}', ], ] ); $this->add_control( 'pattern_height', [ 'label' => __( 'Size', 'ai-addons' ), 'type' => Controls_Manager::SLIDER, 'selectors' => [ '{{WRAPPER}}' => '--separator-pattern-height: {{SIZE}}{{UNIT}}', ], 'default' => [ 'size' => 20, ], 'range' => [ 'px' => [ 'step' => 0.1, ], ], 'condition' => [ 'sep_pattern!' => [ '', 'solid', 'double', 'dotted', 'dashed', ], 'sep_model' => 'pattern' ], ] ); $this->add_control( 'pattern_size', [ 'label' => __( 'Amount', 'ai-addons' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ '%', 'px' ], 'selectors' => [ '{{WRAPPER}}' => '--separator-pattern-size: {{SIZE}}{{UNIT}}', ], 'default' => [ 'size' => 20, ], 'range' => [ 'px' => [ 'step' => 0.1, ], '%' => [ 'step' => 0.01, ], ], 'condition' => [ 'sep_pattern!' => array_merge( array_keys( $this->filter_styles_by( $styles, 'supports_amount', false ) ), [ '', 'solid', 'double', 'dotted', 'dashed', ] ), 'sep_model' => 'pattern' ], ] ); $this->add_responsive_control( 'img_size', [ 'label' => __( 'Image Size', 'ai-addons' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 100, ], 'range' => [ '%' => [ 'min' => 2, 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}} .separator-img > img' => 'width: {{SIZE}}%; margin: 0 auto;' ], 'condition' => [ 'sep_model' => 'image' ], ] ); $this->add_responsive_control( 'gap', [ 'label' => __( 'Gap', 'ai-addons' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 15, ], 'range' => [ 'px' => [ 'min' => 2, 'max' => 50, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-divider' => 'padding-top: {{SIZE}}{{UNIT}}; padding-bottom: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .title-separator' => 'padding-top: {{SIZE}}{{UNIT}}; padding-bottom: {{SIZE}}{{UNIT}};', ], 'separator' => 'before', ] ); $this->end_controls_section(); // Style Lead Section $this->start_controls_section( 'lead_section_style', [ 'label' => esc_html__( 'Lead', 'ai-addons' ), 'tab' => Controls_Manager::TAB_STYLE ] ); $this->add_control( 'lead_color', [ 'type' => Controls_Manager::COLOR, 'label' => esc_html__( 'Color', 'ai-addons' ), 'default' => '', 'selectors' => [ '{{WRAPPER}} .section-description .lead' => 'color: {{VALUE}};' ], ] ); $this->add_responsive_control( 'lead_margin', [ 'label' => esc_html__( 'Margin', 'ai-addons' ), 'type' => Controls_Manager::DIMENSIONS, 'selectors' => [ '{{WRAPPER}} .section-description .lead' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ] ] ); $this->add_responsive_control( 'lead_padding', [ 'label' => esc_html__( 'Padding', 'ai-addons' ), 'type' => Controls_Manager::DIMENSIONS, 'selectors' => [ '{{WRAPPER}} .section-description .lead' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ] ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'lead_typography', 'selector' => '{{WRAPPER}} .section-description .lead' ] ); $this->end_controls_section(); // Style Content Section $this->start_controls_section( 'content_section_style', [ 'label' => esc_html__( 'Content', 'ai-addons' ), 'tab' => Controls_Manager::TAB_STYLE ] ); $this->add_control( 'content_color', [ 'type' => Controls_Manager::COLOR, 'label' => esc_html__( 'Color', 'ai-addons' ), 'default' => '', 'selectors' => [ '{{WRAPPER}} .section-description p' => 'color: {{VALUE}};' ], ] ); $this->add_responsive_control( 'content_margin', [ 'label' => esc_html__( 'Margin', 'ai-addons' ), 'type' => Controls_Manager::DIMENSIONS, 'selectors' => [ '{{WRAPPER}} .section-description p' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ] ] ); $this->add_responsive_control( 'content_padding', [ 'label' => esc_html__( 'Padding', 'ai-addons' ), 'type' => Controls_Manager::DIMENSIONS, 'selectors' => [ '{{WRAPPER}} .section-description p' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ] ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'content_typography', 'selector' => '{{WRAPPER}} .section-description p' ] ); $this->end_controls_section(); // Style Button Section $this->start_controls_section( 'button_section_style', [ 'label' => esc_html__( 'Button', 'ai-addons' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'btn_enabled' => 'yes', ], ] ); $this->add_group_control( Group_Control_Text_Shadow::get_type(), [ 'name' => 'text_shadow', 'selector' => '{{WRAPPER}} .ai-button', ] ); $this->start_controls_tabs( 'tabs_button_style' ); $this->start_controls_tab( 'tab_button_normal', [ 'label' => esc_html__( 'Normal', 'ai-addons' ), ] ); $this->add_control( 'button_text_color', [ 'label' => esc_html__( 'Text Color', 'ai-addons' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .ai-button' => 'fill: {{VALUE}}; color: {{VALUE}};', ], ] ); $this->add_control( 'button_background_color', [ 'label' => esc_html__( 'Background Color', 'ai-addons' ), 'type' => Controls_Manager::COLOR, 'default' => '#333333', 'selectors' => [ '{{WRAPPER}} .ai-button' => 'background-color: {{VALUE}};', ], ] ); $this->end_controls_tab(); $this->start_controls_tab( 'tab_button_hover', [ 'label' => esc_html__( 'Hover', 'ai-addons' ), ] ); $this->add_control( 'button_hover_color', [ 'label' => esc_html__( 'Text Color', 'ai-addons' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .ai-button:hover, {{WRAPPER}} .ai-button:focus' => 'color: {{VALUE}};', '{{WRAPPER}} .ai-button:hover svg, {{WRAPPER}} .ai-button:focus svg' => 'fill: {{VALUE}};', ], ] ); $this->add_control( 'button_background_hover_color', [ 'label' => esc_html__( 'Background Color', 'ai-addons' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .ai-button:hover, {{WRAPPER}} .ai-button:focus' => 'background-color: {{VALUE}};', ], ] ); $this->add_control( 'button_hover_border_color', [ 'label' => esc_html__( 'Border Color', 'ai-addons' ), 'type' => Controls_Manager::COLOR, 'condition' => [ 'border_border!' => '', ], 'selectors' => [ '{{WRAPPER}} .ai-button:hover, {{WRAPPER}} .ai-button:focus' => 'border-color: {{VALUE}};', ], ] ); $this->add_control( 'button_hover_animation', [ 'label' => esc_html__( 'Hover Animation', 'ai-addons' ), 'type' => Controls_Manager::HOVER_ANIMATION, ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'border', 'selector' => '{{WRAPPER}} .ai-button', 'separator' => 'before', ] ); $this->add_responsive_control( 'button_border_radius', [ 'label' => esc_html__( 'Border Radius', 'ai-addons' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{WRAPPER}} .ai-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'button_box_shadow', 'selector' => '{{WRAPPER}} .ai-button', ] ); $this->add_responsive_control( 'button_text_padding', [ 'label' => esc_html__( 'Padding', 'ai-addons' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', 'em', '%' ], 'selectors' => [ '{{WRAPPER}} .ai-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], 'separator' => 'before', ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'button_typography', 'selector' => '{{WRAPPER}} .ai-button' ] ); $this->end_controls_section(); } private function build_svg() { $settings = $this->get_settings_for_display(); if ( 'pattern' !== $settings['separator_type'] || empty( $settings['sep_pattern'] ) ) { return ''; } $svg_shapes = $this->get_separator_styles(); $selected_pattern = $svg_shapes[ $settings['sep_pattern'] ]; $preserve_aspect_ratio = $selected_pattern['preserve_aspect_ratio'] ? 'xMidYMid meet' : 'none'; $view_box = isset( $selected_pattern['view_box'] ) ? $selected_pattern['view_box'] : '0 0 24 24'; $attr = [ 'preserveAspectRatio' => $preserve_aspect_ratio, 'overflow' => 'visible', 'height' => '100%', 'viewBox' => $view_box, ]; if ( 'line' !== $selected_pattern['group'] ) { $attr['fill'] = $settings['color']; $attr['stroke'] = 'none'; } else { $attr['stroke'] = $settings['color']; $attr['stroke-width'] = $settings['weight']['size']; $attr['fill'] = 'none'; $attr['stroke-linecap'] = 'square'; $attr['stroke-miterlimit'] = '10'; } $this->add_render_attribute( 'svg', $attr ); $pattern_attribute_string = $this->get_render_attribute_string( 'svg' ); $shape = $selected_pattern['shape']; return '' . $shape . ''; } public function svg_to_data_uri( $svg ) { return str_replace( [ '<', '>', '"', '#' ], [ '%3C', '%3E', "'", '%23' ], $svg ); } /** * Render Section Title widget output on the frontend. * * Written in PHP and used to generate the final HTML. * * @since 1.0.0 * @access protected */ protected function render() { $settings = $this->get_settings_for_display(); extract( $settings ); //Define Variables $class = isset( $extra_class ) && $extra_class != '' ? ' ' . $extra_class : ''; $title = isset( $title ) ? $title : ''; $title_head = isset( $title_head ) ? $title_head : 'h2'; $sub_title_head = isset( $sub_title_head ) ? $sub_title_head : 'h6'; $sub_title = isset( $sub_title ) && $sub_title != '' ? '<'. esc_attr( $sub_title_head ) .' class="sub-title">'. esc_html( $sub_title ) .'' : ''; $sub_title_pos = isset( $sub_title_pos ) ? $sub_title_pos : 'bottom'; $sep_pos = isset( $sep_pos ) ? $sep_pos : 'bottom'; $lead_text = isset( $lead_text ) ? $lead_text : ''; $highlighted_position = isset( $highlighted_position ) ? $highlighted_position : 'suffix'; $highlighted_title = isset( $highlighted_title ) ? $highlighted_title : 'suffix'; $sep_model = isset( $sep_model ) ? $sep_model : 'none'; echo '
'; echo '
'; // Section title echo $sub_title_pos == 'top' ? $sub_title : ''; echo $sep_pos == 'top' ? $this->seperator_model( $sep_model, $settings ) : ''; echo '<' . esc_attr( $title_head ) . ' class="section-title">'; echo isset( $highlighted_position ) && $highlighted_position == 'prefix' ? '' . esc_html( $highlighted_title ) . ' ' : ''; echo esc_html( $title ); echo isset( $highlighted_position ) && $highlighted_position == 'suffix' ? ' ' . esc_html( $highlighted_title ) . ' ' : ''; echo ''; echo $sub_title_pos == 'bottom' ? $sub_title : ''; echo $sep_pos == 'bottom' ? $this->seperator_model( $sep_model, $settings ) : ''; echo '
'; echo '
'; $lead_tag = isset( $lead_tag ) && !empty( $lead_tag ) ? $lead_tag : 'p'; echo !empty( $lead_text ) ? '<'. esc_attr( $lead_tag ) .' class="lead d-block">'. $lead_text .'' : ''; echo isset( $sec_tit_content ) && $sec_tit_content != '' ? '

'. $sec_tit_content .'

' : ''; //Button code if ( isset( $settings['btn_enabled'] ) && $settings['btn_enabled'] == 'yes' ) { $this->add_render_attribute( 'button-wrapper', 'class', 'ai-button-wrapper' ); if ( ! empty( $settings['button_link']['url'] ) ) { $this->add_link_attributes( 'button', $settings['button_link'] ); $this->add_render_attribute( 'button', 'class', 'ai-button-link' ); } $this->add_render_attribute( 'button', 'class', 'elementor-button ai-button' ); if ( ! empty( $settings['button_css_id'] ) ) { $this->add_render_attribute( 'button', 'id', $settings['button_css_id'] ); } if ( ! empty( $settings['button_size'] ) ) { $this->add_render_attribute( 'button', 'class', 'elementor-size-' . $settings['button_size'] ); } if ( isset( $settings['button_hover_animation'] ) && $settings['button_hover_animation'] ) { $this->add_render_attribute( 'button', 'class', 'elementor-animation-' . $settings['button_hover_animation'] ); } ?>
get_render_attribute_string( 'button-wrapper' ); ?>> get_render_attribute_string( 'button' ); ?>> button_render_text(); ?>
'; echo '
'; } public function seperator_model( $sep_model, $settings ) { if( $sep_model == 'pattern' ){ $svg_code = $this->build_svg(); $this->add_render_attribute( 'seperator_wrapper', 'class', 'elementor-divider' ); if ( ! empty( $svg_code ) ) { $this->add_render_attribute( 'seperator_wrapper', 'style', '--separator-pattern-url: url("data:image/svg+xml,' . $this->svg_to_data_uri( $svg_code ) . '");' ); } echo '
get_render_attribute_string( 'seperator_wrapper' ) .'>
'; }elseif( $sep_model == 'image' ){ $sep_image = $settings['sep_image']; if( is_array( $sep_image ) && isset( $sep_image['id'] ) ){ $img_attr = wp_get_attachment_image_src( absint( $sep_image['id'] ), 'full', true ); $image_alt = get_post_meta( absint( $sep_image['id'] ), '_wp_attachment_image_alt', true); echo isset( $img_attr[0] ) ? ''. esc_attr( $image_alt ) .'' : ''; } }elseif( $sep_model == 'icon' ){ if ( empty( $settings['icon'] ) && ! Icons_Manager::is_migration_allowed() ) { // add old default $settings['icon'] = 'ti-heart'; } if ( ! empty( $settings['icon'] ) ) { $this->add_render_attribute( 'icon', 'class', $settings['icon'] ); $this->add_render_attribute( 'icon', 'aria-hidden', 'true' ); } $migrated = isset( $settings['__fa4_migrated']['sep_icon'] ); $is_new = empty( $settings['icon'] ) && Icons_Manager::is_migration_allowed(); echo ''; if ( $is_new || $migrated ) : Icons_Manager::render_icon( $settings['sep_icon'], [ 'aria-hidden' => 'true' ] ); else : echo 'get_render_attribute_string( 'icon' ) .'>'; endif; echo ''; }elseif( $sep_model == 'standard' ){ echo ''; } } /** * Render button text. * * Render button widget text. * * @since 1.5.0 * @access protected */ protected function button_render_text() { $settings = $this->get_settings_for_display(); $migrated = isset( $settings['__fa4_migrated']['selected_icon'] ); $is_new = empty( $settings['icon'] ) && Icons_Manager::is_migration_allowed(); if ( ! $is_new && empty( $settings['icon_align'] ) ) { // @todo: remove when deprecated // added as bc in 2.6 //old default $settings['icon_align'] = $this->get_settings( 'icon_align' ); } $this->add_render_attribute( [ 'content-wrapper' => [ 'class' => 'ai-button-content-wrapper', ], 'icon-align' => [ 'class' => [ 'ai-button-icon', 'ai-align-icon-' . $settings['button_icon_align'], ], ], 'text' => [ 'class' => 'ai-button-text', ], ] ); $this->add_inline_editing_attributes( 'text', 'none' ); ?> get_render_attribute_string( 'content-wrapper' ); ?>> get_render_attribute_string( 'icon-align' ); ?>> 'true' ] ); else : ?> get_render_attribute_string( 'text' ); ?>>