Usando o Módulo de Texto da Divi para Criar Elementos de Bloco no Design da Sua Página Divi

Módulos de texto são uma parte vital de qualquer design de página que você cria com Divi, tenho certeza de que isso é algo com que todos concordamos. Normalmente, eles são usados ​​para exibir texto de maneira direta. Mas você também pode usar os Módulos de texto para criar elementos de design impressionantes. Em postagens anteriores do blog, já mostramos como usar texto para elevar seu design da web.

Neste tutorial, continuaremos adicionando opções para você escolher ao projetar uma página e usar Módulos de texto. Como você pode ou não saber, existem vários tipos de texto diferentes que você pode combinar no mesmo módulo de texto. Além disso, um módulo pode conter vários títulos, parágrafos, links e muito mais. Nesta postagem, vamos usar todos esses tipos de texto a nosso favor para criar elementos de bloco impressionantes no design de nossa página.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada no resultado final em diferentes tamanhos de tela.

Vamos começar!

Adicionar nova seção regular

Cor de fundo

Comece adicionando uma nova seção regular à página em que você está trabalhando no momento. Em seguida, abra as configurações da seção e altere a cor de fundo.

• Cor de fundo: # 000000

Espaçamento

Vá para as configurações de espaçamento de sua seção a seguir e adicione alguns valores de preenchimento personalizados.

• Preenchimento superior: 280 px (desktop), 150 px (tablet e telefone)
• Preenchimento inferior: 280 px (desktop), 150 px (tablet e telefone)

Adicionar nova linha

Estrutura da Coluna

Quando terminar de modificar as configurações da seção, adicione uma nova linha usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo, abra as configurações de linha e faça com que a linha ocupe toda a largura da tela nas configurações de dimensionamento.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

Por último, adicione algum preenchimento personalizado nas configurações de Espaçamento.

• Coluna 1 Preenchimento esquerdo: 100 px (desktop e tablet), 50 px (telefone)
• Preenchimento personalizado da coluna 2: 50 px
• Preenchimento personalizado da coluna 3: 50 px

Adicionar Módulo de Título de Texto à Coluna 1

Caixa de Conteúdo

É hora de começar a adicionar os diferentes módulos! O primeiro módulo de que precisaremos na primeira coluna é um Módulo de Texto. Adicione algum conteúdo H2 à caixa de conteúdo.

Configurações de texto H2

Em seguida, vá para as configurações de texto H2 e faça algumas alterações:

• Fonte do Título 2: Código Fonte Pro
• Estilo da fonte do título 2: maiúsculas
• Cor do texto do título 2: #ffffff
• Tamanho do texto do título 2: 100px
• Cabeçalho 2 espaçamento entre letras: 24px

Espaçamento

Reduza o espaço na parte superior usando alguma margem superior negativa.

• Margem superior: -50px

Adicionar Módulo de Texto de Descrição à Coluna 1

Configurações de texto

O segundo módulo necessário na primeira coluna é um Módulo de Texto de descrição. Depois de adicionar seu conteúdo, vá para as configurações de texto e faça algumas alterações:

• Fonte do Texto: Código Fonte Pro
• Cor do texto: #ffffff
• Orientação do Texto: Justificar

Dimensionamento

Reduza a largura do Módulo de Texto também.

• Largura: 68%

Espaçamento

E por último, mas não menos importante, crie algum espaço entre este Módulo de Texto e o anterior nas configurações de Espaçamento.

• Margem superior: 200 px (desktop), 100 px (tablet e telefone)
• Margem inferior: 100 px (tablet e telefone)

Adicionar Módulo de Bloco de Texto à Coluna 2

Caixa de Conteúdo

É hora de passar para a segunda coluna! Aqui, vamos usar Módulos de Texto para criar elementos de bloco. Uma parte vital para fazer esse trabalho é estruturar a caixa de conteúdo corretamente. Na tela de impressão abaixo, você pode ver que estamos usando um título H3, um título H4, um parágrafo e um link. Entre o título H4 e o parágrafo, estamos nos certificando de que haja algum espaço adicional deixado também.

Cor de fundo

