Como aplicar estilos alternativos de sublinhado de texto no Divi

Os estilos de sublinhado de texto sempre foram bastante limitantes. O método mais comum para sublinhar texto na web é usar a propriedade CSS “text-decoration: underline”. O Divi permite até que você implante e estilize esse tipo de sublinhado nas configurações do Módulo Divi Builder. Mas este método padrão de sublinhar vem com limitações quando se trata de estilo e suporte para navegadores diferentes.

Concedido, na maioria dos casos, o texto sublinhado não precisa ser complicado. Por exemplo, sublinhar todos os links em seu site para mostrar que são clicáveis ​​é um aplicativo padrão que não precisa necessariamente de métodos alternativos. Mas, se você está procurando levar o sublinhado para o próximo nível, esta postagem pode ajudar.

Neste tutorial, vou orientá-lo sobre como aplicar alguns estilos alternativos de sublinhado de texto ao seu texto no Divi. Vou mostrar o método padrão usando as opções integradas do Divi para sublinhar o texto. E também mostrarei como usar as bordas inferiores como um método alternativo para sublinhar o texto. Usar uma borda inferior não só oferece mais controle sobre o estilo, mas também é compatível com todos os navegadores.

Vamos começar.

Sublinhando o texto com decoração de texto (método comum)

A maneira mais comum e direta de sublinhar o texto é usando a propriedade CSS de decoração de texto. Na verdade, o Divi permite estilizar o texto usando esse método facilmente nas opções integradas de um módulo. Basta procurar a opção Estilo de fonte do texto e selecionar o ícone “ U ” para implantar a decoração de texto sublinhado. Depois que o estilo da fonte sublinhado for selecionado, você também terá a opção de personalizar a cor e o estilo do sublinhado.

Isso permite que você tenha uma cor de sublinhado diferente da cor real do texto.

E você pode escolher um dos seguintes estilos de sublinhado:

• Sólido
• Dobro
• Pontilhado
• Tracejadas
• Ondulado

Você pode até mesmo direcionar o estilo de sublinhado dos links dentro do corpo do texto. Isso dá a você mais controle sobre o design ao usar o Módulo de Texto. Basta selecionar a guia Fonte do link na alternância da categoria de design de texto. Para Link Font Style, escolha “Underline”. Em seguida, você pode personalizar a cor e o estilo de sublinhado do link de acordo.

Limitações de estilo de sublinhado de decoração de texto

Falta capacidade de ajustar a largura e a posição da linha

Infelizmente, ao adicionar a propriedade text-decoration: underline css usando as configurações internas do Divi, não há opção para ajustar a largura ou a posição da linha. A largura da linha é relevante para o tamanho da fonte, portanto, aumentará conforme você aumenta o tamanho da fonte. E como a posição do sublinhado fica na linha de base, os descendentes (letras minúsculas que caem abaixo da linha de base) vão atrapalhar a linha, causando algumas inconsistências, especialmente com palavras que têm muitos descendentes (como "Tipografia") .

Essa limitação pode não ser um problema se você estiver usando todo o texto em maiúsculas, porque você não terá descendentes com que se preocupar. Seria bom se houvesse suporte para ajustar a largura e a posição do sublinhado, mas por enquanto estamos sem sorte.

Carece de suporte de navegador

O Internet Explorer não oferece suporte para a propriedade text-decoration-style ou text-decoration-color, então o estilo de sublinhado (duplo, pontilhado, tracejado, etc ...) e cor de sublinhado não podem ser personalizados. O Safari também não suporta a propriedade text-decoration-style, mas você pode alterar a cor do sublinhado.

Essa falta de suporte não se limita a Divi. Mesmo o CSS personalizado não o ajudará.

Sublinhando o texto usando uma borda inferior

Se você está procurando uma solução alternativa para sublinhar estilos de texto, a melhor opção, em minha opinião, é usar uma borda inferior. Aqui estão algumas boas razões para fazer isso:

• Uma borda oferece suporte a oito estilos de borda diferentes para estilizar seu sublinhado, incluindo: pontilhada, tracejada, sólida, dupla, ranhura, crista, inserção e início.
• Você pode personalizar a largura (espessura) de uma borda, independentemente do tamanho da fonte.
• Você pode posicionar as bordas para ficar mais perto ou mais longe do texto.
• Você pode adicionar qualquer cor que desejar às bordas.
• Os estilos de borda são suportados por TODOS os navegadores.

Limitações ao uso de bordas inferiores para sublinhado

• Limitado a uma única linha de texto em elementos de bloco. Mas existem maneiras de contornar isso (veja abaixo).
• Posicionado completamente abaixo dos descendentes e um pouco difícil de acertar a posição (mas factível).

Compreendendo a diferença entre blocos e elementos embutidos

Para entender como o sublinhado de borda funciona, você precisa saber a diferença entre os elementos de bloco e embutidos.

Elementos de bloco

Os elementos do bloco ocuparão automaticamente toda a largura do contêiner (a menos que uma largura personalizada seja definida) e começarão em uma nova linha. Os sites (incluindo aqueles construídos com Divi) estão cheios de elementos de bloco.

Alguns exemplos de elementos de bloco comuns incluem:

• Divi, seções, linhas, módulos (div)
• corpo do texto ou parágrafos (p)
• títulos (h1, h2, h3, h4, h5, h6)
• listas (ol, ul)

Ao adicionar uma borda inferior para bloquear elementos, a borda ficará abaixo de todo o bloco. Portanto, se você tiver um parágrafo de texto (p) ou um título (h1) que se divide em duas ou mais linhas, a borda inferior será aplicada apenas na parte inferior do bloco, não nas linhas individuais do texto.

Aqui está um exemplo da aparência de adicionar uma borda inferior a um elemento de bloco de título h1 quando o texto se divide em várias linhas.

Mesmo que o css tenha como alvo a tag h1, a linha é aplicada apenas ao elemento de bloco. Portanto, a linha é aplicada apenas na parte inferior e não a cada linha individualmente.

Elementos Inline

Ao contrário dos elementos de bloco, os elementos embutidos podem se dividir em várias linhas. Portanto, se você adicionar uma borda inferior a um elemento embutido (como um link, por exemplo), o sublinhado da borda inferior será aplicado mesmo se o link quebrar em uma nova linha. Além disso, você pode ajustar o preenchimento dos elementos embutidos sem afetar a altura da linha do texto do corpo, o que é ótimo para posicionar o sublinhado da borda inferior.

Aqui está um exemplo de alguns links (que são elementos embutidos por padrão) que possuem sublinhados na borda inferior.

Simplificando, os elementos embutidos podem ter a borda inferior sublinhada ao quebrar em várias linhas e os elementos de bloco não podem.

Como adicionar sublinhado de borda inferior a uma única linha de texto (um elemento de bloco)

Aqui está um exemplo de como você adicionaria uma borda inferior a uma única linha de texto usando as configurações internas do Módulo de Texto. Essa opção funciona melhor para cabeçalhos, pois você limitará o texto a uma única linha.

Crie uma nova seção com uma linha de uma coluna. Em seguida, adicione um módulo de texto com o seguinte conteúdo:

Underlining Typography

Em seguida, atualize as configurações do módulo de texto da seguinte forma:

• Tamanho do texto do texto: 46 px (desktop), 40 px (tablet), 26 px (telefone)
• Altura da linha de texto: 1.8em
• Largura: 517 px (desktop), 450 px (tablet), 293 px (telefone)
• Largura da borda inferior: 2 px
• Cor da borda inferior: # 0c71c3
• Estilo da borda inferior: pontilhada

Como você pode ver, a borda pode ser estilizada usando largura, cor e estilo. Como a borda inferior está sendo aplicada ao módulo, é necessário ajustar a largura do módulo para a mesma largura do texto. Portanto, você precisará modificar o tamanho do texto e a largura do módulo de acordo.

Como adicionar sublinhado de borda inferior em elementos de bloco (como títulos) que se dividem entre linhas

Conforme mencionado anteriormente, elementos de bloco como cabeçalhos (h1, h2, h3, etc ...) não permitem que a borda inferior seja aplicada em linha em cada quebra de linha. Para contornar isso, podemos simplesmente envolver nosso texto com uma tag span. Uma extensão permite agrupar elementos embutidos (como um grupo de texto) para adicionar estilo a esses elementos. Portanto, se quisermos uma borda inferior para uma tag h1 (um elemento de bloco), podemos envolver o texto dentro da tag h1 com uma tag span adicional. Em seguida, podemos adicionar o estilo de sublinhado da borda inferior à tag span. Isso nos permitirá sublinhar o texto da tag h1 (ou partes dele), mesmo quando ele passar para outra linha.

Aqui está um exemplo de como você adicionaria uma borda inferior para bloquear elementos (como títulos) que se dividem em várias linhas de texto usando CSS personalizado.

Primeiro, adicione uma nova seção com uma linha de uma coluna. Em seguida, adicione um módulo de texto à linha. Na caixa de conteúdo, substitua o texto simulado padrão pelo seguinte:

<h1><span>This is a Heading with Bottom Border Underlining Styled with a Span Tag</span></h1>

Como vamos adicionar um sublinhado na borda inferior, vamos aumentar a altura da linha de cabeçalho h1 da seguinte maneira:

Em seguida, adicione o seguinte ID CSS personalizado na guia avançada:

