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

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

Curioso efecto subrayado al hacer ‘hover’ en el menú de Divi de forma fácil con solo un poco de CSS. ¡Disfrútalo!

22 de septiembre de 2023 - Roberto Montaner Lledó
efecto subrayado de los enlaces del menu principal de divi

[et_pb_section fb_built=»1″ admin_label=»section» _builder_version=»4.16″ global_colors_info=»{}»][et_pb_row _builder_version=»4.22.1″ _module_preset=»default» width=»100%» max_width=»2560px» global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»]

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.

 

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row admin_label=»row» _builder_version=»4.22.1″ background_size=»initial» background_position=»top_left» background_repeat=»repeat» border_radii=»on|35px|35px|35px|35px» border_width_all=»3px» border_color_all=»#E02B20″ global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.16″ custom_padding=»|||» global_colors_info=»{}» custom_padding__hover=»|||»][et_pb_text _builder_version=»4.22.1″ _module_preset=»default» header_2_text_align=»center» global_colors_info=»{}»]

Demostración: cómo quedará nuestro menú

[/et_pb_text][et_pb_text _builder_version=»4.22.1″ _module_preset=»default» text_orientation=»center» custom_css_main_element=»text-decoration:none;|| display:flex;||flex-flow: row wrap;||justify-content:center;» global_colors_info=»{}»]

INICIO
SOBRE MI
SERVICIOS
CONTACTO

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=»4.22.1″ _module_preset=»default» width=»100%» max_width=»2560px» global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»]

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:

[/et_pb_text][et_pb_image src=»https://nueva.robertoseo.com/wp-content/uploads/2023/09/clases-css-menu-principal.png» alt=»clases css menu principal» title_text=»clases css menu principal» align=»center» _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»]

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

[/et_pb_text][et_pb_image src=»https://nueva.robertoseo.com/wp-content/uploads/2023/09/clase-css-elementos-menu.png» alt=»clase css elementos menu» title_text=»clase css elementos menu» align=»center» _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»]

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:

[/et_pb_text][et_pb_image src=»https://nueva.robertoseo.com/wp-content/uploads/2023/09/codigo-css-en-divi.png» alt=»codigo css en divi» title_text=»codigo css en divi» align=»center» _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version=»4.22.1″ _module_preset=»default» width=»100%» max_width=»2560px» global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.22.1″ _module_preset=»default» background_color=»rgba(190,193,25,0.15)» custom_padding=»18px|18px|18px|18px|true|true» global_colors_info=»{}»]

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);
}

[/et_pb_text][et_pb_text _builder_version=»4.22.1″ _module_preset=»default» background_color=»rgba(224,43,32,0.15)» custom_padding=»18px|18px|18px|18px|true|true» global_colors_info=»{}»]

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.

[/et_pb_text][et_pb_text _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»]

¡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:

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row admin_label=»row» _builder_version=»4.22.1″ background_size=»initial» background_position=»top_left» background_repeat=»repeat» border_radii=»on|35px|35px|35px|35px» border_width_all=»3px» border_color_all=»#E02B20″ global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.16″ custom_padding=»|||» global_colors_info=»{}» custom_padding__hover=»|||»][et_pb_text _builder_version=»4.22.1″ _module_preset=»default» text_orientation=»center» custom_css_main_element=»text-decoration:none;|| display:flex;||flex-flow: row wrap;||justify-content:center;» global_colors_info=»{}»]

INICIO
SOBRE MI
SERVICIOS
CONTACTO

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=»4.22.1″ _module_preset=»default» width=»100%» max_width=»2560px» global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»]

PD: GRACIAS POR LEERME 🙂

 

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

Autor

Roberto Montaner

Roberto Montaner Lledó

Soy un consultor SEO con más de 10 años de experiencia ayudando a empresas a posicionarse en los primeros resultados de Google. Me especializo en estrategias de SEO técnico, marketing de contenidos y optimización on-page, siempre con un enfoque en resultados medibles y sostenibles.