Marketing

Cómo personalizar tu logotipo de WordPress (para cada 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 utilice, a veces puede no estar claro cómo cambiar el tamaño de su logotipo para hacerlo más grande o más pequeño.

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

¿Por qué cambiar el tamaño de un logotipo de WordPress?

Cuando carga su logotipo en WordPress, es posible que no siempre tenga el tamaño correcto.

Los logotipos demasiado pequeños no se destacarán. Sin embargo, un logotipo demasiado grande puede tener un impacto negativo en el diseño de su sitio web.

Si está invirtiendo en un diseño de logotipo personalizado, debe asegurarse de que su logotipo se muestre en el tamaño correcto en el encabezado de su sitio web.

Para aquellos que aún están en el proceso de diseño de logotipos, consulte nuestra selección de los mejores fabricantes de logotipos gratuitos.

Habiendo dicho eso, le mostraremos algunos métodos diferentes que puede usar para cambiar el tamaño de su logotipo de WordPress.

El método que elija depende del tema de WordPress que utilice y de lo cómodo que se sienta editando el código CSS.

  • Cambia el tamaño de tu logo de WordPress con el Personalizador de WordPress
  • Cambia el tamaño del logotipo de WordPress editando el código CSS
  • Cambiar el tamaño del logotipo de WordPress sin editar el código CSS

Método 1. Cambiar el tamaño del logo de WordPress usando el Personalizador de WordPress

La forma más fácil y sencilla de cambiar el tamaño de un logotipo de WordPress es a través de la herramienta de personalización de temas. Sin embargo, este método solo funcionará si su tema de WordPress lo admite.

Temas muy populares como Divi, Astra, Ultra y otros. tienen herramientas integradas para cambiar el tamaño del logotipo.

Cuando carga su logotipo en WordPress, estos temas facilitan la personalización de su logotipo con un simple control deslizante que puede usar para ajustar el ancho y la altura.

notas: El tamaño de su logotipo será tan grande como la imagen que está cargando, por lo que si su objetivo es agrandarlo, asegúrese de cargar una imagen más grande del logotipo.

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

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

Primero, navegue a Divi »Personalizar temas y haga clic en la opción de menú Título y navegación.

Seleccione el personalizador de temas Divi

Luego haga clic en la opción del menú desplegable en la barra de menú principal.

Puede cambiar el tamaño del logotipo aquí.

Seleccione la barra de menú principal de Divi

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

A continuación, 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

Puede ajustar el control deslizante Altura máxima del logotipo hacia arriba o hacia abajo hasta que encuentre el tamaño del logotipo que mejor se adapte a su blog de WordPress.

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

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

Lo primero que debe hacer es navegar hacia arriba Apariencia »Personalización Luego haga clic en la opción de menú «Título».

Tema personalizado para Astra

Luego haga clic en la opción de menú «Identificación del sitio».

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

Haga clic en el ID del sitio de Astra

Todo lo que tiene que hacer es mover el control deslizante de ancho del logotipo hacia la izquierda o hacia la derecha.

A medida que mueve el control deslizante, puede ver automáticamente el cambio de tamaño del logotipo en tiempo real.

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.

Cambiar 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 »Personalizacióny haga clic en el logotipo del sitio y el elemento de navegación del motivo.

Logotipo y lema del sitio web de Ultra Click

Luego haga clic en el menú desplegable «Logotipo del sitio».

A continuación, seleccione el botón de radio «Imagen del logotipo» que espectáculos

Botón del logotipo del sitio web de hiperclic

Ahora puede cambiar el tamaño del logotipo ingresando las nuevas dimensiones en el cuadro a la derecha de la imagen del logotipo. Si desea escalar la imagen a su tamaño original, simplemente ingrese el nuevo tamaño del logotipo en el cuadro.

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

Cambiar la altura y el ancho del logo

Cuando ingrese nuevos tamaños, verá que el tamaño del logotipo cambia en tiempo real.

Cuando haya terminado de personalizar el tamaño de su logotipo, asegúrese de hacer clic en el botón Publicar.

Si su tema no está resaltado arriba, aún puede personalizar el tamaño de su logotipo usando el Personalizador de WordPress.

voy con Apariencia »Personalización sea ​​cual sea el tema que utilice y vea las opciones de personalización disponibles para su logotipo o título.

Método 2: cambie el tamaño del logotipo de WordPress editando CSS

Si su tema de WordPress no admite cambiar el tamaño de su logotipo con la herramienta de personalización de temas de WordPress, puede cambiar su tamaño agregando CSS personalizado.

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

Luego haga clic derecho en cualquier parte de la página y seleccione la opción «Comprobar». Esto abrirá el menú Inspeccionar, mostrando el código completo de la página.

Haga clic con el botón derecho para verificar

Luego, debe hacer clic en el icono «Seleccionar elemento», que parece un puntero de mouse.

Esto te permitirá seleccionar un elemento del logo de tu sitio web y ver el código.

Haga clic en el icono de selección de elementos

Luego, simplemente pase el mouse sobre el logotipo en su sitio web hasta que aparezca la clase CSS. Se parece a la imagen de abajo.

Utilizará esta clase de CSS para personalizar el tamaño de su logotipo de WordPress. Así que escribe esto en un editor de texto como el Bloc de notas.

logotipo de la clase CSS

Ahora puede volver al panel de administración de WordPress e ir a Apariencia »PersonalizaciónDebe hacer clic en la opción de menú «CSS adicional».

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

Seleccione CSS avanzado

Simplemente agregue la clase CSS que encontró anteriormente y especifique los nuevos tamaños de imagen. Puede usar el siguiente código CSS como ejemplo.

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

Debe cambiar la clase CSS img.custom-logo anterior a la clase CSS utilizada por su tema.

También puede cambiar la altura máxima a cualquier tamaño que desee.

Así es como se ve el interior de la herramienta de personalización de WordPress.

Personalizadores CSS adicionales para WordPress

Una vez que haya realizado los cambios, simplemente haga clic en el botón Publicar para que los cambios surtan efecto.

Método 3. Cambiar el tamaño del logotipo de WordPress sin editar CSS

Si no está acostumbrado a editar archivos de temas o agregar CSS personalizado, este método es para usted.

Con los complementos de estilo de WordPress, puede realizar cambios visuales en su sitio web, como si usara constructores de páginas de arrastrar y soltar.

Recomendamos usar CSS Hero. Este es un complemento de estilo que le permite editar casi cualquier estilo CSS en su sitio de WordPress sin escribir ningún código CSS.

tratar: Los lectores de WPBeginner pueden obtener un 34% de descuento con nuestro código de cupón CSS Hero.

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

Después de la activación, debe hacer clic en el botón «Continuar con la activación del producto» para activar el complemento. Está encima de la lista de complementos instalados.

Activar el complemento CSS Hero

Esto lo llevará a una pantalla donde puede ingresar su nombre de usuario y contraseña. Simplemente siga las instrucciones en pantalla y una vez que se verifique su cuenta, será redirigido a su sitio web.

Luego haga clic en el botón «Personalizar con CSS Hero» en la parte superior de la barra de herramientas de administración de WordPress.

Personaliza con CSS Hero

Esto lo llevará a su sitio web CSS Hero que se ejecuta en él. CSS Hero utiliza un editor WYSIWYG (lo que ves es lo que obtienes).

Al hacer clic en cualquier elemento de la página, aparecerá una barra de herramientas de personalización a la izquierda.

Revisión del héroe CSS

Luego haga clic en el logotipo de WordPress en la parte superior de la página.

Luego haga clic en el enlace «Mostrar archivos adjuntos avanzados» archivos «.

Haga clic para mostrar accesorios de primera clase

Esto le brinda más opciones para personalizar CSS.

Luego busque el campo «Measurement». Aquí encontrarás opciones llamadas «Ancho Máx.» y «Altura Máxima».

Desea cambiar su tamaño a su tamaño de imagen preferido. Si desea que la imagen permanezca del mismo tamaño, simplemente cambie la altura o el ancho.

Determinar el ancho y alto del logo.

Cualquier cambio que realice aparecerá automáticamente en su página.

Una vez que haya terminado de cambiar el tamaño de su logotipo, deberá hacer clic en «Guardar y publicar» para que los cambios surtan efecto.

Esperamos que este artículo le haya ayudado a cambiar el tamaño del logotipo de WordPress. También puede consultar nuestra selección experta del mejor software de chat en vivo para pequeñas empresas, así como nuestra lista de complementos de WordPress imprescindibles para sitios web comerciales.

Si te ha gustado este artículo, suscríbete a nuestro canal de tutoriales en vídeo de YouTube para WordPress. También puede encontrarnos en Twitter y Facebook.

Deja una respuesta

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