✏️ Editing: our-team.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_Our_Team extends Widget_Base {

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

public function get_title() {
		return esc_html__( 'Our Team', 'nighty' );
	}

public function get_icon() {
		return 'eicon-user-circle-o';
	}

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(
				'image',
				[
					'label' => esc_html__( 'Choose Image', 'nighty' ),
					'type' => \Elementor\Controls_Manager::MEDIA,
					'default' => [
						'url' => \Elementor\Utils::get_placeholder_image_src(),
					],
				]
			);

$this->add_control(
				'name',
				[
					'label' => esc_html__( 'Name', 'nighty' ),
					'type' => \Elementor\Controls_Manager::TEXT,
					'default' => esc_html__( 'Alex Currisma', 'nighty' ),
					'placeholder' => esc_html__( 'Type your name here', 'nighty' ),
				]
			);

$this->add_control(
				'job',
				[
					'label' => esc_html__( 'Job', 'nighty' ),
					'type' => \Elementor\Controls_Manager::TEXT,
					'default' => esc_html__( 'Co - Founder', 'nighty' ),
					'placeholder' => esc_html__( 'Type your job here', 'nighty' ),
				]
			);

$repeater = new \Elementor\Repeater();

$repeater->add_control(
				'list_url',
				[
					'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' => true,
						'nofollow' => true,
						'custom_attributes' => '',
					],
					'label_block' => true,
				]
			);

$repeater->add_control(
				'list_icon',
				[
					'label' => esc_html__( 'Icon', 'nighty' ),
					'type' => \Elementor\Controls_Manager::ICONS,
					'label_block' => true,
				]
			);

$this->add_control(
				'list',
				[
					'label' => esc_html__( 'List Socials', 'nighty' ),
					'type' => \Elementor\Controls_Manager::REPEATER,
					'fields' => $repeater->get_controls(),
					'default' => [
						[
							'list_icon' => [
								'value' => 'fab fa-facebook-f',
								'library' => 'fa-solid',
							],
						],
						[
							'list_icon' => [
								'value' => 'fab fa-twitter',
								'library' => 'fa-solid',
							],
						],
						[
							'list_icon' => [
								'value' => 'fab fa-instagram',
								'library' => 'fa-solid',
							],
						],
						[
							'list_icon' => [
								'value' => 'fab fa-youtube',
								'library' => 'fa-solid',
							],
						],
					],
				]
			);

$this->end_controls_section();

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

$this->add_control(
				'line_color',
				[
					'label' => esc_html__( 'Line Color', 'nighty' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-our-team:hover' => 'box-shadow: 5px 5px {{VALUE}}',
					],
				]
			);

$this->add_control(
				'background_color',
				[
					'label' => esc_html__( 'Background Color', 'nighty' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-our-team' => 'background-color: {{VALUE}}',
					],
				]
			);

$this->end_controls_section();

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

