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!
You can also add two photos of lesser height . For that, each photo should be part of the unordered list , with skill class. The code is as follows:
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>';
For the Spanish version you can also check out this documentation: ¿CÓMO REEMPLAZAR LA SECCIÓN E HABILIDADES CON UNA IMAGEN?