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

38 comentarios

¡Atención! Zelle Lite (ex Zerif) ya no se actualiza. Cambia a:

Hestia

Hestia

Multipropósito
Adaptable a todos los dispositivos
Fácil de configurar

Más opciones en Hestia Pro

Neve

Neve

Súper rápido
Compatible con AMP
Hecho para Elementor

Más opciones en Neve Pro

Tutoriales de Zerif Lite en español

Por: Caribdis.Net

Publicada: 25 de noviembre de 2015

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

Para realizar este cambio, es necesario usar un tema hijo. Las instrucciones para crear un tema hijo se encuentran en esta entrada anterior.

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++) 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 class="skill skill_1">';
if ( ! empty( $zerif_aboutus_feature1_nr ) ) {
echo '<div class="skill-count">';
echo '<input role="presentation" type="text" id="' . ( ! empty( $zerif_aboutus_feature1_title ) ? sanitize_title( $zerif_aboutus_feature1_title ) : '' ) . '" value="' . esc_attr( $zerif_aboutus_feature1_nr ) . '" data-thickness=".2" class="skill1" tabindex="-1">';
echo '</div>';
}
if ( ! empty( $zerif_aboutus_feature1_title ) ) {
 echo '<div class="section-legend"><label for="' . sanitize_title( $zerif_aboutus_feature1_title ) . '">' . wp_kses_post( $zerif_aboutus_feature1_title ) . '</label></div>';
 } elseif ( is_customize_preview() ) {
 echo '<div class="section-legend zerif_hidden_if_not_customizer"></div>';
 }
if ( ! empty( $zerif_aboutus_feature1_text ) ) {
 echo '<p>' . wp_kses_post( $zerif_aboutus_feature1_text ) . '</p>';
 } elseif ( is_customize_preview() ) {
 echo '<p class="zerif_hidden_if_not_customizer"></p>';
 }
echo '</li>';
}
?>
<!-- SKILL TWO -->
<?php
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 role="presentation" type="text" id="' . ( ! empty( $zerif_aboutus_feature2_title ) ? sanitize_title( $zerif_aboutus_feature2_title ) : '' ) . '" value="' . esc_attr( $zerif_aboutus_feature2_nr ) . '" data-thickness=".2" class="skill2" tabindex="-1">';
echo '</div>';
}
if ( ! empty( $zerif_aboutus_feature2_title ) ) {
 echo '<div class="section-legend"><label for="' . sanitize_title( $zerif_aboutus_feature2_title ) . '">' . wp_kses_post( $zerif_aboutus_feature2_title ) . '</label></div>';
 } elseif ( is_customize_preview() ) {
 echo '<div class="section-legend zerif_hidden_if_not_customizer"></div>';
 }
if ( ! empty( $zerif_aboutus_feature2_text ) ) {
 echo '<p>' . wp_kses_post( $zerif_aboutus_feature2_text ) . '</p>';
 } elseif ( is_customize_preview() ) {
 echo '<p class="zerif_hidden_if_not_customizer"></p>';
 }
echo '</li>';
}
?>
<!-- SKILL THREE -->
<?php
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 role="presentation" type="text" id="' . ( ! empty( $zerif_aboutus_feature3_title ) ? sanitize_title( $zerif_aboutus_feature3_title ) : '' ) . '" value="' . esc_attr( $zerif_aboutus_feature3_nr ) . '" data-thickness=".2" class="skill3" tabindex="-1">';
echo '</div>';
}
if ( ! empty( $zerif_aboutus_feature3_title ) ) {
 echo '<div class="section-legend"><label for="' . sanitize_title( $zerif_aboutus_feature3_title ) . '">' . wp_kses_post( $zerif_aboutus_feature3_title ) . '</label></div>';
 } elseif ( is_customize_preview() ) {
 echo '<div class="section-legend zerif_hidden_if_not_customizer"></div>';
 }
if ( ! empty( $zerif_aboutus_feature3_text ) ) {
 echo '<p>' . wp_kses_post( $zerif_aboutus_feature3_text ) . '</p>';
 } elseif ( is_customize_preview() ) {
 echo '<p class="zerif_hidden_if_not_customizer"></p>';
 }
