Por defecto, Elementor (como la mayoría de los creadores de sitios web) aplica un estilo de subrayado a los enlaces para que los usuarios los reconozcan al instante. Si bien esto funciona bien para la usabilidad básica, no siempre se alinea con los objetivos de diseño web modernos.
En muchos casos, puede que desee evitar que los enlaces aparezcan subrayados para mantener un aspecto más limpio y profesional.
“Para evitar que se subrayen los enlaces Elementor, vaya a su Panel de WordPress >> Ir a Apariencia >> Personalice>>CSS adicional. Pegue el código CSS
a {decoración de texto: ninguna}.A continuación, haga clic en Publicado en.
En este blog, examinaré 3 métodos para detener o eliminar el subrayado de los enlaces Elementor.
Así que, ¡empecemos!
Impedir que se subrayen los enlaces Elementor (mediante la configuración global)
Si desea desactivar los enlaces subrayados en todo su sitio, entonces este método es perfecto para usted. Con este método, no necesitas editar cada página individualmente. Puedes hacerlo con un pequeño código CSS usando el Personalizador de WordPress. Pero no te preocupes, es realmente fácil.
He aquí cómo hacerlo:
- Vaya a su Panel de WordPress.
- Vaya a Apariencia >> Personalice.
- Desplácese hacia abajo y haga clic en CSS adicional.
- Pegue lo siguiente subrayar detener texto CSS código:
a {
text-decoration: none;
}
5. Ahora haga clic en Publicado.
Esto detendrá el subrayado de todos los enlaces del sitio, sin necesidad de editar cada página individualmente. Es una forma rápida y eficaz de mantener un estilo coherente.
Cómo eliminar el subrayado de los enlaces de texto en Elementor
¿Y si desea eliminar el subrayado de los enlaces del contenido de una sección o widget concretos, y no de todo el sitio web?
Ahora te mostraré cómo quitar el subrayado de los enlaces de texto en la sección específica o widget de Elementor.
A continuación, puedes seguir estos dos métodos:
Método 1: Añadir CSS personalizado en Elementor (Requiere Elementor PRO)
Puedes cambiar todos los enlaces de texto de una sección o widget específico usando CSS personalizado. Se trata de un método muy sencillo. Sin embargo, es sólo para usuarios de Elementor Pro.
En este método, sólo necesitas añadir algo de código. En este método, sólo tienes que añadir algo de código. No te preocupes, es muy fácil. Sólo tienes que seguir estos pasos:
- Abra su página en Elementor.
- Seleccione su sección y vaya a Avanzado ficha.
- Desplácese hacia abajo y haga clic en CSS personalizado.
- Pega el siguiente código:
a {
text-decoration: none;
}- Esto elimina el subrayado de todos los enlaces dentro de ese widget o sección.
Este código evitará que todos los enlaces aparezcan subrayados. También puede añadir más estilos si lo desea. Por ejemplo, puedes cambiar el color, cambiar el estilo de fuente. Para ello, sólo tienes que añadir un poco más de código CSS.
Si no te gusta nada este método de codificación CSS, también puedes probar el siguiente método.
Método 2: Utilizar los ajustes de estilo de Elementor
Si está utilizando Elementor Free y no le gusta codificar, entonces este método es para usted. Elementor le permite personalizar fácilmente los estilos de los enlaces. Para eliminar los subrayados de los enlaces, siga estos sencillos pasos:
- Abra su página en Elementor.
- A continuación, haga clic en el bloque de texto con el enlace.
- Ahora, vaya a la pestaña Estilo.
- Haga clic en el icono del lápiz Tipografía.
- A continuación, desplácese hacia abajo y busque Decoración opción. Y, ajústelo a Ninguno.
- Su enlace aparecerá ahora sin subrayar.
Puede repetirlo manualmente para cada enlace.
Nota: Si hay pocos enlaces, entonces usted puede utilizar este método para detener los enlaces de subrayado. Pero si usted está trabajando con varios enlaces y desea cambiar de varias páginas, usted debe seguir este método.
Cuándo debe evitar que los enlaces Elementor aparezcan subrayados y cuándo no
En Elementor, el subrayado de los enlaces puede aumentar la claridad o desordenar el diseño dependiendo de dónde aparezcan. Por eso, antes de dejar de subrayar los enlaces, debes saber cuándo debes dejar de hacerlo, para garantizar el equilibrio entre la limpieza visual y la usabilidad.
Lo normal es eliminar los subrayados si:
- Estás diseñando botones o CTAs
Los botones deben parecer botones, no enlaces de texto. Los subrayados crean desorden. Por ejemplo: “Comprar ahora” con color de fondo, efecto hover y sin subrayado.
- Menús de navegación o enlaces de cabecera
Los elementos del menú suelen seguir un diseño limpio y minimalista (con efectos hover o fondo resaltado en lugar de subrayado).
- Cuando los enlaces tienen estilos diferentes (color, negrita, efectos hover)
Si su enlace ya tiene un contraste de color distintivo (como texto azul contra negro) y un estilo hover (como subrayado en hover), puede eliminar con seguridad el subrayado por defecto.
- Para diseños modernos y minimalistas
Algunos diseños (como los sitios corporativos o de portafolio) buscan un aspecto elegante y minimalista, en el que los subrayados pueden parecer anticuados o distraer la atención.
Cuándo no debe dejar de subrayar:
Estos son los casos en los que puede mantener los subrayados:
- En contenidos largos o entradas de blog
Los usuarios esperan que los enlaces aparezcan subrayados. Si se suprime, se corre el riesgo de no verlos. Por ejemplo: Artículos, casos prácticos o blogs de afiliados. De nuevo, los enlaces (como “Política de privacidad” o “Condiciones de uso”) deben ser fáciles de identificar rápidamente.
- Accesibilidad y legibilidad
Es posible que los usuarios daltónicos o con baja visión no perciban los enlaces sin subrayar. Las directrices WCAG recomiendan el subrayado a menos que el color del enlace tenga al menos Contraste 3:1 contra el texto normal.
- Cuando el estilo de los enlaces es demasiado sutil
Si su sitio utiliza colores similares para el texto y los enlaces, eliminar el subrayado acaba con la usabilidad.
Lea también: Cómo subrayar en WordPress
PREGUNTAS FRECUENTES
P1: ¿Por qué están subrayados los hipervínculos?
Tradicionalmente, los hipervínculos se subrayan para distinguirlos visualmente del texto normal y dejar claro que se puede hacer clic en ellos.
P2: ¿Cómo puedo eliminar el subrayado de un hipervínculo en WordPress?
Para eliminar el subrayado de los hipervínculos en WordPress, añada decoración del texto: ninguna; a su CSS. Puede hacerlo a través del Personalizador en Apariencia >> Personalice >> CSS adicional.
P3: ¿Cómo eliminar el subrayado en CSS?
Para eliminar el subrayado de un enlace con CSS, añada decoración del texto: ninguna a su código.
P4: ¿Cómo eliminar el subrayado de un botón en Elementor?
Para eliminar el subrayado del texto enlazado, seleccione ese bloque de texto y, a continuación, vaya al menú Elementor, en Estilo > Tipografía > Decoración, y seleccionando Ninguno.
P5: ¿Cómo puedo eliminar el subrayado de un enlace?
Para eliminar el subrayado de un enlace, añada decoración del texto: ninguna; a tu CSS. Puedes aplicarlo en la pestaña Estilo de Elementor o a través del Personalizador de WordPress para cambios globales.
Conclusión
Detener o eliminar el subrayado de los enlaces en Elementor no es sólo una cuestión de estilo. Se trata de hacer que su sitio web parezca limpio, moderno y fácil de usar. En esta guía, hemos explorado tres formas sencillas de evitar que los enlaces aparezcan subrayados:
- Si desea eliminar los subrayados en todo su sitio web, puede utilizar un pequeño código CSS en el Personalizador de WordPress.
- Si utilizas Elementor Pro, puedes añadir CSS personalizado directamente a una sección o widget.
- Y si utilizas la versión gratuita de Elementor, puedes utilizar la configuración de estilo para eliminar manualmente el subrayado de cada enlace.
Cada método tiene su propia utilidad. Por ejemplo, el CSS global es estupendo para ahorrar tiempo y mantener la coherencia. Pero si sólo quieres cambiar unos pocos enlaces, el método manual funciona muy bien.
Aun así, es importante pensar en los visitantes. Los enlaces subrayados ayudan a saber que se puede hacer clic en ellos. Sobre todo en blogs o artículos largos.
Lea también:
- Free Elementor Pricing Table Widget for WordPress
- 7 Best Essential Addons for Elementor Alternatives: Complete 2026 Guide
- Lanzamiento de la versión 9 de Element Pack Pro: ¿Qué hay de nuevo?
- Cómo añadir un slider de testimonios en WordPress usando Elementor
- ¿Cómo se mantiene el acordeón cerrado por defecto en Elementor?
