Cambiar el logo en Divi

Cambiar el logo en Divi es una de las preguntas más frecuentes que hacen los usuarios que están comenzando a trabajar con esta plantilla. Es importante no confundir el logo corporativo de nuestra web con el icono de favoritos o “Favicón”. Este es un artículo de nivel básico y no tocaremos por tanto código.

Pasos para para cambiar el logo en Divi

A continuación, mostraremos los pasos para establecer nuestro logo corporativo en la plantilla Divi.

Subir nuestro logo a la biblioteca de wordpress (medios)

Primero subiremos nuestro logo a la biblioteca de medios de wordpress, para ello en la barra lateral de administración vamos a medios / añadir nuevo, es importante que tenga las características adecuadas de peso, formato y tamaño.

Dar nombre amigable para SEO

El logo representa la marca o imagen de nuestro proyecto y por tanto antes de subirlo le daremos el nombre de archivo adecuado.

Ejemplo correcto: “pantalonespepito.jpg”

Ejemplo incorrecto: “mi-logo-0202.jp”

Añadir el logo a la plantilla Divi

Para cambiar el logo en Divi que viene por defecto, en la barra lateral de administración iremos a la pestaña Divi / Opciones del tema. Una vez allí buscaremos en la parte derecha la sección Logo / Subir, esto nos abrirá una nueva pestaña donde buscaremos el logo que queremos utilizar y una vez elegido le daremos el correspondiente texto alternativo (nombre amigable para SEO), aquí podemos utilizar acentos, espacios etc. Por último, guardamos y previsualizamos que nuestro logo se muestre correctamente, teneis más abajo la animación con los pasos.

Cambiar tamaño de logo en Divi

Si deseamos aumentar el tamaño del logo, podemos ir a la pestaña Divi / personalizar de temas, allí iremos a Cabecera y navegación / Menú principal y localizaremos las siguientes opciones:

Menú altura: Nos permitirá aumentar el tamaño de la altura del menú principal

Logo Max altura: Nos permitirá aumentar la altura del logo dentro del espacio de altura del menú principal

Medidas y peso

El logo que viene por defecto en la plantilla divi tiene unas medidas de 93x46px, no obstante, sería recomendable que cuando creamos nuestro logo (photoshop, illustrator…) tenga unas medidas de alrededor de 90×500, esto nos dará margen para jugar con las opciones de tamaño vistas anteriormente. Respecto al peso hay que intentar que las imágenes no pasen de 200kb, no obstante si pueden ser de menos de 100kb (aunque no es facil), sería ideal para la velocidad de carga de la página. Podemos optimizar imágenes con nuestro programa de edición favorito (Photoshop, Illustrator..) , plugins como Wp Smush, o bien herramientas rápidas online como TinyPNG

Formatos

El formato de nuestro logo vendrá determinado por las características que necesitamos (transparencia, peso o calidad del mismo) adjuntamos abajo un pequeño resumen.

GIF: Calidad baja, admite fondo transparente, máximo 256 colores, en realidad el gif pesaría muy poco, pero se vería con muy poca calidad

JPG: Es un formato compatible con todo tipo de dispositivos, buena optimización (bajo peso), no obstante, no permite fondo transparente.

PNG: Formato con buena optimización, buena calidad y permite además fondos transparente

SVG: Es un formato más reciente que mezcla lo mejor de todos los formatos es decir transparencia, optimización y calidad, no obstante, a día de hoy todavía puede dar algún problema de incompatibilidad con cierto software o dispositivos

Cambiar localización del logo

La disposición por defecto es mantener el logo en la parte izquierda y los enlaces a la derecha (además es bastante recomendable ya que la mayoría de los usuarios son diestros), no obstante, si deseamos cambiar la posición del mismo podemos ir a Divi / Personalizar de temas / Cabecera y navegación / Formato de cabecera, donde podemos elegir las siguientes opciones:

Por defecto: Logotipo en la izquierda y los enlaces a la derecha

Centrado: Aumentará el tamaño del logo y lo pondrá encima de los enlaces

Centrado en línea: Insertará el logo en medio de nuestros enlaces

Deslizar: Mantiene el logo en la izquierda, oculta los enlaces y agrega barra lateral cada vez que hacemos click sobre el menú de enlaces

Pantalla completa: Mantiene el logo a la izquierda, oculta los enlaces, y agrega pantalla completa cada vez que hacemos click en el menú de enlaces

Espero que este artículo haya resultado util, recordaros que realizamos cursos de WordPress todos los meses del año