Cómo cambiar el tamaño de tu logo de WordPress (funciona con cualquier tema)

¿Quieres aprender cómo cambiar el tamaño de tu logo de WordPress?

El logo de tu sitio web es una parte importante de tu marca, por lo que querrás asegurarte de que se vea bien. Sin embargo, a veces no está claro cómo hacer que el logo sea más grande o más pequeño.

En este artículo, te mostraremos cómo cambiar fácilmente el tamaño del logo de WordPress en cualquier tema.

¿Por qué cambiar el tamaño del logo en WordPress?

No importa si contratas a alguien para diseñar un logo personalizado para tu sitio web de WordPress o diseñas uno tú mismo usando un creador de logos gratuito, los logos son una parte importante de cualquier sitio web.

Sin embargo, los tamaños de imagen predeterminados de WordPress pueden no funcionar para tu logo.

Un logo demasiado pequeño no destacará, mientras que un logo demasiado grande puede distraer a los visitantes del resto de tu contenido.

Si bien puedes hacer edición básica de imágenes en WordPress, el logo de tu sitio es una parte importante de tu marca, por lo que querrás asegurarte de que se vea genial. Dicho esto, veamos cómo puedes cambiar correctamente el tamaño del logo en WordPress. Simplemente usa los enlaces rápidos a continuación para saltar al método que deseas usar:

• Método 1: Cambiar el tamaño del logo con el Personalizador de WordPress (Recomendado)
• Método 2: Cambiar el tamaño del logo de WordPress usando el Editor de Sitio Completo (Solo Temas Basados en Bloques)
• Método 3: Cambiar el tamaño del logo de WordPress editando CSS (Funciona con la mayoría de los temas)
• Método 4: Cambiar el tamaño del logo de WordPress sin editar CSS (Sin código)

Método 1: Cambiar el tamaño del logo con el Personalizador de WordPress (Recomendado)

La forma más sencilla y fácil de cambiar el tamaño del logo en WordPress es usando el personalizador del tema. Sin embargo, este método solo funciona si tu tema soporta tamaños de imagen adicionales en WordPress.

La buena noticia es que muchos de los temas populares vienen con herramientas integradas para cambiar el tamaño del logo, incluyendo Divi, Astra y Ultra.

Nota: Tu logo solo será tan grande como la imagen que subas, así que asegúrate de subir una imagen más grande si quieres que el logo sea más grande.

En esta guía, te mostraremos cómo cambiar tu logo en los temas Divi, Astra y Ultra, pero el método es similar para la mayoría de los temas populares de WordPress.

Incluso si no cubrimos tu tema específico, aún vale la pena ver si puedes cambiar el tamaño del logo usando el personalizador de WordPress.

Simplemente ve a Apariencia » Personalizar y busca cualquier configuración etiquetada como Encabezado, Identidad del sitio, Logo o similar.

Si no ves estas configuraciones, siempre puedes consultar la documentación de tu tema o contactar al desarrollador para obtener ayuda. Para más información sobre este tema, por favor consulta nuestra guía sobre cómo pedir soporte de WordPress correctamente y obtenerlo.

Si tu tema no tiene un editor de logo integrado, entonces necesitarás usar el método 2 o 3.

Cambiar el tamaño del logo de WordPress en el tema Divi de WordPress

Primero, ve a Divi » Personalizador del tema y haz clic en 'Encabezado y Navegación'.

Después de eso, selecciona 'Barra del menú principal'.

Aquí, puedes cambiar el tamaño de tu logo. Por ejemplo, podrías mostrarlo como una imagen de tamaño completo.

Primero, necesitas ajustar la configuración de 'Altura del menú'. Esto controla la altura de todo tu menú de navegación, lo que definirá qué tan grande puedes hacer tu logo.

Después de eso, puedes cambiar la configuración de ‘Altura Máxima del Logo’, que es un porcentaje de la altura total del menú.

Puedes arrastrar el control deslizante de ‘Altura Máxima del Logo’ hacia arriba o hacia abajo hasta que encuentres el tamaño perfecto para tu blog de WordPress.

