Divisores verticales: Cómo añadirlos al menú de Divi
Cada menú que se construye para una web es altamente personalizable y gracias a Divi las posibilidades son casi infinitas. Hoy veremos cómo agregar divisores verticales entre los elementos de tu menú de Divi.
Tiempo de lectura estimado: 2 minutos
Índice
Cómo añadir divisores verticales al módulo de menú en Divi
Si quieres que los divisores verticales se vean en todos los elementos del menú:
Si usas una plantilla en el header, el snippet que verás acá aplicará al módulo de menú de Divi, así que la recomendación es usar una plantilla de header en el Divi builder.
No necesitas agregar ninguna clase al módulo, ya que lo estamos apuntando, pero si deseas que este efecto solo se aplique a un módulo de menú en tu página web, reemplaza el .et_pb_menu con tu propia clase CSS y agrégalo al campo CSS del módulo en la pestaña de Avanzado.
El snippet a continuación debes copiarlo en la caja de CSS Personalizado de las Opciones de Tema de Divi.
/*add borders to the menu items*/
.et_pb_menu li:not(:last-child) {
border-right: 2px solid #4e51cb;
}
/*adjust spacing around menu items*/
.et_pb_menu li a {
padding: 2px 20px;
}Si estás usando el header por defecto del tema Divi, el snippet que debes copiar es muy similar al anterior, con la diferencia de que la propiedad CSS ya no apuntará al módulo del menú sino al menú por defecto.
/*add borders to the menu items*/
#top-menu li:not(:last-child) {
border-right: 1px solid #c3c3c3;
margin-bottom: 20px;
}
/*adjust spacing around menu items*/
#et-top-navigation nav > ul > li > a {
padding-bottom: 4px!important;
padding-left: 20px;
}¡Así de fácil es tener divisores verticales en tu menú!
¿Quieres saber más sobre personalizar el menú de Divi?
En este tutorial de Divi aprenderás a hacer «Sticky» o fija una columna dentro de Divi, o el menú hecho con el Theme Builder, de manera sencilla y agregando algunos cachos de código.
De la mano de Quadlayers, un equipo de desarrolladores que hacen cosas realmente maravillosas, en este review podrás conocer QuadMenu, un super plugin que te permitirá configurar un super menú con Divi de una manera super fabulosa, fácil y cómoda.
Recuerda que también puedes unirte a nuestra comunidad premium y acceder a todos nuestros cursos, tutoriales y contenidos descargables de manera inmediata suscribiéndote desde $6 USD/m.
¡Espero haberte ayudado! Nos leemos en la próxima.
de UXDivi? ¡Esta es tu oportunidad de oro! Únete a nuestra comunidad de expertos en Divi y disfruta de recursos exclusivos, tutoriales avanzados, y una red de profesionales al alcance de tu mano.
Jefferson, buenas noches.
Una consulta, si quisiera aplicar esos mismos divisores verticales, pero a un menú secundario o inferior cómo aplicaría? Te comparto el screenshot https://snipboard.io/dKpXtP.jpg.
P.D. El menú principal lo aprendí y me inspiré en otro curso 😉
Hola Aldo,
Para aplicar esos mismos divisores verticales a un menú secundario o inferior, puedes seguir un enfoque similar. Al igual que en el menú principal, puedes reemplazar `.et_pb_menu` con tu propia clase CSS y luego agregarla al campo CSS del módulo en la pestaña Avanzado. Esto personalizará el estilo para el menú secundario o inferior según tus preferencias.
Espero que esto te ayude a lograr el efecto deseado. Si tienes alguna pregunta adicional, no dudes en preguntar. ¡Buena suerte!