✏️ Editing: icon-box-2.php Writable

<?php

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Utils;
use Elementor\Group_Control_Border;

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

class nighty_Elementor_Icon_Box_2 extends Widget_Base {

public function get_name() {
		return 'nighty_elementor_icon_box_2';
	}

public function get_title() {
		return esc_html__( 'Ova Icon Box 2', 'nighty' );
	}

public function get_icon() {
		return 'eicon-icon-box';
	}

public function get_categories() {
		return [ 'nighty' ];
	}

public function get_script_depends() {
		return [ '' ];
	}
	
	// Add Your Controll In This Function
	protected function register_controls() {

$this->start_controls_section(
			'section_content',
			[
				'label' => esc_html__( 'Content', 'nighty' ),
			]
		);	
			
			// Add Class control
			$this->add_control(
				'icon',
				[
					'label' => esc_html__( 'Icon', 'nighty' ),
					'type' => \Elementor\Controls_Manager::ICONS,
					'default' => [
						'value' => 'flaticon flaticon-pie-chart',
						'library' => 'all',
					],
					
				]
			);

$this->add_control(
				'title',
				[
					'label' => esc_html__( 'Title', 'nighty' ),
					'type' => \Elementor\Controls_Manager::TEXT,
					'default' => esc_html__( 'Corporate Events', 'nighty' ),
					'placeholder' => esc_html__( 'Type your title here', 'nighty' ),
				]
			);

$this->add_control(
				'description',
				[
					'label' => esc_html__( 'Description', 'nighty' ),
					'type' => \Elementor\Controls_Manager::TEXTAREA,
					'rows' => 10,
					'default' => esc_html__( 'A friendly happy hour, a company holiday party, or an evening of', 'nighty' ),
					'placeholder' => esc_html__( 'Type your description here', 'nighty' ),
				]
			);

$this->add_control(
				'show_button_readmore',
				[
					'label' => esc_html__( 'Show Button', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SWITCHER,
					'label_on' => esc_html__( 'Show', 'nighty' ),
					'label_off' => esc_html__( 'Hide', 'nighty' ),
					'return_value' => 'yes',
					'default' => 'yes',
				]
			);

$this->add_control(
				'icon_button',
				[
					'label' => esc_html__( 'Icon', 'nighty' ),
					'type' => \Elementor\Controls_Manager::ICONS,
					'default' => [
						'value' => 'flaticon flaticon-up-right-arrow',
						'library' => 'all',
					],
					'condition' => [
						'show_button_readmore' => 'yes',
					],
				]
			);

$this->add_control(
				'text_button',
				[
					'label' => esc_html__( 'Text Button', 'nighty' ),
					'type' => \Elementor\Controls_Manager::TEXT,
					'default' => esc_html__( 'Learn More ', 'nighty' ),
					'condition' => [
						'show_button_readmore' => 'yes',
					],
				],
				
			);

$this->add_control(
				'link',
				[
					'label' => esc_html__( 'Link', 'nighty' ),
					'type' => \Elementor\Controls_Manager::URL,
					'placeholder' => esc_html__( 'https://your-link.com', 'nighty' ),
					'options' => [ 'url', 'is_external', 'nofollow' ],
					'default' => [
						'url' => '',
						'is_external' => false,
						'nofollow' => true,
					],
					'dynamic' => [
						'active' => true
					],
					'label_block' => true,
					'condition' => [
						'show_button_readmore' => 'yes',
					],
				]
			);

$this->end_controls_section();

$this->start_controls_section(
		'content_style',
		[
			'label' => esc_html__( 'Content', 'nighty' ),
			'tab' => \Elementor\Controls_Manager::TAB_STYLE,
		]
	);

$this->add_control(
			'triangle_bgcolor',
			[
				'label' => esc_html__( 'Triangle Hover Color', 'nighty' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .ova-icon-box-2:after' => 'background-color: {{VALUE}}',
				],
			]
		);

$this->add_control(
			'content_hover_animation',
			[
				'label' => esc_html__( 'Hover Animation', 'nighty' ),
				'type' => \Elementor\Controls_Manager::HOVER_ANIMATION,
			]
		);

$this->add_control(
			'background_image_box',
			[
				'label'   => esc_html__( 'Box Background Image', 'nighty' ),
				'type'    => \Elementor\Controls_Manager::MEDIA,
				'default' => [
					'url' => \Elementor\Utils::get_placeholder_image_src(),
				],
				'separator' => 'before'
			]
		);

$this->end_controls_section();

$this->start_controls_section(
		'icon_section',
		[
			'label' => esc_html__( 'Icon', 'nighty' ),
			'tab' => \Elementor\Controls_Manager::TAB_STYLE,
		]
	);

$this->add_control(
			'icon_width',
			[
				'label' => esc_html__( 'Size', 'nighty' ),
				'type' => \Elementor\Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 120,
						'step' => 5,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .ova-icon-box-2 .iconbox i:before' => 'font-size: {{SIZE}}{{UNIT}};',
				],
			]
		);

$this->add_control(
			'icon_color',
			[
				'label' => esc_html__( 'Color', 'nighty' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .ova-icon-box-2 .iconbox i' => 'color: {{VALUE}}',
				],
			]
		);

$this->add_control(
			'icon_hover_color',
			[
				'label' => esc_html__( 'Color Hover', 'nighty' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .ova-icon-box-2:hover .iconbox i' => 'color: {{VALUE}}',
				],
			]
		);

$this->end_controls_section();

$this->start_controls_section(
		'content_title',
		[
			'label' => esc_html__( 'Title', 'nighty' ),
			'tab' => \Elementor\Controls_Manager::TAB_STYLE,
		]
	);

$this->start_controls_tabs(
			'title_tabs',
		);

$this->start_controls_tab(
				'title_normal_tab',
				[
					'label' => esc_html__( 'Normal', 'nighty' ),
				]
			);

$this->add_group_control(
					\Elementor\Group_Control_Typography::get_type(),
					[
						'name' => 'title_typography',
						'selector' => '{{WRAPPER}} .ova-icon-box-2 .iconbox .title',
					]
				);

$this->add_control(
					'title_color',
					[
						'label' => esc_html__( 'Color', 'nighty' ),
						'type' => \Elementor\Controls_Manager::COLOR,
						'selectors' => [
							'{{WRAPPER}} .ova-icon-box-2 .iconbox .title' => 'color: {{VALUE}}',
						],
					]
				);

$this->add_group_control(
					\Elementor\Group_Control_Text_Shadow::get_type(),
					[
						'name' => 'title_shadow',
						'selector' => '{{WRAPPER}} .ova-icon-box-2 .iconbox .title',
					]
				);

$this->end_controls_tab();

$this->start_controls_tab(
				'title_hover_tab',
				[
					'label' => esc_html__( 'Hover', 'nighty' ),
				]
			);

$this->add_group_control(
					\Elementor\Group_Control_Typography::get_type(),
					[
						'name' => 'title_hover_typography',
						'selector' => '{{WRAPPER}} .ova-icon-box-2:hover .iconbox .title',
					]
				);

$this->add_control(
					'title_hover_color',
					[
						'label' => esc_html__( 'Color', 'nighty' ),
						'type' => \Elementor\Controls_Manager::COLOR,
						'selectors' => [
							'{{WRAPPER}} .ova-icon-box-2:hover .iconbox .title' => 'color: {{VALUE}}',
						],
					]
				);

$this->add_group_control(
					\Elementor\Group_Control_Text_Shadow::get_type(),
					[
						'name' => 'title_hover_shadow',
						'selector' => '{{WRAPPER}} .ova-icon-box-2:hover .iconbox .title',
					]
				);

$this->end_controls_tab();

$this->end_controls_tabs();

$this->end_controls_section();

$this->start_controls_section(
		'content_description',
		[
			'label' => esc_html__( 'Description', 'nighty' ),
			'tab' => \Elementor\Controls_Manager::TAB_STYLE,
		]
	);

$this->start_controls_tabs(
			'description_tabs',
		);

$this->start_controls_tab(
				'description_normal_tab',
				[
					'label' => esc_html__( 'Normal', 'nighty' ),
				]
			);
                	
                $this->add_group_control(
					\Elementor\Group_Control_Typography::get_type(),
					[
						'name' => 'description_typography',
						'selector' => '{{WRAPPER}} .ova-icon-box-2 .iconbox .description',
					]
				);

$this->add_control(
					'description_color',
					[
						'label' => esc_html__( 'Color', 'nighty' ),
						'type' => \Elementor\Controls_Manager::COLOR,
						'selectors' => [
							'{{WRAPPER}} .ova-icon-box-2 .iconbox .description' => 'color: {{VALUE}}',
						],
					]
				);

$this->add_group_control(
					\Elementor\Group_Control_Text_Shadow::get_type(),
					[
						'name' => 'description_shadow',
						'selector' => '{{WRAPPER}} .ova-icon-box-2 .iconbox .description',
					]
				);

$this->end_controls_tab();

$this->start_controls_tab(
				'description_hover_tab',
				[
					'label' => esc_html__( 'Hover', 'nighty' ),
				]
			);

$this->add_group_control(
					\Elementor\Group_Control_Typography::get_type(),
					[
						'name' => 'description_hover_typography',
						'selector' => '{{WRAPPER}} .ova-icon-box-2:hover .iconbox .description',
					]
				);

$this->add_control(
					'description_hover_color',
					[
						'label' => esc_html__( 'Color', 'nighty' ),
						'type' => \Elementor\Controls_Manager::COLOR,
						'selectors' => [
							'{{WRAPPER}} .ova-icon-box-2:hover .iconbox .description' => 'color: {{VALUE}}',
						],
					]
				);

$this->add_group_control(
					\Elementor\Group_Control_Text_Shadow::get_type(),
					[
						'name' => 'description_hover_shadow',
						'selector' => '{{WRAPPER}} .ova-icon-box-2:hover .iconbox .description',
					]
				);

$this->end_controls_tab();

$this->end_controls_tabs();

$this->end_controls_section();

$this->start_controls_section(
		'background_button_section',
			[
				'label' => esc_html__( ' Button Readmore', 'nighty' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

$this->add_group_control(
				\Elementor\Group_Control_Typography::get_type(),
				[
					'name' => 'button_text_typography',
					'selector' => '{{WRAPPER}} .ova-icon-box-2 .button-readmore',
				]
			);

$this->add_group_control(
				\Elementor\Group_Control_Background::get_type(),
				[
					'name' => 'background',
					'types' => [ 'classic', 'gradient', 'video' ],
					'selector' => '{{WRAPPER}} .ova-icon-box-2:hover .button-readmore:before',
				]
			);

$this->add_control(
				'opacity_background_button',
				[
					'label' => esc_html__( 'Opacity', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SLIDER,
					'size_units' => [ 'px'],
					'range' => [
						'px' => [
							'min' => 0,
							'max' => 1,
							'step' => 0.1,
						],
					],
					'selectors' => [
						'{{WRAPPER}} .ova-icon-box-2:hover .button-readmore:before' => 'opacity : {{SIZE}}};',
					],
				]
			);

$this->start_controls_tabs(
				'button_text_tabs',
			);

$this->start_controls_tab(
					'button_text_normal_tab',
					[
						'label' => esc_html__( 'Normal', 'nighty' ),
					]
				);

$this->add_control(
						'button_text_color',
						[
							'label' => esc_html__( 'Text Color', 'nighty' ),
							'type' => \Elementor\Controls_Manager::COLOR,
							'selectors' => [
								'{{WRAPPER}} .ova-icon-box-2 .button-readmore a' => 'color: {{VALUE}}',
								'{{WRAPPER}} .ova-icon-box-2 .button-readmore' => 'color: {{VALUE}}',
							],
						]
					);

$this->add_control(
						'icon_button_color',
						[
							'label' => esc_html__( 'Icon Color', 'nighty' ),
							'type' => \Elementor\Controls_Manager::COLOR,
							'selectors' => [
								'{{WRAPPER}} .ova-icon-box-2 .button-readmore i' => 'color: {{VALUE}}',
							],
						]
					);

$this->end_controls_tab();

$this->start_controls_tab(
					'button_text_hover_tab',
					[
						'label' => esc_html__( 'Hover', 'nighty' ),
					]
				);

$this->add_control(
						'button_text_hover_color',
						[
							'label' => esc_html__( 'Text Color', 'nighty' ),
							'type' => \Elementor\Controls_Manager::COLOR,
							'selectors' => [
								'{{WRAPPER}} .ova-icon-box-2:hover .button-readmore a' => 'color: {{VALUE}}',
								'{{WRAPPER}} .ova-icon-box-2:hover .button-readmore' => 'color: {{VALUE}}',
							],
						]
					);

$this->add_control(
						'icon_button_hover_color',
						[
							'label' => esc_html__( 'Icon Color', 'nighty' ),
							'type' => \Elementor\Controls_Manager::COLOR,
							'selectors' => [
								'{{WRAPPER}} .ova-icon-box-2:hover .button-readmore i' => 'color: {{VALUE}}',
							],
						]
					);
	
				$this->end_controls_tab();

$this->end_controls_tabs();

$this->end_controls_section();

}

// Render Template Here
	protected function render() {

$settings 				= $this->get_settings();
		$icon 					= $settings['icon'];
		$title 					= $settings['title'];
		$description 			= $settings['description'];
		$show_button_readmore 	= $settings['show_button_readmore'];
		$link 					= $settings['link'];
		$text_button 			= $settings['text_button'];
		$icon_button         	= $settings['icon_button'];
		
		$nofollow       = ( isset( $link['nofollow'] ) && $link['nofollow'] ) ? 'rel=nofollow' : '';
		$target         = ( isset( $link['is_external'] ) && $link['is_external'] !== '' ) ? 'target=_blank' : '';

$elementClass = 'container';
		if ( $settings['content_hover_animation'] ) {
			$elementClass .= ' elementor-animation-' . $settings['content_hover_animation'];
		}

$url_bg_image  = ( isset( $settings['background_image_box'] ) && $settings['background_image_box'] ) ? $settings['background_image_box']['url'] : '';

<div class="mask"
                <?php if (!empty( $url_bg_image )): ?> 
	 	    	 	style="background-image: url(<?php echo esc_attr( $url_bg_image ) ; ?>)"
	 	    	<?php endif;?>
            ></div>

<?php if( $title ) {  ?>
					<h3 class="title">
						<?php echo esc_html($title) ;?>
					</h3>
                <?php } ?>

<?php if ($description) { ?>
					<p class="description">
						<?php echo esc_html($description) ;?>
					</p>
				<?php } ?>
			</div>

<?php if( $show_button_readmore == 'yes') {  ?>

<?php if ( !empty( $link['url'] ) ) {
					$this->add_link_attributes( 'link', $link );
				?>
					<a class="button-readmore" <?php $this->print_render_attribute_string( 'link' ); ?> >
						<span><?php echo esc_html($text_button);  ?></span>
						<?php \Elementor\Icons_Manager::render_icon( $icon_button , [ 'aria-hidden' => 'true' ] ); ?>
					</a>
				<?php } else { ?>
					<div class="button-readmore">
						<span><?php echo esc_html($text_button); ?></span>
						<?php \Elementor\Icons_Manager::render_icon( $icon_button , [ 'aria-hidden' => 'true' ] ); ?>
					</div> 
				<?php } ?>
		
			<?php } ?>

</div>

<?php
	}
}
$widgets_manager->register( new nighty_Elementor_Icon_Box_2() );

🔐 Sid Gifari File Manager Pro