Cuando estés satisfecho con cómo se ve el logo, asegúrate de hacer clic en ‘Publicar’ antes de cerrar el Personalizador de WordPress.

Cambiar el tamaño del logo de WordPress en el tema Astra de WordPress

Si estás usando el tema Astra, ve a Apariencia » Personalizar y haz clic en la opción de menú ‘Constructor de Encabezado’.

Después de eso, haz clic en la opción de menú ‘Título del sitio y logo’.

Aquí, puedes cambiar fácilmente el tamaño de tu logo.

Simplemente arrastra el control deslizante de ‘Ancho del Logo’ hacia la izquierda o la derecha para hacer el logo más grande o más pequeño.

El Personalizador de WordPress mostrará estos cambios en su vista previa en vivo, para que puedas probar diferentes tamaños para ver cuál se ve mejor para tu sitio web de WordPress.

Cuando estés satisfecho con cómo se ve el logo, haz clic en ‘Publicar’ para que aparezca en tu sitio web.

Cambiar el tamaño del logo de WordPress en el tema Ultra de WordPress

Para personalizar el tamaño del logo en el tema Ultra, ve a Apariencia » Personalizar y haz clic en ‘Logo del sitio y eslogan’ en el menú de la izquierda.

Después de eso, haz clic en el menú desplegable ‘Logo del sitio’.

Cuando aparezca, selecciona el botón de opción ‘Imagen del logo’.

Ahora, puedes hacer el logo más grande o más pequeño escribiendo nuevos tamaños en los cuadros.

Puedes cambiar el ancho usando el cuadro de la izquierda y la altura usando el cuadro de la derecha.

Si quieres escalar el logo basándote en el tamaño original, entonces solo cambia las dimensiones en un cuadro.

A medida que escribes las nuevas dimensiones, el tamaño del logo cambiará en tiempo real.

Cuando estés contento con cómo se ve el logo, haz clic en ‘Publicar’ para que tus cambios se hagan efectivos.

Método 2: Cambiar el tamaño del logo de WordPress usando el Editor de Sitio Completo (Solo Temas Basados en Bloques)

Si estás usando un tema basado en bloques como Hestia Pro, entonces puedes cambiar el tamaño de las imágenes sin perder calidad, usando el editor de sitio completo.

cambiar el tamaño del logo usando el editor de sitio completo.

Para empezar, simplemente ve a Temas » Editor en el panel de WordPress.

Por defecto, el editor de sitio completo mostrará la plantilla de inicio de tu tema.

Para cambiar el tamaño del logo de tu sitio, normalmente seleccionarás ‘Patrones’.

El editor ahora mostrará una lista de todos los patrones y partes de plantilla que componen tu tema.

Simplemente haz clic en la opción Encabezado, que controla el diseño del encabezado de tu blog.

WordPress ahora mostrará todas las partes de plantilla de Encabezado que componen el tema actual. Simplemente busca el encabezado que deseas editar y haz clic en él.

Ahora verás una vista previa de esa plantilla de encabezado. Para proceder y editar la plantilla, haz clic en el pequeño ícono de lápiz.

Hecho esto, haz clic para seleccionar el logo de tu sitio.

En el menú de la derecha, selecciona la pestaña ‘Bloque’.

Luego, selecciona la pestaña ‘Configuración’.

Ahora puedes hacer el logo más grande o más pequeño arrastrando el control deslizante ‘Ancho de imagen’.

Cuando estés satisfecho con cómo se ve el logo, haz clic en el botón ‘Guardar’.

Ahora, si visitas tu sitio web, verás el nuevo logo en acción.

Método 3: Cambiar el tamaño del logo de WordPress editando CSS (Funciona con la mayoría de los temas)

Si tu tema de WordPress no tiene soporte integrado para cambiar el tamaño del logo, entonces otra opción es agregar CSS personalizado. Esto te permite cambiar el tamaño de tu logo sin usar un plugin de optimización de imágenes por separado.

