El menú en Divi es un campo dentro del diseño que siempre podremos mejorar, por eso te traemos algunos snippets de CSS que te permitirán crear 6 diferentes efectos hover de subrayado en el menú de Divi ¡Vamos a ello!
El módulo Divi Menú de Divi no tiene estilos especialmente geniales, de hecho son bastante limitados, es por ello que hemos creado ya varios tutoriales de menús personalizados con el Theme Builder, logrando resultados geniales en esos tutoriales prémium, pero en esta ocasión, les traemos unos pequeños snippets que nos ha compartido la gente de Divilovers, creadores del plugin de Divi Toolbox, que nos ayudarán a crear efectos de subrayado de líneas cuando hagas hover a un menú en Divi.
Estos fragmentos de código incluyen tres variables que te ayudarán a ajustar el efecto para que coincida perfectamente con tu módulo de Menú. Mira el video del tutorial para ver cómo abordamos esto y cómo puede utilizar el código para crear el subrayado de menú perfecto para su sitio web.
Paso 1: CSS para Variables
La primera parte del código CSS que debes copiar incluye variables CSS, que generan los estilos generales del efecto que queremos generar. Puedes cambiar la altura de la línea, el color de la misma, y definir el desplazamiento inferior para que se muestre en el lugar correcto, sin importar el módulo de Menú tiene un logotipo o la altura del mismo.
Copia y pega este código CSS en Divi > opciones del tema > CSS personalizado
/* Cambiar los valores de separación inferior - ancho de la línea y color de la línea acá */
:root {
--BottomOffset: 20px;
--LineHeight: 5px;
--LineColor: #29EECC;
}Recuerda que estos 3 valores afectarán a todas las líneas de subrayado del menú, y son los que debes cambiar para personalizarlos según tus gustos o tu marca personal.
Paso 2: Elije el CSS para el efecto Hover de subrayado en el menú.
Desde acá ya solo bastará con que asignes una clase especifica al menú, y el CSS que acompaña a esa clase para generar el efecto de subrayado en el menú de Divi. Recuerda que esta clase debes colocarla en el módulo de menú, en ID y Clases de CSS > Clase de css personalizada
Efecto #1
Clase CSS a usar: dl-menu-style1
Copia y pega este CSS en las opciones del tema Divi, en CSS personalizado:
/* Menu Hover Effects Style 1 */
.dl-menu-style1 ul.et-menu>li>a {
position: relative;
z-index: 1;
}
.dl-menu-style1 ul.et-menu>li>a:before {
position: absolute;
content: '';
display: block;
z-index: -1;
background: var(--LineColor);
width: 0;
height: var(--LineHeight);
bottom: var(--BottomOffset);
border-radius:var(--LineHeight);
left: 50%;
transition: 0.4s cubic-bezier(0.25, 0.1, 0, 2.02);
}
.dl-menu-style1 ul.et-menu>li>a:hover:before {
width: calc(100% + var(--LineHeight));
left: calc(var(--LineHeight) / -2);
}Efecto #2
Clase CSS a usar: dl-menu-style2
Copia y pega este CSS en las opciones del tema Divi, en CSS personalizado:
/* Menu Hover Effects Style 2 */
.dl-menu-style2 ul.et-menu>li>a {
position: relative;
z-index: 1;
}
.dl-menu-style2 ul.et-menu>li>a:before {
position: absolute;
content: '';
display: block;
z-index: -1;
background: var(--LineColor);
width: 0;
height: var(--LineHeight);
bottom: var(--BottomOffset);
left: calc(var(--LineHeight) / -2);
transition: 0.3s cubic-bezier(.03,.3,.4,.96);
transform: skew(-10deg);
}
.dl-menu-style2 ul.et-menu>li>a:hover:before {
width: calc(100% + var(--LineHeight));
}Efecto #3
Clase CSS a usar: dl-menu-style3
Copia y pega este CSS en las opciones del tema Divi, en CSS personalizado:
/* Menu Hover Effects Style 3 */
.dl-menu-style3 ul.et-menu>li>a {
position: relative;
z-index: 1;
}
.dl-menu-style3 ul.et-menu>li>a:before {
position: absolute;
content: '';
display: block;
z-index: -1;
background: var(--LineColor);
width: 0;
height: var(--LineHeight);
bottom: var(--BottomOffset);
right: calc(var(--LineHeight) / -2);
transition: 0.3s cubic-bezier(.03,.3,.4,.96);
}
.dl-menu-style3 ul.et-menu>li>a:hover:before {
width: calc(100% + var(--LineHeight));
}Efecto #4
Clase CSS a usar: dl-menu-style4
Copia y pega este CSS en las opciones del tema Divi, en CSS personalizado:
/* Menu Hover Effects Style 4 */
.dl-menu-style4 ul.et-menu>li>a {
position: relative;
z-index: 1;
}
.dl-menu-style4 ul.et-menu>li>a:before {
position: absolute;
content: '';
display: block;
z-index: -1;
background: var(--LineColor);
opacity:0;
height: var(--LineHeight);
bottom: calc(var(--BottomOffset) + 12px);
width: calc(100% + (var(--LineHeight) / 2));
right: calc(var(--LineHeight) / -4);
transition: 0.4s cubic-bezier(0,.54,.52,.76);
border-radius: 2px;
}
.dl-menu-style4 ul.et-menu>li>a:hover:before {
bottom: var(--BottomOffset);
opacity: 1;
}Efecto #5
Clase CSS a usar: dl-menu-style5
Copia y pega este CSS en las opciones del tema Divi, en CSS personalizado:
/* Menu Hover Effects Style 5 */
.dl-menu-style5 ul.et-menu>li>a {
position: relative;
z-index: 1;
}
.dl-menu-style5 ul.et-menu>li>a:before {
position: absolute;
content: '';
display: block;
z-index: -1;
background: var(--LineColor);
opacity: 0;
height: var(--LineHeight);
bottom: calc(var(--BottomOffset) - 10px);
width: calc(100% + (var(--LineHeight) / 1.5));
right: calc(var(--LineHeight) / -3);
transition: 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940);
border-radius: var(--LineHeight);
}
.dl-menu-style5 ul.et-menu>li>a:hover:before {
bottom: var(--BottomOffset);
opacity: 1;
}Efecto #6
Clase CSS a usar: dl-menu-style6
Copia y pega este CSS en las opciones del tema Divi, en CSS personalizado:
/* Menu Hover Effects Style 6 */
.dl-menu-style6 ul.et-menu>li>a {
position: relative;
z-index:1;
}
.dl-menu-style6 ul.et-menu>li>a:before {
position: absolute;
content: '';
display: block;
z-index: -1;
background: var(--LineColor);
opacity: 0;
height: var(--LineHeight);
bottom: calc(var(--BottomOffset) - 10px);
width: calc(100% + (var(--LineHeight) / 1.5));
right: calc(var(--LineHeight) / -3);
transition: 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940);
transform: rotate(45deg);
transform-origin: left;
}
.dl-menu-style6 ul.et-menu>li>a:hover:before {
bottom: var(--BottomOffset);
opacity: 1;
transform: rotate(0);
}Conclusiones
Con este tutorial lograrás personalizar el menú de Divi de forma particular y avanzada, haciendo que los elementos del menú tengan un efecto hover de subrayado superinteresante.
Agradecemos a la gente de divilover.com, creadores originales de los recursos que hemos compartido en este post.
¡Y eso es todo! ¿Te ha gustado est tutorial?
Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este post.
Nos vemos en el próximo Divi Snippet.
Comentarios
10 comentariosPara dejar un comentario, accede a tu cuenta de UXDivi.
Acceder a mi cuenta →Excelete Jeffe.
Muchas gracias, siempre salvandome jejeje.
Saludos.
¡Un completo gusto mi estimado!
Hola. como hago que las palabras del menu tenga anchura completa
Que tal Melisa, nosotros no tenemos un tutorial que lo indique, pero alguien en este foro explica como lograrlo: https://divi.help/threads/adjust-menu-items-to-full-width.3430/
Hola, muy útil, gracias, sin embargo quiero contarles que cuando uno ingresa a ver el ejemplo no aparecen las líneas.
¡Gracias por avisarnos! 😊🖐 ya lo hemos corregido.
No sé por qué me sale en la parte superior la línea, he intentado colocarla en la parte inferior y no he podido.
Debes modificar estos dos valores para ajustarlo hasta que se vea como quieres:
–BottomOffset: 20px;
–LineHeight: 5px;
Como se quedaría el elemento o pagina en la que estamos señalado con la raya. UN SALUDO
Sería cambiando la clase a aplicar el CSS.
En la última parte del CSS cambiar la clase ul.et-menu>li>a:hover:before por
.et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-item a
Probablemente así funcione.