ID CSS: border-underline

Em seguida, abra o modal de configurações da página e adicione o seguinte CSS personalizado:

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

O estilo da borda inferior está sendo aplicado aos elementos dentro da tag span. E como a tag span é um elemento embutido, o sublinhado será aplicado ao texto em cada linha.

A propriedade border-bottom pode ser personalizada como você quiser. O primeiro valor (2px) define a espessura (ou largura) da borda. O segundo valor (tracejado) define o estilo da borda. Não se esqueça, você também pode usar os seguintes estilos de borda: tracejada, pontilhada, dupla, ranhura, crista, inserção e início. E o terceiro valor (# 0c71c3) define a cor da borda. Você também pode ajustar o css de preenchimento personalizado em conjunto com o valor da altura da linha do texto nas opções integradas do módulo de texto para obter o espaçamento correto também.

Se você não precisa da tag span e deseja converter toda a tag h1 em um elemento embutido, você pode usar este CSS nas configurações da página:

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

Observe que este css tem como alvo a tag h1. Além da borda inferior e dos estilos de preenchimento, o “display: inline” muda a tag h1 para um elemento inline que permite que o texto h1 tenha sublinhado em várias linhas.

Adicionando um Sublinhado de Borda Inferior a Links Inline em Divi

Aqui está um exemplo de como você adicionaria uma borda inferior ao texto do link embutido no Divi usando CSS personalizado. Primeiro crie uma nova seção com uma linha de uma coluna e adicione um módulo de texto à linha.

Em seguida, use o editor wysiwyg para adicionar alguns links ao texto do corpo para que você tenha alguns links para trabalhar.

Em seguida, adicione uma classe CSS personalizada na guia Avançado da seguinte maneira:

Classe CSS: border-underline

Agora abra as configurações da página e adicione o seguinte CSS personalizado para aplicar a borda inferior a todos os links dentro do módulo de texto.

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

A propriedade border-bottom pode ser personalizada como você quiser. O primeiro valor (1px) define a espessura (ou largura) da borda. O segundo valor (sólido) define o estilo da borda. Não se esqueça, você também pode usar os seguintes estilos de borda: tracejada, pontilhada, dupla, ranhura, crista, inserção e início. E o terceiro valor (# 333333) define a cor da borda.

Portanto, se você quiser um sublinhado na borda inferior com 2 px de largura com um estilo tracejado e uma cor diferente, poderá substituir esses valores por algo assim:

border-bottom: 2px dashed #0c71c3;

O valor de preenchimento também pode ser ajustado para posicionar o sublinhado da borda verticalmente. Portanto, se você quiser que a linha fique mais abaixo do texto, poderá aumentar o valor de preenchimento para algo como o seguinte:

padding: 0.3em 0;

Você também pode usar esse preenchimento personalizado em conjunto com o valor da altura da linha do texto nas opções integradas do módulo de texto para obter o espaçamento correto também.

E como os links são elementos embutidos, o sublinhado da borda permanece nos links que se dividem entre as linhas.

E quanto aos divisores?

Se você quiser ser realmente criativo, sublinhando linhas únicas de texto (elementos de bloco), você sempre pode usar o módulo divisor do Divi. O módulo divisor possui muitas opções integradas, como estilo, altura, largura, planos de fundo, borda, sombra da caixa e muito mais. Você pode até mesmo empilhar divisórias umas sobre as outras para ter uma aparência ainda mais personalizada.

Aqui está um exemplo rápido de módulo divisor usado para sublinhar o texto com uma linha dupla com um fundo gradiente.

Basta adicionar um módulo divisor diretamente sob um módulo de texto que contém seu texto. Em seguida, atualize o seguinte:

• Cor do gradiente de fundo à esquerda: # 2b87da
• Cor certa do gradiente de fundo: # 29c4a9
• Tipo de gradiente: Linear
• Direção do gradiente: 90 graus
• Cor: #ffffff
• Peso do divisor: 2px
• Altura: 2px
• Largura: 400 px (terá de ser ajustada à largura do texto acima)
• Preenchimento personalizado: 5px superior, 5px inferior

Pensamentos finais

Espero que este tutorial forneça uma alternativa útil para adicionar estilos de sublinhado de texto no Divi. O método comum usando “decoração de texto: sublinhado” é de longe a solução mais fácil, mas as limitações podem ser um empecilho. O método de sublinhado da borda inferior oferece um pouco mais de controle sobre o estilo e o posicionamento das linhas. E o CSS personalizado definitivamente não é complicado e pode ser facilmente ajustado de acordo com suas necessidades. Então, se você quiser levar o seu texto sublinhado para o próximo nível, isso deve ajudar.

Como sempre, estou ansioso para ouvir de você nos comentários.

Saúde!