echo '</li>';
}
?>
<!-- SKILL FOUR -->
<?php
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 role="presentation" type="text" id="' . ( ! empty( $zerif_aboutus_feature4_title ) ? sanitize_title( $zerif_aboutus_feature4_title ) : '' ) . '" value="' . esc_attr( $zerif_aboutus_feature4_nr ) . '" data-thickness=".2" class="skill4" tabindex="-1">';
echo '</div>';
}
if ( ! empty( $zerif_aboutus_feature4_title ) ) {
 echo '<div class="section-legend"><label for="' . sanitize_title( $zerif_aboutus_feature4_title ) . '">' . wp_kses_post( $zerif_aboutus_feature4_title ) . '</label></div>';
 } elseif ( is_customize_preview() ) {
 echo '<div class="section-legend zerif_hidden_if_not_customizer"></div>';
 }
if ( ! empty( $zerif_aboutus_feature4_text ) ) {
 echo '<p>' . wp_kses_post( $zerif_aboutus_feature4_text ) . '</p>';
 } elseif ( is_customize_preview() ) {
 echo '<p class="zerif_hidden_if_not_customizer"></p>';
 }
echo '</li>';
}
?>

Reemplácelo por completo por el siguiente código:

<li class="skill">
    <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

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 class="skill">
     <img src="https://su-sitio-wordpress.com/wp-content/uploads/revslider/kenburns_fullwidth/kenburns1.jpg" alt="Foto 1" />
</li>
<li class="skill">
     <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

Tutorial original en inglés: How to replace Skills section with an image in Zerif

Últimas entradas de Caribdis.Net (ver todo)

Se responden todas las dudas o consultas de los lectores acerca del contenido de esta publicación únicamente en su respectiva sección de comentarios, por lo general dentro de las 24/72 hs. Así que asegúrate de suscribirte a las respuestas para recibirlas en tu casilla de correo electrónico (podrás cancelar la suscripción cuando lo desees). Con la suscripción al blog, recibirás en tu correo únicamente las nuevas entradas que se publiquen.

Ten en cuenta que muchas de las preguntas ya fueron respondidas en distintas entradas; recuerda que puedes usar el buscador de la barra lateral, y Ctrl+F para buscar texto dentro de una página.

Esta u otras entradas pueden contener enlaces de afiliado. Esto significa que si usas un enlace para adquirir algún producto recomendado, recibiremos una comisión de afiliados, la cual no te generará ningún costo adicional.