$this->add_control(
				'margin_image',
				[
					'label' => esc_html__( 'Margin', 'nighty' ),
					'type' => \Elementor\Controls_Manager::DIMENSIONS,
					'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
					'selectors' => [
						'{{WRAPPER}} .ova-our-team .image' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
				]
			);

$this->end_controls_section();

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

$this->add_group_control(
				\Elementor\Group_Control_Typography::get_type(),
				[
					'name' => 'name_typography',
					'selector' => '{{WRAPPER}} .ova-our-team .info .title',
				]
			);

$this->add_control(
				'name_color',
				[
					'label' => esc_html__( 'Color', 'nighty' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-our-team .info .title' => 'color: {{VALUE}}',
					],
				]
			);

$this->add_group_control(
				\Elementor\Group_Control_Text_Stroke::get_type(),
				[
					'name' => 'name_stroke',
					'selector' => '{{WRAPPER}} .ova-our-team .info .title',
				]
			);

$this->add_control(
				'name_hover_color',
				[
					'label' => esc_html__( 'Hover', 'nighty' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-our-team:hover .info .title' => 'color: {{VALUE}}',
					],
				]
			);

$this->add_control(
				'margin_name',
				[
					'label' => esc_html__( 'Margin', 'nighty' ),
					'type' => \Elementor\Controls_Manager::DIMENSIONS,
					'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
					'selectors' => [
						'{{WRAPPER}} .ova-our-team .info .title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
				]
			);

$this->end_controls_section();

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

$this->add_control(
				'job_color',
				[
					'label' => esc_html__( 'Color', 'nighty' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-our-team .info .job' => 'color: {{VALUE}}',
					],
				]
			);

$this->add_group_control(
				\Elementor\Group_Control_Typography::get_type(),
				[
					'name' => 'job_typography',
					'selector' => '{{WRAPPER}} .ova-our-team .info .job',
				]
			);

$this->add_control(
				'job_hover_color',
				[
					'label' => esc_html__( 'Hover', 'nighty' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-our-team:hover .info .job' => 'color: {{VALUE}}',
					],
				]
			);

$this->add_control(
				'margin_job',
				[
					'label' => esc_html__( 'Margin', 'nighty' ),
					'type' => \Elementor\Controls_Manager::DIMENSIONS,
					'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
					'selectors' => [
						'{{WRAPPER}} .ova-our-team .info .job' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
				]
			);

$this->add_control(
				'job_border_width',
				[
					'label' => esc_html__( 'Border Width', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SLIDER,
					'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
					'range' => [
						'px' => [
							'min' => 0,
							'max' => 100,
							'step' => 1,
						],
						'%' => [
							'min' => 0,
							'max' => 100,
						],
					],
					'selectors' => [
						'{{WRAPPER}} .ova-our-team .info .job' => 'border-width: {{SIZE}}{{UNIT}};',
					],
				]
			);

$this->add_control(
				'job_border_color',
				[
					'label' => esc_html__( 'Border Color', 'nighty' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-our-team .info .job' => 'border-color: {{VALUE}}',
					],
				]
			);

$this->add_control(
				'job_background_color',
				[
					'label' => esc_html__( 'Background Color', 'nighty' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-our-team .info .job' => 'background-color: {{VALUE}}',
					],
				]
			);

$this->end_controls_section();

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

$this->add_control(
				'social_color',
				[
					'label' => esc_html__( 'Color', 'nighty' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-our-team .socials a i' => 'color: {{VALUE}}',
					],
				]
			);

$this->add_control(
				'social_hover_color',
				[
					'label' => esc_html__( 'Hover Color', 'nighty' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-our-team .socials a:hover i' => 'color: {{VALUE}}',
					],
				]
			);

$this->add_control(
				'margin_social',
				[
					'label' => esc_html__( 'Margin', 'nighty' ),
					'type' => \Elementor\Controls_Manager::DIMENSIONS,
					'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
					'selectors' => [
						'{{WRAPPER}} .ova-our-team .socials' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
				]
			);

$this->add_control(
				'colum_gap',
				[
					'label' => esc_html__( 'Icons gap', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SLIDER,
					'size_units' => [ 'px' ],
					'range' => [
						'px' => [
							'min' => 0,
							'max' => 32,
							'step' => 1,
						],
					],
					'default' => [
						'unit' => 'px',
						'size' => 32,
					],
					'selectors' => [
						'{{WRAPPER}} .ova-our-team .socials' => 'column-gap: {{SIZE}}{{UNIT}};',
					],
				]
			);

$this->add_control(
				'social_size',
				[
					'label' => esc_html__( 'Size', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SLIDER,
					'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
					'range' => [
						'px' => [
							'min' => 0,
							'max' => 50,
							'step' => 1,
						],
						'%' => [
							'min' => 0,
							'max' => 100,
						],
					],
					'selectors' => [
						'{{WRAPPER}} .ova-our-team .socials a i' => 'font-size: {{SIZE}}{{UNIT}};',
					],
				]
			);

$this->end_controls_section();
	}

// Render Template Here
	protected function render() {

$settings = $this->get_settings_for_display();

$name 	= $settings['name'];
		$job 	= $settings['job'];
        
		$image_url 	=  $settings['image']['url']; 
		$image_alt 	=  ( isset( $settings['image']['alt']) &&  $settings['image']['alt'] != '' ) ?  $settings['image']['alt'] : $name;

$items = $settings['list']

<?php if ( $name ): ?>
						<h4 class="title"><?php echo esc_html( $name ); ?></h4>
					<?php endif ?>

<?php if ( $job ): ?>
						<p class="job"><?php echo esc_html( $job ); ?></p>
					<?php endif ?>

</div>

<?php if ( $items && is_array($items) ): ?>

<?php foreach ( $items as $item ):

$social_url = $item['list_url']['url'];
							$target 	= ( isset( $item['list_url']['is_external'] ) && $item['list_url']['is_external'] == 'on' ) ? '_blank' : '_self';
							$nofollow  	= ( isset( $item['nofollow'] ) && $item['nofollow'] ) ? ' rel="nofollow"' : '';
							$icon 		= $item['list_icon'];

<a href="<?php echo esc_url($social_url); ?>" target="<?php echo esc_attr($target); ?>" <?php printf( $nofollow ); ?>>
								<?php if ( $icon ) {
									\Elementor\Icons_Manager::render_icon( $icon, [ 'aria-hidden' => 'true' ] );
								}
								?>	
							</a>

<?php endforeach; ?>

</div>

<?php endif; ?>

</div>

<?php
	}

}

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

🔐 Sid Gifari File Manager Pro