Índice
Los Menús de las páginas webs son uno de los elementos más importantes de ésta, ya que funcionan como guía para que los visitantes a la web encuentren el contenido que buscan.
Aunque el tema Divi sea uno de los mejores temas que existen en la actualidad para WordPress, las opciones de personalización de sus Menús no son muy amplias.
Donde más se nota es el Menú Pincipal, el cual es la primera impresión que tenemos al entrar en una página web, ya sea blog, web corporativa, tienda online, marca personal…
En este artículo voy a explicarte dónde y cómo personalizar el Menú Principal de una web con Divi con tres estilos diferentes que la plantilla no incluye por defecto y que siguen la misma línea de diseño de ésta.
Menú Principal de Divi ¿Dónde se personaliza?
Para configurar el Menú Principal de tu web con Divi, es decir, el menú que se muestra en la parte superior, donde normalmente se ubican las páginas de acceso directo más importantes como Contacto, Blog, Servicios, Productos, Acerca de…Debes dirigirte a:
WordPress -> Divi -> Personalizador de temas -> Cabecera y navegación
Desde este apartado podrás configurar:
- FORMATO DE CABECERA: elige si prefieres un formato de menú con el logo centrado, logo en la parte izquierda, anchura completa o menú deslizar.
- BARRA DE MENÚ PRINCIPAL: elige la altura del menú, el color de fondo, el tamaño, color y fuente del texto. También puedes configurar aquí las opciones del Menú Desplegable.
- BARRA DE MENÚ SECUNDARIO: elige el color de fondo y el tamaño, color y fuente del texto del menú ubicado encima del principal. Aquí se suele indicar datos de la web como el número de teléfono de contacto, el email, las redes sociales…
- AJUSTES DE NAVEGACIÓN FIJA: elige el color de fondo y el tamaño, color y fuente del texto del menú fijo durante la navegación. Si no te interesa este menú para tu página web, se puede desactivar en las opciones del tema.
- ELEMENTOS CABECERA: indica si quieres mostrar los iconos sociales, el icono de búsqueda (lupa), el teléfono o el email en el Menú de Cabecera.

Puedes ver más detalles para congifurar el Menú de Cabecera de Divi paso por paso en nuestro tutorial.
3 Códigos para personalizar el Menú Principal de Divi
Ahora que ya tienes diseñado el Menú con las opciones generales de la plantilla, es hora de darle personalidad propia y crear un Menú que llame la atención a tus visitantes de tu web y que de aspecto de calidad a tu marca.
Para ello he recopilado de la web de Elegant Themes 3 códigos CSS que aplican efectos a los Menús de Divi.
Si deseas añadir alguno de ellos a tu web, tan solo tienes que copiar el código y pegarlo en:
WordPress -> Divi -> Opciones del tema -> General -> Css Personalizado
¡Recuerda guardar cambios! y a continuación comprueba que el estilo se ha aplicado al menú de tu web correctamente.
Si lo necesitas, puedes cambiar cualquier detalle como el color, el grosor de la línea, la velocidad del efecto…y ajustarlo al diseño de tu marca.

Código para añadir una línea en movimiento bajo el título
Personalmente, este estilo es el que más me gusta porque sigue complétamente la línea de diseño limpio y elegante de la plantilla web Divi.
Consiste en añadir una línea bajo cada título de la cabecera de tu web. Esta línea queda fija en el título con enlace activo (al que estés accediendo en ese momento) y se muestra en hover cuando pasas el ratón por los demás títulos, apareciendo de izquierda a derecha.
Puedes ver este efecto en la siguiente imagen.

El código CSS para este efecto es:
*** CAMBIA AQUÍ TUS PREFERENCIAS Y ELIMINA ESTAS FRASES ***
Código para añadir un borde a los títulos
Este efecto consiste en bordear el título del enlace activo (al que estés accediendo en ese momento) y en mostrar una línea bajo el titulo al pasar el ratón por encima (Hover).
Las líneas por defecto, son bastantes gruesas, pero se pueden modificar según el diseño de tu web.
Este efecto de diseño quedaría como en la siguiente imagen:

El código CSS es:
*** CAMBIA AQUÍ TUS PREFERENCIAS Y ELIMINA ESTAS FRASES ***
Código para añadir botones a los títulos
El último código para personalizar el Menú de Divi consiste en añadir un efecto de botón a los títulos del Menú Principal.
Con este código podrás personlizar tanto el menú en estático como el enlace activo y el enlace en hover (enlace por el que pasas el ratón).
Incluso puedes personalizar el radio de los botones, haciéndolos más cuadrados o más redondos, según las preferencias del estilo que quieras darle a tu web.
Este diseño quedaría de la siguiente forma:

Para conseguir este efecto, el código CSS es:
*** CAMBIA AQUÍ TUS PREFERENCIAS Y ELIMINA ESTAS FRASES ***
La plantilla Divi para WordPress es muy completa y trae por defecto muchísimas opciones de configuración, pero si quieres darle un aspecto más diferenciado y que se asemeje lo máximo posible a tu marca, estos 3 Códigos para personalizar el menú de Divi son una opción fácil y rápida de conseguirlo.
Hola, tengo un problema con el submenu, cuando estoy en ese apartado y está subrayado, al tener un submenu, también sale subrayado y queda muy mal, me pueden decir como arreglarlo
Muchas gracias !!
Me gustaría saber cómo puedo cambiar (con DIVI) el nombre de una de las páginas del menú, en concreto el «sobre mí»
Gracias de antemano, un saludo.
Hola Cristina, el nombre de las páginas que ya tienes publicadas en el menú, lo puedes modificar igualmente desde Apariencia -> Menús y seleccionando el menú que te interese modificar. Es decir, se cambia desde WordPress, como habitualmente, y no desde la plantilla. Saludos!
En el Menu, Estoy buscando una manera de cambiar al Hover la palabra. Si dice «Inicio» en raton Hover que diga «Ciudad».
Hola,
Acabo de aterrizar en tu blog y la verdad que tus tips me estan ayudando mucho con mi proyecto. Así que muchas gracias por compartir tu conocimiento.
Quería preguntarte en relación con la personalización de los menús, mi pregunta es: ¿que CSS habría que utilizar para personalizar los menús de anchura completa con los mismos estilos que el menú principal de cabecera y navegación?. En mi caso quiero crear el efecto de botones y me funciona con tu tip 🙂 para el menú principal, pero no sé como hacer para que los menús que estoy creando de ancho fijo hereden los mismos estilos que el de cabecera. Podrías ayudarme, por favor. Millones de gracias!
hola estoy queriendo armar mi blog con divi, me gusto esa pantalla que aparece para ingresar el nombre y el email, es un plugin? excelentes clases. saludos
Buenas, excelente pero deje de utilizar DIVI debido a que se ralentiza mucho la carga con los plugin del desarrollador. Por ejemplo: revisando la carga de su web en PageSpeed, tiene una puntuación muy baja, 32 para Moviles y 75 para pcs, hoy en dia Google tiene el SEO muy en cuenta y la velocidad de la carga para el posicionamiento. Seria estupendo un post dedicado a la optimización de DIVI para la carga rápida de la web con la solucion de todos los problemas, Un saludo..
Hola una consulta quiero que aparezca un scrolbar para que se muestren todos los items de un menú vertical desplegable. Gracias.
Hola, gran artículo.
Cómo se puede cambiar el color de la fuente de la opción activada? En mi web se confunde con el azul de fondo.
Gracias
Saludos, me pasa que personalize cada elemento (cabecera, cuerpo y pie) con el Theme Builder y al cargar el menu que tiene un desplegable, este no se esconde detras del contenido del bloque inferior, por ahi vi que manipulando el indice Z podría corregirse pero sigue igual. Agradeceria cualquier ayuda.
Hola!, Gracias por tu post. Muy interesante, aunque no me funciona muy bien. Usé tu CSS àra crear un cta-menu, pero ahora quiero poner las líneas de subrayado y en este boton me aparece en medio. (¿?)
Otra cosa, he modificado (te lo pongo en mayúsculas abajo:
#top-menu li a:before {
content: «»;
position: absolute;
z-index: -2;
left: 0;
RIGHT:50%
bottom: 40%;
de forma que la línea aparezca a la mitad del texto, pero sólo lo aplica a un elemento del menú y no al resto (¿?)
Me puedes echar una mano?
Hola, primero que todo agradecer por tan buena página con códigos que ayudan mucho!!
Tengo una consulta, realice en mi sitio web personalización de fuente para el menú, quedando por defecto este para todas las páginas lo cual era la idea principal. El tema esta que cuándo ingreso a la sección de BLOG y abro algún artículo de este la fuente del menú cambia a la que venía por defecto en el tema. Cómo puedo hacer que esto no ocurra? Y que quede siempre con la personalización misma para todas las páginas incluido articulos del blog?
Existe algún código css para este tema..
Ojalá puedas ayudarme, estaré muy agradecida.
Saludos!!
¡Muchas gracias por el tutorial!
Estoy probando el código para añadir una línea en movimiento bajo el título y funciona perfectamente, pero estoy configurando el menú principal para que el logo esté alineado con el resto de elementos del menú, y también aplica este efecto. Hay alguna forma de que la línea se vea en las distintas páginas del menú pero no en el logo?
Muchas gracias.
Hoy 8-4-2019 apenas me suscribo a este blog, , me parece muy interesante y didactico necesitaba mejorar el menú de un proyecto que estoy desarrollando y otro personal, con una sola hora que vi los ejemplos mejore mucho mi menu. Gracias
Hola Victor! muchas gracias por tus palabras y bienvenido 😉
Estimado muchas gracias, me ha servido de mucho tu publicación para dar efecto a los menús.
Hola he intentado hacer que la animación vaya de arriba hacia abajo pero no lo consigo, he probado cambiando:
-webkit-transition-property: down;
transition-property: down;
-webkit-transition-property: botton;
transition-property: botton;
pero no hay forma, espero me puedas ayudar?
Saludos juan quisiera colocarle sombras a las fuentes del menú de mi blogs, pero no se!
Hola, se puede aplicar a un módulo menú de anchura completa.
Gracias.
Hola Juan, estos códigos son solo para el Menú Superior o Top Menú. Un saludo!
Hola, en primer lugar felicitarte por la web y todo el esfuerzo realizado.
Quería saber como modificar la posición del submenu en divi, ya que prederteminado sale justo debajo del header y quisiera que saliera debajo del item de menú porque queda muy separado.
Gracias de antemano.
Hola Fernando, La verdad es que no he investigado sobre ese tema aún… pero intentaré recopilar información para escribir algún post 😉
Saludos y gracias por seguir el blog!
Hola muchas gracias por el tutorial. Mi duda es con que código disminuyo la interlinea del menú desplegable.
Gracias
hola esta excelente esta informacion, vengo precisamente a ver si me pueden ayudar con lo siguiente jejejeje:
tengo un slider con un boton (Mis Servicios)
a este boton quiero hacerle un efecto hover que cuando pase por encima me aparezca
(Mis servicios+el logo)
habia pensado hacerlo utilizando un JPG (background-image: url…….)
el caso es que si me funciona pero el resultado se aplica a tooooodos los botones de los sliders que tengo
tengo 4 paginas y solo quiero que se vea en la home!
GRACIAS DE ANTEMANO y espero puedan ayudarme
Hola!
Estoy probando el «codigo para añadir botones a los titulos», me funciona bastante bien, solo que el color de fondo para los elementos Hover, solo aparece en la barra principal no en los submenu, alguien podria darme alguna pista para que aparezca en todos los elementos.
Gracias.
Hola María!
Con ese código debería de aplicarse también a los submenús. Tal y como lo hemos hecho en este mismo blog. Es decir, el menú desplegable tomará automáticamente el estilo que hayas aplicado a los botones del Menú Principal. Si no te funciona por cualquier razón, tendrías que ampliar este código.
Saludos!
Hola!
Alguien sabe cómo puedo situar las páginas del menú secundario a la izquierda de este y los botones sociales a la derecha, por favor?
Gracias!
se podra poner una imagen ?
Hola German,
Quizás este post te pueda ayudar a añadir una imagen al Menú de Divi: https://divesp.com/anadir-imagenes-al-menu-cabecera-de-divi/
Un saludo!
Hola
Estoy en local haciendo pruebas y quisiera saber cómo puedo centrar el logotipo en el modo deslizar, ya que se queda fijo a la izquierda
Gracias
El último modo se podría poner sólo en uno de los elementos del menú, a modo de botón dentro del menú???
¡Hola Antonio!
Añadir un botón al Menú de Divi sería un procedimiento diferente. Tengo otro post sobre ello 😉 https://divesp.com/anadir-boton-cta-menu-divi/ Espero que te ayude.
Gracias por seguir el blog! 😉