Como criar designs de texto impressionantes usando divisores de seção em Divi

Criar designs de texto exclusivos para o seu site pode ser desafiador, especialmente se você não quiser usar uma tonelada de CSS ou recorrer à complementação de texto amigável para imagens que você cria no Photoshop. Com Divi (e um pouco de pensamento "fora da caixa"), você pode criar alguns designs de texto exclusivos sem qualquer CSS externo ou imagens personalizadas. O truque é usar os divisores de seção do Divi para sobrepor seu texto e adicionar quebras e textura de várias maneiras diferentes. Neste tutorial, explorarei o poder dos divisores de seção do Divi para criar alguns designs de texto exclusivos que levarão os cabeçalhos de suas páginas para o próximo nível.

Vamos começar.

Espiada

Aqui estão apenas alguns exemplos dos designs de texto possíveis usando esta técnica:

Começando

Para este design, você precisará criar uma nova página usando o construtor visual. No painel do WordPress, navegue até Pages> Add New. Em seguida, dê um título à sua página e implemente o construtor visual. Selecione a opção “Construir do zero”. Agora você está pronto para começar!

Design # 1: texto quebrado com destaque gradiente

Neste primeiro design de texto, vou usar divisores de seção para dividir o texto e adicionar um elemento de realce de formato exclusivo usando um fundo gradiente. Adicione uma nova seção com um layout de uma coluna. Você não precisa adicionar um módulo neste momento. Começaremos com a personalização da seção primeiro.

Configurações da seção

Abra as configurações da seção e atualize o seguinte:

Cor do gradiente de fundo à esquerda: rgba (124.218,36,0.66)
Cor direita do gradiente de fundo: rgba (0,106,193,0,61)

Largura: 80%
Alinhamento de Seção: Centro

Estilo do divisor superior: veja a captura de tela
Cor do divisor superior: #ffffff
Altura do divisor superior: 1,8vw
Repetição horizontal do divisor superior: 3x
Disposição de divisores principais: no topo do conteúdo da seção

Estilo do divisor inferior: veja a captura de tela
Cor do divisor inferior: #ffffff
Altura do divisor inferior: 1,8vw
Repetição horizontal do divisor inferior: 3x
Disposição do divisor inferior: no topo do conteúdo da seção

Margem personalizada: 5vw superior, 5vw inferior
Preenchimento personalizado: 0 px superior, 0 px inferior

Uma vez que o design do seu texto será feito usando as divisórias de seção, é importante manter a seção compacta, sem qualquer preenchimento, para que as divisórias se sobreponham ao texto com a altura mínima da divisória. Definir a altura do divisor com uma unidade de comprimento vw garantirá que o estilo do divisor será bem dimensionado para um design consistente em todos os tamanhos de tela. Dar à seção uma margem personalizada é opcional, mas também útil para espaçamento, pois usaremos margens negativas em nosso módulo de texto para estendê-la acima e abaixo de nossa seção (isso deve fazer mais sentido mais tarde).

Configurações de linha

Para a linha, tudo o que precisamos fazer é ajustar a largura e o preenchimento. Atualize as seguintes configurações de linha:

Largura personalizada: 100%
Preenchimento personalizado: 0 px superior, 0 px inferior

Visto que nosso texto será adicionado à coluna da linha, precisamos nos livrar do preenchimento para que nossos divisores abracem a parte superior e inferior do nosso texto.

Configurações do módulo de texto

Agora podemos finalmente adicionar o módulo de texto à linha de uma coluna. Dentro da linha, adicione um módulo de texto com o conteúdo “nosso trabalho”. Em seguida, atualize as configurações de design da seguinte forma:

Fonte do Texto: Oswald
Estilo da fonte do texto: TT
Cor do texto do texto: # 0c71c3
Tamanho do texto do texto: 10vw
Altura da linha de texto: 1em
Orientação do Texto: Centro
Margem personalizada: -5vw superior, -4vw inferior
Preenchimento personalizado: 2vw superior, 2vw inferior

A chave aqui é usar a margem negativa personalizada para estender o texto acima e abaixo da seção. Isso permite que os divisores de seção se sobreponham ao interior do texto para criar o efeito de desenho quebrado. E o gradiente de fundo brilha para dar um toque de design agradável também. O resultado talvez seja um dos meus designs de texto favoritos, que abre a porta para uma tonelada de variações criativas.

Aqui está o design final.

Design de texto nº 2: texto com textura de linha vertical

