Widget_Icon_Box()
Elementor icon box widget.
Description
Elementor widget that displays an icon, a headline and a text.
Changelog
Version | Description |
---|---|
1.0.0 | Introduced. |
Methods
- _content_template — Render icon box widget output in the editor.
- _register_controls — Register icon box widget controls.
- get_categories — Get widget categories.
- get_icon — Get widget icon.
- get_keywords — Get widget keywords.
- get_name — Get widget name.
- get_title — Get widget title.
- render — Render icon box widget output on the frontend.
Source
includes/widgets/icon-box.php
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 __( '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 categories. * * Retrieve the list of categories the icon box widget belongs to. * * Used to determine where to display the widget in the editor. * * @since 1.0.0 * @access public * * @return array Widget categories. */ public function get_categories() { return [ 'general-elements' ]; } /** * Register icon box 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() { $this->start_controls_section( 'section_icon', [ 'label' => __( 'Icon Box', 'elementor' ), ] ); $this->add_control( 'view', [ 'label' => __( 'View', 'elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ 'default' => __( 'Default', 'elementor' ), 'stacked' => __( 'Stacked', 'elementor' ), 'framed' => __( 'Framed', 'elementor' ), ], 'default' => 'default', 'prefix_class' => 'elementor-view-', ] ); $this->add_control( 'icon', [ 'label' => __( 'Choose Icon', 'elementor' ), 'type' => Controls_Manager::ICON, 'default' => 'fa fa-star', ] ); $this->add_control( 'shape', [ 'label' => __( 'Shape', 'elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ 'circle' => __( 'Circle', 'elementor' ), 'square' => __( 'Square', 'elementor' ), ], 'default' => 'circle', 'condition' => [ 'view!' => 'default', ], 'prefix_class' => 'elementor-shape-', ] ); $this->add_control( 'title_text', [ 'label' => __( 'Title & Description', 'elementor' ), 'type' => Controls_Manager::TEXT, 'default' => __( 'This is the heading', 'elementor' ), 'placeholder' => __( 'Your Title', 'elementor' ), 'label_block' => true, ] ); $this->add_control( 'description_text', [ 'label' => '', 'type' => Controls_Manager::TEXTAREA, 'default' => __( 'Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ), 'placeholder' => __( 'Your Description', 'elementor' ), 'title' => __( 'Input icon text here', 'elementor' ), 'rows' => 10, 'separator' => 'none', 'show_label' => false, ] ); $this->add_control( 'link', [ 'label' => __( 'Link to', 'elementor' ), 'type' => Controls_Manager::URL, 'placeholder' => __( 'http://your-link.com', 'elementor' ), 'separator' => 'before', ] ); $this->add_control( 'position', [ 'label' => __( 'Icon Position', 'elementor' ), 'type' => Controls_Manager::CHOOSE, 'default' => 'top', 'options' => [ 'left' => [ 'title' => __( 'Left', 'elementor' ), 'icon' => 'fa fa-align-left', ], 'top' => [ 'title' => __( 'Top', 'elementor' ), 'icon' => 'fa fa-align-center', ], 'right' => [ 'title' => __( 'Right', 'elementor' ), 'icon' => 'fa fa-align-right', ], ], 'prefix_class' => 'elementor-position-', 'toggle' => false, ] ); $this->add_control( 'title_size', [ 'label' => __( 'Title 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' ), 'div' => __( 'div', 'elementor' ), 'span' => __( 'span', 'elementor' ), 'p' => __( 'p', 'elementor' ), ], 'default' => 'h3', ] ); $this->end_controls_section(); $this->start_controls_section( 'section_style_icon', [ 'label' => __( 'Icon', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'primary_color', [ 'label' => __( 'Primary Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'scheme' => [ 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_1, ], 'default' => '', 'selectors' => [ '{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'background-color: {{VALUE}};', '{{WRAPPER}}.elementor-view-framed .elementor-icon, {{WRAPPER}}.elementor-view-default .elementor-icon' => 'color: {{VALUE}}; border-color: {{VALUE}};', ], ] ); $this->add_control( 'secondary_color', [ 'label' => __( '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' => 'color: {{VALUE}};', ], ] ); $this->add_responsive_control( 'icon_space', [ 'label' => __( 'Spacing', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 15, ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}}.elementor-position-right .elementor-icon-box-icon' => 'margin-left: {{SIZE}}{{UNIT}};', '{{WRAPPER}}.elementor-position-left .elementor-icon-box-icon' => 'margin-right: {{SIZE}}{{UNIT}};', '{{WRAPPER}}.elementor-position-top .elementor-icon-box-icon' => 'margin-bottom: {{SIZE}}{{UNIT}};', '(mobile){{WRAPPER}} .elementor-icon-box-icon' => 'margin-bottom: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'icon_size', [ 'label' => __( 'Size', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 6, 'max' => 300, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-icon' => 'font-size: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'icon_padding', [ 'label' => __( 'Padding', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'selectors' => [ '{{WRAPPER}} .elementor-icon' => 'padding: {{SIZE}}{{UNIT}};', ], 'range' => [ 'em' => [ 'min' => 0, 'max' => 5, ], ], 'condition' => [ 'view!' => 'default', ], ] ); $this->add_control( 'rotate', [ 'label' => __( 'Rotate', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 0, 'unit' => 'deg', ], 'selectors' => [ '{{WRAPPER}} .elementor-icon i' => 'transform: rotate({{SIZE}}{{UNIT}});', ], ] ); $this->add_control( 'border_width', [ 'label' => __( 'Border Width', 'elementor' ), 'type' => Controls_Manager::DIMENSIONS, 'selectors' => [ '{{WRAPPER}} .elementor-icon' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], 'condition' => [ 'view' => 'framed', ], ] ); $this->add_control( 'border_radius', [ 'label' => __( 'Border Radius', 'elementor' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{WRAPPER}} .elementor-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], 'condition' => [ 'view!' => 'default', ], ] ); $this->end_controls_section(); $this->start_controls_section( 'section_hover', [ 'label' => __( 'Icon Hover', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'hover_primary_color', [ 'label' => __( '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' => 'color: {{VALUE}}; border-color: {{VALUE}};', ], ] ); $this->add_control( 'hover_secondary_color', [ 'label' => __( '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' => 'color: {{VALUE}};', ], ] ); $this->add_control( 'hover_animation', [ 'label' => __( 'Animation', 'elementor' ), 'type' => Controls_Manager::HOVER_ANIMATION, ] ); $this->end_controls_section(); $this->start_controls_section( 'section_style_content', [ 'label' => __( 'Content', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_responsive_control( 'text_align', [ 'label' => __( 'Alignment', 'elementor' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'left' => [ 'title' => __( 'Left', 'elementor' ), 'icon' => 'fa fa-align-left', ], 'center' => [ 'title' => __( 'Center', 'elementor' ), 'icon' => 'fa fa-align-center', ], 'right' => [ 'title' => __( 'Right', 'elementor' ), 'icon' => 'fa fa-align-right', ], 'justify' => [ 'title' => __( 'Justified', 'elementor' ), 'icon' => 'fa fa-align-justify', ], ], 'selectors' => [ '{{WRAPPER}} .elementor-icon-box-wrapper' => 'text-align: {{VALUE}};', ], ] ); $this->add_control( 'content_vertical_alignment', [ 'label' => __( 'Vertical Alignment', 'elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ 'top' => __( 'Top', 'elementor' ), 'middle' => __( 'Middle', 'elementor' ), 'bottom' => __( 'Bottom', 'elementor' ), ], 'default' => 'top', 'prefix_class' => 'elementor-vertical-align-', ] ); $this->add_control( 'heading_title', [ 'label' => __( 'Title', 'elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_responsive_control( 'title_bottom_space', [ 'label' => __( 'Spacing', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-icon-box-title' => 'margin-bottom: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'title_color', [ 'label' => __( 'Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .elementor-icon-box-content .elementor-icon-box-title' => 'color: {{VALUE}};', ], 'scheme' => [ 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_1, ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'title_typography', 'selector' => '{{WRAPPER}} .elementor-icon-box-content .elementor-icon-box-title', 'scheme' => Scheme_Typography::TYPOGRAPHY_1, ] ); $this->add_control( 'heading_description', [ 'label' => __( 'Description', 'elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'description_color', [ 'label' => __( 'Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .elementor-icon-box-content .elementor-icon-box-description' => '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}} .elementor-icon-box-content .elementor-icon-box-description', 'scheme' => Scheme_Typography::TYPOGRAPHY_3, ] ); $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(); $this->add_render_attribute( 'icon', 'class', [ 'elementor-icon', 'elementor-animation-' . $settings['hover_animation'] ] ); $icon_tag = 'span'; if ( ! empty( $settings['link']['url'] ) ) { $this->add_render_attribute( 'link', 'href', $settings['link']['url'] ); $icon_tag = 'a'; if ( $settings['link']['is_external'] ) { $this->add_render_attribute( 'link', 'target', '_blank' ); } if ( $settings['link']['nofollow'] ) { $this->add_render_attribute( 'link', 'rel', 'nofollow' ); } } $this->add_render_attribute( 'i', 'class', $settings['icon'] ); $icon_attributes = $this->get_render_attribute_string( 'icon' ); $link_attributes = $this->get_render_attribute_string( 'link' ); $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' ); ?> <div class="elementor-icon-box-wrapper"> <div class="elementor-icon-box-icon"> <<?php echo implode( ' ', [ $icon_tag, $icon_attributes, $link_attributes ] ); ?>> <i <?php echo $this->get_render_attribute_string( 'i' ); ?>></i> </<?php echo $icon_tag; ?>> </div> <div class="elementor-icon-box-content"> <<?php echo $settings['title_size']; ?> class="elementor-icon-box-title"> <<?php echo implode( ' ', [ $icon_tag, $link_attributes ] ); ?> <?php echo $this->get_render_attribute_string( 'title_text' ); ?>><?php echo $settings['title_text']; ?></<?php echo $icon_tag; ?>> </<?php echo $settings['title_size']; ?>> <p <?php echo $this->get_render_attribute_string( 'description_text' ); ?>><?php echo $settings['description_text']; ?></p> </div> </div> <?php } /** * Render icon box widget output in the editor. * * Written as a Backbone JavaScript template and used to generate the live preview. * * @since 1.0.0 * @access protected */ protected function _content_template() { ?> <# var link = settings.link.url ? 'href="' + settings.link.url + '"' : '', iconTag = link ? 'a' : 'span'; view.addRenderAttribute( 'description_text', 'class', 'elementor-icon-box-description' ); view.addInlineEditingAttributes( 'title_text', 'none' ); view.addInlineEditingAttributes( 'description_text' ); #> <div class="elementor-icon-box-wrapper"> <div class="elementor-icon-box-icon"> <{{{ iconTag + ' ' + link }}} class="elementor-icon elementor-animation-{{ settings.hover_animation }}"> <i class="{{ settings.icon }}"></i> </{{{ iconTag }}}> </div> <div class="elementor-icon-box-content"> <{{{ settings.title_size }}} class="elementor-icon-box-title"> <{{{ iconTag + ' ' + link }}} {{{ view.getRenderAttributeString( 'title_text' ) }}}>{{{ settings.title_text }}}</{{{ iconTag }}}> </{{{ settings.title_size }}}> <p {{{ view.getRenderAttributeString( 'description_text' ) }}}>{{{ settings.description_text }}}</p> </div> </div> <?php } }