Cómo aplicar estilos de subrayado de texto alternativos en Divi


Los estilos de subrayado de texto siempre han sido bastante limitativos. El método más común para subrayar texto en la web es utilizar la propiedad CSS "text-decoration: underline". Divi incluso le permite implementar y diseñar este tipo de subrayado dentro de la configuración del Módulo Divi Builder. Pero este método estándar de subrayado tiene limitaciones cuando se trata de estilo y compatibilidad con varios navegadores.

Por supuesto, en la mayoría de los casos, subrayar el texto no tiene por qué ser complicado. Por ejemplo, subrayar todos los enlaces de su sitio para mostrar que se puede hacer clic en ellos es una aplicación estándar que no necesariamente necesita métodos alternativos. Pero, si está buscando llevar el subrayado al siguiente nivel, esta publicación puede ayudar.

En este tutorial, lo guiaré a través de cómo aplicar algunos estilos alternativos de subrayado de texto a su texto en Divi. Le mostraré el método estándar que utiliza las opciones integradas de Divi para subrayar texto. Y también le mostraré cómo usar los bordes inferiores como método alternativo para subrayar el texto. El uso de un borde inferior no solo le brinda más control sobre el estilo, sino que también es compatible con todos los navegadores.

Empecemos.

Subrayar texto con decoración de texto (método común)

La forma más común y sencilla de subrayar texto es utilizando la propiedad CSS de decoración de texto. De hecho, Divi le permite diseñar texto usando este método fácilmente dentro de las opciones integradas de un módulo. Simplemente busque el Estilo de fuente de texto y seleccione la opción "U”Para desplegar la decoración del texto subrayado. Una vez seleccionado el estilo de fuente de subrayado, también tendrá la opción de personalizar el color y el estilo del subrayado.

estilos de subrayado de texto

Esto le permite tener un color de subrayado diferente del color real del texto.

Y puede elegir entre los siguientes estilos de subrayado:

  • Sólido
  • Doble
  • Punteado
  • Punteado
  • Ondulado

estilos de subrayado de texto

Incluso puede apuntar al estilo de subrayado de los enlaces dentro del texto del cuerpo. Esto le da más control sobre el diseño cuando usa el Módulo de texto. Simplemente seleccione la pestaña Fuente de enlace debajo de la categoría de diseño de texto. Para el estilo de fuente de enlace, elija "Subrayado". Luego, puede personalizar el color y el estilo del subrayado del enlace en consecuencia.

estilos de subrayado de texto

Limitaciones del estilo de subrayado de la decoración del texto

Carece de capacidad para ajustar el ancho y la posición de la línea

Desafortunadamente, al agregar la propiedad text-decoration: underline css usando la configuración incorporada de Divi, no hay ninguna opción para ajustar el ancho de la línea o la posición de la línea. El ancho de la línea es relevante para el tamaño de la fuente, por lo que aumentará a medida que aumente el tamaño de la fuente. Y debido a que la posición del subrayado se encuentra en la línea de base, los descendientes (letras minúsculas que caen por debajo de la línea de base) se interpondrán en el camino de la línea, lo que provocará algunas inconsistencias, especialmente con palabras que tienen muchos descendientes (como "Tipografía"). .

estilos de subrayado de texto

Es posible que esta limitación no sea un problema si está utilizando todo el texto en mayúsculas porque no tendrá que preocuparse por ningún descendiente. Sería bueno si hubiera soporte para ajustar el ancho del subrayado y la posición del subrayado, pero por ahora no tenemos suerte.

Carece de compatibilidad con el navegador

Internet Explorer no admite la propiedad text-decoration-style o text-decoration-color, por lo que el estilo de subrayado (doble, punteado, discontinuo, etc.) y el color de subrayado no se pueden personalizar. Safari tampoco admite la propiedad text-decoration-style, pero puede cambiar el color del subrayado.

Esta falta de apoyo no se limita a Divi. Incluso el CSS personalizado no te ayudará.

Subrayar texto con un borde inferior

Si está buscando una solución alternativa para subrayar estilos de texto, la mejor opción en mi opinión es usar un borde inferior. Aquí tienes algunas buenas razones para hacerlo:

  • Un borde admite ocho estilos de borde diferentes para diseñar su subrayado, incluidos: punteado, discontinuo, sólido, doble, surco, cresta, recuadro y principio.
  • Puede personalizar el ancho (grosor) de un borde independientemente del tamaño de fuente.
  • Puede colocar los bordes para que estén más cerca o más lejos del texto.
  • Puede agregar cualquier color que desee a los bordes.
  • Los estilos de borde son compatibles con TODOS los navegadores.

Limitaciones del uso de bordes inferiores para subrayar

  • Limitado a una sola línea de texto en elementos de bloque. Pero hay formas de evitar esto (ver más abajo).
  • Ubicado completamente debajo de los descensores y un poco difícil de conseguir la posición correcta (pero factible).

Comprender la diferencia entre elementos de bloque e integrados

Para comprender cómo funciona el subrayado en los bordes, debe conocer la diferencia entre elementos de bloque y en línea.

Elementos de bloque

Los elementos de bloque abarcarán automáticamente todo el ancho de su contenedor (a menos que se establezca un ancho personalizado) y comenzarán en una nueva línea. Los sitios web (incluidos los creados con Divi) están llenos de elementos de bloque.

Algunos ejemplos de elementos de bloque comunes incluyen:

  • Divi Secciones, filas, módulos (div)
  • cuerpo del texto o párrafos (p)
  • encabezados (h1, h2, h3, h4, h5, h6)
  • listas (ol, ul)

Al agregar un borde inferior para bloquear elementos, el borde se ubicará debajo de todo el bloque. Entonces, si tiene un párrafo de texto (p) o un encabezado (h1) que se divide en dos o más líneas, el borde inferior solo se aplicará a la parte inferior del bloque, no a las líneas individuales de texto.

A continuación, se muestra un ejemplo de cómo se ve agregar un borde inferior a un elemento de bloque de encabezado h1 cuando el texto se divide en varias líneas.

estilos de subrayado de texto

Aunque el CSS apunta a la etiqueta h1, la línea solo se aplica al elemento de bloque. Por lo tanto, la línea solo se aplica a la parte inferior y no a cada línea individualmente.

Elementos en línea

A diferencia de los elementos de bloque, los elementos en línea se pueden dividir en varias líneas. Entonces, si agrega un borde inferior a un elemento en línea (como un enlace, por ejemplo), el subrayado del borde inferior se aplicará incluso si el enlace se rompe en una nueva línea. Además, puede ajustar el relleno de los elementos en línea sin afectar la altura de la línea del texto del cuerpo, lo que es ideal para colocar el subrayado del borde inferior.

A continuación se muestra un ejemplo de algunos enlaces (que son elementos en línea de forma predeterminada) que tienen subrayados en el borde inferior.

estilos de subrayado de texto

En pocas palabras, los elementos en línea pueden tener un borde inferior subrayado cuando se dividen en varias líneas y los elementos de bloque no.

Cómo agregar subrayado en el borde inferior a una sola línea de texto (un elemento de bloque)

Aquí hay un ejemplo de cómo agregaría un borde inferior a una sola línea de texto usando la configuración incorporada del Módulo de texto. Esta opción funciona mejor para los encabezados, ya que limitará el texto a una sola línea.

Cree una nueva sección con una fila de una columna. Luego agregue un módulo de texto con el siguiente contenido:

Underlining Typography

Luego actualice la configuración del módulo de texto de la siguiente manera:

  • Tamaño del texto del texto: 46px (escritorio), 40px (tableta), 26px (teléfono)
  • Altura de la línea de texto: 1.8em
  • Ancho: 517px (escritorio), 450px (tableta), 293px (teléfono)
  • Ancho del borde inferior: 2px
  • Color del borde inferior: # 0c71c3
  • Estilo del borde inferior: punteado

estilos de subrayado de texto

Como puede ver, se puede aplicar estilo al borde utilizando ancho, color y estilo. Dado que el borde inferior se aplica al módulo, es necesario ajustar el ancho del módulo al mismo ancho del texto. Por lo tanto, deberá modificar el tamaño del texto y el ancho del módulo en consecuencia.

Cómo agregar subrayado en el borde inferior en elementos de bloque (como encabezados) que se dividen en líneas

Como se mencionó anteriormente, los elementos de bloque como los encabezados (h1, h2, h3, etc.) no permiten que el borde inferior se aplique en línea en cada salto de línea. Para evitar esto, simplemente podemos envolver nuestro texto con una etiqueta span. Un intervalo le permite agrupar elementos en línea (como un grupo de texto) para agregar estilo a esos elementos. Entonces, si queremos un borde inferior a una etiqueta h1 (un elemento de bloque), podemos envolver el texto dentro de la etiqueta h1 con una etiqueta span adicional. Luego podemos agregar el estilo de subrayado del borde inferior a la etiqueta span. Esto nos permitirá subrayar el texto de la etiqueta h1 (o partes de él) incluso cuando se salta a otra línea.

Aquí hay un ejemplo de cómo agregaría un borde inferior para bloquear elementos (como encabezados) que se dividen en varias líneas de texto usando CSS personalizado.

Primero, agregue una nueva sección con una fila de una columna. Luego agregue un módulo de texto a la fila. En el cuadro de contenido, reemplace el texto simulado predeterminado con lo siguiente:

This is a Heading with Bottom Border Underlining Styled with a Span Tag

Como vamos a agregar un subrayado en el borde inferior, aumentemos la altura de la línea de encabezado h1 de la siguiente manera:

estilos de subrayado de texto

A continuación, agregue el siguiente ID de CSS personalizado en la pestaña avanzada:

ID de CSS: border-underline

estilos de subrayado de texto

A continuación, abra el modal de configuración de la página y agregue el siguiente CSS personalizado:

.border-underline span {
border-bottom: 2px dashed #0c71c3;
padding: 0.1em 0;  
}

Este estilo de borde inferior se aplica a los elementos dentro de la etiqueta de extensión. Y debido a que la etiqueta span es un elemento en línea, el subrayado se aplicará al texto en cada línea.

estilos de subrayado de texto

La propiedad de la parte inferior del borde se puede personalizar como desee. El primer valor (2px) establece el grosor (o ancho) del borde. El segundo valor (discontinuo) establece el estilo del borde. No olvide que también puede utilizar los siguientes estilos de borde: discontinuo, punteado, doble, surco, cresta, recuadro y principio. Y el tercer valor (# 0c71c3) establece el color del borde. También puede modificar el CSS de relleno personalizado junto con el valor de la altura de la línea de texto en las opciones integradas del módulo de texto para obtener el espaciado perfecto también.

Si no necesita la etiqueta span y desea convertir la etiqueta h1 completa en un elemento en línea, puede usar este CSS en la configuración de la página:

.border-underline h1 {
border-bottom: 2px dashed #0c71c3;
padding: 0.1em 0;  
display: inline;
}

Tenga en cuenta que este CSS está dirigido a la etiqueta h1. Además del borde inferior y los estilos de relleno, "display: inline" cambia la etiqueta h1 a un elemento en línea que permite que el texto h1 tenga subrayado en varias líneas.

Agregar un subrayado en el borde inferior a los vínculos en línea en Divi

Aquí hay un ejemplo de cómo agregaría un borde inferior al texto de su enlace en línea en Divi usando CSS personalizado. Primero cree una nueva sección con una fila de una columna y agregue un módulo de texto a la fila.

Luego, use el editor wysiwyg para agregar algunos enlaces al texto del cuerpo para que tenga algunos enlaces con los que trabajar.

estilos de subrayado de texto

Luego agregue una clase CSS personalizada en la pestaña Avanzado de la siguiente manera:

Clase CSS: border-underline

estilos de subrayado de texto

Ahora abra la configuración de la página y agregue el siguiente CSS personalizado para aplicar el borde inferior a todos los enlaces dentro del módulo de texto.

.border-underline a {
border-bottom: 1px solid #333333;
padding: 0.1em 0;  
}

estilos de subrayado de texto

La propiedad de la parte inferior del borde se puede personalizar como desee. El primer valor (1 px) establece el grosor (o ancho) del borde. El segundo valor (sólido) establece el estilo del borde. No olvide que también puede utilizar los siguientes estilos de borde: discontinuo, punteado, doble, surco, cresta, recuadro y principio. Y el tercer valor (# 333333) establece el color del borde.

Entonces, si desea un subrayado en el borde inferior de 2px de ancho con un estilo de guiones y un color diferente, puede reemplazar esos valores con algo como esto:

border-bottom: 2px dashed #0c71c3;

estilos de subrayado de texto

El valor de relleno también se puede ajustar para colocar el subrayado del borde verticalmente. Entonces, si desea que la línea esté más abajo del texto, puede aumentar el valor de relleno a algo como lo siguiente:

padding: 0.3em 0;

estilos de subrayado de texto

También puede usar este relleno personalizado junto con el valor de la altura de la línea de texto en las opciones integradas del módulo de texto para obtener el espaciado correcto también.

Y dado que los enlaces son elementos en línea, el subrayado del borde permanece en los enlaces que se dividen en líneas.

estilos de subrayado de texto

¿Qué pasa con los divisores?

Si desea ser realmente creativo subrayando líneas individuales de texto (elementos de bloque), siempre puede usar el módulo divisor de Divi. El módulo divisor tiene muchas opciones integradas como estilo, altura, ancho, fondos, borde, sombra de cuadro y más. Incluso puede apilar divisores uno encima del otro para lograr un aspecto aún más personalizado.

Aquí hay un ejemplo rápido de módulo divisor utilizado para subrayar texto con una línea doble con un fondo degradado.

Simplemente agregue un módulo divisor directamente debajo de un módulo de texto que contenga su texto. Luego actualice lo siguiente:

  • Color de degradado de fondo a la izquierda: # 2b87da
  • Gradiente de fondo Color derecho: # 29c4a9
  • Tipo de degradado: lineal
  • Dirección del gradiente: 90 grados
  • Color: #ffffff
  • Peso del divisor: 2px
  • Alto: 2px
  • Ancho: 400 px (esto deberá ajustarse al ancho del texto de arriba)
  • Relleno personalizado: 5px superior, 5px inferior

estilos de subrayado de texto

Pensamientos finales

Espero que este tutorial le brinde una alternativa útil a la adición de estilos de subrayado de texto en Divi. El método común que usa "text-decoration: underline" es, con mucho, la solución más fácil, pero las limitaciones pueden ser un lastre. El método de subrayado del borde inferior le da un poco más de control sobre el estilo y la ubicación de las líneas. Y el CSS personalizado definitivamente no es engorroso y se puede modificar fácilmente según sus necesidades. Por lo tanto, si desea llevar su texto subrayado al siguiente nivel, esto debería ayudar.

Como siempre, espero tener noticias tuyas en los comentarios.

¡Salud!