How to replace Skills section with an image in Zelle

Important notice: This product is now in maintenance mode and is no longer being actively developed or supported. Updates and bug fixes will not be provided unless they relate to security concerns.

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>';