3 Códigos sencillos para personalizar un «Menú» con la plantilla Divi

Mar 9, 2017 | Códigos para Divi | 32 Comentarios

Í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:

#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
 content: "";
 position: absolute;
 z-index: 2;
 left: 0;
 right: 0;
}
#top-menu li a:before {
 content: "";
 position: absolute;
 z-index: -2;
 left: 0;
 right: 100%;
 bottom: 50%;
 background: #15bf86; /*** COLOR DE LA LINEA INFERIOR ***/
 height: 3px; /*** GROSOR DE LA LINEA INFERIOR ***/
 -webkit-transition-property: right;
 transition-property: right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#top-menu li a:hover {
 opacity: 1 !important;
}
#top-menu li a:hover:before {
 right: 0;
}
#top-menu li li a:before {
 bottom: 10%;
}

*** 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:

#top-menu li > a:hover {
 box-shadow: 0 10px 0 0 #F15A29 !important; /*** COLOR Y GROSOR DE LINEA HOVER ***/
 padding-bottom: 34px;
 opacity: 1 !important;
}
#top-menu li li a {
 padding-bottom: 6px !important;
}
#top-menu li.current-menu-item > a,
.et-fixed-header #top-menu li.current-menu-item > a {
 border: 10px solid #F15A29; /*** COLOR Y GROSOR DE LA CAJA ***/
 padding: 10px;
 margin-bottom: -10px;
}

*** 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:

.et_header_style_left #et-top-navigation nav > ul > li > a,
.et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a {
 padding-bottom: 15px;
}
#top-menu li {
 padding-right: 5px;
}
#et-top-navigation {
 padding: 20px 0 !important;
}
#top-menu li a {
 background: #C1B2AB; /*** CAMBIA EL COLOR DE FONDO ***/
 padding: 15px 20px;
 border-radius: 3px;
}
#top-menu li a:hover,
#top-menu li li a:hover {
 color: #fff !important;
}
#top-menu li a:hover {
 background: #559CAD !important; /*** CAMBIA EL COLOR DE FONDO EN HOVER ***/
}
#top-menu li.current-menu-item > a {
 background: #edc77b; /*** CAMBIA EL COLOR DE FONDO DEL ENLACE ACTIVO ***/
}
#top-menu .menu-item-has-children > a:first-child:after {
 content: none;
}

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

Añadir nuevos iconos de RR.SS a los menús de Divi
Personalizar los títulos H1, H2, H3, H4, H5 y H6 de la plantilla Divi

32 Comentarios

Gonzalo el 26 enero, 2023 a las 12:10
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 !!
Responder
Cristina el 18 junio, 2021 a las 21:38
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.
Responder
- Divesp el 20 junio, 2021 a las 16:57
  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!
  Responder
Claudio Scheuermann el 10 septiembre, 2020 a las 05:10
En el Menu, Estoy buscando una manera de cambiar al Hover la palabra. Si dice «Inicio» en raton Hover que diga «Ciudad».
Responder
Isabel el 26 julio, 2020 a las 18:18
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!
Responder
sergio el 2 julio, 2020 a las 16:49
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
Responder
Pedro el 29 abril, 2020 a las 00:54
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..
Responder
hugo el 20 abril, 2020 a las 05:16
Hola una consulta quiero que aparezca un scrolbar para que se muestren todos los items de un menú vertical desplegable. Gracias.
Responder
Galaad el 16 abril, 2020 a las 14:56
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
Responder
juan carlos el 26 febrero, 2020 a las 20:13
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.
Responder
Blanca el 17 octubre, 2019 a las 23:52
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?
Responder
Nicole Sussq el 28 mayo, 2019 a las 16:22
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!!
Responder
María el 7 mayo, 2019 a las 08:47
¡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.
Responder
Victor el 9 abril, 2019 a las 05:10
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
Responder
- Divesp el 9 abril, 2019 a las 10:12
  Hola Victor! muchas gracias por tus palabras y bienvenido 😉
  Responder
Ronald León Madrid el 22 febrero, 2019 a las 15:53
Estimado muchas gracias, me ha servido de mucho tu publicación para dar efecto a los menús.
Responder
carlo el 20 febrero, 2019 a las 23:02
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?
Responder
Brezhnev el 17 abril, 2018 a las 15:55
Saludos juan quisiera colocarle sombras a las fuentes del menú de mi blogs, pero no se!
Responder
Juan el 5 abril, 2018 a las 15:04
Hola, se puede aplicar a un módulo menú de anchura completa.
Gracias.
Responder
- Divesp el 9 abril, 2018 a las 14:16
  Hola Juan, estos códigos son solo para el Menú Superior o Top Menú. Un saludo!
  Responder
Fernando el 2 enero, 2018 a las 12:15
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.
Responder
- Divesp el 18 enero, 2018 a las 12:56
  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!
  Responder
Juan Carlos el 14 diciembre, 2017 a las 04:19
Hola muchas gracias por el tutorial. Mi duda es con que código disminuyo la interlinea del menú desplegable.
Gracias
Responder
rolandricaurte el 2 noviembre, 2017 a las 07:24
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
Responder
Maria el 28 octubre, 2017 a las 03:55
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.
Responder
- Divesp el 13 noviembre, 2017 a las 13:35
  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!
  Responder
Jon el 6 octubre, 2017 a las 13:29
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!
Responder
german el 6 septiembre, 2017 a las 03:58
se podra poner una imagen ?
Responder
- Divesp el 12 septiembre, 2017 a las 16:28
  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!
  Responder
angel el 1 agosto, 2017 a las 18:38
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
Responder
Antonio Ropero el 22 junio, 2017 a las 00:32
El último modo se podría poner sólo en uno de los elementos del menú, a modo de botón dentro del menú???
Responder
- Divesp el 22 junio, 2017 a las 10:52
  ¡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! 😉
  Responder

3 Códigos sencillos para personalizar un «Menú» con la plantilla Divi

Menú Principal de Divi ¿Dónde se personaliza?

3 Códigos para personalizar el Menú Principal de Divi

Código para añadir una línea en movimiento bajo el título

Código para añadir un borde a los títulos

Código para añadir botones a los títulos

También te puede interesar...

Añadir nuevos iconos de RR.SS a los menús de Divi
Personalizar los títulos H1, H2, H3, H4, H5 y H6 de la plantilla Divi

32 Comentarios

Enviar comentario Cancelar la respuesta

¿Qué te interesa?

Categorías

.

.

Uso de cookies

¡APRENDE MÁS SOBRE DIVI!

¡Gracias! Ahora VE A TU BANDEJA DE ENTRADA para confirmar tu suscripción.

3 Códigos sencillos para personalizar un «Menú» con la plantilla Divi

Menú Principal de Divi ¿Dónde se personaliza?

3 Códigos para personalizar el Menú Principal de Divi

Código para añadir una línea en movimiento bajo el título

Código para añadir un borde a los títulos

Código para añadir botones a los títulos

También te puede interesar...

Añadir nuevos iconos de RR.SS a los menús de DiviPersonalizar los títulos H1, H2, H3, H4, H5 y H6 de la plantilla Divi

32 Comentarios

Enviar comentario Cancelar la respuesta

¿Qué te interesa?

Categorías

.

.

Uso de cookies

¡APRENDE MÁS SOBRE DIVI!

¡Gracias! Ahora VE A TU BANDEJA DE ENTRADA para confirmar tu suscripción.

Añadir nuevos iconos de RR.SS a los menús de Divi
Personalizar los títulos H1, H2, H3, H4, H5 y H6 de la plantilla Divi