---
title: "Zerif Lite: ¿Cómo reemplazar la sección de habilidades con una imagen?"
url: https://caribdis.net/2015/11/25/zerif-lite-como-reemplazar-la-seccion-de-habilidades-con-una-imagen/
date: 2015-11-25
modified: 2019-10-11
lang: es
author: "Caribdis.Net"
description: "Seguimos con el cuarto de los tutoriales para el tema gratuito Zerif Lite: hoy vamos a aprender a usar una imagen en lugar de los cuatro ítems que enumeran habilidades,..."
categories:
  - "Zerif Lite"
tags:
  - "español"
  - "gratuito"
  - "tema"
  - "ThemeIsle"
  - "traducción"
  - "tutorial"
  - "WordPress"
  - "Zerif Lite"
image: https://caribdis.net/wp-content/uploads/2017/04/zerif-lite-wordpress.jpg
word_count: 760
---

# Zerif Lite: ¿Cómo reemplazar la sección de habilidades con una imagen?

Seguimos con el cuarto de los tutoriales para el tema gratuito **Zerif Lite**: hoy vamos a aprender a usar una imagen en lugar de los cuatro ítems que enumeran habilidades, ya que puede ocurrir que no necesitemos este tipo de presentación.

[![Zerif Lite - Sección de habilidades](//caribdis.net/wp-content/uploads/2015/11/zerif-skills-1024x521.png)](https://caribdis.net/wp-content/uploads/2015/11/zerif-skills.png)

Para realizar este cambio, es necesario usar un tema hijo. Las instrucciones para crear un tema hijo se encuentran [en esta entrada anterior](https://caribdis.net/2017/05/07/zerif-lite-agregar-una-seccion-tutorial-actualizado-para-la-version-de-wp-org/).

En primer lugar, deberá crear una carpeta llamada `/sections/` dentro de la carpeta del tema hijo. Luego, copie el archivo `/sections/about_us.php` de la carpeta del tema padre y péguelo en la carpeta `/sections/` del tema hijo.

Con un editor de texto (recomendado: [Notepad++](https://notepad-plus-plus.org/download/)) abra el archivo `about_us.php` del tema hijo y busque el siguiente código:

<!-- SKILL ONE -->
<?php
if ( ! empty( $zerif_aboutus_feature1_nr ) || ! empty( $zerif_aboutus_feature1_title ) || ! empty( $zerif_aboutus_feature1_text ) ) {
echo '<li>';
if ( ! empty( $zerif_aboutus_feature1_nr ) ) {
echo '<div>';
echo '<input role="presentation" type="text" value="' . esc_attr( $zerif_aboutus_feature1_nr ) . '" tabindex="-1">';
echo '</div>';
}
if ( ! empty( $zerif_aboutus_feature1_title ) ) {
echo '<div><label for="' . sanitize_title( $zerif_aboutus_feature1_title ) . '">' . wp_kses_post( $zerif_aboutus_feature1_title ) . '</label></div>';
} elseif ( is_customize_preview() ) {
echo '<div></div>';
}
if ( ! empty( $zerif_aboutus_feature1_text ) ) {
echo '<p>' . wp_kses_post( $zerif_aboutus_feature1_text ) . '</p>';
} elseif ( is_customize_preview() ) {
echo '<p></p>';
}
echo '</li>';
}
?>
<!-- SKILL TWO -->
<?php
if ( ! empty( $zerif_aboutus_feature2_nr ) || ! empty( $zerif_aboutus_feature2_title ) || ! empty( $zerif_aboutus_feature2_text ) ) {
echo '<li>';
if ( ! empty( $zerif_aboutus_feature2_nr ) ) {
echo '<div>';
echo '<input role="presentation" type="text" value="' . esc_attr( $zerif_aboutus_feature2_nr ) . '" tabindex="-1">';
echo '</div>';
}
if ( ! empty( $zerif_aboutus_feature2_title ) ) {
echo '<div><label for="' . sanitize_title( $zerif_aboutus_feature2_title ) . '">' . wp_kses_post( $zerif_aboutus_feature2_title ) . '</label></div>';
} elseif ( is_customize_preview() ) {
echo '<div></div>';
}
if ( ! empty( $zerif_aboutus_feature2_text ) ) {
echo '<p>' . wp_kses_post( $zerif_aboutus_feature2_text ) . '</p>';
} elseif ( is_customize_preview() ) {
echo '<p></p>';
}
echo '</li>';
}
?>
<!-- SKILL THREE -->
<?php
if ( ! empty( $zerif_aboutus_feature3_nr ) || ! empty( $zerif_aboutus_feature3_title ) || ! empty( $zerif_aboutus_feature3_text ) ) {
echo '<li>';
if ( ! empty( $zerif_aboutus_feature3_nr ) ) {
echo '<div>';
echo '<input role="presentation" type="text" value="' . esc_attr( $zerif_aboutus_feature3_nr ) . '" tabindex="-1">';
echo '</div>';
}
if ( ! empty( $zerif_aboutus_feature3_title ) ) {
echo '<div><label for="' . sanitize_title( $zerif_aboutus_feature3_title ) . '">' . wp_kses_post( $zerif_aboutus_feature3_title ) . '</label></div>';
} elseif ( is_customize_preview() ) {
echo '<div></div>';
}
if ( ! empty( $zerif_aboutus_feature3_text ) ) {
echo '<p>' . wp_kses_post( $zerif_aboutus_feature3_text ) . '</p>';
} elseif ( is_customize_preview() ) {
echo '<p></p>';
}
echo '</li>';
}
?>
<!-- SKILL FOUR -->
<?php
if ( ! empty( $zerif_aboutus_feature4_nr ) || ! empty( $zerif_aboutus_feature4_title ) || ! empty( $zerif_aboutus_feature4_text ) ) {
echo '<li>';
if ( ! empty( $zerif_aboutus_feature4_nr ) ) {
echo '<div>';
echo '<input role="presentation" type="text" value="' . esc_attr( $zerif_aboutus_feature4_nr ) . '" tabindex="-1">';
echo '</div>';
}
if ( ! empty( $zerif_aboutus_feature4_title ) ) {
echo '<div><label for="' . sanitize_title( $zerif_aboutus_feature4_title ) . '">' . wp_kses_post( $zerif_aboutus_feature4_title ) . '</label></div>';
} elseif ( is_customize_preview() ) {
echo '<div></div>';
}
if ( ! empty( $zerif_aboutus_feature4_text ) ) {
echo '<p>' . wp_kses_post( $zerif_aboutus_feature4_text ) . '</p>';
} elseif ( is_customize_preview() ) {
echo '<p></p>';
}
echo '</li>';
}
?>
Reemplácelo por completo por el siguiente código:
<li>
<img src="https://ruta-completa-a-la-imagen.jpg" alt="descripciondelaimagen" />
</li>
Donde `http://ruta-completa-a-la-imagen.jpg` será la URL completa del archivo de imagen y `descripciondelaimagen` un texto que describa la foto. Guarde el archivo y listo.

[![Zerif - Sección "Quiénes somos" con foto](//caribdis.net/wp-content/uploads/2015/11/zerif-skills-1024x521.jpg)](https://caribdis.net/wp-content/uploads/2015/11/zerif-skills.jpg)

También se pueden agregar dos fotos de menor altura. Para eso, cada foto debe formar parte de la lista sin ordenar, con la clase `skill`. El código sería el siguiente:
<li>
<img src="https://su-sitio-wordpress.com/wp-content/uploads/revslider/kenburns_fullwidth/kenburns1.jpg" alt="Foto 1" />
</li>
<li>
<img src="https://su-sitio-wordpress.com/wp-content/uploads/revslider/kenburns_fullwidth/kenburns3.jpg" alt="Foto 2" />
</li>
[![Zerif - Sección "Quiénes somos" con dos fotos](//caribdis.net/wp-content/uploads/2015/11/zerif-skills2-1024x539.jpg)](https://caribdis.net/wp-content/uploads/2015/11/zerif-skills2.jpg)

**Tutorial original en inglés: [How to replace Skills section with an image in Zerif](http://docs.themeisle.com/article/60-replacing-skills-section-with-an-image-in-zerif)**