start_controls_tabs( 'form_fields_tabs' ); $repeater->start_controls_tab( 'form_fields_content_tab', [ 'label' => __( 'General', 'elementor-pro' ), ] ); $repeater->add_control( 'title', [ 'label' => __( 'Title', 'elementor' ), 'type' => Controls_Manager::TEXT, 'default' => __( 'Info Circle Item', 'elementor' ), ] ); $repeater->add_control( 'item_description', [ 'label' => __( 'Description', 'elementor' ), 'type' => Controls_Manager::WYSIWYG, 'default' => __( 'I am item content. Click edit button to change this text.', 'elementor' ), 'description' => __( 'Description - This is the content which will be displayed inside the circle', 'elementor' ), ] ); $repeater->add_control( 'call_to_action', [ 'label' => __( 'Call To Action - CTA', 'elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $repeater->add_control( 'link', [ 'label' => __( 'Link', 'elementor' ), 'type' => Controls_Manager::URL, 'placeholder' => __( 'http://your-link.com', 'elementor' ), 'show_label' => true, ] ); $repeater->add_control( 'information_circle_style', [ 'label' => __( 'Information Circle Style', 'elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $repeater->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'box_background', 'label' => __( 'Box Background', 'elementor' ), 'types' => [ 'classic', 'gradient' ], 'selector' => '', ] ); $repeater->end_controls_tab(); $repeater->start_controls_tab( 'form_fields_advanced_tab', [ 'label' => __( 'Image / Icon', 'elementor' ), ]); $repeater->add_control( 'circle_type', [ 'label' => __( 'Round Type', 'elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ 'icon' => __( 'Icon', 'elementor' ), 'image' => __( 'Image', 'elementor' ), ], 'default' => 'image', ] ); $repeater->add_control( 'icon_design', [ 'label' => __( 'Icon', 'elementor' ), 'type' => Controls_Manager::ICON, 'default' => 'fa fa-star', 'condition' => [ 'circle_type' => 'icon', ], ] ); $repeater->add_control( 'image_design', [ 'label' => __( 'Image', 'elementor' ), 'type' => Controls_Manager::MEDIA, 'default' => [ 'url' => Utils::get_placeholder_image_src(), ], 'condition' => [ 'circle_type' => 'image', ], ] ); $repeater->add_control( 'info_icon_size', [ 'label' => __( 'Icon Size', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 80, 'unit' => 'px', ], 'range' => [ 'px' => [ 'min' => 40, 'max' => 300, ], ], 'selectors' => [ '{{WRAPPER}} .pt-info-circle-icon-content .pt-icon-wrap .pt-icon' => 'font-size: {{SIZE}}{{UNIT}};', ], 'condition' => [ 'circle_type' => 'icon', ], ] ); $repeater->add_control( 'icon_colors', [ 'label' => __( 'Icon Colors', 'elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => [ 'circle_type' => 'icon', ], ] ); $repeater->add_control( 'info_icon_color', [ 'label' => __( 'Icon Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '#000', 'scheme' => [ 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_1, ], 'selectors' => [ '{{WRAPPER}} .pt-info-circle-icon-content .pt-icon-wrap .pt-icon i' => 'color: {{VALUE}} !important;', ], 'condition' => [ 'circle_type' => 'icon', ], ] ); $repeater->add_control( 'icon_bg_color', [ 'label' => __( 'Background Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'scheme' => [ 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_1, ], 'selectors' => [ '{{WRAPPER}} .pt-icon-wrap .pt-icon i' => 'background: {{VALUE}};', ], 'condition' => [ 'circle_type' => 'icon', ], ] ); $repeater->add_control( 'active_icon_colors', [ 'label' => __( 'Active Icon Colors', 'elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => [ 'circle_type' => 'icon', ], ] ); $repeater->add_control( 'active_icon_color', [ 'label' => __( 'Active Icon Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'scheme' => [ 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_1, ], 'selectors' => [ '{{WRAPPER}} .pt-info-circle-icon-content.active .pt-icon i' => 'color: {{VALUE}};', ], 'condition' => [ 'circle_type' => 'icon', ], ] ); $repeater->add_control( 'active_icon_bg_color', [ 'label' => __( 'Background Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'scheme' => [ 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_1, ], 'selectors' => [ '{{WRAPPER}} .pt-info-circle-icon-content.active .pt-icon-wrap .pt-icon i' => 'background: {{VALUE}};', ], 'condition' => [ 'circle_type' => 'icon', ], ] ); $repeater->add_responsive_control( 'pt_main_image_width', [ 'label' => esc_html__( 'Image Size', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 80, 'unit' => 'px', ], 'range' => [ '%' => [ 'min' => 0, 'max' => 100, ], 'px' => [ 'min' => 0, 'max' => 1000, ], ], 'size_units' => [ '%', 'px' ], 'selectors' => [ '{{WRAPPER}} .pt-image-content img' => 'width:{{SIZE}}{{UNIT}};height:{{SIZE}}{{UNIT}};', ], 'condition' => [ 'circle_type' => 'image', ], ] ); $repeater->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'pt_thumbnail_image_border', 'label' => esc_html__( 'Border', 'elementor' ), 'selector' => '{{WRAPPER}} .pt-image-content img,.pt-icon-wrap .pt-icon i', ] ); $repeater->end_controls_tab(); $repeater->end_controls_tabs(); $this->start_controls_section( 'section_form_fields', [ 'label' => __( 'Info Circle Items', 'elementor' ), ] ); $this->add_control( 'add_circle_item', [ 'type' => Controls_Manager::REPEATER, 'fields' => array_values( $repeater->get_controls() ), 'default' => [ [ 'title' => __( 'Info Circle Item', 'elementor' ), 'item_description' => __( 'I am item content. Click edit button to change this text.', 'elementor' ), ], ], 'title_field' => '{{{ title }}}', ] ); $this->end_controls_section(); $this->start_controls_section( 'pt_section_info_circle_height', [ 'label' => esc_html__( 'Info Circle Height', 'elementor' ), ] ); $this->add_responsive_control( 'pt_main_circle_height', [ 'label' => esc_html__( 'Main Circle Height', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 768, 'unit' => 'px', ], 'range' => [ '%' => [ 'min' => 0, 'max' => 1000, ], 'px' => [ 'min' => 0, 'max' => 1500, ], ], 'size_units' => [ '%', 'px' ], 'selectors' => [ '{{WRAPPER}} .pt-info-circle-wrap' => 'height:{{SIZE}}{{UNIT}};', ], ] ); $this->end_controls_section(); $this->start_controls_section( 'section-general-autoplay-style', [ 'label' => __( 'General', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'autoplay', [ 'label' => __( 'Autoplay', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => __( 'Yes', 'elementor' ), 'label_off' => __( 'No', 'elementor' ), 'return_value' => 'yes', 'default' => 'no', ] ); $this->add_control( 'autoplay_interval', [ 'label' => __( 'Autoplay Interval', 'elementor' ), 'type' => Controls_Manager::TEXT, 'default' => __( '10', 'elementor' ), 'placeholder' => __( '15 sec(s)', 'elementor' ), 'condition' => [ 'autoplay' => 'yes', ], ] ); $this->add_control( 'hover_animation', [ 'label' => __( 'Animation of Thumbnails when Page Loads', 'elementor' ), 'type' => Controls_Manager::ANIMATION, ] ); $this->add_control( 'active_hover_animation', [ 'label' => __( 'Animation of Active Thumbnail', 'elementor' ), 'type' => Controls_Manager::ANIMATION, 'default' => 'none', 'selector' => '{{WRAPPER}} .pt-info-circle-icon-content.active .pt-image-content img, .pt-info-circle-icon-content.active .pt-icon-wrap .pt-icon i', ] ); $this->end_controls_section(); $this->start_controls_section( 'pt_section_thumbnail_image_styles', [ 'label' => esc_html__( 'Thumbnail Styles', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'pt_thumbnail_image_rounded', [ 'label' => __( 'Rounded Image?', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'thumbnail-avatar-rounded', 'label_on' => __( 'Show', 'elementor' ), 'label_off' => __( 'Hide', 'elementor' ), 'return_value' => 'thumbnail-avatar-rounded', ] ); $this->add_control( 'pt_thumbnail_image_border_radius', [ 'label' => esc_html__( 'Border Radius', 'elementor' ), 'type' => Controls_Manager::DIMENSIONS, 'selectors' => [ '{{WRAPPER}} .pt-thumbnail-image img' => 'border-radius: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;', ], 'condition' => [ 'pt_thumbnail_image_rounded' => 'thumbnail-avatar-not-rounded', ], ] ); $this->add_responsive_control( 'thumbnail_border_radius', [ 'label' => __( 'Custom Border Radius', 'elementor' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{WRAPPER}} .pt-image-crop-circle .pt-image-content img, {{WRAPPER}} .pt-icon-wrap .pt-icon i' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->end_controls_section(); $this->start_controls_section( 'section_connector', [ 'label' => __( 'Connector', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'connector_border', 'label' => __( 'Image Border', 'elementor' ), 'placeholder' => '1px', 'default' => '1px', 'selector' => '{{WRAPPER}} .pt-info-circle-wrap::before', 'separator' => 'before', ] ); $this->end_controls_section(); $this->start_controls_section( 'section_info_circle_bg', [ 'label' => __( 'Info Circle Style', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'info_circle_box_background', 'label' => __( 'Box Background', 'elementor' ), 'types' => [ 'classic', 'gradient' ], 'selector' => '{{WRAPPER}} .pt-info-circle-out', ] ); $this->add_control( 'heading_title', [ 'label' => __( 'Title', 'elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'title_size', [ 'label' => __( 'HTML Tag', 'elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ 'h1' => __( 'H1', 'elementor' ), 'h2' => __( 'H2', 'elementor' ), 'h3' => __( 'H3', 'elementor' ), 'h4' => __( 'H4', 'elementor' ), 'h5' => __( 'H5', 'elementor' ), 'h6' => __( 'H6', 'elementor' ), ], 'default' => 'h3', ] ); $this->add_control( 'hover_title_color', [ 'label' => __( 'Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .pt-info-circle-title' => 'color: {{VALUE}};', ], 'scheme' => [ 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_2, ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'title_typography', 'selector' => '{{WRAPPER}} .pt-info-circle-title', 'scheme' => Scheme_Typography::TYPOGRAPHY_2, ] ); $this->add_control( 'heading_description', [ 'label' => __( 'Description', 'elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'hover_description_color', [ 'label' => __( 'Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .pt-info-circle-desc' => 'color: {{VALUE}};', ], 'scheme' => [ 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_3, ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'description_typography', 'selector' => '{{WRAPPER}} .pt-info-circle-desc', 'scheme' => Scheme_Typography::TYPOGRAPHY_3, ] ); $this->end_controls_section(); $this->start_controls_section( 'section-action-button-style', [ 'label' => __( 'Action Button', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'action_text', [ 'label' => __( 'Button Text', 'elementor' ), 'type' => Controls_Manager::TEXT, 'placeholder' => __( 'Read More', 'elementor' ), 'default' => __( 'Read More', 'elementor' ), ] ); $this->add_control( 'button_text_color', [ 'label' => __( 'Text Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '#fff', 'selectors' => [ '{{WRAPPER}} .pt-info-circle-cta .pt-infoc-link' => 'color: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'typography', 'label' => __( 'Typography', 'elementor' ), 'scheme' => Scheme_Typography::TYPOGRAPHY_4, 'selector' => '{{WRAPPER}} .pt-info-circle-cta .pt-infoc-link', ] ); $this->add_control( 'background_color', [ 'label' => __( 'Background Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'scheme' => [ 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_4, ], 'default' => '#d8d8d8', 'selectors' => [ '{{WRAPPER}} .pt-info-circle-content .pt-info-circle-cta .pt-infoc-link' => 'background-color: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'border', 'label' => __( 'Border', 'elementor' ), 'placeholder' => '1px', 'default' => '1px', 'selector' => '{{WRAPPER}} .pt-info-circle-cta .pt-infoc-link', ] ); $this->add_control( 'border_radius', [ 'label' => __( 'Border Radius', 'elementor' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{WRAPPER}} .pt-info-circle-cta .pt-infoc-link' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_control( 'text_padding', [ 'label' => __( 'Text Padding', 'elementor' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', 'em', '%' ], 'selectors' => [ '{{WRAPPER}} .pt-info-circle-cta .pt-infoc-link' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->end_controls_section(); } /** * Define our Content Render settings. */ protected function render() { $settings = $this->get_settings(); $circle_item_count = 0; $settings['first_thumb_pos'] = 0; $total_circle = count( $settings['add_circle_item'] ); $angle_init = trim( $settings['first_thumb_pos'] ) > 0 ? $settings['first_thumb_pos'] : 0; $angle_gap = 360 / $total_circle; $pt_action_text = ! empty( $settings['action_text'] ) ? $settings['action_text'] : ''; ?>
data-active-animation="">
get_settings( 'pt_thumbnail_image_rounded' ); $this->add_render_attribute( 'hoverlink', 'class', 'link' ); if ( ! empty( $item['link']['url'] ) ) { $this->add_render_attribute( 'hoverlink', 'href', $item['link']['url'] ); if ( ! empty( $item['link']['is_external'] ) ) { $this->add_render_attribute( 'hoverlink', 'target', '_blank' ); } } /* inner wise css */ $boxbgbg = $item['box_background_background']; $bbgco = $item['box_background_color']; $bbgcou = $item['box_background_color_stop']['unit']; $bbgcos = $item['box_background_color_stop']['size']; $bbgcob = $item['box_background_color_b']; $bbgcobstop = $item['box_background_color_b_stop']['size']; $bbgcobstops = $item['box_background_color_b_stop']['unit']; $bbggrty = $item['box_background_gradient_type']; $bbggran = $item['box_background_gradient_angle']['size']; $bbggranu = $item['box_background_gradient_angle']['unit']; $bbggrpo = $item['box_background_gradient_position']; $bbgimage = $item['box_background_image']['url']; $bbgpo = $item['box_background_position']; $bbgat = $item['box_background_attachment']; $bbgre = $item['box_background_repeat']; $bbgsi = $item['box_background_size']; $bbgvlink = $item['box_background_video_link']; $bbgvfail = $item['box_background_video_fallback']['url']; ?>
get_render_attribute_string( 'hoverlink' ); ?>>
style="background-color: ; background-image: url(''); background-position: ; background-repeat: ; background-size: ; background-attachment: ; display:block; " style="background-image: linear-gradient(, , ); display:block; ">
'; ?> '; ?>
get_render_attribute_string( 'hoverlink' ); ?>>