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
Este sitio web utiliza cookies propias y de terceros para recopilar información que ayuda a optimizar su visita a sus páginas web.No se utilizarán las cookies para recoger información de carácter personal.Usted puede cambiar su configuración
siempre que lo desee. Política de CookiesAceptar CookiesModificar su configuración