Zerif Lite: ¿Cómo cambiar el tamaño de los logos de los clientes?

25 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: 17 de julio de 2016

Este es el vigésimo tutorial de la serie para el tema gratuito de ThemeIsle, Zerif Lite. En solo un par de pasos vamos a ver cómo aumentar el tamaño de los logos de los clientes en la sección “Quiénes somos”.

El tamaño predeterminado de 130px en ocasiones puede resultar demasiado poco. Así se ven en la demo de Zerif Lite:

Zerif - Tamaño predeterminado de logos

Como siempre que hacemos modificaciones de estilo, tenemos dos opciones: usar un tema hijo (instrucciones aquí para crearlo) o añadir el código en el recuadro CSS adicional del Personalizador:

.client-list div img { 
    max-width: 200px !important;
}

Para este ejemplo agregamos cuatro logos y usamos un ancho de 200 píxeles para que la distribución sea lo más uniforme posible:

Zerif - Tamaño personalizado de logos

De acuerdo con la cantidad de logos que queremos que se vean en una línea, cambiaremos el valor de 200px al tamaño que sea necesario. Una recomendación para que se vean uniformes es guardar todas las imágenes con las mismas dimensiones (en nuestro ejemplo, usamos un ancho de 200px y un alto de 58px para los cuatro logos).

Tutorial original en inglés: How to change dimensions for “Clients” in Zerif

Caribdis.Net
Últimas entradas de Caribdis.Net (ver todo)

Se responden dudas o consultas de los lectores acerca del contenido de esta publicación únicamente en su respectiva sección de comentarios. 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.

