✏️ Editing: footer-heading.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_Footer_Heading extends Widget_Base {

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

public function get_title() {
		return esc_html__( 'Footer Heading', 'nighty' );
	}

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

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' ),
			]
		);	
			
			$this->add_control(
				'template',
				[
					'label' => esc_html__( 'Template', 'nighty' ),
					'type' => Controls_Manager::SELECT,
					'default' => 'template1',
					'options' => [
						'template1' => esc_html__('Template 1', 'nighty'),
						'template2' => esc_html__('Template 2', 'nighty'),
					]
				]
			);

$this->add_control(
				'image1',
				[
					'label' => esc_html__( 'Choose Image', 'nighty' ),
					'type' => \Elementor\Controls_Manager::MEDIA,
					'default' => [
						'url' => \Elementor\Utils::get_placeholder_image_src(),
					],
					'condition' => [
						'template' => 'template1',
						'show_image' => 'yes',
					],
				]
			);

$this->add_control(
				'feature_title',
				[
					'label' => esc_html__( 'Feature Title', 'nighty' ),
					'type' => \Elementor\Controls_Manager::TEXT,
					'default' => esc_html__( 'Let’s have a', 'nighty' ),
					'condition' => [
						'template' => 'template1',
					],
				]
			);

$this->add_control(
				'special_word_position',
				[
					'label' => esc_html__( 'Special Text Position', 'nighty' ),
					'type'	=> \Elementor\Controls_Manager::NUMBER,
					'min' 	=> 0,
					'max' 	=> 20,
					'step' 	=> 1,
					'default' => 0,
					'description' => esc_html__( '( 0 is first word )', 'nighty' ),
					'condition' => [
						'template' => 'template1',
					],
				]
			);

$this->add_control(
				'show_line_decoration',
				[
					'label' 		=> esc_html__( 'Show Line Decoration', 'nighty' ),
					'type' 			=> \Elementor\Controls_Manager::SWITCHER,
					'label_on' 		=> esc_html__( 'Show', 'nighty' ),
					'label_off' 	=> esc_html__( 'Hide', 'nighty' ),
					'return_value' 	=> 'yes',
					'default' 		=> 'yes',
					'condition' => [
						'template' => 'template2',
					],
				]
			);

$this->add_control(
				'title',
				[
					'label' => esc_html__( 'Title', 'nighty' ),
					'type' => \Elementor\Controls_Manager::TEXT,
					'default' => esc_html__( 'Booking!', 'nighty' ),
				]
			);

$this->add_responsive_control(
				'alignment',
				[
					'label' => esc_html__( 'Alignment', 'nighty' ),
					'type' => \Elementor\Controls_Manager::CHOOSE,
					'options' => [
						'flex-start' => [
							'title' => esc_html__( 'Left', 'nighty' ),
							'icon' => 'eicon-text-align-left',
						],
						'center' => [
							'title' => esc_html__( 'Center', 'nighty' ),
							'icon' => 'eicon-text-align-center',
						],
						'flex-end' => [
							'title' => esc_html__( 'Right', 'nighty' ),
							'icon' => 'eicon-text-align-right',
						],
					],
					'toggle' => true,
					'selectors' => [
						'{{WRAPPER}} .ova-footer-heading .top , {{WRAPPER}} .ova-footer-heading .bottom' => 'justify-content: {{VALUE}};',
					],
					'condition' => [
						'template' => 'template1',
					],
				]
			);

$this->add_responsive_control(
				'alignment_template2',
				[
					'label' => esc_html__( 'Alignment', 'nighty' ),
					'type' => \Elementor\Controls_Manager::CHOOSE,
					'options' => [
						'left' => [
							'title' => esc_html__( 'Left', 'nighty' ),
							'icon' => 'eicon-text-align-left',
						],
						'center' => [
							'title' => esc_html__( 'Center', 'nighty' ),
							'icon' => 'eicon-text-align-center',
						],
						'right' => [
							'title' => esc_html__( 'Right', 'nighty' ),
							'icon' => 'eicon-text-align-right',
						],
					],
					'toggle' => true,
					'selectors' => [
						'{{WRAPPER}} .ova-footer-heading ' => 'text-align: {{VALUE}};',
					],
					'condition' => [
						'template' => 'template2',
					],
				]
			);

