View file File name : icon-box.php Content :<?php namespace Elementor; if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly. } use Elementor\Core\Kits\Documents\Tabs\Global_Colors; use Elementor\Core\Kits\Documents\Tabs\Global_Typography; /** * Elementor icon box widget. * * Elementor widget that displays an icon, a headline and a text. * * @since 1.0.0 */ class Widget_Icon_Box extends Widget_Base { /** * Get widget name. * * Retrieve icon box widget name. * * @since 1.0.0 * @access public * * @return string Widget name. */ public function get_name() { return 'icon-box'; } /** * Get widget title. * * Retrieve icon box widget title. * * @since 1.0.0 * @access public * * @return string Widget title. */ public function get_title() { return esc_html__( 'Icon Box', 'elementor' ); } /** * Get widget icon. * * Retrieve icon box widget icon. * * @since 1.0.0 * @access public * * @return string Widget icon. */ public function get_icon() { return 'eicon-icon-box'; } /** * Get widget keywords. * * Retrieve the list of keywords the widget belongs to. * * @since 2.1.0 * @access public * * @return array Widget keywords. */ public function get_keywords() { return [ 'icon box', 'icon' ]; } protected function is_dynamic_content(): bool { return false; } /** * Get style dependencies. * * Retrieve the list of style dependencies the widget requires. * * @since 3.24.0 * @access public * * @return array Widget style dependencies. */ public function get_style_depends(): array { return [ 'widget-icon-box' ]; } /** * Register icon box 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->start_controls_section( 'section_icon', [ 'label' => esc_html__( 'Icon Box', 'elementor' ), ] ); $this->add_control( 'selected_icon', [ 'label' => esc_html__( 'Icon', 'elementor' ), 'type' => Controls_Manager::ICONS, 'fa4compatibility' => 'icon', 'default' => [ 'value' => 'fas fa-star', 'library' => 'fa-solid', ], ] ); $this->add_control( 'view', [ 'label' => esc_html__( 'View', 'elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ 'default' => esc_html__( 'Default', 'elementor' ), 'stacked' => esc_html__( 'Stacked', 'elementor' ), 'framed' => esc_html__( 'Framed', 'elementor' ), ], 'default' => 'default', 'prefix_class' => 'elementor-view-', 'condition' => [ 'selected_icon[value]!' => '', ], ] ); $this->add_control( 'shape', [ 'label' => esc_html__( 'Shape', 'elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ 'square' => esc_html__( 'Square', 'elementor' ), 'rounded' => esc_html__( 'Rounded', 'elementor' ), 'circle' => esc_html__( 'Circle', 'elementor' ), ], 'default' => 'circle', 'condition' => [ 'view!' => 'default', 'selected_icon[value]!' => '', ], 'prefix_class' => 'elementor-shape-', ] ); $this->add_control( 'title_text', [ 'label' => esc_html__( 'Title', 'elementor' ), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, ], 'default' => esc_html__( 'This is the heading', 'elementor' ), 'placeholder' => esc_html__( 'Enter your title', 'elementor' ), 'label_block' => true, ] ); $this->add_control( 'description_text', [ 'label' => esc_html__( 'Description', 'elementor' ), 'type' => Controls_Manager::TEXTAREA, 'dynamic' => [ 'active' => true, ], 'default' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ), 'placeholder' => esc_html__( 'Enter your description', 'elementor' ), 'rows' => 10, ] ); $this->add_control( 'link', [ 'label' => esc_html__( 'Link', 'elementor' ), 'type' => Controls_Manager::URL, 'dynamic' => [ 'active' => true, ], 'separator' => 'before', ] ); $this->add_control( 'title_size', [ 'label' => esc_html__( 'Title HTML Tag', 'elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ 'h1' => 'H1', 'h2' => 'H2', 'h3' => 'H3', 'h4' => 'H4', 'h5' => 'H5', 'h6' => 'H6', 'div' => 'div', 'span' => 'span', 'p' => 'p', ], 'default' => 'h3', ] ); $this->end_controls_section(); $this->start_controls_section( 'section_style_box', [ 'label' => esc_html__( 'Box', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_responsive_control( 'position', [ 'label' => esc_html__( 'Icon Position', 'elementor' ), 'type' => Controls_Manager::CHOOSE, 'default' => 'top', 'mobile_default' => 'top', 'options' => [ 'left' => [ 'title' => esc_html__( 'Left', 'elementor' ), 'icon' => 'eicon-h-align-left', ], 'top' => [ 'title' => esc_html__( 'Top', 'elementor' ), 'icon' => 'eicon-v-align-top', ], 'right' => [ 'title' => esc_html__( 'Right', 'elementor' ), 'icon' => 'eicon-h-align-right', ], ], 'prefix_class' => 'elementor%s-position-', 'condition' => [ 'selected_icon[value]!' => '', ], ] ); $this->add_responsive_control( 'content_vertical_alignment', [ 'label' => esc_html__( 'Vertical Alignment', 'elementor' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'top' => [ 'title' => esc_html__( 'Top', 'elementor' ), 'icon' => 'eicon-v-align-top', ], 'middle' => [ 'title' => esc_html__( 'Middle', 'elementor' ), 'icon' => 'eicon-v-align-middle', ], 'bottom' => [ 'title' => esc_html__( 'Bottom', 'elementor' ), 'icon' => 'eicon-v-align-bottom', ], ], 'default' => 'top', 'toggle' => false, 'prefix_class' => 'elementor-vertical-align-', 'condition' => [ 'position!' => 'top', ], ] ); $this->add_responsive_control( 'text_align', [ 'label' => esc_html__( 'Alignment', 'elementor' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'left' => [ 'title' => esc_html__( 'Left', 'elementor' ), 'icon' => 'eicon-text-align-left', ], 'center' => [ 'title' => esc_html__( 'Center', 'elementor' ), 'icon' => 'eicon-text-align-center', ], 'right' => [ 'title' => esc_html__( 'Right', 'elementor' ), 'icon' => 'eicon-text-align-right', ], 'justify' => [ 'title' => esc_html__( 'Justified', 'elementor' ), 'icon' => 'eicon-text-align-justify', ], ], 'selectors' => [ '{{WRAPPER}} .elementor-icon-box-wrapper' => 'text-align: {{VALUE}};', ], 'separator' => 'after', ] ); $this->add_responsive_control( 'icon_space', [ 'label' => esc_html__( 'Icon Spacing', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], 'default' => [ 'size' => 15, ], 'range' => [ 'px' => [ 'max' => 100, ], 'em' => [ 'max' => 10, ], 'rem' => [ 'max' => 10, ], ], 'selectors' => [ '{{WRAPPER}}' => '--icon-box-icon-margin: {{SIZE}}{{UNIT}}', ], 'condition' => [ 'selected_icon[value]!' => '', ], ] ); $this->add_responsive_control( 'title_bottom_space', [ 'label' => esc_html__( 'Content Spacing', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', 'em', 'rem', 'custom' ], 'range' => [ 'px' => [ 'max' => 100, ], 'em' => [ 'min' => 0, 'max' => 10, ], 'rem' => [ 'min' => 0, 'max' => 10, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-icon-box-title' => 'margin-bottom: {{SIZE}}{{UNIT}};', ], ] ); $this->end_controls_section(); $this->start_controls_section( 'section_style_icon', [ 'label' => esc_html__( 'Icon', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'selected_icon[value]!' => '', ], ] ); $this->start_controls_tabs( 'icon_colors' ); $this->start_controls_tab( 'icon_colors_normal', [ 'label' => esc_html__( 'Normal', 'elementor' ), ] ); $this->add_control( 'primary_color', [ 'label' => esc_html__( 'Primary Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'global' => [ 'default' => Global_Colors::COLOR_PRIMARY, ], 'default' => '', 'selectors' => [ '{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'background-color: {{VALUE}};', '{{WRAPPER}}.elementor-view-framed .elementor-icon, {{WRAPPER}}.elementor-view-default .elementor-icon' => 'fill: {{VALUE}}; color: {{VALUE}}; border-color: {{VALUE}};', ], ] ); $this->add_control( 'secondary_color', [ 'label' => esc_html__( 'Secondary Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'condition' => [ 'view!' => 'default', ], 'selectors' => [ '{{WRAPPER}}.elementor-view-framed .elementor-icon' => 'background-color: {{VALUE}};', '{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'fill: {{VALUE}}; color: {{VALUE}};', ], ] ); $this->end_controls_tab(); $this->start_controls_tab( 'icon_colors_hover', [ 'label' => esc_html__( 'Hover', 'elementor' ), ] ); $this->add_control( 'hover_primary_color', [ 'label' => esc_html__( 'Primary Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'background-color: {{VALUE}};', '{{WRAPPER}}.elementor-view-framed .elementor-icon:hover, {{WRAPPER}}.elementor-view-default .elementor-icon:hover' => 'fill: {{VALUE}}; color: {{VALUE}}; border-color: {{VALUE}};', ], ] ); $this->add_control( 'hover_secondary_color', [ 'label' => esc_html__( 'Secondary Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'condition' => [ 'view!' => 'default', ], 'selectors' => [ '{{WRAPPER}}.elementor-view-framed .elementor-icon:hover' => 'background-color: {{VALUE}};', '{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'fill: {{VALUE}}; color: {{VALUE}};', ], ] ); $this->add_control( 'hover_animation', [ 'label' => esc_html__( 'Hover Animation', 'elementor' ), 'type' => Controls_Manager::HOVER_ANIMATION, ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->add_responsive_control( 'icon_size', [ 'label' => esc_html__( 'Size', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], 'range' => [ 'px' => [ 'min' => 6, 'max' => 300, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-icon' => 'font-size: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'icon_padding', [ 'label' => esc_html__( 'Padding', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], 'selectors' => [ '{{WRAPPER}} .elementor-icon' => 'padding: {{SIZE}}{{UNIT}};', ], 'range' => [ 'px' => [ 'max' => 50, ], 'em' => [ 'min' => 0, 'max' => 5, ], 'rem' => [ 'min' => 0, 'max' => 5, ], ], 'condition' => [ 'view!' => 'default', ], ] ); $active_breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints(); $rotate_device_args = []; $rotate_device_settings = [ 'default' => [ 'unit' => 'deg', ], ]; foreach ( $active_breakpoints as $breakpoint_name => $breakpoint ) { $rotate_device_args[ $breakpoint_name ] = $rotate_device_settings; } $this->add_responsive_control( 'rotate', [ 'label' => esc_html__( 'Rotate', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'deg', 'grad', 'rad', 'turn', 'custom' ], 'default' => [ 'unit' => 'deg', ], 'tablet_default' => [ 'unit' => 'deg', ], 'mobile_default' => [ 'unit' => 'deg', ], 'device_args' => $rotate_device_args, 'selectors' => [ '{{WRAPPER}} .elementor-icon i' => 'transform: rotate({{SIZE}}{{UNIT}});', ], ] ); $this->add_responsive_control( 'border_width', [ 'label' => esc_html__( 'Border Width', 'elementor' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], 'selectors' => [ '{{WRAPPER}} .elementor-icon' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], 'condition' => [ 'view' => 'framed', ], ] ); $this->add_responsive_control( 'border_radius', [ 'label' => esc_html__( 'Border Radius', 'elementor' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ], 'selectors' => [ '{{WRAPPER}} .elementor-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], 'condition' => [ 'view!' => 'default', ], 'separator' => 'before', ] ); $this->end_controls_section(); $this->start_controls_section( 'section_style_content', [ 'label' => esc_html__( 'Content', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'heading_title', [ 'label' => esc_html__( 'Title', 'elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'title_color', [ 'label' => esc_html__( 'Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .elementor-icon-box-title' => 'color: {{VALUE}};', ], 'global' => [ 'default' => Global_Colors::COLOR_PRIMARY, ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'title_typography', 'selector' => '{{WRAPPER}} .elementor-icon-box-title, {{WRAPPER}} .elementor-icon-box-title a', 'global' => [ 'default' => Global_Typography::TYPOGRAPHY_PRIMARY, ], ] ); $this->add_group_control( Group_Control_Text_Stroke::get_type(), [ 'name' => 'text_stroke', 'selector' => '{{WRAPPER}} .elementor-icon-box-title', ] ); $this->add_group_control( Group_Control_Text_Shadow::get_type(), [ 'name' => 'title_shadow', 'selector' => '{{WRAPPER}} .elementor-icon-box-title', ] ); $this->add_control( 'heading_description', [ 'label' => esc_html__( 'Description', 'elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'description_color', [ 'label' => esc_html__( 'Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .elementor-icon-box-description' => 'color: {{VALUE}};', ], 'global' => [ 'default' => Global_Colors::COLOR_TEXT, ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'description_typography', 'selector' => '{{WRAPPER}} .elementor-icon-box-description', 'global' => [ 'default' => Global_Typography::TYPOGRAPHY_TEXT, ], ] ); $this->add_group_control( Group_Control_Text_Shadow::get_type(), [ 'name' => 'description_shadow', 'selector' => '{{WRAPPER}} .elementor-icon-box-description', ] ); $this->end_controls_section(); } /** * Render icon box 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(); $has_link = ! empty( $settings['link']['url'] ); $html_tag = $has_link ? 'a' : 'span'; $this->add_render_attribute( 'icon', 'class', [ 'elementor-icon', 'elementor-animation-' . $settings['hover_animation'] ] ); $has_icon = ! empty( $settings['selected_icon']['value'] ); $has_content = ! Utils::is_empty( $settings['title_text'] ) || ! Utils::is_empty( $settings['description_text'] ); if ( ! $has_icon && ! $has_content ) { return; } if ( $has_link ) { $this->add_link_attributes( 'link', $settings['link'] ); $this->add_render_attribute( 'icon', 'tabindex', '-1' ); } if ( ! isset( $settings['icon'] ) && ! Icons_Manager::is_migration_allowed() ) { // add old default $settings['icon'] = 'fa fa-star'; } if ( ! empty( $settings['icon'] ) ) { $this->add_render_attribute( 'i', 'class', $settings['icon'] ); $this->add_render_attribute( 'i', 'aria-hidden', 'true' ); } $this->add_render_attribute( 'description_text', 'class', 'elementor-icon-box-description' ); $this->add_inline_editing_attributes( 'title_text', 'none' ); $this->add_inline_editing_attributes( 'description_text' ); $migrated = isset( $settings['__fa4_migrated']['selected_icon'] ); $is_new = ! isset( $settings['icon'] ) && Icons_Manager::is_migration_allowed(); ?> <div class="elementor-icon-box-wrapper"> <?php if ( $has_icon ) : ?> <div class="elementor-icon-box-icon"> <<?php Utils::print_validated_html_tag( $html_tag ); ?> <?php $this->print_render_attribute_string( 'link' ); ?> <?php $this->print_render_attribute_string( 'icon' ); ?>> <?php if ( $is_new || $migrated ) { Icons_Manager::render_icon( $settings['selected_icon'], [ 'aria-hidden' => 'true' ] ); } elseif ( ! empty( $settings['icon'] ) ) { ?><i <?php $this->print_render_attribute_string( 'i' ); ?>></i><?php } ?> </<?php Utils::print_validated_html_tag( $html_tag ); ?>> </div> <?php endif; ?> <?php if ( $has_content ) : ?> <div class="elementor-icon-box-content"> <?php if ( ! Utils::is_empty( $settings['title_text'] ) ) : ?> <<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?> class="elementor-icon-box-title"> <<?php Utils::print_validated_html_tag( $html_tag ); ?> <?php $this->print_render_attribute_string( 'link' ); ?> <?php $this->print_render_attribute_string( 'title_text' ); ?>> <?php $this->print_unescaped_setting( 'title_text' ); ?> </<?php Utils::print_validated_html_tag( $html_tag ); ?>> </<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?>> <?php endif; ?> <?php if ( ! Utils::is_empty( $settings['description_text'] ) ) : ?> <p <?php $this->print_render_attribute_string( 'description_text' ); ?>> <?php $this->print_unescaped_setting( 'description_text' ); ?> </p> <?php endif; ?> </div> <?php endif; ?> </div> <?php } /** * Render icon box widget output in the editor. * * Written as a Backbone JavaScript template and used to generate the live preview. * * @since 2.9.0 * @access protected */ protected function content_template() { ?> <# // For older version `settings.icon` is needed. var hasIcon = settings.icon || settings.selected_icon.value; var hasContent = settings.title_text || settings.description_text; if ( ! hasIcon && ! hasContent ) { return; } var hasLink = settings.link.url, htmlTag = hasLink ? 'a' : 'span', iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, { 'aria-hidden': true }, 'i' , 'object' ), migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' ), titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size ); view.addRenderAttribute( 'icon', 'class', 'elementor-icon elementor-animation-' + settings.hover_animation ); if ( hasLink ) { view.addRenderAttribute( 'link', 'href', elementor.helpers.sanitizeUrl( settings.link.url ) ); view.addRenderAttribute( 'icon', 'tabindex', '-1' ); } view.addRenderAttribute( 'description_text', 'class', 'elementor-icon-box-description' ); view.addInlineEditingAttributes( 'title_text', 'none' ); view.addInlineEditingAttributes( 'description_text' ); #> <div class="elementor-icon-box-wrapper"> <# if ( hasIcon ) { #> <div class="elementor-icon-box-icon"> <{{{ htmlTag }}} {{{ view.getRenderAttributeString( 'link' ) }}} {{{ view.getRenderAttributeString( 'icon' ) }}}> <# if ( iconHTML && iconHTML.rendered && ( ! settings.icon || migrated ) ) { #> {{{ elementor.helpers.sanitize( iconHTML.value ) }}} <# } else { #> <i class="{{ _.escape( settings.icon ) }}" aria-hidden="true"></i> <# } #> </{{{ htmlTag }}}> </div> <# } #> <# if ( hasContent ) { #> <div class="elementor-icon-box-content"> <# if ( settings.title_text ) { #> <{{{ titleSizeTag }}} class="elementor-icon-box-title"> <{{{ htmlTag }}} {{{ view.getRenderAttributeString( 'link' ) }}} {{{ view.getRenderAttributeString( 'title_text' ) }}}> {{{ elementor.helpers.sanitize( settings.title_text ) }}} </{{{ htmlTag }}}> </{{{ titleSizeTag }}}> <# } #> <# if ( settings.description_text ) { #> <p {{{ view.getRenderAttributeString( 'description_text' ) }}}>{{{ elementor.helpers.sanitize( settings.description_text ) }}}</p> <# } #> </div> <# } #> </div> <?php } public function on_import( $element ) { return Icons_Manager::on_import_migration( $element, 'icon', 'selected_icon', true ); } }