38 Comentarios

  1. Mitxel

    Hola, gracias por tu tiempo.
    Tengo una pregunta: No he econtrado nada que me interese meter en esos skills, por lo que me gustaría deshacerme de ellos… Hay alguna manera sencilla (nivel principiante total) de hacerlo? He logrado borrar la primera columna de texto, la del medio, e introducir un slider para aprovechar la sección, pero no logro deshacerme de los gráficos de skill.

    Gracias de antemano

    • Caribdis Diseño Web

      Hola, Mitxel.

      Si dejás todos los campos en blanco, la sección de habilidades no se mostrará (se verán solo dos columnas, título de la izquierda y texto a la derecha).

      Saludos.

      • Mitxel

        Gracias, efectivamente así ha sido. Ya lo había hecho con otros plugins pero con este no sé por qué, supongo que por agotamiento ni se me había ocurrido. Sigo con el proyecto gracias a vuestra ayuda.

        Saludos cordiales.

  2. José Flores Palomino

    Primeramente quiero agradecer el esfuerzo que hiciste en realizar todos estos tutoriales, me han serido de mucho para realizar página web con zerif lite. No encnotre nada por internet, así que: MUCHAS GRACIAS! =).

    También quería hacerte una consulta, espero puedas contestarme: Este tutorial lo entendí a la perfección y tengo todo claro, sin embargo: hay alguna manera de cambiar los skills por un video???

    • Caribdis Diseño Web

      Hola, José.

      Podés usar las instrucciones de esta entrada y en lugar del código de la imagen (<img src="//ruta-completa-a-la-imagen.jpg" alt="descripciondelaimagen" />), usar el código del vídeo.

      Ejemplo, para un vídeo de YouTube, el código completo sería:

      <li class="skill">
              <iframe width="340" height="191" src="https://www.youtube.com/embed/7I8OeQs7cQA?rel=0&autoplay=1&controls=0&showinfo=0&loop=1​" frameborder="0" allowfullscreen></iframe>
      </li>
      

      Para un vídeo subido a la Biblioteca de medios, el código completo sería:

      <li class="skill">
              <?php echo do_shortcode('[video loop="true" autoplay="true" width="340" height="191" mp4="http://urldelsitio/wp-content/uploads/video.mp4"][/video]'); ?>
      </li>
      

      Espero que te sirva.

      Saludos.

  3. Angel

    Hola,
    Muchas gracias por tomarte el tiempo para responder preguntas.

    He seguido los pasos para insertar la imagen en vez de los porcentajes de habilidades, desde crear el tema hijo, la creación de los archivos y reemplazar el código por el par de lineas finales sin ningún resultado. En la página siguen apareciendo los porcentajes sin ninguna alteración.

    ¿Se supone que el cambio es automático?

    Gracias

    • Caribdis Diseño Web

      Hola, Ángel.

      Gracias por tu comentario.

      El tema hijo debe estar activado, desde Apariencia > Temas.

      Saludos.

  4. miller garcia

    hola buenas tardes tenia una duda estoy usando esta plantilla, y cuando le agrego una pagina nueva y quiero agregar una imagen que me cubra todo el ancho de la pantalla nunca me deja … no se donde ubicarme si hay algo en los css del la plantilla padre.. necesito pegar imagenes de 90px alto por 100% ancho que me cubra toda la pantalla del monitor y siempre me pone como un margen en la pagina

    • Caribdis Diseño Web

      Hola, Miller.

      Me temo que no es posible en este tema, sin hacer modificaciones importantes en la plantilla de página.

      Saludos.

  5. Jorge

    Hola, estoy siguiendo todos vuestros tutoriales para modificar mi tema hijo de Zerif. Quiero hacer una pagina nueva y que tenga la apariencia de la seccion Our focus. ¿Es posible hacerlo?

    Muchas gracias.

    • Caribdis Diseño Web

      Hola, Jorge.

      Fijate si te sirve el plugin Page Builder de Site Origin, que te permite insertar widgets en las páginas (hasta donde sé, corrigieron el error de que no guardaba la imagen).

      Saludos.

  6. Fernando González Macías

    Hola

    Comentarte que me encantan tus artículos sobre este gran tema, y con los que estoy aprendiendo e introduciéndome en el mundo de wordpress.

    Quería saber como sería posible el añadir un quinta habilidad, al igual que las cuatro por defecto

    • Caribdis Diseño Web

      Hola, Fernando.

      Gracias por tu comentario.

      Está explicado aquí.

      Saludos.

      • Fernando

        Muchísimas gracias. Pude conseguirlo.

  7. Raul

    Buenas. Yo estoy tratando de realizar esto y no lo consigo. Tengo el tema Zerif PRO, pero a la hora de quitar las habilidades y añadir la imagen, se me desconfigura toda la pagina.
    Esto se debe a que tengo que crear también un tema hijo? Sino, cual es el fallo?
    Gracias!

    • Caribdis Diseño Web

      Hola, Raúl.

      Este tutorial aplica únicamente a la versión Lite, ya que la sección correspondiente de Zerif PRO difiere en el código.

      Saludos.

      • Raul

        Y en la versión PRO, hay alguna forma de hacerlo? Gracias

        • Caribdis Diseño Web

          Tendrías que hacer lo siguiente:

          1. Crear un tema hijo (el código es el que se explica aquí, solo que usarías Template: zerif-pro en lugar de Template: zerif-lite).
          2. Copiar el archivo about_us.php de la carpeta /sections/ del tema padre a la del tema hijo (crearla).
          3. Abrir en un editor de texto ese archivo about_us.php copiado y suprimir el código que va desde $there_is_skills = ''; hasta if ( $there_is_skills!='' ) :
          4. Reemplazar desde la línea /* SKILL ONE */ hasta el último echo '</li>'; endif; con el código de las imágenes en el siguiente formato:
            echo '<li class="skill">
                <img src="http://su-sitio-wordpress.com/wp-content/uploads/foto.jpg" alt="Foto 1" />
            </li>';
            
          5. Borrar el último endif;

          Saludos.

          • Raul

            Hola. Estoy tratando de hacer esto que me dices, peor no consigo que funcione… Quizás este haciendo algo mal… Y es que tengo algunas dudas:
            – Si estoy usando el tema hijo que dejaste en la pagina que me distes, tengo también que crear la carpeta o vale la que viene como new_section?
            – El código a quitar iría del primer $there_is_skills hasta el endif que cierra el /* SKILL FOUR */?
            – Cual es el ultimo endif a quitar?
            Gracias de antemano! 🙂

          • Caribdis Diseño Web

            Hola, Raúl.

            No uses el tema hijo ya creado, porque corresponde a Zerif Lite (el código de la nueva sección no aplica y no tiene sentido tenerlo presente). Usá simplemente el código que va en style.css y el código necesario de functions.php (detallado en el Paso 1 de esta entrada).

            El código que está entre if ( $there_is_skills!='' ) : y /* SKILL ONE */ debe quedar intacto.

            Y el último endif; es el que está arriba de la última línea zerif_after_about_us_trigger();

  8. Bernart

    En primer lugar felicitarde por tus tutoriales que están siendo de gran ayuda.
    Quería consultarte un problema, he creado otra sección en el tema hijo y ahí he añadido una serie nueva de skills como los de la sección ‘about_us’. El problema lo tengo cuando en mi archivo functions del tema hijo añado los controles para el número, de (zerif_aboutus_feature1_nr) del customizer de la nueva sección que necesita la clase (Zerif_Customizer_Number_Control) ya que no me encuentra esta clase de number en mi archivo functions del thema hijo mostrandome el error (Fatal error: Class ‘Zerif_Customizer_Number_Control’ not found in C:\…\wp-content\themes\zerif-child\functions.php on line 95)
    Mi duda es como puedo enlazarlo con la clase que está en el archivo customizer.php o si debo crear otra clase nueva o si cometo algún error.

    Muchas gracias por atenderme

    • Caribdis Diseño Web

      Hola, Bernart.

      Gracias por tu comentario.

      En efecto, tendrías que crear una nueva clase en functions.php, que sería igual a la de customizer.php, pero con un nombre distinto, por ejemplo, Zerif_Child_Number_Control. Y no olvidar referirla en el $wp_customize->add_control de cada una de las cuatro nuevas skills.

      Saludos.

      • Bernart

        Muchas gracias por contestar tan rápidamente, y pude solucionarlo con tus indicaciones. Y perdona que te moleste con otra consulta, ya tengo creados los controles para la nueva sección de los skills y puedo añadirlos correctamente pero no logro que los inputs de título y texto de los skills me los actualice al momento en la previa del customizer. En los controles le tengo puesto igual que los originales con transport-postmessage y en el archivo customizer.js en la carpeta js de zerif-child pongo el código de los nuevos skills para cambiar el html. Pero no previsualiza el cambio en el customizer. Me faltará tocar algo más?

        • Caribdis Diseño Web

          Hola, Bernart.

          En teoría debería funcionar. Si lo incluiste correctamente con customize_preview_init, fijate que en el archivo customizer.js hayas reemplazado todas las variables _aboutus_ por _newsection_ (o el nombre que hayas elegido), y que uses la ID de la nueva sección (en lugar de #aboutus).

          Saludos.

  9. Alberto Gariazzo

    Hola amigos,No hay otra manera de colocar una imagen es esta sección de habilidades?
    He repetido varias veces los pasos sin lograr el resultado, incluso he probado cambiar el archivo /sections/about_us.php de la carpeta del tema padre y se borra por completo la sección.
    Aprovecho la oportunidad para agradecer por los tutoriales .
    Saludos
    Alberto

    • Caribdis Diseño Web

      Hola, Alberto.

      Gracias por tu comentario.

      No hay otra forma para el caso de esta sección. Fijate que no estés dejando vacío el campo Título de característica 1. Escribí allí al menos una letra o número, y guardá los cambios.

      Saludos.

  10. Aritz

    Hola Ana
    Una cosa, tengo la pagina en tres idiomas con el plugin Polylang, las paginas las tengo en tres idiomas, con sus enlaces traducidos y linkados en la edicion de las paginas.
    En los widgets de nuestro equipo y nuestro enfoque, tengo puesto los enlaces a una de las paginas, al cambiar el idioma, no hace caso, y se dirige automaticamente al enlace que le ordene, y no se puede editar los enlaces en traduciones de cadena del Polylang
    Una solucion que se me ocurre es tener que triplicar los widgets para cada idioma, y visualizar cada uno para su idioma correspondiente, pero me parece un poco lioso, no entiendo entonces que beneficios tiene la pestaña de idiomas de la creacion de paginas, donde se pone la traduccion de cada pagina
    Se entiende la pregunta? Sabes a que me refiero?

    • Caribdis Diseño Web

      Sí, desde luego se entiende, y la manera correcta de hacerlo es crear los widgets correspondientes para cada idioma (seleccionar el que corresponde del menú El widget se muestra para:). Por supuesto que es más trabajo, pero es lo mismo que usar páginas en varios idiomas: hay que crear una nueva página o entrada para cada idioma que quieras mostrar en el sitio. No es que brinde algún beneficio en concreto, sino que es la herramienta para gestionar los distintos idiomas de manera ordenada. 🙂

      • Aritz

        Gracias por la aclaraciön

  11. Aritz

    Gracias me ha funcionado perfectamente,
    se podria meter un slider, en vez de una o dos fotos? o daria problemas?

    • Caribdis Diseño Web

      Sí, se puede tranquilamente. En lugar de <img src="http://ruta-completa-a-la-imagen.jpg" alt="descripciondelaimagen" /> pegarías <?php echo do_shortcode('[metaslider id=511]'); ?> (ejemplo para Meta Slider).

      Saludos.

      • Aritz

        Funciona a la perfeccion
        Muchisimas gracias
        Me gustaria hacer una pregunta es que no encuentro la forma de hacerlo de otra manera:
        En nuestro equipo, al poner el raton encima de uno de los miembros aparece un desplegable negro, es posible a parte del texto que introducimos, insertar un boton, por ejemplo, mas información?

        • Caribdis Diseño Web

          Hola, Aritz.

          Sí es posible, nada más tenés que introducir el código HTML para el enlace (<a href="#">Más información</a>). Y para aplicar los mismos estilos de los botones, tendrías que usar las clases correspondientes. El campo descripción tendría que incluir algo similar a esto:

          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dapibus, eros at accumsan auctor, felis eros condimentum quam, non porttitor est urna vel neque
          <a class="btn btn-primary custom-button red-btn" href="#">Más información</a>
          

          Reemplazá el símbolo # con la URL del enlace correspondiente y la clase red-btn por la clase green-btn, o blue-btn o yellow-btn si querés mantener los colores de cada ubicación.

          Saludos.

          • Aritz

            Bien, lo probare
            Para ello supongo tengo que copiar el archivo our team de la carpeta padre a la carpeta sections del tema hijo e introducir el codigo html?
            Muchas gracias
            Saludos

          • Caribdis Diseño Web

            No, no, eso iría dentro del campo Descripción del widget Nuestro Equipo.

          • Aritz

            Ok perfecto asi lo he hecho, Y funciona.
            Muchisimas gracias

  12. Gabriel

    Hola, estoy queriendo cambiar la sección habilidades con una imagen pero estoy utilizando el tema “Zerius” en vez de Zerif Lite, el problema es que no encuentro el archivo about_us.php para modificar. lo que hice fue copiarlo de la versión Zerif Lite pero no funcionó. Me ayudan? Gracias!

    • Caribdis Diseño Web

      Hola, Gabriel.

      Si copiaste el archivo about_us.php de la carpeta /sections/ de Zerif Lite, y lo pegaste en una carpeta /sections/ (que tenés que crear) en Zerius, debería funcionar sin problemas. Fijate si no te estás salteando algún paso.

      Saludos.

Los comentarios están cerrados. ¿Por qué?

Pin It en Pinterest

Compartir esto

Compartir es agradecer

Si esta publicación te resultó útil, puedes compartirla y ayudar a otros. ¡Gracias!