Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)
Los logotipos son una parte importante de la identidad de cualquier marca. Ver el logotipo de una empresa que te gusta te ayuda a crear instantáneamente una conexión y sentir confianza en el producto. Lo mismo ocurre con el logotipo de tu sitio web. Cada sitio web que visites tendrá su logotipo en casi todas las páginas y entradas publicadas.
Uno de nuestros anteriores consejos rápidos cubrió el tema de cómo podemos cambiar el logotipo en un sitio web de WordPress. Nuestro objetivo en este artículo es cambiar el tamaño del logotipo.
Antes de comenzar
Los logotipos brindan a las personas una manera sencilla de asociar una identidad de marca con tu sitio web. Por lo tanto, casi todos los temas tienen la opción de cambiar un logotipo usando el personalizador del panel de administración de WordPress. Sin embargo, no ocurre lo mismo cuando se trata de cambiar el tamaño del logotipo. Básicamente, esto significa que es posible que debas trabajar un poco más para hacerlo.
Hay muchas formas de cambiar el tamaño del logotipo en un sitio web de WordPress, pero nos limitaremos únicamente a dos métodos que son ideales para principiantes y no requieren que hagas muchas modificaciones en el código del sitio web.
¡Comencemos con el más sencillo!
Cambiar el tamaño del logotipo de WordPress con configuraciones incorporadas
Algunos desarrolladores de temas prémium te proporcionarán una solución inmediata para cambiar el tamaño del logotipo en tu sitio web de WordPress. Aprenderemos cómo hacer eso con un tema educativo llamado Eduma, disponible en ThemeForest.
El primer paso es visitar Apariencia > Personalizar desde el panel de administración de WordPress después de que hayas iniciado sesión en el back-end.
Ahora exploraremos un poco para ver las opciones de menú disponibles y determinar cuál de ellas podría tener la configuración de logotipo que necesitamos. El menú General parece ser un buen candidato, así que vamos a hacer clic en él.
Haz clic en Logotipo en la siguiente lista de elementos de menú que aparece en la pantalla. Luego deberías ver algunas opciones para cambiar el logotipo, así como su tamaño. Este tema en particular nos permite realizar una serie de configuraciones, como proporcionar diferentes imágenes para la versión regular y la versión pegajosa del logotipo.
También deberías ver algo como Ancho del logotipo o Altura del logotipo si te desplazas hacia abajo en las configuraciones. En nuestro caso, vamos a establecer el valor del Ancho del logotipo en 60%. Cualquier cambio que realices se reflejará de inmediato en la vista previa del sitio web para que puedas deshacer cualquier modificación que no te guste.
Cambiar el tamaño del logotipo de WordPress con CSS personalizado
Este método para cambiar el tamaño del logotipo de WordPress requiere un poco más de trabajo, pero también te brinda más control. Idealmente, deberías considerar usarlo solamente si tu tema no tiene ninguna opción para cambiar directamente el tamaño del logotipo dentro de las configuraciones del personalizador.
Aquí usaremos el tema Twenty Twenty-One de WordPress como ejemplo, pero los mismos pasos funcionarán para todos los temas que tengas.
El primer paso aquí es averiguar qué selector de CSS utiliza el tema para influir en el logotipo de tu sitio web. Para hacer eso, simplemente visita cualquier página de tu sitio web y luego haz clic con el botón derecho en el logotipo. Haz clic en Inspeccionar en el menú contextual.
Esto debería abrir las herramientas del desarrollador en el navegador y deberías ver un código similar al de la imagen a continuación. Busca el selector de CSS que especifica el ancho y la altura del logotipo. Es importante encontrar el selector en el que ninguna de estas propiedades esté tachada; cuando las propiedades están tachadas, significa que otro selector más arriba de la lista las sobrescribe.
El selector resaltado funcionará perfectamente en nuestro caso.
Intenta jugar con estos valores para determinar cuál es el tamaño correcto del logotipo para tu sitio web. Hay dos cosas que debes tener en cuenta aquí.
En primer lugar, es buena idea evitar configurar tanto el valor de width como el de height para el logotipo. Esto podría resultar en un estiramiento forzado del logotipo, lo que arruinaría su diseño.
En segundo lugar, es posible que el solo hecho de establecer un valor para width o para height no siempre cambie el tamaño del logotipo. Esto generalmente se debe a que estos valores podrían estar restringidos a un tamaño máximo determinado, debido a las propiedades max-width y max-height. Por ejemplo, configurar el valor de width del logotipo en 600 px no funcionará si el valor de max-width es 300 px. En este caso, necesitarás cambiar max-width y max-height. La imagen que aparece a continuación muestra nuestros valores.
Ahora viene la parte en la que realizamos cambios al tamaño del logotipo. Ve al personalizador de temas en el panel de administración de WordPress navegando a Apariencia > Personalizar.
Deberías ver un elemento de menú llamado CSS adicional. Haz clic en él.
Ahora pega el selector y las propiedades CSS que cambiaste anteriormente en este cuadro y presiona el botón Publicar.
Esto debería actualizar el tamaño del logotipo en el sitio web.
Pensamientos finales
En este tutorial, aprendimos dos métodos diferentes para cambiar el tamaño del logotipo en WordPress. El primer método es más fácil de usar y deberías preferirlo si tu tema permite esta funcionalidad. Es muy probable que los desarrolladores del tema incluyan algunas comprobaciones integradas para garantizar que cualquier cambio extremo en el tamaño del logotipo no afecte el diseño.
El segundo método es un poco más complicado, pero su funcionamiento casi siempre está garantizado si eliges los selectores cuidadosamente. Asegúrate de probar el diseño final en diferentes dispositivos para confirmar que no hayan cambios inesperados en las posiciones de los diferentes elementos.
By
