File Content: poolax-skill.php <?php use \Elementor\Widget_Base; use \Elementor\Controls_Manager; use \Elementor\Group_Control_Typography; use \Elementor\Utils; use \Elementor\Group_Control_Image_Size; use \Elementor\Group_Control_Box_Shadow; use \Elementor\Group_Control_Border; use \Elementor\Repeater; /** * * Skill Widget . * */ class poolax_Skill extends Widget_Base { public function get_name() { return 'poolaxskill'; } public function get_title() { return __( 'Skill Bar', 'poolax' ); } public function get_icon() { return 'th-icon'; } public function get_categories() { return [ 'poolax' ]; } protected function register_controls() { $this->start_controls_section( 'skill_bar_section', [ 'label' => __( 'Skill Bar', 'poolax' ), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'layout_style', [ 'label' => __( 'Layout Style', 'poolax' ), 'type' => Controls_Manager::SELECT, 'default' => '1', 'options' => [ '1' => __( 'Style One', 'poolax' ), '2' => __( 'Style Two', 'poolax' ), ], ] ); $repeater = new Repeater(); poolax_general_fields($repeater, 'skill_title', 'Title', 'TEXT', 'Equipment Installation'); poolax_general_fields($repeater, 'skill_num', 'Number', 'TEXT', '90'); $this->add_control( 'skill_lists', [ 'label' => __( 'Skill Lists', 'poolax' ), 'type' => Controls_Manager::REPEATER, 'fields' => $repeater->get_controls(), 'default' => [ [ 'skill_title' => __( 'Title', 'poolax' ), ], ], ] ); $this->end_controls_section(); //--------------------------------------- //Style Section Start //--------------------------------------- //-------Title Style------- poolax_common_style_fields($this, 'title', 'Title', '{{WRAPPER}} .progress-title-holder'); } protected function render() { $settings = $this->get_settings_for_display(); if( $settings['layout_style'] == '2' ){ echo '<div class="skill-card style3">'; foreach( $settings['skill_lists'] as $data ){ echo '<div class="skill-feature">'; echo '<div class="progress-bar" data-percentage="'.esc_attr($data['skill_num']).'%">'; echo '<h4 class="progress-title-holder">'.esc_html($data['skill_title']).'<span class="progress-number-wrapper">'; echo '<span class="progress-number-mark">'; echo '<span class="percent"></span>'; echo '</span>'; echo '</span>'; echo '</h4>'; echo '<div class="progress-content-outter">'; echo '<div class="progress-content"></div>'; echo '</div>'; echo '</div>'; echo '</div>'; } echo '</div>'; }else{ echo '<div class="skill-card style2">'; foreach( $settings['skill_lists'] as $data ){ echo '<div class="skill-feature style2">'; echo '<div class="progress-bar" data-percentage="'.esc_attr($data['skill_num']).'%">'; echo '<h4 class="progress-title-holder">'.esc_html($data['skill_title']).' <span class="progress-number-wrapper">'; echo '<span class="progress-number-mark">'; echo '<span class="percent"></span>'; echo '</span>'; echo '</span>'; echo '</h4>'; echo '<div class="progress-content-outter">'; echo '<div class="progress-content"></div>'; echo '</div>'; echo '</div>'; echo '</div>'; } echo '</div>'; } } } Submit