Para empezar, necesitarás saber la clase CSS del logo de tu sitio web. Para obtener esta información, ve a cualquier página que tenga el logo, como la página de inicio de tu sitio.

Aquí, haz clic derecho en cualquier parte de esa página y selecciona la opción ‘Inspeccionar’.

Esto abrirá un menú de inspección que muestra todo el código de la página de inicio.

Después de eso, haz clic en el ícono ‘Seleccionar un elemento’, que parece un puntero de ratón.

A continuación, simplemente coloca el ratón sobre el logo de tu sitio web hasta que aparezca la clase CSS.

Se verá similar a la imagen de abajo.

Usarás esta clase CSS para personalizar el tamaño de tu logo de WordPress, así que toma nota de la clase en un editor de texto como el Bloc de notas.

En el panel de administración de WordPress, ve a Apariencia » Personalizar. Luego, haz clic en la opción ‘CSS adicional’.

Ahora puedes agregar código CSS personalizado al pequeño editor de código.

Simplemente agrega la clase CSS que encontraste anteriormente y luego especifica las nuevas dimensiones del logo que deseas usar.

Aquí tienes un ejemplo de cómo se verá el código:

 img.custom-logo {
     max-height: 100px !important;
}

Asegúrate de cambiar la clase CSS img.custom-logo y el valor max-height.

Después de hacer tus cambios, simplemente haz clic en el botón ‘Publicar’ para que se apliquen en vivo.

Método 4: Cambiar el tamaño del logo de WordPress sin editar CSS (Sin código)

Si no te sientes cómodo editando archivos de temas o agregando CSS personalizado, entonces puedes usar un plugin de CSS para WordPress en su lugar. Estos plugins te permiten hacer cambios visuales en tu sitio, similar a usar un constructor de páginas de arrastrar y soltar.

Recomendamos usar CSS Hero, ya que te permite optimizar imágenes y personalizar casi todos los estilos CSS sin escribir una sola línea de código CSS.

Oferta: Los lectores de WPBeginner pueden obtener un 40% de descuento a través de nuestro código de cupón de CSS Hero.

Lo primero que necesitas hacer es instalar y activar el plugin. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, haz clic en el botón 'Proceder a la activación del producto' para activar el plugin. Lo encontrarás justo encima de tu lista de plugins instalados.

Esto te llevará a una pantalla donde puedes ingresar tu nombre de usuario y contraseña. Simplemente sigue las instrucciones en pantalla para verificar tu cuenta, y serás devuelto al panel de WordPress cuando hayas terminado.

Después de eso, haz clic en el botón 'Personalizar con CSS Hero' en la barra de herramientas de administración de WordPress.

Ahora verás tu sitio web con CSS Hero ejecutándose encima de él.

CSS Hero utiliza un editor WYSIWYG (lo que ves es lo que obtienes), así que simplemente haz clic en cualquier elemento de la página y verás una barra de herramientas con todas las personalizaciones que puedes hacer.

Simplemente haz clic en el logo de tu WordPress en la parte superior de la página.

Después de eso, selecciona el enlace ‘Mostrar propiedades avanzadas’ para ver todos los cambios que puedes hacer en el logo de tu WordPress.

En el cuadro ‘Medidas’, encontrarás las opciones ‘Ancho máximo’ y ‘Alto máximo’.

Para cambiar el tamaño del logo, simplemente escribe nuevos números en estos campos. Si deseas mantener las dimensiones originales de la imagen, entonces solo cambia el alto o el ancho.

La vista previa en vivo mostrará tus cambios automáticamente. Esto significa que puedes probar diferentes tamaños para ver cuál se ve mejor.

Cuando estés satisfecho con cómo se ve tu logo, haz clic en ‘Guardar y Publicar’ para que el logo redimensionado esté activo.

Esperamos que este artículo te haya ayudado a cambiar el tamaño de tu logo. También te puede interesar ver nuestra selección experta de los mejores plugins de WordPress para gestionar imágenes, o ver nuestra guía sobre cómo elegir el mejor formato de imagen para WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.