Adicione uma cor de fundo preta ao Módulo de Texto.

• Cor de fundo: # 000000

Configurações de texto

Vamos modificar cada um dos tipos de texto individualmente. Comece modificando as configurações do parágrafo.

• Fonte do Texto: Código Fonte Pro
• Orientação do Texto: Esquerda
• Cor do Texto: Claro

Configurações de texto de link

Em seguida, faça algumas alterações adicionais nas configurações do link.

• Estilo da fonte do link: maiúscula e sublinhada
• Cor do sublinhado do link: #ffffff
• Cor do texto do link: # edf000
• Tamanho do texto do link: 16px
• Espaçamento entre letras do link: 3px

Configurações de texto do título 3

O título H3 em nossa caixa de conteúdo precisa das seguintes configurações:

• Estilo da fonte do título 3: maiúsculas
• Tamanho do texto do título 3: 33px

Configurações de texto do título 4

Continue abrindo as configurações de texto H4 e faça algumas alterações lá também.

• Cor do texto do título 4: # 4f4f4f
• Tamanho do texto do título 4: 19 px
• Cabeçalho 4 espaçamento entre letras: -1 px

Dimensionamento

Para criar a forma exata que queremos, vamos reduzir a largura do Módulo de Texto a seguir.

• Largura: 88% (desktop), 60% (tablet), 90% (telefone)

Espaçamento

Precisamos alterar as configurações de Espaçamento também.

• Margem esquerda: 200px (tablet)
• Enchimento superior: 50 px
• Preenchimento inferior: 50 px
• Preenchimento esquerdo: 50 px
• Preenchimento direito: 50 px

Fronteira

Em seguida, adicione uma borda sutil ao Módulo de Texto.

• Largura da borda: 2 px
• Cor da borda: # 424242

Sombra da caixa

E para finalizar, adicione uma sombra de caixa colorida.

• Posição horizontal da sombra da caixa: 19 px
• Posição vertical da sombra da caixa: 16 px
• Força de propagação da sombra da caixa: -4px
• Cor da sombra: # f2ff00

Clonar Módulo de Texto de Bloco Duas Vezes e Posicionar na Coluna 3

Para economizar tempo, vamos clonar o Bloco de Módulo de Texto que criamos duas vezes e colocar as duas duplicatas na terceira coluna da linha.

Modificações do Módulo de Texto Vermelho

Alterar a cor do texto do link

Abra o primeiro Módulo de Texto na terceira coluna e mude a cor do link.

• Cor do texto do link: # e02b20

Alterar espaçamento

Em seguida, vá para as configurações de Espaçamento e adicione alguma margem superior.

• Margem superior: -150 px (desktop), -20 px (tablet), 50 px (telefone)

Mudar a cor da sombra da caixa

Altere a cor da sombra da caixa para a mesma cor usada para o texto do link.

• Cor da sombra: # e02b20

Modificações do Módulo de Texto Azul

Alterar a cor do texto do link

Altere também a cor do link do segundo Módulo de Texto na terceira coluna.

• Cor do texto do link: # 0ff3ff

Mudar o tamanho

Altere as configurações de dimensionamento a seguir.

• Dimensionamento: 67% (Desktop), 60% (Tablet), 90% (Telefone)

Alterar espaçamento

E para criar alguma sobreposição entre este módulo e os outros dois Módulos de Texto, brinque com os valores de margem personalizados.

• Margem superior: -20 px (desktop), -30 px (tablet), 50 px (telefone)
• Margem esquerda: -160 px (desktop), 200 px (tablet), 0 px (telefone)

Mudar a cor da sombra da caixa

Para terminar, mude a cor da sombra da caixa para a mesma cor azul usada para o texto do link e pronto!

• Cor da sombra: # 0ff3ff

Antevisão

Agora que passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Pensamentos finais

Você ficaria surpreso com a quantidade de designs exclusivos que pode obter usando os Módulos de Texto em combinação com as opções integradas do Divi. Nenhum código CSS extra é necessário. Nesta postagem, mostramos como usar diferentes tipos de texto para criar elementos de bloco impressionantes no design de sua página Divi. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!