Índice
Uno de los elementos más importantes de una web y sobre los que soléis preguntar, es cómo personalizar y modificar el logo de una web en Divi.
La plantilla permite realizar ajustes directos sobre el logotipo, pero sería imposible que se adaptara a las necesidades de cada usuario y de cada web.
Aún así, entre las opciones que incluye Divi y algunos trucos, podrás conseguir que el logo quede a tu gusto.
¿Cómo debería ser el logo de una web?
En términos generales, para que un logo funcione lo mejor posible en Divi o en cualquier otra plantilla, tendría que reunir algunas características básicas:
- Ser lo menos pesado posible: sin llegar a tener mala calidad de imagen, un logo no debería pesar más de 20KB, para evitar que sobrecargue la web. Con unas dimensiones de máximo 500px o 600px será más que suficiente. También es recomendable subirlo con una etiqueta amigable para el SEO (ej: divi-espanol-divesp_logo.png).
- Estar en un formato que se adapte al diseño perfectamente: como por ejemplo, .png para que tenga fondo transparente.
- Usar la psicología de los colores: aunque no nos demos cuenta, los colores provocan fuertes emociones a nuestro cerebro y esto se aprovecha como estrategia de marketing en la mayoría de las empresas. Por ejemplo, el color rojo provoca energía y emoción, el color azul confianza y lealtad, el naranja confianza y diversión, el amarillo felicidad, optimismo y juventud, el verde frescura, salud y crecimiento, el morado creatividad y sabiduría o el color negro riqueza, autoridad y poder.
- Menos es más: tu logo debe representar el significado de tu negocio online e ir en concordancia con la imagen de marca (colores, símbolo, letras iniciales…). Además, cuanto menos recargado sea, más fácil será de recordar por los usuarios y más fáil será detectar de un solo vistazo, qué ofrece tu web.
- Usa una tipografía amistosa: no será nada útil que el logo resulte ilegible. Es cuestión de gustos, pero las tipografías más usadas ahora mismo tienden a ser más redondas, como Open Sans, Lato, Monserrat…
Estos tips te podrán parecer muy básicos, pero lo cierto que a menudo no se cumplen y «rompen» con la estética del resto de la web.
Ponemos, por ejemplo, la evolución del logo de Pepsi a lo largo de los años. Color rojo y azul y un estilo cada vez más simplificado:
¿Y dónde conseguir un logo para tu web?
Si no tienes conocimientos, recursos o tiempo para crear un logo de tu marca, puedes encargarlo a precios muy económicos en webs como Fiverr.
Cómo modificar el logo en la plantilla Divi
A continuación vamos a ver algunas de las modificaciones que puedes hacer de tu logotipo de empresa desde la plantilla Divi.
Añadir el logo en Divi
Este paso lo debes realizar cuanto antes. A ser posible antes del lanzamiento de la web.
En cualquier caso, siempre que quieras añadir un logo a la plantilla Divi, súbelo primero a los Medios de tu WordPress, copia el enlace del logo y después dirígete a Divi > Opciones del tema > General.
Desde aquí podrás subir tanto la imagen del logo como la imagen del favicon (la que se verá en la pestaña del navegador en pequeñito) con el mismo procedimiento.
Cambiar el tamaño del logo
Una vez termines de subir el logo a la plantilla Divi, aparecerá automaticamente en la Barra de Menú Principal de la web.
Por tanto, para modificarlo dirígete a Divi > Personalizador de temas > Cabecera y navegación > Barra de Menú Principal.
Mientras personalizas este menú podrás ver los cambios en el lado derecho de la pantalla.
Para ampliar o reducir el tamaño del logo en Divi, utiliza la barra de «Logo máxima altura».
Centrar el logo en Divi
Si lo que quieres es cambiar la ubicación del logo, entonces dirígete a Divi > Personalizador de temas > Cabecera y navegación > Formato Cabecera.
Desde la plantilla Divi puedes mover el logo a:
POR DEFECTO
Si no cambias esta pestaña, el diseño de menú que viene por defecto en la plantilla Divi es con el logotipo en la izquierda y los enlaces en la derecha.
CENTRADO
Esta es una de las dos opciones para centrar el logo en Divi. En este diseño, el logo se muestra en la parte central superior del menú y los enlaces en la parte inferior del logo. Personalmente, este diseño queda bastante profesional.
LOGOTIPO CENTRADO EN LÍNEA
En este diseño, el logo se muestra en el centro y a la misma altura que los enlaces. Para usar esta opción, es recomendable tener el mismo número de enlaces a la izquierda que a la derecha, es decir, que sean pares, para que quede lo más centrado posible.
DESLIZAR
Si escoges la pestaña «Deslizar», el logo se coloca en la parte izquierda del menú y los enlaces se compactan automáticamente en un «Menú hamburguesa» (menú de tres líneas).
Si clicas en este icono del menú, se abrirá una ventana con el menú en el lateral derecho de la pantalla. El color de fondo de esta ventana será, por defecto, el que hayas escogido como «color de énfasis del tema».
PANTALLA COMPLETA
Por último, la ocpión de «pantalla completa» es muy parecida a la anterior. La única diferencia es que al clicar en el icono del menú, los enlaces de éste aparecerán a modo de capa superpuesta en toda la pantalla.
Igualmente el color de fondo de esta capa será el que hayas seleccionado en las opciones de formato como «color de énfasis del tema».
Este tipo de menú simplificado consigue un diseño muy elegante e interactivo, parecido al que se muestra en formato smartphone o tablet.
Logo inscrustado en imagen de cabecera
Si quieres no mostrar la barra del Menú Principal de la página e integrar el logo con la imagen de cabecera, hay una solución muy sencilla.
Simplemente dirígete a Divi > Personalizador de temas > Cabecera y navegación > Barra de menú principal y en el apartado para elegir el color de fondo del menú, conviértelo en trasnparente.
El color de fondo desaparecerá, la imagen de cabecera se adaptará y el logo y los enlaces quedarán estáticos donde estaban, creando ete efecto tan actual.
Para conseguir este diseño, hemos añadido una capa superpuesta oscura a la imagen de fondo para que se distinga mejor el texto e color blanco.
Cambiar el enlace del logo
No es lo más habitual, pero a veces, surje la necesidad de incluir un enlace en el logo diferente al de Inicio (Home).
Es decir, por defecto, si clicas en el icono de una web, automáticamente serás redirigido a la Home o Página de Inicio. Si por el contrario, necesitas redirigir a los usuarios a otra web cuando hagan click en el logo, tendrás que hacer lo siguiente:
- Ve a Divi > Opciones del tema > Integración > Head y pega el siguiente código:
[pastacode lang=»markup» manual=»%3Cscript%3E%0AjQuery(function(%24)%7B%0A%20%20%20%20%24(‘.logo_container%20a’).attr(‘href’%2C’https%3A%2F%2Fwww.divesp.com’)%3B%0A%7D)%3B%0A%3C%2Fscript%3E» message=»» highlight=»» provider=»manual»/] - A continuación, modifica nuestra url por la que quieras incluir en tu logo. Guarda cambios y comprueba que funciona correctamente.
Añadir un logo superpuesto en Divi
Si lo que quieres es superponer el logo de Divi, puedes realizar estos sencillos pasos para conseguir un diseño diferente.
- Ve a Divi > Opciones del tema > General > CSS personalizado y pega este código:
[pastacode lang=»css» manual=»%40media%20only%20screen%20and%20(max-width%3A%20980px)%20%7B%0A%23logo%20%7B%0Amin-height%3A%20100px%3B%0A%7D%0A%7D%0A%40media%20only%20screen%20and%20(min-width%3A%20981px)%20%7B%0A%23logo%20%7B%0Amin-height%3A%20120px%3B%0A%7D%0A%7D» message=»» highlight=»» provider=»manual»/] - Ahora ve a Divi > Personalizador de temas > Cabecera y navegación > Barra de menú principal y ajusta la altura del logo y del Menú Principal hasta que quede como desees.
- Guarda cambios y el diseño de logo superpuesto ya estaría listo. Con este código se mostrará así en cualquier dispositivo, tanto smartphone como tablet o escritorio.
Eliminar el logo en una única página
Si quieres que el logo no se muestre en una página en concreto, como por ejemplo una Landing Page, (en post no funciona) debes hacer lo siguiente:
- Identifica el ID de la página donde no quieres mostrar el logo. Este ID lo encontrarás en el link de la edición de la página.
- Copia y pega este código en Divi > Opciones del tema > General > CSS Personalizado.
[pastacode lang=»css» manual=».page-id-N%C3%9AMERO%20%23logo%20%7B%0Adisplay%3A%20none%3B%0A%7D» message=»» highlight=»» provider=»manual»/] - Modifica la palabra «NÚMERO» del código por el ID de la página y guarda cambios. Comprueba que el logo ya no aparece en esa página.
Eliminar el logo en toda la web
Por último, la opción de ocultar el logo en Divi.
Puedes hacer que el logo se muestre en el menú de cabecera, pero que desaparezca al navegar y hacer scroll. Es decir, ocultar el logo de la barra de navegación fija.
Para ello, simplemente ve a Divi > Personalizador de temas > Cabecera y navegación > Ajustes de navegación fija y activa la casilla de «Ocultar imagen de logotipo».
Si por el contrario, lo que deseas hacer es eliminar el logo de la cabecera ,ve a Divi > Personalizador de temas > Cabecera y navegación > Barra de menú principal y activa la casilla «Ocultar imagen de logotipo».
Esperamos que te haya servido de ayuda esta guía para personalizar y modificar el logo en Divi. Aunque se podrían realizar muchas más acciones con el logo, como por ejemplo, añadir un logo animado a la web, esto ya requeriría de una configuración más técnica, o a veces, también existen extensiones para realizar otras acciones con el logotipo de Divi.
Hola!! Muchas gracias por el tuto. Yo quiero agregar un logo a la izquierda (aparte del principal) al final de la botonera…el tema es que me lo alinea a la base de los botones, yo quiero que verticalmente esten centrados..como puedo haceR? GRacias!
Como hacer para que solo el logo esté alineado a la izquierda de la pantalla?
¡Muchas gracias!
Resolviste en 5 minutos lo que llevaba 1 hora tratando de hacer, hasta le había cambiado el tamaño a la imagen original.
Gracias
Hola,
¿Alguien puede decirme como muestro un logo diferente según la página?
Gracias
tengo un problema el logo me aparece de diferentes tamanos y efectos atraves de todas mis paginas , es dcir no es uniforme y no se porque , si la barra de menu y logo debe de ser igual para todas las paginas.Me puedes ayudar
Buenos días,
estoy trabajando con Divi y quisiera saber como puedo poner 3 logos con 3 links.
Muchas gracias
Mònica
Buenas!!! Tengo un problemilla con una web que estoy haciendo con Divi. Verás supuestamente tendría que estar enlazado en el logo la página de inicio, bien pues cuando pincho me sale que no encuentra la información. No sé bien que ha pasado, si se ha borrado el enlace y cómo tengo que ponerlo de nuevo.
Gracias de antemano
Hola Marina, gracias por tu comentario. ¿Has activado o desactivado el botón «Enlace de pantalla de inicio» que hay en las opciones del tema > Navigation? Saludos!!
Cuando cambio el logo no se ve el texto, que se puede hacer para mejorar la resolución
Buenos días,
Estoy haciendo una web en divi y me gustaría poner el logo más a la derecha que la opción «por defecto» y no tan a la derecha como la opción «ancho completo». ¿Es posible personalizar la posición de forma manual o con código? ¿cómo se hace?
Gracias!
Hola María! tendrás que añadir un «margin» al logo, hasta que quede tal y como deseas. Saludos!
Hola, yo quisiera mostrar el titulo de la web en lugar del logo. ¿Alguna idea de como hacerlo?.
Muchas gracias.
Hola Jose! tendrás que subir una imagen en .png con el título de la web. Saludos!
Hola,
Muy interesante y funcional, gracias!
Mi problema: tengo el header con logo centrado en linea, todo correcto, pero cada vez que cambio de menu se recarga todo el header. Alguien tiene la solución? Gracias!
Deseo crear mi propio logo
Hola!! Muchas gracias por el artículo.
He probado la opción del logo flotante con la opción de logo centrado en linea y aunque en safari de mac va perfecto, en otros navegadores cómo chrome, firefox, edge… se ve el logo con la altura solicitada, pero muy estrecho (es decir deformado).
En iPad, visto en horizontal, carga mal pero si en la misma sesión, vas navegando por el menú, al volver otra vez a una página ya vista, entonces se ve correctamente.
¿ le pasa a alguien más?
He copiado y pegado el código, usando la opción Logotipo centrado en línea.
(la versión ‘default’ funciona bien… pero necesito la opción del logo centrado 🙂 )
Lo he probado incluso con 1 sólo elemento en el menú, con 2… y el resultado es siempre el mismo, por lo que descarto que el menú lo esté ‘desplazando’ al logo.
Muchas Gracias!!
Hola Ortiz! Dejo tu comentario visible para que lo puedan ver los demás y comenten si alguien ha tenido el mismo problema 😉 😉
¿Que código scripts o Css puedo incrustar en la configuración del menú para escalar el logo en la presentación de la web solo en el teléfono? Gracias
Hola! Enhorabuena por el artículo. Me gustaría poner el solamente el tagline debajo del logo centrado. He hecho visible el tagline y tittle con Divi booster y psoteriormente he ocultado el tittle con css pero el tagline queda a la derecha del logotipo, y lo que quiero es que quede debajo pero que no pise el menú… ¿sabéis si hay alguna forma de hacerlo? Gracias!
Hola Lucía! Lo más fácil en estos casos es contar con una imagen del logo y el tagline todo en uno y en png. Después puedes configurar el logo para que se muestre centrado. Saludos!
Hola, felicidades por la pagina y agradecido por la info publicada.
Tengo un problemita y es que la plantilla divi no me permite subir ni el logo ni el favicon, le doy click al boton subir y en ninguno de los casos hace nada.
Tengo todo realizado y solo me falta eso para terminarla.
A alguno le paso esto? Gracias
Hola Agustin, en principio lo primero que me viene a la mente es que el tamaño de los archivos sea demasiado grande, o que no tengas actualizada la última versión de la plantilla… de todas formas dejo aquí tu duda por si a alguien le ha ocurrido lo mismo.
Un saludo y gracias por seguir el blog 😉
Hola a tod@s
Estoy utilizando Divi en algunos proyectos y en todos tengo el mismo problema. El logo en monitores standar no se lee bien, queda como pixelado. Al verlo en tablet y movil queda perfecto pero en el monitor no se ve bien. He probado distintos tamaños y resoluciones pero no se como solucionarlo. ¿ A algun@ os ha pasado?
Gracias y saludos
hola, Muchas gracias por la información. Yo lo que necesito es aumentar el logo porque no es ua letra sino que es el nombre de la marca con un ícono y un slogan y no se lee. Se puede agrandar más?
Hola amigos de la comunidad, me alegra mucho haber conocido este blog ya que manejan la info de una manera excelente. Volviendo al tema de menús, me interesa mucho saber lo siguiente, ¿cómo puedo tener un logo en el menú principal y uno diferente en el el menú secundario? Esto me surge debido a que hay páginas que en Home presentan una imagen completa de portada, el menú lo dejan en transparente, se mira el logo de un color, pero a la hora de desplazarme hacia abajo, el menú toma un color y el logo también.
Espero puedan ayudarme.
Un enorme abrazo.
Hola Iván!
Este plugin para Divi te permite establecer un logo distinto al hacer scroll, entre otras cosas: https://elegantmarketplace.com/downloads/divi-logo-manager/ ya que desde la misma plantilla no existe esta opción.
Espero que te sirva.
Un abrazo y bienvenido!!
Buenas tardes, trabajo con la plantilla Divi, y me gustaria que el logo no quede tan pequeño en los dispositivos del móvil y tablet.
¿Es posible modificar el tamaño solo para móvil y tablet?
saludos
Hola Moni! Quizás lo más sencillo sería utilizar otra imagen diferente de logo, con las dimensiones que deseas mostrar en estos dispositivos. Puedes ayudarte de este post: https://www.dividojo.com/get-different-mobile-logo-divi-size-bigger/ que aunque está en inglés, es sencillo. Saludos!
Para esto lo que yo hice fue modificar un poco los pixel en el código. Pude poner un tamaño distinto para cada tipo de pantalla o screen.
@media only screen and (max-width: 980px) {
#logo {
min-height: 70px;
}
}
@media only screen and (min-width: 981px) {
#logo {
min-height: 100px;
}
}
Y con eso me quedó perfecto en cada uno!
Hola,
se me presenta un problema con el logo superpuesto alineado en la parte central ya que se deforma, es decir se ve como aplastado por las palabras del menú y sí lo dejo a la izquierda ahí sí se ve bien.
¿Como puedo dejar el logo en el centro sin que se deforme?
Hola Luis Carlos!
Para que el logo quede centrado y tenga el efecto de superpuesto, debes seleccionar la opción «Logotipo centrado en línea» en el estilo de formato de cabecera. Ya que si usas la opción «centrado» no se mostrará bien y ocurrirá lo que comentas de que los títulos se montan en el logo.
Después ya solo debes ajustar la altura del Menú hasta que quede tal como deseas.
Espero que te sirva de ayuda. Saludos! 🙂
Excelente me han ayudado mucho!!
Hola
Tengo un menú principal con el logo puesto en estilo de cabecera «por defecto». El asunto es que el logo me desaparece en el formato Tablet y teléfono móvil. La verdad es que me he vuelto loco haciendo diferentes pruebas y no hay manera. ¿Sabrías dónde está el problema o cómo solucionarlo? Muchísimas gracias
Por cierto, muy buen artículo. No sabía como se podían meter menús sobre un fondo de imagen y funciona perfecto.
Hola Joxhe!
Así por lo que comentas, no sabría decir por qué te desaparece el logo de la web en formatos tablet y móvil. Quizás pueda ser porque tengas añadido algún código o plugin que provoque este problema o quizás sea porque debas modificar el tamaño del logo para que se adapte a todos los dispositivos. Para esta segunda opción puedes ayudarte con este enlace: https://www.dividojo.com/make-your-divi-mobile-logo-bigger/
Espero que lo soluciones pronto.
Gracias por seguir el blog y hasta pronto!
Buenas tardes,
Trabajo con la plantilla DIVI y el problema que tengo es que el texto secundario que forma parte del logo de mi empresa resulta ilegible en formato smartphone porque es demasiado pequeño.
¿Habría forma de poder cargar distintas imágenes de logo en función del dispositivo utilizado?
Lo he logrado hacer con el comando srcset en otra parte de la web pero para el logo no sé como implementarlo.
Si quieres te puedo enviar una captura por privado por si no entiendes bien mi explicación.
Gracias, un saludo
Hola César!
Parece que desde Divi no hay opción de añadir diferentes logos según el dispositivo. Podrías usar algún plugin como este para hacerlo: https://elegantmarketplace.com/downloads/divi-logo-manager/
Un saludo y gracias por leer el blog 😉
Ok. Lo probaré, a ver si funciona.
Muchas gracias. Un saludo
Buenos días y gracias por las explicaciones de tu página que acabo de conocer y a la cual pienso suscribirme dado que hay poca información de divi en español.
Tengo una duda en cuanto al logo.
Mi header está configurada por defecto con el logo a la izda pero no consigo que la altura del logo en dispositivos móbiles sea la adecuada y está demasiado alto.
Necesito aplicar un css para bajar ese logo en tablets y mobiles pero el que aplico no me funciona.
Alguna sugerencia?
Mil gracias y un saludo
Hola fqeuskadi!
Gracias por seguir el blog y por suscribirte 🙂
Por defecto, la altura de menú que establezcas en la plantilla se adapta a todos los dispositivos con la misma proporción, y por lo que he visto, parece que hay introducido algún estilo en la cabecera o en el logo que provoca que esa altura no se adapte al pasar a formato tablet o smartphone.
De todas formas, dejamos tu comentario visible por si le ha ocurrido a más gente.
Un saludo!