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

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

código personalizar menú principal divi
4.4
(20)

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.
Personalizar menú principal Divi

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.

dónde personalizar css plantilla divi

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.

añadir efecto hover menú divi

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:

truco personalizar menú tema divi

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:

código css cambiar menú Divi

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.

¿Te ha resultado útil?

¡Danos 5 oks!

Promedio de puntuación 4.4 / 5. Recuento de votos: 20

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!

También te puede interesar...

5 Ejemplos de diseños originales para las secciones de Divi
Personalizar los títulos H1, H2, H3, H4, H5 y H6 de la plantilla Divi

32 Comentarios

  1. Gonzalo
    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
  2. Cristina
    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
      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
  3. Claudio Scheuermann
    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
  4. Isabel
    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
  5. sergio
    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
  6. Pedro
    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
  7. hugo
    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
  8. Galaad
    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
  9. juan carlos
    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
  10. Blanca
    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
  11. Nicole Sussq
    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
  12. María
    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
  13. Victor
    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
      Divesp el 9 abril, 2019 a las 10:12

      Hola Victor! muchas gracias por tus palabras y bienvenido 😉

      Responder
  14. Ronald León Madrid
    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
  15. carlo
    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
  16. Brezhnev
    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
  17. Juan
    Juan el 5 abril, 2018 a las 15:04

    Hola, se puede aplicar a un módulo menú de anchura completa.
    Gracias.

    Responder
    • Divesp
      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
  18. Fernando
    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
      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
  19. Juan Carlos
    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
  20. rolandricaurte
    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
  21. Maria
    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
      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
  22. Jon
    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
  23. german
    german el 6 septiembre, 2017 a las 03:58

    se podra poner una imagen ?

    Responder
  24. angel
    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
  25. Antonio Ropero
    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

Enviar comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

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