Zerif Lite: ¿Cómo cambiar los iconos de los miembros del equipo?

13 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: 19 de junio de 2016

Ya tenemos un tutorial para cambiar o agregar iconos en el pie de página de Zerif Lite, que nos enseña a editar uno de los archivos del tema hijo (footer.php). Como el mismo método no aplica para los iconos de los miembros de equipo, ThemeIsle nos ofrece esta alternativa sencilla y rápida para lograr esta modificación, inclusive sin necesidad de usar un tema hijo.

Para este capítulo número diecinueve, en el primer ejemplo aprenderemos a reemplazar el icono de Behance con el de Instagram. Para eso, en primer lugar tendremos que instalar un plugin que nos permita añadir código JS, como por ejemplo Header and Footer Scripts o Header and Footer Scripts Inserter. Una vez instalado, buscaremos en las opciones del plugin (generalmente en el menú Ajustes) el campo para añadir un script al pie de página y pegaremos lo siguiente:

<script type="text/javascript">
jQuery(document).ready(function($) {
   $('.team-member .fa-behance').addClass('fa-instagram').removeClass('fa-behance');
});
</script>

Zerif Lite - Iconos de miembro de equipo

Si necesitamos cambiar otros iconos, seguiremos la misma lógica y usaremos las clases de Font Awesome que correspondan. Por ejemplo, para mostrar también el icono de WordPress (en lugar del de Dribbble), el código será el siguiente:

<script type="text/javascript">
jQuery(document).ready(function($) {
   $('.team-member .fa-behance').addClass('fa-instagram').removeClass('fa-behance');
   $('.team-member .fa-dribbble').addClass('fa-wordpress').removeClass('fa-dribbble');
});
</script>

Zerif Lite - Otros iconos de miembro de equipo

¡Eso es todo! Y a no confundir las clases de los iconos. Siempre es bueno tener a mano la página de Font Awesome como referencia.

Recordemos que tendremos que introducir la URL correspondiente a la nueva red social, en el campo de la red social que reemplazamos, dentro del widget Zerif – Miembro de equipo.

¿Y qué pasa si ya estamos usando un tema hijo y no queremos instalar el plugin? Simple: agregamos una función en el archivo functions.php para aprovechar el hook zerif_bottom_body:

function zerif_child_team_icons() {
    if ( is_front_page() ) {
    ?>
<script type="text/javascript">
jQuery(document).ready(function($) {
   $('.team-member .fa-behance').addClass('fa-instagram').removeClass('fa-behance');
   $('.team-member .fa-dribbble').addClass('fa-wordpress').removeClass('fa-dribbble');
});
</script>
    <?php }
}
add_action( 'zerif_bottom_body', 'zerif_child_team_icons');

Tutorial original en inglés: How to change Our Team icons 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.

13 Comentarios

  1. Eiseth

    Hola, tengo una consulta respecto a este tema, cuando quiero editar el contenido del widget, me dice “valor no valido”, y arriba me sale ” advertencia, algo de que el codigo ha sido desabilitado”, tendrá solución eso?, gracias, muy buenos datos!

    • Caribdis Diseño Web

      Hola, Eiseth.

      ¿Qué versiones de WP y del tema estás usando? ¿Probaste desactivando plugins?

      Saludos.

  2. paulo vargas

    Excelente tutorial una pregunta hay alguna manera que en los widget de nuestro enfoque se le agregue el mismo icono de facebook que tiene nuestro equipo??

    • Caribdis Diseño Web

      Hola, Paulo.

      Tendrías que agregarlo como código, dentro del campo Texto. Un ejemplo sería algo así:

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec massa enim. Aliquam viverra at est ullamcorper sollicitudin.
      <div class="team-member">
      <div class="social-icons">
          <ul>
              <li><a href="#"><span class="sr-only">Enlace de Facebook</span><i class="fa fa-facebook"></i></a></li>	
          </ul>
      </div>
      </div>
      

      Saludos.

      • paulo vargas

        muchisimas gracias me sirvio disculpa por molestar pero tuvieras de youtube?? y como hacer para que cuando le de click en el widget de nuestro equipo se abra una ventana.

        • Caribdis Diseño Web

          Hola, Paulo.

          Los códigos de los iconos los sacás de aquí.

          Y el widget de miembro de equipo tiene la casilla ¿Abrir enlaces en una nueva ventana?

          Saludos.

  3. Anthony

    Cómo cambiarlo esa sección de equipo a una forma cuadrada?

    • Caribdis Diseño Web

      Este es el tutorial. 😉

  4. Andrés Ortega

    Hola,

    Muchas gracias por toda la información que entregas.

    Quería saber si se puede modificar la posición de los miembros del equipo, ya que somos 5 integrantes, y nos gustaría dejar 3 arriba y dos abajo, sin embargo por defecto quedan 4 arriba y uno abajo.

    Muchas gracias.

    • Caribdis Diseño Web

      Hola, Andrés.

      Pegá el siguiente código en la hoja de estilos del tema hijo o en el recuadro Simple CSS:

      @media screen and (min-width: 768px) {
      .our-team .row .col-lg-3 {
          width: 30%;
      }
      }
      

      Saludos.

  5. Mar Padrón

    Hola, Ana, eres una fuente inagotable de sabiduría!! Me has solucionado, con esta entrada, la cuestión de cambiar los iconos sociales. Pero ahora estoy probando, en la sección “Equipo” de la plantilla, a ver cómo hago para que cuando se pinche en el icono correspondiente de la red social de cada miembro del equipo, se abra en una nueva página. Es decir, que no se abandone la página sino que se abra una pestaña nueva. Me imagino que será con el atributo a target=”_blank”, pero no sé donde editar. Me podrías orientar? Mil gracias por adelantado 🙂

    • Mar Padrón

      Ya lo tengo! he editado Funciones del tema (functions.php), he buscado y he cambiado

      Por

      Por si os sirve… aprendiendo por experimentación 😉

      Un abrazo grande…

      • Caribdis Diseño Web

        Hola, Mar.

        No hace falta editar ningún archivo. El mismo widget de Miembro de equipo tiene la opción de seleccionar o no la casilla ¿Abrir enlaces en una nueva ventana?

        Por otro lado, no es recomendable editar archivos del tema, siempre hay que crear un tema hijo.

        (El código no salió en el comentario; para enviar contenido HTML conviene envolverlo en las etiquetas <code></code>).

        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!