$this->add_control(
				'image2',
				[
					'label' => esc_html__( 'Choose Image', 'nighty' ),
					'type' => \Elementor\Controls_Manager::MEDIA,
					'default' => [
						'url' => \Elementor\Utils::get_placeholder_image_src(),
					],
					'condition' => [
						'template' => 'template1',
						'show_image' => 'yes',
					],
				]
			);

$this->end_controls_section();

//SECTION TAB STYLE TITLE
		$this->start_controls_section(
			'section_image1_style',
			[
				'label' => esc_html__( 'Image 1', 'nighty' ),
				'tab' 	=> Controls_Manager::TAB_STYLE,
				'condition' => [
					'template' => 'template1',
					'show_image' => 'yes',
				],
			]
		);

$this->add_responsive_control(
				'image1_width',
				[
					'label' => esc_html__( 'Width', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SLIDER,
					'size_units' => [ 'px', '%', 'em', 'rem' ],
					'range' => [
						'px' => [
							'min' => 0,
							'max' => 500,
							'step' => 1,
						],
						'%' => [
							'min' => 0,
							'max' => 100,
						],
					],
					'selectors' => [
						'{{WRAPPER}} .ova-footer-heading img.img1' => 'width: {{SIZE}}{{UNIT}};',
					],
				]
			);

$this->add_responsive_control(
				'image1_height',
				[
					'label' => esc_html__( 'Height', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SLIDER,
					'size_units' => [ 'px', '%', 'em', 'rem' ],
					'range' => [
						'px' => [
							'min' => 0,
							'max' => 300,
							'step' => 1,
						],
						'%' => [
							'min' => 0,
							'max' => 100,
						],
					],
					'selectors' => [
						'{{WRAPPER}} .ova-footer-heading img.img1' => 'height: {{SIZE}}{{UNIT}};',
					],
				]
			);

$this->add_responsive_control( 
				'image1_border_radius',
				[
					'label' 	 => esc_html__( 'Border Radius', 'nighty' ),
					'type' 		 => Controls_Manager::DIMENSIONS,
					'size_units' => [ 'px', 'em', '%' ],
					'selectors'  => [
					'{{WRAPPER}} .ova-footer-heading img.img1' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
				]
			);

$this->add_responsive_control( 
				'image1_margin',
				[
					'label' 	 => esc_html__( 'Margin', 'nighty' ),
					'type' 		 => Controls_Manager::DIMENSIONS,
					'size_units' => [ 'px', 'em', '%' ],
					'selectors'  => [
					'{{WRAPPER}} .ova-footer-heading img.img1' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
				]
			);

$this->end_controls_section();

//SECTION TAB STYLE Line Decoration
		$this->start_controls_section(
			'section_line_decoration_style',
			[
				'label' => esc_html__( 'Line Decoration', 'nighty' ),
				'tab' 	=> Controls_Manager::TAB_STYLE,
				'condition' => [
					'template' => 'template2',
					'show_line_decoration' => 'yes',
				],
			]
		);

$this->add_responsive_control(
				'line_decoration_width',
				[
					'label' => esc_html__( 'Width', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SLIDER,
					'size_units' => [ 'px', '%', 'em', 'rem' ],
					'range' => [
						'px' => [
							'min' => 0,
							'max' => 500,
							'step' => 1,
						],
						'%' => [
							'min' => 0,
							'max' => 100,
						],
					],
					'selectors' => [
						'{{WRAPPER}} .ova-footer-heading.template2 .line-decoration' => 'width: {{SIZE}}{{UNIT}};',
					],
				]
			);

$this->add_responsive_control(
				'line_decoration_height',
				[
					'label' => esc_html__( 'Height', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SLIDER,
					'size_units' => [ 'px', '%', 'em', 'rem' ],
					'range' => [
						'px' => [
							'min' => 0,
							'max' => 50,
							'step' => 1,
						],
						'%' => [
							'min' => 0,
							'max' => 100,
						],
					],
					'selectors' => [
						'{{WRAPPER}} .ova-footer-heading.template2 .line-decoration' => 'height: {{SIZE}}{{UNIT}};',
					],
				]
			);

$this->add_control(
				'line_decoration_color',
				[
					'label' => esc_html__( 'Color', 'nighty' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-footer-heading.template2 .line-decoration' => 'background-color: {{VALUE}}',
					],
				]
			);

$this->add_responsive_control( 
				'line_decoration_margin',
				[
					'label' 	 => esc_html__( 'Margin', 'nighty' ),
					'type' 		 => Controls_Manager::DIMENSIONS,
					'size_units' => [ 'px', 'em', '%' ],
					'selectors'  => [
					'{{WRAPPER}} .ova-footer-heading.template2 .line-decoration' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
				]
			);

$this->end_controls_section();

//SECTION TAB STYLE TITLE
		$this->start_controls_section(
			'section_title_style',
			[
				'label' => esc_html__( 'Title', 'nighty' ),
				'tab' 	=> Controls_Manager::TAB_STYLE,
			]
		);
			$this->add_group_control(
				\Elementor\Group_Control_Typography::get_type(),
				[
					'name' 		=> 'content_typography_title',
					'label' 	=> esc_html__( 'Typography', 'nighty' ),
					'selector' 	=> '{{WRAPPER}} .ova-footer-heading .title',
				]
			);

$this->add_control(
				'color_title',
				[
					'label' 	=> esc_html__( 'Color', 'nighty' ),
					'type' 		=> Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-footer-heading.template1 .top .title' => 'color : {{VALUE}};',
					],
					'condition' => [
						'template' => 'template1',
					],
				]
			);

$this->add_control(
				'special_color_title',
				[
					'label' 	=> esc_html__( 'Special Color', 'nighty' ),
					'type' 		=> Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-footer-heading.template1 .top .title .special-word' => 'color : {{VALUE}};',
					],
					'condition' => [
						'template' => 'template1',
					],
				]
			);

$this->add_responsive_control( 
				'margin_title',
				[
					'label' 	 => esc_html__( 'Margin', 'nighty' ),
					'type' 		 => Controls_Manager::DIMENSIONS,
					'size_units' => [ 'px', 'em', '%' ],
					'selectors'  => [
						'{{WRAPPER}} .ova-footer-heading .title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
					'condition' => [
						'template' => 'template2',
					],
				]
			);

$this->add_control(
				'special_text_stroke_color',
				[
					'label' => esc_html__( 'Stroke Color', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SELECT,
					'default' => 'white',
					'options' => [
						'white' => esc_html__( 'White', 'nighty' ),
						'black' => esc_html__( 'Black', 'nighty' ),
					],
				]
			);

$this->add_responsive_control(
				'title_opacity',
				[
					'label' => esc_html__( 'Opacity', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SLIDER,
					'size_units' => [ 'px' ],
					'range' => [
						'px' => [
							'min' => 0,
							'max' => 1,
							'step' => 0.01,
						],
					],
					'selectors' => [
						'{{WRAPPER}} .ova-footer-heading .title.text-stroke' => 'opacity: {{SIZE}};',
					],
				]
			);

$this->end_controls_section();
		//END SECTION TAB STYLE TITLE
	
		//SECTION TAB STYLE Image 2
		$this->start_controls_section(
			'section_image2_style',
			[
				'label' => esc_html__( 'Image 2', 'nighty' ),
				'tab' 	=> Controls_Manager::TAB_STYLE,
				'condition' => [
					'template' => 'template1',
					'show_image' => 'yes',
				],
			]
		);

$this->add_responsive_control(
				'image2_width',
				[
					'label' => esc_html__( 'Width', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SLIDER,
					'size_units' => [ 'px', '%', 'em', 'rem' ],
					'range' => [
						'px' => [
							'min' => 0,
							'max' => 500,
							'step' => 1,
						],
						'%' => [
							'min' => 0,
							'max' => 100,
						],
					],
					'selectors' => [
						'{{WRAPPER}} .ova-footer-heading img.img2' => 'width: {{SIZE}}{{UNIT}};',
					],
				]
			);

$this->add_responsive_control(
				'image2_height',
				[
					'label' => esc_html__( 'Height', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SLIDER,
					'size_units' => [ 'px', '%', 'em', 'rem' ],
					'range' => [
						'px' => [
							'min' => 0,
							'max' => 300,
							'step' => 1,
						],
						'%' => [
							'min' => 0,
							'max' => 100,
						],
					],
					'selectors' => [
						'{{WRAPPER}} .ova-footer-heading img.img2' => 'height: {{SIZE}}{{UNIT}};',
					],
				]
			);

$this->add_responsive_control( 
				'image2_border_radius',
				[
					'label' 	 => esc_html__( 'Border Radius', 'nighty' ),
					'type' 		 => Controls_Manager::DIMENSIONS,
					'size_units' => [ 'px', 'em', '%' ],
					'selectors'  => [
					'{{WRAPPER}} .ova-footer-heading img.img2' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
				]
			);

$this->add_responsive_control( 
				'image2_margin',
				[
					'label' 	 => esc_html__( 'Margin', 'nighty' ),
					'type' 		 => Controls_Manager::DIMENSIONS,
					'size_units' => [ 'px', 'em', '%' ],
					'selectors'  => [
					'{{WRAPPER}} .ova-footer-heading img.img2' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
				]
			);

$this->end_controls_section();
	}

// Render Template Here
	protected function render() {
		$settings = $this->get_settings();

$template 					= 	$settings['template'];
		$title 						= 	$settings['title'];
		$feature_title 				= 	$settings['feature_title'];

$image1 					= 	$settings['image1'];
		$alt1 						= 	( isset( $image1['alt'] ) && $image1['alt'] != '') ? $image1['alt'] : $title;

$image2 					= 	$settings['image2'];
		$alt2 						= 	( isset( $image2['alt'] ) && $image2['alt'] != '') ? $image2['alt'] : $title;

$show_line_decoration 		= 	$settings['show_line_decoration'];
		$special_word_position 		= 	$settings['special_word_position'] ? $settings['special_word_position'] : 0 ;
		$special_text_stroke_color 	=  	$settings['special_text_stroke_color'];
        
        if( $template  == 'template1'  ){
        	// replace % to %% avoid printf error
			if(strpos($feature_title, '%') !== false){
			    $feature_title = str_replace('%', '%%', $feature_title);
			}

$explode_feature_title 	= explode(' ', $feature_title);

$replace = '<span class="special-word">' . $explode_feature_title[$special_word_position] . '</span>';

$feature_title    = str_replace( $explode_feature_title[$special_word_position], $replace, $feature_title );
        }

?>
			<div class="ova-footer-heading <?php echo esc_attr( $template ); ?> ">

<?php if( $title != '' || $feature_title != '') : ?>

<?php if( $template == 'template1') : ?>
						<div class="top">
							<?php if( !empty( $image1['url'] ) ) : ?>
								<img class="img1" src="<?php echo esc_attr( $image1['url'] ); ?>" alt="<?php echo esc_attr( $alt1 ); ?>">
							<?php endif; ?>
							<h3 class="title "><?php printf($feature_title); ?> </h3>
						</div>
					<?php endif; ?>	
					
					<?php if( $template == 'template1') : ?>
					<div class="bottom">
					<?php endif; ?>

<?php if( $template == 'template2' && $show_line_decoration == 'yes') : ?>
						<div class="line-decoration"></div>
						<?php endif; ?>

<?php if( !empty( $image2['url'] ) && $template == 'template1') : ?>
							<img class="img2" src="<?php echo esc_attr( $image2['url'] ); ?>" alt="<?php echo esc_attr( $alt2 ); ?>">
						<?php endif; ?>

<?php if( $template == 'template1') : ?>
						</div>
					<?php endif; ?>

<?php endif; ?>

</div>
		<?php
	}
	
}

$widgets_manager->register( new Nighty_Elementor_Footer_Heading() );

🔐 Sid Gifari File Manager Pro