Efecto subrayado en los enlaces del menú al pasar el raton hover (en WordPress + DIVI)

El menú por defecto de Divi es bastante básico y poco personalizable -para los que nos gusta ir siempre un paso más allá-. Incluso si lo construimos a nuestro gusto en el Theme Builder, se puede crear y personalizar todo su entorno, pero los enlaces no es tan sencillo. Por ello, me he esmerado en conseguir un efecto subrayado al hacer hover que hará las delicias de aquellos que les guste crear web para sus proyectos o para el diseñador profesional. Mi objetivo es ayudarte a que hagas menús más chulos. Te dejo con el tutorial.

Primero: Preparativos que le tenemos que hacer al menú

El primer paso que debemos tomar aplicar una clase css a cada enlace del menú que estemos usando en Divi. Esto se puede hacer desde el panel de administración de WordPress en Apariencia — Menús, complentando estos pasos:

Como hemos visto, primero hemos de ir a opciones de pantalla, para luego activar clases CSS.

A continuación le vamos a tener que poner la clase CSS palabra a todos los enlaces del menú. Está relacionada con el código que te pondré más adelante en este mismo artículo.

Acto seguido nos vamos a Divi — Opciones de Tema — CSS Personalizado para poner este código:

Código CSS que tenemos que pegar (explicado más adelante)

Solo tienes que pegar donde te acabo de decir dicho código CSS. En el siguiente punto te explico para qué sirve cada cosa que, por supuesto, puedes modificar para adaptar el estilo a tu gusto.

.palabra a {

position:relative;

color: black;

font-size: 19px;

font-family: ‘Nunito Sans’, sans-serif;

margin: 0 10px;

text-decoration: none;

 

}

 

.palabra a:hover {

color:red

}

 

.palabra a::before {

content:””;

display:block;

position:absolute;

bottom:-7px;

left:0;

width:100%;

height:2px;

transform: scaleX(0);

transition: transform 0.3s ease;

background-color: blue;

    transform-origin: 50% 0%;

 

}

 

.palabra a:hover::before {

transform: scaleX(1);

}

Explicación del CSS que crea este efecto subrayado al pasar el ratón por encima

.palabra a:

• • ¿Qué hace? Estiliza los enlaces que están dentro de un contenedor llamado “palabra”.
  • Detalles:
    • position: relative;: Piensa en esto como preparar el terreno para un truco mágico que haremos más adelante con la línea que aparece al pasar el ratón.
    • color: black;: El texto del enlace es negro.
    • font-size: 19px;: El texto tiene un tamaño de 19 píxeles.
    • font-family: 'Nunito Sans', sans-serif;: Usamos una fuente moderna y limpia llamada “Nunito Sans”.
    • margin: 0 10px;: Da un pequeño espacio a los lados del enlace para que no se sientan apretados.
    • text-decoration: none;: Quita el subrayado clásico de los enlaces.

.palabra a:hover:

• • ¿Qué hace? Cambia el estilo del enlace cuando pasas el ratón por encima.
  • Detalles:
    • color: red;: Al pasar el ratón, el texto del enlace se vuelve rojo.

.palabra a::before:

• • ¿Qué hace? Prepara una línea azul que aparecerá debajo del enlace al pasar el ratón.
  • Detalles:
    • content: "";: Es el inicio del truco mágico. Crea un espacio invisible para nuestra línea.
    • display: block;: Asegura que nuestra línea tenga espacio propio.
    • position: absolute;: Coloca la línea exactamente donde queremos, relacionado con el enlace.
    • bottom: -7px;: La línea está un poquito separada del enlace.
    • width: 100%;: La línea tiene el mismo ancho que el enlace.
    • height: 2px;: La línea es finita, con solo 2 píxeles de grosor.
    • background-color: blue;: La línea es de color azul.
    • transform: scaleX(0);: Al inicio, la línea está escondida.
    • transition: transform 0.3s ease;: La línea aparecerá suavemente en 0.3 segundos.
    • transform-origin: 50% 0%;: La línea crecerá desde el centro hacia los lados. (Si deseas que crezca de derecha a izquierda deberías poner ‘100% 0%’ y si quieres que crezca de izquierda a derecha ‘0% 100%’)

.palabra a:hover::before:

• • ¿Qué hace? Define cómo se mostrará la línea cuando pasas el ratón por encima del enlace.
  • Detalles:
    • transform: scaleX(1);: Al pasar el ratón, la línea se muestra completamente.

¡Listo! Ya tienes tu menú en DIVI personalizado y mejorado

Ya está. Si has hecho todo correctamente deberías tener un menú con un espectacular efecto de subrayado al sobrevolar con el ratón sus enlaces. Recuerda que lo puedes personalizar a tu gusto.

Te vuelvo a dejar otra vez la muestra de como queda mi ejemplo:

PD: GRACIAS POR LEERME 🙂