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

Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros. Accede a todo nuestro contenido desde $12/mes*
Transforma tu carrera con UXDIVI
Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros

Accede a todo nuestro contenido desde US $12/mes*
Transforma tu carrera con UXDIVI

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

Artículos relacionados

Comentarios

    1. 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!

¡Registrate en nuestro próximo Live!
12 de ENERO de 2024 9:30 hrs (CDMX)
En este evento exclusivo, abordaremos las preguntas sobre ecommerce en Divi, además de responder a cualquier otra pregunta que nuestros suscriptores de la academia tengan en mente.
0
días
0
horas
0
minutos
0
segundos
¡Registrate en nuestro próximo Live!
12 DE ENERO DE 2024 9:30 HRS (CDMX)
0
días
0
hrs
0
min
0
seg
25% OFF BLACK FRIDAY SALE!
Del 24 al 30 de noviembre 2023 descuentos por:
¿Aún no eres miembro Premium ⭐ 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.
0
días
0
horas
0
minutos
0
segundos
25% OFF BLACK FRIDAY SALE!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% en tu suscripción Premium. ¡Solo durante Black Friday!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% ¡Solo durante Black Friday!
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →