Cómo cambiar el logo de WordPress en Divi

El otro día una compañera de profesión me comentaba muy apurada que estaba tratando de cambiar el logo de WordPress en Divi pero que por mucho que lo hiciese este no se cambiaba. A mi que me encanta resolver los misterios de WordPress le pedí que me enseñase la web y comprobé que lo que estaba cambiando era el favicon.

Cambiar el logo de WordPress en Divi no es una tarea difícil pero si es verdad que puede dar lugar a confusiones como esta. Por ello aquí tienes una breve vía para que no te ocurra a ti.

Cambiar el logo en DIVI

Si todavía no has cambiado el logo de Divi posiblemente te aparezca este logo por defecto.  

Un logo es una parte muy importante para la creación de imagen de marca, y su inclusión en tu web es algo prioritario. Para cambiar el logo en el tema Divi primero deberás buscar su el apartado “Divi” en el menú lateral. 

Una vez en la página de “Opciones de tema Divi” revisa que estés en las pestañas General> General.

Ya al principio verás que la primera configuración es, precisamente, cambiar el logo de Divi. Aquí encontrarás dos opciones:

• Restaurar: Te vuelve a poner el logo de Divi por defecto.
• Subir: Sube un nuevo logo.

Pulsa en esta última y elige en la ventana emergente de medios tu logo.

Cuanto lo hayas elegido pulsa a “establecer como logotipo”.

Por último pulsa al botón “Guardar cambios” que se encuentra tanto en la parte superior como inferior de la página:

¡Y ya está! Ya has conseguido cambiar tu logo en Divi.

Cómo cambiar el logo para Divi

A la hora de diseñar y elegir una tamaño para tu web en Divi debes tener presente algunas cuestiones:

Tamaño

En caso de Divi el logo que viene por defecto tiene un tamaño de 93px x 43px pero esta no es una medida de referencia.

No puedo decirte un tamaño exacto de logo, porque dependerá de tu diseño: si tu logo es cuadrado u horizontal.

Lo que si tienes que hacer es usar un poco el sentido común. Subir un logo de 1000px X 400px no tiene sentido.

Si has diseñado o has pagado por el diseño de un logo es muy probable que tengas una imagen de grandes dimensiones para poder utilizarlo en otros formatos como publicidad. En este caso debe redimensionar el logo antes de subirlo.

Te enseño algunas medidas orientativas para que entiendas qué dimensión puede tener tu logo:

• Diseño en horizontal:
  • 250px x 150
  • 350px x 75px
  • 400px x 100
• Diseño cuadrado:
  • 160 x 160
  • 100 x 100

Peso

Optimizar imágenes en WordPress es una tarea imprescindible para mejorar la velocidad de tu sitio. El logo va a ser una imagen que se va a cargar al comienzo de todas las páginas de tu web. Por tanto si tu logo pesa mucho, la carga de tus páginas aumentará y esto puede afectar a la experiencia de usuario y a tu posicionamiento SEO.

Antes de subir la imagen a medios comprímela usando herramientas como compressor.io que te permite reducir mucho el peso de la imagen sin perder calidad.

Formato

El formato de la imagen afecta a cómo se verá tu logo y en el peso. Aunque el formato JPG es muy utilizado para imágenes yo muy raras ocasiones lo utilizaría para el logo. Lo suyo es que elijas un formato que permita un fondo transparente como los siguientes:

• PNG: Pesa un poco más que el JPG pero ofrece buena calidad y fondos transparentes.
• SVG: Este formato vectorial escalable compuesto por código. Ofrece buena calidad de imagen y evita que el logo tenga un aspecto pixelado. WordPress no permite subir este tipo de archivos por defecto a su gestor de medios, sin embargo hay plugins que permite subir imágenes en SVG. Otra cosa a tener en cuenta con este formato es la seguridad. Al cabe la posibilidad de inyectar código malicioso en este tipo de archivos.
• Webp: Este es un formato es muy recomendado por Google en su herramienta PageSpeed. Ofrece una compresión considerablemente mayor a JPEG y PNG. Al igual SVG no se puede cargar este tipo de imágenes en la biblioteca de medios de WordPress, pero existen plugins que convierten las imágenes de tu web en este formato o incluso herramientas de plugins de optimización que realizan esta funcionalidad.

Nombre

El nombre de las imágenes de tu web es una cuestión a cuidar por razones de SEO. ¡Incluso en tu logo! Revisa el nombre con el que vas a subir el archivo, intenta que incluya el nombre de dominio o de tus servicios.

• Ejemplo de un mal nombre: 355468.png
• Ejemplo de un nombre optimizado: logo-agencia-viajes.png

Cambiar la posición de tu Logo en Divi

Una vez tengas cambiado tu logo puede que no te guste del todo la posición que ocupa en el menú principal.

Divi es una herramienta que ofrece muchísimas posibilidades de personalización y con el logo no iba a ser menos.

Para cambiar la posición de tu logo debes ir a Apariencia> Personalizar.

De esta manera podrás acceder a todas las opciones de personalización que ofrece DIVI, te recomiendo que le eches un vistazo general, aunque nosotros ahora profundizaremos en todo lo referente al Logo.

Los ajustes de personalización están organizados en una barra lateral, y a la derecha podrás ver cómo se van implementando las variaciones que realices en tu web.

Para cambiar la posición del logo en Divi pulsa en Cabecera y navegación > Formato de Cabecera. Aquí encontrarás un desplegable llamado “estilo de cabecera” donde podrás elegir 4 posiciones:

• Por defecto: El logo aparece a la izquierda en el menú

• Centrado: El logo queda centrado en la parte superior al menú.

• Centrado en línea: El logotipo queda en el medio y los elementos del menú a los dos lados.

• Deslizar: El logo queda a la izquierda y el menú se queda escondido en un menú hamburguesa. Cuando se abre desplaza el contenido principal. No lo veo muy responsive.
• Pantalla completa: Igual que el anterior pero cuando se abre el menú ocupa la pantalla completa.

En las tres primeras opciones puedes marcar un check para habilitar un menú SideBar que yo veo práctico sobre todo en microsites de una sola página con menús con elementos de ancla.

Tras hacer cualquier cambio no te olvides pulsar el botón «publicar» en la parte superior del menú.

Cambiar el tamaño del logo en Divi

Para cambiar el tamaño del logo pulsa en Cabecera y navegación > Barra del menú principal. Se te abrirá este menú.

• Ocultar Imagen de Logotipo: permite ocultar tu logotipo si por alguna razón no quieres mostrarlo.
• Logo Max Altura: Indica el tamaño máximo que debe tener tu logotipo dentro del espacio que tiene reservado en el menú. Procura dejar un poco de espacio arriba y abajo para que tu menú se vea más limpio.

Nuevamente, recuerda pulsar “Publicar” tras realizar cualquier cambio.

Menú fijo con logo responsive

En casos de menús fijos que se mantienen en la parte superior a medida que hacemos scroll en la página puede interesarnos que el logo se haga más pequeño al llegar a cierta altura. Puedes ver un ejemplo en la propia web de Divi.

Hacer esto en Divi es tan sencillo como ir en la barra lateral de WordPress a Divi>Opciones del tema y marcar esta opción.

¡Y ya está¡ Ya tienes un logo responsive con el mínimo esfuerzo.

Espero que tras este tutorial cambiar el logo de WordPress en Divi ya no te suponga ningún problema. ¿Tienes alguna duda? ¡Cuéntamela en comentaros!