5
(8)

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:

evolución logo pepsi

¿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.

subir logo a divi

añadir logo a divi

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».

cambiar tamaño logo en divi

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.

cambiar ubicación logo divi

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.

logo centrado en menú divi

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.

logotipo en el centro

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».

configurar menú y logo divi

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.

menú web hamburguesa en divi

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.

sobreponer logo divi cabecera

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:

  1. 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»/]
  2. 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.

  1. 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»/]
  2. 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.
    logo superpuesto divi
  3. 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:

  1. 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.
    id post
  2. 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»/]
  3. 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.

no mostrar logo en página divi

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».

ocultar logo divi

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».

eliminar logo divi

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.

¿Te ha resultado útil?

¡Danos 5 oks!

Promedio de puntuación 5 / 5. Recuento de votos: 8

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en los medios sociales!

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies