Tutorial Divi: 6 efectos hover de subrayado en el menú en Divi

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.

Índice

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.