Cómo Cambiar el Tamaño de Tu Logotipo de WordPress (Funciona con Cualquier Tema)

Recientemente, uno de nuestros lectores preguntó si era posible cambiar el tamaño de su logotipo en WordPress.

El logotipo de su sitio web es una parte importante de su marca. Dependiendo del tema de WordPress que uses, a veces no está claro cómo cambiar el tamaño de tu logotipo para hacerlo más grande o más pequeño.

En este artículo, le mostraremos cómo cambiar fácilmente el tamaño del logotipo de WordPress , paso a paso.

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

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

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

Cuando subes tu logotipo a WordPress, es posible que no siempre tenga el tamaño correcto.

Un logotipo demasiado pequeño no destacará. Mientras que, un logotipo que es demasiado grande puede terminar impactando negativamente en el diseño de tu sitio web.

Si ha invertido en un diseño de logotipo personalizado, debe asegurarse de que su logotipo aparezca con el tamaño correcto en el encabezado de su sitio web.

Para aquellos que todavía están en el proceso de diseño de logotipos, vea nuestras selecciones de los mejores creadores de logotipos gratuitos.

Dicho esto, te mostraremos algunas formas diferentes de cambiar el tamaño del logotipo en WordPress.

El método que elija dependerá del tema de WordPress que esté utilizando y de su nivel de comodidad con la edición de código CSS.

  • Cambie el tamaño del logotipo de WordPress con el personalizador de WordPress
  • Cambie el tamaño del logotipo de WordPress editando el código CSS
  • Cambie el tamaño del logotipo de WordPress sin editar el código CSS

Método 1. Cambiar el tamaño del logotipo de WordPress con el Personalizador de WordPress

La forma más sencilla y sencilla de cambiar el tamaño del logotipo en WordPress es mediante el personalizador de temas. Sin embargo, este método solo funciona si su tema de WordPress lo admite.

Muchos temas populares como Divi, Astra, Ultra y otros tienen una herramienta de cambio de tamaño de logotipo incorporada.

Al cargar su logotipo en WordPress, estos temas facilitan el ajuste del logotipo con un simple deslizador que puede usar para ajustar el ancho y la altura.

Nota: el tamaño de su logotipo solo será tan grande como la imagen que cargue, por lo que debe asegurarse de cargar una imagen de logotipo más grande, si su objetivo es hacerla más grande.

Por el bien del tutorial, mostraremos cómo cambiar su logotipo en el tema Divi, Astra y Ultra, pero el método es similar para los temas de WordPress más populares. Si tu tema no tiene esta opción, entonces necesitas usar el método 2 o 3 de este tutorial.

Cambie el tamaño del logotipo de WordPress en el tema de WordPress Divi

Primero, vaya al Personalizador de temas Divi » y haga clic en la opción de menú ‘Encabezado & Navegación’.

 Seleccione el personalizador de temas Divi

Seleccione Personalizador de temas Divi

Después de eso, haga clic en la opción desplegable ‘Barra de menú principal’.

Aquí puede cambiar el tamaño de su logotipo.

 Seleccione la barra de menú principal Divi

Seleccione la barra de menú principal Divi

Primero, debe ajustar la configuración de «Altura del menú». Esto controla la altura de todo el menú de navegación y definirá qué tan grande puede hacer su logotipo.

Después de eso, puede cambiar la configuración de «Altura máxima del logotipo», que es un porcentaje de la altura total del menú.

Ajustar la altura del logotipo

Ajustar la altura del logotipo

Puede ajustar el control deslizante «Altura máxima del logotipo» hacia arriba y hacia abajo hasta que encuentre el tamaño perfecto del logotipo para su blog de WordPress.

Asegúrese de hacer clic en el botón «Publicar» para guardar los cambios antes de salir de la pantalla.

Cambie el tamaño del logotipo de WordPress en el tema de Astra para WordPress

Lo primero que debe hacer es navegar a Apariencia «Personalizar y luego hacer clic en la opción de menú «Encabezado».

Personalizar el tema Astra

Personaliza el tema Astra

Después de eso, haz clic en la opción de menú «Identidad del sitio».

Aquí puede ajustar fácilmente el tamaño de su logotipo.

 Haga clic en la identidad del sitio en Astra

Haga clic en identidad del sitio en Astra

Todo lo que tiene que hacer es mover el control deslizante «Ancho del logotipo» a la izquierda o a la derecha.

Puede ver automáticamente los cambios de tamaño de su logotipo en tiempo real, a medida que mueve el control deslizante.

 Deslizador de ancho del logotipo de Astra

Deslizador de ancho del logotipo de Astra

Una vez que esté satisfecho con el tamaño de su logotipo, asegúrese de hacer clic en «Publicar» antes de salir de la página.

Cambie el tamaño del logotipo de WordPress en el tema Ultra WordPress

Para personalizar el tamaño del logotipo en el tema Ultra, vaya a Apariencia «Personalizar» y haga clic en el elemento de navegación «Logotipo del sitio & Eslogan».

 Logotipo y eslogan del sitio Ultra click

Logotipo y eslogan del sitio Ultra click

Después de eso, haga clic en el menú desplegable «Logotipo del sitio».

A continuación, seleccione el botón de opción «Imagen del logotipo» que aparece.

 Botón del logotipo del sitio Ultra click

Botón de logotipo del sitio Ultra click

Ahora, puede cambiar el tamaño del logotipo introduciendo nuevas dimensiones en los cuadros a la derecha de la imagen de su logotipo. Si desea que la imagen se ajuste a escala en función del tamaño original, solo introduzca las nuevas dimensiones del logotipo en un cuadro.

Puede cambiar el ancho con la caja de la izquierda y la altura con la caja de la derecha.

 Cambiar la altura y el ancho del logotipo

Cambiar la altura y el ancho del logotipo

Al introducir nuevas dimensiones, verá cómo cambia el tamaño de su logotipo en tiempo real.

Una vez que hayas terminado de personalizar el tamaño de tu logotipo, asegúrate de hacer clic en el botón «Publicar».

Si tu tema no está resaltado arriba, todavía existe la posibilidad de que puedas personalizar el tamaño de tu logotipo usando el personalizador de WordPress.

Simplemente vaya a Apariencia » Personalizar en cualquier tema que esté utilizando y vea qué opciones de personalización están disponibles para su logotipo o encabezado.

Método 2. Cambie el tamaño del logotipo de WordPress editando CSS

Si su tema de WordPress no admite el cambio del tamaño del logotipo con el personalizador de temas de WordPress, puede cambiar el tamaño agregando CSS personalizado.

Lo primero que debe hacer es navegar a la página de inicio de su sitio web.

Luego, haga clic con el botón derecho en cualquier parte de la página y seleccione la opción ‘Inspeccionar’. Esto abrirá un menú Inspeccionar que muestra todo el código de la página.

 Haga clic con el botón derecho en inspeccionar

Haga clic con el botón derecho en inspeccionar

Después de eso, debe hacer clic en el icono «Seleccionar un elemento» que se parezca a un puntero del ratón.

Esto le permitirá seleccionar el elemento de logotipo de su sitio web y ver el código.

 Haga clic en seleccionar un icono de elemento

Haga clic en seleccionar un icono de elemento

A continuación, simplemente coloque el cursor sobre el logotipo de su 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 logotipo de WordPress. Por lo tanto, anota esto en un editor de texto como el bloc de notas.

 Clase CSS del logotipo

Logotipo CSS class

Ahora puede volver a su panel de administración de WordPress y navegar a Apariencia «Personalizar». Debe hacer clic en la opción de menú’ CSS adicional’.

Esto mostrará un menú desplegable donde puede agregar código CSS personalizado.

 Seleccione CSS adicional

Seleccione CSS adicional

Simplemente agregue la clase CSS que encontró anteriormente y especifique las nuevas dimensiones de la imagen. Puede usar el código CSS a continuación como ejemplo.

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

Necesita cambiar la clase CSS img.custom-logo anterior a la clase CSS que usa su tema.

También puede cambiar el max-height al tamaño que desee.

Así es como se ve dentro del personalizador de WordPress.

 Personalizador CSS adicional de WordPress

Personalizador CSS WordPress adicional

Una vez que haya realizado los cambios, simplemente haga clic en el botón «Publicar» para realizar los cambios en vivo.

Método 3. Cambie el Tamaño del Logotipo de WordPress Sin Editar CSS

Si no se siente cómodo editando archivos de temas o agregando CSS personalizado, este método es para usted.

Mediante el uso de un plugin de estilo de WordPress, puedes realizar cambios visuales en tu sitio de forma similar a un constructor de páginas de arrastrar y soltar.

Recomendamos usar CSS Hero. Es un plugin styler que te permite editar casi todos los estilos CSS de tu sitio de WordPress sin escribir una sola línea de código CSS.

Oferta: Los lectores de WPBeginner pueden obtener un descuento del 34% a través de nuestro código de cupón de héroe CSS.

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

Tras la activación, debe hacer clic en el botón «Proceder a la activación del producto» para activar el complemento. Se encuentra justo encima de su lista de complementos instalados.

Activar el complemento CSS Hero

Activar el plugin CSS Hero

Esto te llevará a una pantalla donde puedes introducir tu nombre de usuario y contraseña. Simplemente siga las instrucciones en pantalla y se le redirigirá a su sitio una vez que se verifique su cuenta.

Después de eso, haz clic en el botón «Personalizar con héroe CSS» en la parte superior de la barra de herramientas de administración de WordPress.

Personalizar con CSS Hero

Personaliza con CSS Hero

Esto te llevará a tu sitio web con CSS Hero ejecutándose encima. CSS Hero usa un editor WYSIWYG (Lo que Ves Es Lo Que Obtienes).

Cuando haga clic en cualquier elemento de su página, aparecerá una barra de herramientas a la izquierda para realizar personalizaciones.

 Vista previa de héroe CSS

Vista previa de héroe CSS

A continuación, haga clic en su logotipo de WordPress en la parte superior de la página.

Después de eso, haga clic en el enlace ‘Mostrar accesorios avanzados’.

 Haga clic en mostrar accesorios avanzados

Haz clic en mostrar accesorios avanzados

Esto te ofrece aún más opciones de personalización de CSS.

A continuación, busque la casilla ‘Medidas’. Aquí encontrarás opciones llamadas ‘Ancho máximo’ y ‘Altura máxima’.

Desea cambiarlos al tamaño de imagen que prefiera. Si desea que la imagen mantenga las mismas dimensiones, solo cambie la altura o el ancho.

Definir el ancho y la altura del logotipo

Defina el ancho y la altura del logotipo

Los cambios que realice se mostrarán automáticamente en su página.

Una vez que haya terminado de cambiar el tamaño de su logotipo, debe hacer clic en «Guardar y publicar» para realizar los cambios en vivo.

Esperamos que este artículo te haya ayudado a cambiar el tamaño de tu logotipo de WordPress. También es posible que desee ver nuestras selecciones de expertos para el mejor software de chat en vivo para pequeñas empresas, y nuestra lista de los complementos de WordPress imprescindibles para sitios web empresariales.

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

Leave a Reply

Tu dirección de correo electrónico no será publicada.