Para o segundo design de texto, vá em frente e crie uma nova seção com uma linha de uma coluna. Em seguida, adicione um módulo de texto à coluna. Em vez de personalizar a seção primeiro, achei melhor começar com o módulo de texto para que você possa ver melhor o processo de design.

Configurações de texto

Na linha de uma coluna, adicione um módulo de texto com o conteúdo “nosso trabalho”. Em seguida, atualize as configurações de design da seguinte forma:

Fonte do texto: Poppins
Peso da fonte do texto: ultra negrito
Tamanho da fonte do texto: 8vw
Altura da linha de texto: 1em
Orientação do Texto: Centro
Margem personalizada: 0 px superior, 0 px inferior

Configurações de linha

As configurações de linha serão iguais às do primeiro exemplo de design, portanto, você pode copiar os estilos de linha e colá-los nesta linha. Ou apenas atualize as configurações de linha da seguinte maneira:

Largura personalizada: 100%
Preenchimento personalizado: 0 px superior, 0 px inferior

Configurações da seção

Atualize as configurações da seção da seguinte forma:

Largura: 70%

Estilo do divisor superior: veja a captura de tela
Cor do divisor superior: #ffffff
Altura do divisor superior: 8vw
Repetição horizontal do divisor superior: 150x
Disposição de divisores principais: no topo do conteúdo da seção

Estilo do divisor inferior: veja a captura de tela
Cor do divisor inferior: #ffffff
Altura do divisor inferior: 8vw
Repetição horizontal do divisor inferior: 150x
Virar Divisor Inferior: Vertical
Disposição do divisor inferior: no topo do conteúdo da seção

Preenchimento personalizado: 0 px superior, 0 px inferior

A chave para este projeto é a opção Repetição horizontal do divisor. Definir a repetição horizontal do divisor em 150x com uma altura igual à altura do texto cria uma série de linhas verticais sobrepostas que se estendem da parte superior e inferior da seção. Não se esqueça de definir o divisor inferior para virar verticalmente para que as “linhas” se estendam para cima.

Aqui está o design final.

Design # 3: Texto com textura parcial na parte superior e inferior

Para acelerar o processo para este próximo projeto, vá em frente e duplique a seção que você acabou de criar no segundo exemplo de projeto acima.

Atualizar as configurações da seção

Cor de fundo: # e02b20

Estilo do divisor superior: veja a captura de tela
Cor do divisor superior: # e02b20
Altura do divisor superior: 3vw
Repetição horizontal do divisor superior: 30x

Estilo do divisor inferior: veja a captura de tela
Cor do divisor inferior: # e02b20
Altura do divisor inferior: 3vw
Repetição horizontal do divisor inferior: 30x

A chave aqui é certificar-se de que a cor do divisor corresponda à cor de fundo da seção, para que os divisores só sejam visíveis onde se sobrepõem ao texto.

Atualizar configurações de texto

Agora tudo o que resta é atualizar a cor do texto do texto:

Cor do texto do texto: #ffffff

Aqui está o design final.

Uma alternativa divertida de design para o design # 3

Antes de deixar este design, pensei em compartilhar como o divisor inferior nesta seção pode ser facilmente transformado em grama para que o texto pareça estar em um campo. Para fazer isso, atualize as configurações da seguinte forma:

Cor do gradiente de fundo à esquerda: # 68a4d8 (o céu)
Cor certa do gradiente de fundo: # 1c7503 (a grama)
Posição inicial: 82%
Posição final: 0%
Preenchimento personalizado: 5vw superior
Estilo do divisor superior: nuvens (ou bolhas?)
Cor do divisor inferior: # 1c7503

Em seguida, atualize a cor do texto para # 000835

Aqui está o resultado.

E quanto ao celular?

Como a unidade de comprimento vw foi usada em todos esses designs, os estilos de texto e divisor serão bem dimensionados em todos os navegadores sem a necessidade de atribuir tamanhos adicionais no tablet e smartphone. No entanto, se você se deparar com o problema de o texto ser reduzido muito pouco no smartphone, pode ser necessário aumentar o valor da unidade de comprimento vw do tamanho do texto.

Pensamentos finais

Espero que você tenha se divertido experimentando com divisores de seção para designs de texto exclusivos. Com todas as diferentes fontes, cores e estilos de divisória disponíveis no Divi, tenho certeza que você não terá problemas para criar seus próprios designs de texto de aparência incrível para o seu próximo projeto.

Para obter mais inspiração sobre como usar divisores de seção de maneiras criativas, verifique essas texturas de fundo, quadros de menu de navegação e fundos de barra de rodapé inferior.

Até a próxima vez, estou ansioso para ouvir de você nos comentários.

Saúde!