thiscodeWorks - Organizing the best of code online

<?php
if (!defined('ABSPATH')) {
    exit;
}

class  Elementor_Slider_Custom_Widget extends \Elementor\Widget_Base
{
    public function get_name()
    {
        return 'custom_slider';
    }

    public function get_title()
    {
        return esc_html__('Custom Slider', 'elementor-list-widget');
    }

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

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

    public function get_keywords()
    {
        return ['list', 'slider', 'custom', 'smo'];
    }

    protected function register_controls()
    {
        //content
        $this->start_controls_section(
            'section_content',
            [
                'label' => esc_html__('Content', 'textdomain'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );
        $this->add_control(
			'title_main',
			[
				'label' => esc_html__('Title', 'textdomain'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => 'text',
			]
		);
        $this->add_control(
            'slider_list',
            [
                'label' => esc_html__('List Item', 'textdomain'),
                'type' => \Elementor\Controls_Manager::REPEATER,
                'fields' => [
                    [
                        'name' => 'image',
                        'label' => esc_html__('Image', 'textdomain'),
                        'type' => \Elementor\Controls_Manager::MEDIA,
                        'media_types' => ['image', 'video'],
                        'default' => [
                            'url' => \Elementor\Utils::get_placeholder_image_src(),
                        ],
                    ],
                    [
                        'name' => 'sub_title',
                        'label' => esc_html__('Top Title', 'textdomain'),
                        'type' => \Elementor\Controls_Manager::TEXTAREA,
				        'rows' => 5,
                        'default' => '',
                    ],
                    [
                        'name' => 'sub_title_color',
                        'label' => esc_html__('Top Title Color', 'textdomain'),
                        'type' => \Elementor\Controls_Manager::COLOR,
                        'default' => '#FFFFFF',
                    ],
                    [
                        'name' => 'title',
                        'label' => esc_html__('Title', 'textdomain'),
                        'type' => \Elementor\Controls_Manager::TEXTAREA,
                        'rows' => 5,
                        'default' => '',
                    ],
                    [
                        'name' => 'title_color',
                        'label' => esc_html__('Title Color', 'textdomain'),
                        'type' => \Elementor\Controls_Manager::COLOR,
                        'default' => '#FFFFFF',
                    ],
                    [
                        'name' => 'link',
                        'label' => esc_html__('Link', 'textdomain'),
                        'type' => \Elementor\Controls_Manager::URL,
                        'options' => ['url', 'is_external', 'nofollow'],
                        'default' => [
                            'url' => '',
                            'is_external' => false,
                            'nofollow' => false,
                            'custom_attributes' => '',
                        ],
                        'label_block' => true,
                    ],
                ],
                'title_field' => '{{{ sub_title }}}',
            ]
        );
        $this->end_controls_section();


        // Setting silder PC

        $this->start_controls_section(
            'section_slider',
            [
                'label' => esc_html__('Slider PC (>1024px) ', 'textdomain'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]

        );
        $this->add_control(
            'box_height',
            [
                'label' => esc_html__('Height', 'textdomain'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 10000,
                'step' => 1,
                'default' => 471,
            ]
        );
        $this->add_control(
            'box_width',
            [
                'label' => esc_html__('Width', 'textdomain'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 10000,
                'step' => 1,
                'default' => 353,
            ]
        );
        
        $this->add_control(
            'display_team',
            [
                'label' => esc_html__('Display', 'textdomain'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => '3.5',
            ]
        );
        $this->add_control(
            'space_between',
            [
                'label' => esc_html__('Space Between', 'textdomain'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 100,
                'step' => 1,
                'default' => 14,
            ]
        );
        $this->add_control(
            'loop',
            [
                'label' => esc_html__('Loop', 'textdomain'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => esc_html__('Yes', 'textdomain'),
                'label_off' => esc_html__('No', 'textdomain'),
                'return_value' => 'yes',
                'default' => '',
            ]
        );
        $this->add_control(
            'pagination',
            [
                'label' => esc_html__('Pagination', 'textdomain'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => esc_html__('Yes', 'textdomain'),
                'label_off' => esc_html__('No', 'textdomain'),
                'return_value' => 'no',
                'default' => '',
            ]
        );
        $this->add_control(
            'navigation',
            [
                'label' => esc_html__('Navigation', 'textdomain'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => esc_html__('Yes', 'textdomain'),
                'label_off' => esc_html__('No', 'textdomain'),
                'return_value' => 'yes',
                'default' => '',
            ]
        );
        $this->end_controls_section();

        // Setting silder tablet
        $this->start_controls_section(
            'section_slider_tl',
            [
                'label' => esc_html__('Slider Tablet (768px - 1024px)', 'textdomain'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]

        );
        $this->add_control(
            'box_height_tl',
            [
                'label' => esc_html__('Height', 'textdomain'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 10000,
                'step' => 1,
                'default' => '425',
            ]
        );
        $this->add_control(
            'box_width_tl',
            [
                'label' => esc_html__('Width', 'textdomain'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 10000,
                'step' => 1,
                'default' => '318',
            ]
        );
        
        $this->add_control(
            'display_team_tl',
            [
                'label' => esc_html__('Display', 'textdomain'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => '3.2',
            ]
        );
        $this->add_control(
            'space_between_tl',
            [
                'label' => esc_html__('Space Between', 'textdomain'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 100,
                'step' => 1,
                'default' => 14,
            ]
        );
        $this->end_controls_section();

        //Setting silder MB
        $this->start_controls_section(
            'section_slider_mb',
            [
                'label' => esc_html__('Slider Mobile (< 768px)', 'textdomain'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]

        );
        $this->add_control(
            'box_height_mb',
            [
                'label' => esc_html__('Height', 'textdomain'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 10000,
                'step' => 1,
                'default' => '320',
            ]
        );
        $this->add_control(
            'box_width_mb',
            [
                'label' => esc_html__('Width', 'textdomain'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 10000,
                'step' => 1,
                'default' => '240',
            ]
        );
        
        $this->add_control(
            'display_team_mb',
            [
                'label' => esc_html__('Display', 'textdomain'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => '1.5',
            ]
        );
        $this->add_control(
            'space_between_mb',
            [
                'label' => esc_html__('Space Between', 'textdomain'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 100,
                'step' => 1,
                'default' => 14,
            ]
        );
        $this->end_controls_section();



        // Style

        $this->start_controls_section(
			'style_name',
			[
				'label' => esc_html__( 'Style Title', 'textdomain' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);
        $this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			[
				'name' => 'title_typography',
				'selector' => '{{WRAPPER}} .slider-title',
			]
		);
        
        $this->end_controls_section();


        $this->start_controls_section(
			'style_slider_title',
			[
				'label' => esc_html__( 'Style Slider', 'textdomain' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);
        $this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			[
				'name' => 'slider_title_typography',
				'selector' => '{{WRAPPER}} .title',
			]
		);
		$this->end_controls_section();
		
		
		$this->start_controls_section(
			'style_slider_subtitle',
			[
				'label' => esc_html__( 'Style Slider Subtitle', 'textdomain' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);
        $this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			[
				'name' => 'slider_subtitle_typography',
				'selector' => '{{WRAPPER}} .sub-title',
			]
		);

		$this->end_controls_section();
    }

    protected function render()
    {
        $settings = $this->get_settings_for_display();
        $title_main = $settings['title_main'];
        
        $slider_list = $settings['slider_list'];
        $box_height = $settings['box_height'];
        $box_width = $settings['box_width'];
        $display_team = $settings['display_team'];
        $loop = $settings['loop'] === 'yes' ? 'true' : 'false';
        $navigation  = $settings['navigation'];
        $pagination = $settings['pagination'];
        $space_between = $settings['space_between'];

        $box_height_mb = $settings['box_height_mb'];
        $box_width_mb = $settings['box_width_mb'];
        $display_team_mb = $settings['display_team_mb'];
        $space_between_mb = $settings['space_between_mb'];

        $box_height_tl = $settings['box_height_tl'];
        $box_width_tl = $settings['box_width_tl'];
        $display_team_tl = $settings['display_team_tl'];
        $space_between_tl = $settings['space_between_tl'];

        // Generate a random string
        $unique_id = uniqid();
        $class_unique = 'slider-item'.$unique_id;
        ob_start();
        ?>
        <!-- PC -->
        <div class="smo-slider-section">
            <div class="smo-title-container">
                <div class="smo-title-box">
                    <?php if(!empty($title_main)): ?>
                        <h2 class="slider-title"><?php echo $title_main?></h2>
                    <?php endif; ?>
                    <?php if($navigation == "yes"):?>
                        <div class="slider-navigation">
                            <div class="navigation-next  navigation-next-<?php echo $unique_id; ?>">
                                <svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.2929 27.2572C15.9024 26.8666 15.9024 26.2335 16.2929 25.8429L21.5858 20.55L16.2929 15.2571C15.9024 14.8666 15.9024 14.2334 16.2929 13.8429C16.6834 13.4524 17.3166 13.4524 17.7071 13.8429L23.7071 19.8429C23.8946 20.0305 24 20.2848 24 20.55C24 20.8152 23.8946 21.0696 23.7071 21.2571L17.7071 27.2572C17.3166 27.6477 16.6834 27.6477 16.2929 27.2572Z" fill="#080808" fill-opacity="0.8"/>
                                </svg>
                            </div>
                            <div class="navigation-prev navigation-prev-<?php echo $unique_id; ?>">
                                <svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M23.7071 13.8429C24.0976 14.2335 24.0976 14.8666 23.7071 15.2572L18.4142 20.5501L23.7071 25.8429C24.0976 26.2334 24.0976 26.8666 23.7071 27.2571C23.3166 27.6476 22.6834 27.6476 22.2929 27.2571L16.2929 21.2572C16.1054 21.0696 16 20.8153 16 20.5501C16 20.2848 16.1054 20.0305 16.2929 19.843L22.2929 13.8429C22.6834 13.4524 23.3166 13.4524 23.7071 13.8429Z" fill="#080808" fill-opacity="0.8"/>
                                </svg>
                            </div>
                        </div>
                    <?php endif; ?>
                </div>
            </div>

            <div class="smo-slider-container">
                <div class="smo-slider smo-slider-<?php echo $unique_id; ?> swiper">
                    <div class="swiper-wrapper">
                        <?php foreach ($slider_list as $key => $team):
                            $image = $team['image']['url'];
                            $title = $team['title'];
                            $title_color = $team['title_color'];
                            $sub_title = $team['sub_title'];
                            $sub_title_color = $team['sub_title_color'];
                            $link = $team['link'];
                            $tags = !empty($link['url'])?'a':'div';
                            $href = !empty($link['url'])?'href="'.$link['url'].'"':'';
                            $target = !empty($link['url']) && $link['is_external'] ? 'target="_blank"' : '';
                            $nofollow = !empty($link['url']) && $link['nofollow'] ? 'rel="nofollow"' : '';

                            $is_video = preg_match('/\.(mp4|webm|ogg)$/i', $image);
                            ?>
                            <div class="swiper-slide slider-item <?php echo $class_unique ?>">
                                <<?php echo $tags ?> class="item-box" style="background: url(<?php echo (!$is_video)?esc_url($image):'' ?>) center/cover no-repeat;" <?php echo $href ?> <?php echo $target ?> <?php echo $nofollow ?>>
                                    <?php if ($is_video): ?>
                                        <video class="background-media" autoplay loop muted playsinline>
                                            <source src="<?php echo esc_url($image) ?>" type="video/mp4">
                                        </video>
                                    <?php endif; ?>
                                    <div class="slider-infor">
                                        <?php if(!empty($sub_title)): ?>
                                            <p class="sub-title" style="color: <?php echo $sub_title_color ?>">
                                                <?php echo $sub_title ?>
                                            </p>
                                        <?php endif; ?>

                                        <?php if(!empty($title)): ?>
                                        <h3 class="title" style="color: <?php echo $title_color ?>">
                                            <?php echo $title ?>
                                        </h3>
                                        <?php endif; ?>
                                        
                                    </div>
                                </<?php echo $tags ?>>
                            </div>
                        <?php endforeach; ?>
                    </div>
                    <?php if($pagination == "yes"):?>
                        <div class="swiper-pagination slider-pagination"></div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
        <style>
            .smo-slider-section <?php echo '.'.$class_unique ?>{
                aspect-ratio: <?php echo $box_width?>/<?php echo $box_height?>;
                max-width: <?php echo $box_width?>px;
            }
            @media(max-width: 1024px){
                .smo-slider-section <?php echo '.'.$class_unique ?>{
                    aspect-ratio: <?php echo $box_width_tl?>/<?php echo $box_height_tl?>;
                    max-width: <?php echo $box_width_tl?>px;
                }
            }
            @media(max-width: 767px){
                .smo-slider-section <?php echo '.'.$class_unique ?>{
                    aspect-ratio: <?php echo $box_width_mb?>/<?php echo $box_height_mb?>;
					max-width: <?php echo $box_width_mb?>px;
                }
            }
        </style>

        <script>
            (function ($) {
                $(document).ready(function () {
                    var swiper = new Swiper(".smo-slider-<?php echo $unique_id; ?>", {
                        slidesPerView: <?php echo $display_team; ?>,
                        spaceBetween: <?php echo $space_between; ?>,
                        loop: <?php echo $loop; ?>,
                        centeredSlides: false,
						speed: 600,
                        breakpoints: {
                            0: {
                                slidesPerView: <?php echo $display_team_mb; ?>,
                                spaceBetween: <?php echo $space_between_mb; ?>,
                            },
                            768: {
                                slidesPerView: <?php echo $display_team_tl; ?>,
                                spaceBetween: <?php echo $space_between_tl; ?>,
                            },
                            1025: {
                                slidesPerView: <?php echo $display_team; ?>,
                                spaceBetween: <?php echo $space_between; ?>,
                            }
                        },
                        pagination: {
                            el: ".slider-pagination",
                        },
                        navigation: {
                            nextEl: ".navigation-next-<?php echo $unique_id; ?>",
                            prevEl: ".navigation-prev-<?php echo $unique_id; ?>",
                        },
// 						direction: 'horizontal',
// 						mousewheel: true,
// 						effect: 'slide'
                    });
                });
            })(jQuery)
        </script>
        <?php
        echo ob_get_clean();
    }
}

#css #elementor

Mobile Tabs At Top Of Nested Tabs - Elementor

@media (max-width: 767px) {
  .e-n-tabs-mobile > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading {
   display: flex;
  flex-wrap: wrap !important;}

.elementor-widget-n-tabs .e-n-tabs-content .e-collapse.e-active {
  display: none;
}

.elementor-widget-n-tabs .e-n-tabs-content .e-collapse:not(:first-child) {
  display: none;
}

div.e-collapse:nth-child(1){display: none !important;}

#tabs-services {
    display: flex;
    
    flex-wrap: nowrap;
    overflow-x: auto;
    width: auto;
  }

  #tabs-services .tab-title {
    width: auto;
    flex: 0 0 auto;
  }
  
 .e-n-tab-title {
  flex-shrink: 0;
  max-width: 120px;
  flex-basis: auto;
}
}

#elementor

Align icon box to the top

selector .elementor-icon-box-wrapper {
    display: flex;
    align-items: flex-start; /* Aligns the icon and title to the top */
}

selector .elementor-icon-box-icon {
    align-self: flex-start; /* Ensures the icon stays at the top */
}

selector .elementor-icon-box-title {
    margin-top: 0 !important; /* Removes any top margin on the title */
    padding-top: 0 !important; /* Removes any top padding on the title */
    line-height: 1.2em; /* Adjusts line height for a closer alignment */
}

#php #elementor #wigetcustom #videocustom

Code Setup Dự Án

<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="preconnect" href="https://fonts.googleapis.com/" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-bundle.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-range@1.0.0/jquery.range.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/intl-tel-input@18.2.1/build/css/intlTelInput.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/flatpickr.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lazyload@17.8.5/dist/lazyload.min.js" />
    <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() . '/assets/css/tvh-custom.css?ver=' . filemtime(get_stylesheet_directory() . '/assets/css/tvh-custom.css') ?>" />
    <script defer src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script defer src="https://unpkg.com/@popperjs/core@2"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-bundle.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/jquery-range@1.0.0/jquery.range-min.js"></script>
    <script defer src="https://unpkg.com/intl-tel-input@18.2.1/build/js/intlTelInput.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/flatpickr.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.5/dist/lazyload.min.js"></script>
    <link rel="profile" href="https://gmpg.org/xfn/11" />
    
    <?php if (is_page_template('template-home.php')): ?>
        <link rel="preload stylesheet" href="<?php echo get_stylesheet_directory_uri() . '/assets/css/home.css?ver=' . filemtime(get_stylesheet_directory() . '/assets/css/home.css') ?>" as="style">
        <link rel="preload" fetchpriority="high" href="<?php echo get_template_directory_uri() . '/assets/img/home-hero.webp'; ?>" type="image/webp">
    <?php endif; ?>
    
    <?php if (is_page_template('template-about.php')): ?>
        <link rel="preload stylesheet" href="<?php echo get_stylesheet_directory_uri() . '/assets/css/about-us.css?ver=' . filemtime(get_stylesheet_directory() . '/assets/css/about-us.css') ?>" as="style">
    <?php endif; ?>
    
    <?php if (is_page_template('template-services.php')): ?>
        <link rel="preload stylesheet" href="<?php echo get_stylesheet_directory_uri() . '/assets/css/about-us.css?ver=' . filemtime(get_stylesheet_directory() . '/assets/css/about-us.css') ?>" as="style">
    <?php endif; ?>
</head>

#php #elementor #wigetcustom #videocustom

Custom Widget Video Elementor

<?php 

class Elementor_Custom_Video_Widget extends \Elementor\Widget_Base {

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

    public function get_title() {
        return __('Custom Video Widget', 'plugin-name');
    }

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

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

    protected function _register_controls() {
        $this->start_controls_section(
            'content_section',
            [
                'label' => __('Content', 'plugin-name'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'source',
            [
                'label' => __('Source', 'plugin-name'),
                'type' => \Elementor\Controls_Manager::SELECT,
                'options' => [
                    'self_hosted' => __('Self Hosted', 'plugin-name'),
                    'external' => __('External URL', 'plugin-name'),
                ],
                'default' => 'self_hosted',
            ]
        );

        $this->add_control(
            'video_url',
            [
                'label' => __('Choose Video File', 'plugin-name'),
                'type' => \Elementor\Controls_Manager::MEDIA,
                'media_type' => 'video',
                'condition' => [
                    'source' => 'self_hosted',
                ],
            ]
        );

        $this->add_control(
            'autoplay',
            [
                'label' => __('Autoplay', 'plugin-name'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => __('Yes', 'plugin-name'),
                'label_off' => __('No', 'plugin-name'),
                'return_value' => 'yes',
                'default' => 'yes', // Set default to 'yes'
            ]
        );

        $this->add_control(
            'play_on_mobile',
            [
                'label' => __('Play on Mobile', 'plugin-name'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => __('Yes', 'plugin-name'),
                'label_off' => __('No', 'plugin-name'),
                'return_value' => 'yes',
                'default' => 'yes',
            ]
        );

        $this->add_control(
            'mute',
            [
                'label' => __('Mute', 'plugin-name'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => __('Yes', 'plugin-name'),
                'label_off' => __('No', 'plugin-name'),
                'return_value' => 'yes',
                'default' => 'no',
            ]
        );

        $this->add_control(
            'loop',
            [
                'label' => __('Loop', 'plugin-name'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => __('Yes', 'plugin-name'),
                'label_off' => __('No', 'plugin-name'),
                'return_value' => 'yes',
                'default' => 'no',
            ]
        );

        $this->add_control(
            'player_controls',
            [
                'label' => __('Player Controls', 'plugin-name'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => __('Show', 'plugin-name'),
                'label_off' => __('Hide', 'plugin-name'),
                'return_value' => 'yes',
                'default' => 'yes',
            ]
        );

        $this->add_control(
            'download_button',
            [
                'label' => __('Download Button', 'plugin-name'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => __('Show', 'plugin-name'),
                'label_off' => __('Hide', 'plugin-name'),
                'return_value' => 'yes',
                'default' => 'no',
            ]
        );

        $this->add_control(
            'poster',
            [
                'label' => __('Poster', 'plugin-name'),
                'type' => \Elementor\Controls_Manager::MEDIA,
                'media_type' => 'image',
            ]
        );

        $this->add_control(
            'show_play_button',
            [
                'label' => __('Show Play/Pause Button', 'plugin-name'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => __('Show', 'plugin-name'),
                'label_off' => __('Hide', 'plugin-name'),
                'return_value' => 'yes',
                'default' => 'yes',
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();

        // Video HTML
        echo '<video id="custom-video" src="' . $settings['video_url']['url'] . '" ' . ($settings['autoplay'] === 'yes' ? 'autoplay' : '') . ' ' . ($settings['mute'] === 'yes' ? 'muted' : '') . ' ' . ($settings['loop'] === 'yes' ? 'loop' : '') . ' ' . ($settings['player_controls'] === 'yes' ? 'controls' : '') . ' poster="' . $settings['poster']['url'] . '"></video>';

        // Play/Pause Button
        if ($settings['show_play_button'] === 'yes') {
            // Default to pause icon if autoplay is enabled
            $icon_class = $settings['autoplay'] === 'yes' ? 'fa-pause' : 'fa-play';
            echo '<button id="custom-play-pause" class="play-button"><i class="fas ' . $icon_class . '"></i></button>';
        }

        // JavaScript for Play/Pause Button
        echo '<script>
                document.addEventListener("DOMContentLoaded", function() {
                    var video = document.getElementById("custom-video");
                    var playPauseButton = document.getElementById("custom-play-pause");
                    var icon = playPauseButton.querySelector("i");

                    // Play video if autoplay is enabled and video is muted (required by some browsers)
                    video.addEventListener("loadedmetadata", function() {
                        if (video.hasAttribute("autoplay")) {
                            video.play().then(function() {
                                icon.classList.remove("fa-play");
                                icon.classList.add("fa-pause");
                            }).catch(function(error) {
                                console.log("Autoplay failed: ", error);
                                icon.classList.remove("fa-pause");
                                icon.classList.add("fa-play");
                            });
                        }
                    });

                    playPauseButton.addEventListener("click", function() {
                        if (video.paused) {
                            video.play();
                            icon.classList.remove("fa-play");
                            icon.classList.add("fa-pause");
                        } else {
                            video.pause();
                            icon.classList.remove("fa-pause");
                            icon.classList.add("fa-play");
                        }
                    });
                });
            </script>';
    }
}


//-------------------------------------------------END-------------------------------------//
Dưới đây là đoạn đăng ký widget 
function register_custom_widget($widgets_manager)
{
    // Custom video widget
    require_once(__DIR__ . '/widgets/custom-video.php');
    $widgets_manager->register(new \Elementor_Custom_Video_Widget());
}
add_action('elementor/widgets/register', 'register_custom_widget');

#wordpress #elementor

Elementor JS Hook for Scroll Offset.

jQuery( function( $ ) {
	// Add space for Elementor Menu Anchor link
	if ( window.elementorFrontend ) {
		elementorFrontend.hooks.addFilter( 'frontend/handlers/menu_anchor/scroll_top_distance', function( scrollTop ) {
			return scrollTop - 30;
		} );
	}
} );

#elementor #swiper

Swiper slider con las columnas

<script>
window.addEventListener('DOMContentLoaded', function() {
 
    const $ = jQuery;

    $( '.custom-swiper > .elementor-container' ).addClass( 'swiper-wrapper' );
    $( '.custom-swiper .swiper-wrapper > div' ).addClass( 'swiper-slide' );
 
  var swiper = new Swiper('.custom-swiper', {
      
    // Default parameters
    slidesPerView: 2,
    spaceBetween: 10,
    // Responsive breakpoints
  breakpoints: {
    // when window width is >= 320px
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is >= 480px
    480: {
      slidesPerView: 3,
      spaceBetween: 30
    },
    // when window width is >= 640px
    640: {
      slidesPerView: 4,
      spaceBetween: 40
    }
  }
  
    });
 
});
</script>
<style>
    @media (max-width: 1024px) {
    .custom-swiper .elementor-container {
        flex-wrap:nowrap
    }
}
</style>

#elementor #readystate

Carousel inside Tabs

<script>
window.addEventListener('DOMContentLoaded', function() {

    const $ = jQuery;
 
    $('.elementor-tab-title').on('click', function() {
        setTimeout(function(){
             window.dispatchEvent(new Event('resize'));
        },100)
       
    });
 
});
</script>

#elementor #readystate

Esperar a cargar todos los scripts

  function removeActiveTab() {
      setTimeout(function() {
        if( $('body').hasClass("page-id-20504") ) {        
            $("#doing-green-tabs").find(".elementor-tab-title").removeClass("elementor-active"); 
            $("#doing-green-tabs").find(".elementor-tab-content").removeClass("elementor-active").hide();       
        }
      }, 10);
  }
  /* Esperar a cargar todos los scripts */ 
  if (document.readyState == 'complete') {
    removeActiveTab();
  } else {
      document.onreadystatechange = function () {
          if (document.readyState === "complete") {
            removeActiveTab();
          }
      }
  }

#popups #elementor

Elementor POPUPS - Casos

/* Hide when open popup */
jQuery(document).on("elementor/popup/show", (event, id, instance) => {
  if (id === 388) {
    setTimeout(function () {
      jQuery(".sticky-left-menu").hide();
    }, 1000);
  }
});

/* Show when close popup and not mobile */
jQuery(document).on("elementor/popup/hide", (event, id, instance) => {
  if (id === 388 && windowWidth >= 768) {
    setTimeout(function () {
      jQuery(".sticky-left-menu").show();
    }, 1000);
  }
  if (id === 388 && windowWidth <= 767) {
    jQuery(".sticky-left-menu").hide();
  }
});

#htm #css #elementor

Smooth (linear) scroll - Elementor Crocoblock widgets

selector .slick-track{
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important; 
}

#htm #css #elementor

Smooth (linear) scroll - Elementor Carousel widget

selector .swiper-wrapper{
  -webkit-transition-timing-function: linear !important; 
  transition-timing-function: linear !important; 
}

#embed-pdf #wordpress #elementor

Embedding PDF

<object data="PDF URL" type="application/pdf" width="700px" height="1200px">    
<embed src="PDF URL" />    
</object>

#css #elementor

3D EFFECT in Elementor

https://www.youtube.com/watch?v=H_8XBIElZlg

#elementor #wordpress

Custom CSS to fix Elementor columns gap issue | by Rich Flynn on SnipSave | Web-based code snippet manager for developers

/* Make Elementor elements expand to fit the full available width - due to how EL puts padding
all the way round columns */
.elementor-section-boxed .elementor-column-gap-default > .elementor-row {
    width: calc(100% + 20px);
    margin-left: -10px;
    margin-right: -10px;
}
.elementor-section-boxed .elementor-column-gap-narrow > .elementor-row {
    width: calc(100% + 10px);
    margin-left: -5px;
    margin-right: -5px;
}
.elementor-section-boxed .elementor-column-gap-extended > .elementor-row {
    width: calc(100% + 30px);
    margin-left: -15px;
    margin-right: -15px;
}
.elementor-section-boxed .elementor-column-gap-wide > .elementor-row {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
}
.elementor-section-boxed .elementor-column-gap-wider > .elementor-row {
    width: calc(100% + 60px);
    margin-left: -30px;
    margin-right: -30px;
}

#elementor #css

Outline Heading Text CSS (Elementor)

selector {
     -webkit-text-stroke: 1px #C02727;
}

#elementor #snippets

@Shesek

https://www.thiscodeworks.com/user/Shesek

#php #wordpress #elementor

Disable Eicons in Elementor

//*****---  Remove Eicons:  ---*****
//==========================
add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 ); 
function remove_default_stylesheet() { 
	wp_deregister_style( 'elementor-icons' ); 
}

#php #wordpress #elementor

Disable Font Awesome in Elementor

//******--- Remove Font Awesome ---*****
//===============================
add_action( 'elementor/frontend/after_register_styles',function() {
	foreach( [ 'solid', 'regular', 'brands' ] as $style ) {
		wp_deregister_style( 'elementor-icons-fa-' . $style );
	}
}, 20 );

#php #wordpress #elementor

Disable Google Fonts in Elementor

******--- Remove Google Fonts ---******
//===============================
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

#elementor #wordpress #jquery

Closes Elementor Popup On Click (Paste it in an HTML widget)

<script>
jQuery( document ).ready(function($){
	$(document).on('click','.elementor-location-popup a', function(event){
		elementorProFrontend.modules.popup.closePopup( {}, event);
	})
});
</script>

Custom Slider Float Right

Mobile Tabs At Top Of Nested Tabs - Elementor

Align icon box to the top

Code Setup Dự Án

Custom Widget Video Elementor

Elementor JS Hook for Scroll Offset.

Swiper slider con las columnas

Carousel inside Tabs

Esperar a cargar todos los scripts

Elementor POPUPS - Casos

Smooth (linear) scroll - Elementor Crocoblock widgets

Smooth (linear) scroll - Elementor Carousel widget

Embedding PDF

3D EFFECT in Elementor

Custom CSS to fix Elementor columns gap issue | by Rich Flynn on SnipSave | Web-based code snippet manager for developers

Outline Heading Text CSS (Elementor)

@Shesek

Disable Eicons in Elementor

Disable Font Awesome in Elementor

Disable Google Fonts in Elementor

Closes Elementor Popup On Click (Paste it in an HTML widget)

Save snippets that work with our extensions