How to replace Skills section with an image in Zelle

Make sure that you're using a child theme with your Zelle theme to make these changes.

First, you need to create a folder named sections inside your child theme. Now visit your parent theme folder, and copy about_us.php file from the /sections/ folder to the /sections/ folder of your child theme.

Now open the about_us.php file of your child theme, and find the following code:

                        /* SKILL ONE */

                        if( !empty($zerif_aboutus_feature1_nr) || !empty($zerif_aboutus_feature1_title) || !empty($zerif_aboutus_feature1_text) ):

                        echo '<li class="skill skill_1">';

                            if( !empty($zerif_aboutus_feature1_nr) ):

                                echo '<div class="skill-count">';

                                    echo '<input type="text" value="'.absint($zerif_aboutus_feature1_nr).'" data-thickness=".2" class="skill1">';

                                echo '</div>';

                            endif;
                            
                            if( !empty($zerif_aboutus_feature1_title) ):
                            
                                echo '<h6>'.zerif_sanitize_html($zerif_aboutus_feature1_title).'</h6>';
                                
                            elseif ( isset( $wp_customize ) ):

                                echo '<h6 class="zerif_hidden_if_not_customizer"></h6>';
                                
                            endif;
                            
                            if( !empty($zerif_aboutus_feature1_text) ):
                            
                                echo '<p>'.zerif_sanitize_html($zerif_aboutus_feature1_text).'</p>';
                                
                            elseif ( isset( $wp_customize ) ):

                                echo '<p class="zerif_hidden_if_not_customizer"></p>';    
                                
                            endif;

                        echo '</li>';

                        endif;


                        /* SKILL TWO */
                            
                        if( !empty($zerif_aboutus_feature2_nr) || !empty($zerif_aboutus_feature2_title) || !empty($zerif_aboutus_feature2_text) ):

                        echo '<li class="skill skill_2">';
                        
                            if( !empty($zerif_aboutus_feature2_nr) ):

                                echo '<div class="skill-count">';

                                    echo '<input type="text" value="'.absint($zerif_aboutus_feature2_nr).'" data-thickness=".2" class="skill2">';

                                echo '</div>';

                            endif;

                            if( !empty($zerif_aboutus_feature2_title) ):
                            
                                echo '<h6>'.zerif_sanitize_html($zerif_aboutus_feature2_title).'</h6>';
                                
                            elseif ( isset( $wp_customize ) ):
                            
                                echo '<h6 class="zerif_hidden_if_not_customizer"></h6>';
                                
                            endif;
                            
                            if( !empty($zerif_aboutus_feature2_text) ):
                            
                                echo '<p>'.zerif_sanitize_html($zerif_aboutus_feature2_text).'</p>';
                                
                            elseif ( isset( $wp_customize ) ):

                                echo '<p class="zerif_hidden_if_not_customizer"></p>';    
                                
                            endif;

                        echo '</li>';

                        endif;


                        /* SKILL THREE */

                        if( !empty($zerif_aboutus_feature3_nr) || !empty($zerif_aboutus_feature3_title) || !empty($zerif_aboutus_feature3_text) ):
                        
                        echo '<li class="skill skill_3">';

                            if( !empty($zerif_aboutus_feature3_nr) ):

                                echo '<div class="skill-count">';

                                    echo '<input type="text" value="'.absint($zerif_aboutus_feature3_nr).'" data-thickness=".2" class="skill3">';

                                echo '</div>';

                            endif;
                            
                            if( !empty($zerif_aboutus_feature3_title) ):
                            
                                echo '<h6>'.zerif_sanitize_html($zerif_aboutus_feature3_title).'</h6>';
                                
                            elseif ( isset( $wp_customize ) ):
                            
                                echo '<h6 class="zerif_hidden_if_not_customizer"></h6>';
                                
                            endif;
                            
                            if( !empty($zerif_aboutus_feature3_text) ):
                            
                                echo '<p>'.zerif_sanitize_html($zerif_aboutus_feature3_text).'</p>';
                                
                            elseif ( isset( $wp_customize ) ):

                                echo '<p class="zerif_hidden_if_not_customizer"></p>';    
                                
                            endif;

                        echo '</li>';

                        endif;


                        /* SKILL FOUR */
                    
                        if( !empty($zerif_aboutus_feature4_nr) || !empty($zerif_aboutus_feature4_title) || !empty($zerif_aboutus_feature4_text) ):

                        echo '<li class="skill skill_4">';

                            if( !empty($zerif_aboutus_feature4_nr) ):

                                echo '<div class="skill-count">';

                                    echo '<input type="text" value="'.absint($zerif_aboutus_feature4_nr).'" data-thickness=".2" class="skill4">';

                                echo '</div>';

                            endif;
                            
                            if( !empty($zerif_aboutus_feature4_title) ):
                            
                                echo '<h6>'.zerif_sanitize_html($zerif_aboutus_feature4_title).'</h6>';
                                
                            elseif ( isset( $wp_customize ) ):
                            
                                echo '<h6 class="zerif_hidden_if_not_customizer"></h6>';
                                
                            endif;
                            
                            if( !empty($zerif_aboutus_feature4_text) ):
                            
                                echo '<p>'.zerif_sanitize_html($zerif_aboutus_feature4_text).'</p>';
                                
                            elseif ( isset( $wp_customize ) ):

                                echo '<p class="zerif_hidden_if_not_customizer"></p>';    
                                
                            endif;

                        echo '</li>';

                        endif;

And replace it with the following code:

echo '<li class="skill skill_1"><img src="YOUR-IMAGE-LINK-HERE" alt="image description" /></li>';

Save the file, and you're good to go!

echo '<li class="skill skill_1"><img src="YOUR-IMAGE-LINK-HERE" alt="imagedespiction" /></li>';
echo '<li class="skill skill_1"><img src="YOUR-IMAGE-LINK-HERE" alt="imagedespiction" /></li>';