25 Comentarios

  1. Hugo

    Hola, como puedo aumentar el tamaño de las letras del Menu?, pude agrandar el logo pero las letras quedan muy pequeñas, gracias

    • Caribdis Diseño Web

      Hola, Hugo.

      Fijate en esta respuesta.

      Saludos.

  2. Lorena Dagdug

    Hola, buenos días.
    Hay forma de cambiar los widgest de “nuestro enfoque” a rectángulos? o aumentarlos de tamaño?

    Saludos
    Y de antemano, gracias

    • Caribdis Diseño Web

      Hola, Lorena.

      El tutorial para cambiar los bordes está aquí. Y para cambiarles el tamaño, fijate en esta respuesta.

      Saludos.

      • Lorena Dagdug

        Muchas gracias por tu apoyo!!!!

  3. Edward

    Hola gracias por el tutorial quisiera saber como cambiar el tamaño del logo de la pagina, para poner un logo mas grande. gracias

    • Caribdis Diseño Web

      Hola, Edward.

      Fijate en este tutorial.

      Saludos.

  4. Aida

    hola,
    una pregunta, como puedo cambiar la class col-lg? es que tengo 6 widgets en el apartado nuestro enfoque y me gustaria que quedase 3 y tres pero por defecto salen 4 en una misma linia…
    Gracias!

    • Caribdis Diseño Web

      Hola, Aida.

      Tendrías que usar el siguiente código CSS:

      @media (min-width:768px) {
      .focus .row .col-lg-3 {
          width: 33%;
      }
      }
      

      Saludos.

  5. Kathy

    Hola, no me queda claro dónde se debe agregar el código.

    • Caribdis Diseño Web

      Hola, Kathy.

      Los códigos CSS son personalizaciones de estilo. Para aplicarlas a un tema se requiere, o bien incluirlas en la hoja de estilos del tema hijo, o bien instalar un plugin que te permita usar esos códigos sin necesidad del tema hijo. En esta entrada se explica cómo crear un tema hijo para Zerif (solo el paso 1; en esta entrada se explica el porqué de los temas hijos). Si no, en esta entrada se recomienda el plugin Simple CSS (aunque cualquier plugin con la misma finalidad debería servir).

      Saludos.

  6. Younly

    Hola, me gustaría poner mas grande el logotipo de la web en cuestion, podrian ayudarme con esto?

    • Caribdis Diseño Web

      Hola, Younly. Fijate en esta respuesta. Saludos.

  7. Noemy

    Hola! Tengo dos preguntitas, la primera es cómo has logrado poner un elemento “sección” de la pagina estática de inicio en una página normal. Poniendo como ejemplo el caso de esta entrada: poner la sección “QUIENES SOMOS” en una página a parte de la página principal.
    La otra pregunta es donde está la sección “NUESTROS CLIENTES”
    Muchísimas gracias y felicitarte por los tutoriales, son de gran ayuda.

    • Caribdis Diseño Web

      Hola, Noemy.

      La primera pregunta no me quedó muy clara. La imagen de la entrada es la página de inicio. Si te referís a mostrar la sección Quiénes somos en una página interna, lo que tendrías que hacer es crear una plantilla de página e incluir esa sección. Pero tené en cuenta que el contenido lo controlarás únicamente desde el Personalizador (y sería exactamente el mismo que el de la página de inicio si elegiste mostrarlo ahí).

      En la carpeta del tema hijo creamos un archivo que se llame, por ejemplo, template-aboutus.php y pegamos lo siguiente:

      <?php
      /**
       * Template Name: About Us
       */
      get_header(); ?>
      <div class="clear"></div>
      </header>
      <?php zerif_after_header_trigger(); ?>
      <div id="content" class="site-content">
      <?php zerif_before_page_content_trigger();
      zerif_top_page_content_trigger();  
      zerif_before_about_us_trigger();
      get_template_part( 'sections/about_us' );
      zerif_after_about_us_trigger();
      zerif_bottom_page_content_trigger();
      zerif_after_page_content_trigger(); 
      get_footer(); ?>
      

      Luego creamos una página desde Páginas > Añadir nueva y seleccionamos la plantilla About Us del panel Atributos de página. La guardamos y listo.

      Y la sección Nuestros clientes se muestra solo si añadiste algún widget correspondiente a la sección Quiénes somos.

      Saludos.

      • N

        Muchas gracias por la respuesta, exactamente era eso lo que preguntaba pero me da error 🙁 ¿En el caso de querer poner otro tipo de sección lo tengo que hacer igual?

        • Caribdis Diseño Web

          Sí, se hace igual, modificando la línea get_template_part( 'sections/about_us' ); con la sección que elijas. ¿Cuál sería el error?

          • N

            Me da en la linea 9, pero no quiero causar molestias. Te puedo enviar una captura de pantalla. Muchas gracias por todo y disculpa

          • Caribdis Diseño Web

            El error se da en los servidores que tienen una versión de PHP obsoleta. Si podés, actualizá a la versión 5.6+ (recomendado). Si no, probá borrando el código a partir de if ( get_stylesheet() !== get_template() ) {.

            Saludos.

      • Aureliano Servin

        Cómo estas Ana. Muchas gracias por estas respuestas.
        Mi consulta: Cómo puedo mostrar en una página la sección “Nuestro equipo” con el mismo formato de la Página Principal?

        • Caribdis Diseño Web

          Hola, Aureliano.

          Creá una página de ancho completo con un nombre específico (por ejemplo “Nuestro equipo”).

          Luego en el archivo functions.php del tema hijo pegá el siguiente código:

          function zerif_child_our_team() {
          	if ( is_page( 'nuestro-equipo' ) ) {
          	get_template_part( 'sections/our_team' );
          	}
          }
          add_action( 'zerif_bottom_page_content', 'zerif_child_our_team' );
          

          El contenido de is_page será el slug de la página.

          Saludos.

  8. ANGEL

    Hola buenas!!
    Estoy intentando dar uso al efecto parallax, el problema es que el tamaño de mi archivo png se ve demasiado grande con respecto al fondo, lo he cambiado de tamaño mediante photoshop ,pero al meterlo en parallax sigue apareciendo del mismo tamaño con respesto al fondo. Tambien lo cambio de tamaño con wordpress, pero nada. Ya no se que hacer para hacerlo mas pequeño.
    Gracias de antemano .

    • Caribdis Diseño Web

      Hola, Ángel.

      No hay manera de controlar la altura de la imagen en este efecto. Lo que deberías hacer es crear una imagen del mismo tamaño que la predeterminada (background2.png, de la carpeta /zerif-lite/images/), que es de 1650×1100 píxeles, y trabajar desde esa medida (pegale tu imagen en el tamaño y ubicación que quieras que aparezca). Luego la guardás como PNG transparente.

      Fijate si te sirve.

      Saludos.

  9. beatriz

    Hola,
    una pregunta, donde puedo cambiar el título de este widget, es decir, que en vez de que se llame nuestros clientes, pueda poner nuestros partners.
    Gracias Ana

    • Caribdis Diseño Web

      Hola, Beatriz.

      En Zerif Lite ese título es una de las cadenas de los archivos de traducción (en Zerif Pro es editable desde el Personalizador). Tendrías que abrir el archivo es_ES.po de la carpeta /languages/ con Poedit (o el plugin Loco Translate) y editar el texto NUESTROS CLIENTES por el que vos quieras.

      Espero que te sirva.

      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!