Ir para o conteúdo principal

Como transformar letras em fundo no Divi

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Com relação às máscaras de fundo, os usuários tendem a usar o software de edição de imagens fora de Diviem seguida, faça o upload da imagem para o site que eles criam. Embora seja uma maneira bastante conveniente de personalizar seu site, não é necessariamente a única solução. Você também pode criar máscaras de fundo dentro do Divi, combinando os diferentes elementos de design e as opções de filtro criativamente. É exatamente o que estamos prestes a fazer neste post! Transformamos personagens grandes em máscaras de fundo que parecem ótimas, independentemente do tamanho da tela. Nós esperamos que isso Tutoriel irá inspirá-lo a criar seus próprios desenhos usando caracteres superdimensionados e opções Divi integradas.

Vamos!

Amostra de visualização

Antes de mergulhar no tutorial, aqui está o tipo de plano de fundo que você pode obter com essa técnica.

Projeto

Vamos começar o desenho criando um fundo preto com uma letra que tenha uma imagem como fundo.

Adicione uma nova seção

Cor de fundo

Vamos começar com o primeiro exemplo! Adicione uma nova seção regular a uma página nova ou existente e adicione um plano de fundo a esta seção:

  • Cor de fundo: #000000

espaçamento

Em seguida, vá para as configurações de espaçamento e remova todos os preenchimentos superior e inferior por padrão.

  • Top Padding: 0px
  • Preenchimento inferior: 0px

transbordamento

Vá para a guia Avançado e oculte os estouros da seção. Isso se tornará importante mais adiante neste tutorial quando reposicionarmos o módulo de texto contendo o caractere superdimensionado.

  • Estouro horizontal: oculto
  • Estouro vertical: oculto

Adicionar linha 1

Estrutura da coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Coluna 1 cor de fundo

Sem adicionar mais módulos, abra as configurações de linha e adicione uma cor de fundo à primeira coluna.

  • Coluna 1 Cor de fundo: #848484

Imagem de fundo da coluna 1

Adicione também uma cor de fundo. Para combinar a cor de fundo e a imagem, aplicaremos um modo de mesclagem.

  • Imagem de fundo de coluna mista: multiplicar

dimensionamento

Vá para a guia Design e deixe a linha preencher a largura total da tela aplicando os seguintes parâmetros de dimensionamento:

  • Use uma largura de medianiz personalizada: Sim
  • Largura da calha: 1
  • Largura: 100%
  • Largura máxima: 100%

espaçamento

Também nos livramos de todo o acolchoamento personalizado na fila.

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 554.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

  • Top Padding: 0px
  • Preenchimento inferior: 0px

Adicione um módulo de texto a uma coluna

Adicione um personagem à área de conteúdo

É hora de adicionar o módulo de texto contendo um caractere superdimensionado. Adicione a letra "o" à área de conteúdo.

Cor de fundo

Continue indo para as configurações de fundo e adicione uma cor de fundo preto.

  • Cor de fundo: #000000

Configurações de texto

Vá para a guia Design e edite as configurações de texto. Observe como usamos um valor alto para o tamanho do texto.

  • Fonte do texto: Poppins
  • Tamanho do texto: 100vw
  • Orientação do Texto: Centro

espaçamento

Em seguida, acesse as configurações de espaçamento e adicione valores personalizados de margem e preenchimento.

  • Margem superior: -6vw
  • Melhor preenchimento: 15vw
  • Preenchimento inferior: 49vw

personagens superdimensionados

filtros

Está na hora de fazer mágica! Acesse as configurações de filtro do módulo e altere o modo de mesclagem de acordo:

  • Modo de Mistura: Multiplique
  • Brilho: você pode alterar este valor ao seu gosto

Adicione a linha 2

Estrutura da coluna

Uma vez que seu personagem superdimensionado tenha sido adicionado ao design, você pode continuar adicionando os módulos restantes que deseja exibir na seção, de preferência adicionando uma nova linha:

dimensionamento

Sem adicionar mais módulos, abra os parâmetros da linha e deixe-a ocupar toda a largura da tela.

  • Use uma largura de medianiz personalizada: Sim
  • Largura da calha: 1
  • Largura: 100%
  • Largura máxima: 100%

espaçamento

Remova também todo o preenchimento padrão para cima e para baixo

  • Top Padding: 0px
  • Preenchimento inferior: 0px

Adicione o módulo de texto # 1 à coluna

Adicionar conteúdo H1

Nesta nova linha, você pode adicionar os módulos de sua escolha. Para recriar o exemplo exato compartilhado na visualização desta mensagem, comece adicionando um módulo de texto contendo o conteúdo H1.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

Configurações de texto H1

Vá para a guia Design e altere as configurações de texto H1.

  • Fonte do título: Playfair Display
  • Peso da fonte: negrito
  • Alinhamento do texto do título: Centro
  • Cor do texto do título: #ffffff
  • Tamanho do título de texto: 6vw

espaçamento

Continue indo para as configurações de espaçamento e deixe o módulo de texto sobrepor o caractere superdimensionado adicionando uma margem superior negativa. Também garantimos que há espaço à esquerda e à direita do módulo para garantir a capacidade de resposta.

  • Margem superior: -47vw
  • Margem esquerda: 1vw
  • Margem direita: 1vw

Adicione um módulo de divisão à coluna

visibilidade

O próximo módulo que precisamos é de um módulo de divisão. Certifique-se de que a opção "Show Separator" esteja ativada.

  • Mostrar divisor: sim

Cor

Vá para a aba de design seguinte e mude a cor do separador.

  • Cor: #ffffff

dimensionamento

Altere também os parâmetros de dimensionamento.

  • Peso do divisor: 13px
  • Largura: 16%
  • Alinhamento do módulo: centro

espaçamento

Adicione também uma margem superior para criar um espaço entre o módulo de texto e o módulo de divisão.

  • Margem superior: 16vw

Adicione o módulo de texto # 2 à coluna

Adicionar conteúdo

O próximo módulo que precisamos é de um módulo de texto com conteúdo de parágrafo.

Configurações de texto

Acesse as configurações de texto e faça as seguintes alterações:

  • Fonte do texto: Open Sans
  • Cor do texto: #ffffff
  • Tamanho do texto: 1vw (área de trabalho), 2vw (tablet), 2.5vw (telefone)
  • Altura da linha de texto: 1.9em
  • Orientação do Texto: Centro

espaçamento

Adicione também valores de espaçamento personalizados.

  • Margem superior: 3vw
  • Margem inferior: 3vw (computador de mesa), 10vw (tablet e telefone)
  • Margem esquerda: 27vw (área de trabalho), 10vw (tablet), 8vw (telefone)
  • Margem direita: 27vw (área de trabalho), 10vw (tablet), 8vw (telefone)

Adicione um módulo de botão à coluna

Adicione uma cópia

No próximo e último módulo, que é um módulo de botão. Digite uma cópia de sua escolha.

alignement

Continue alterando o alinhamento do botão na guia Design.

  • Alinhamento dos botões: centro

Configurações de botão

Alterne para as configurações dos botões e personalize o botão conforme desejado.

  • Use estilos personalizados para o botão: Sim
  • Tamanho do texto do botão: 1vw (área de trabalho), 2.5vw (tablet), 3vw (telefone)
  • Cor do texto do botão: #ffffff
  • Largura da borda do botão: 1px
  • Raio da borda do botão: 0px
  • Botão Fonte: Open Sans
  • Peso da fonte: Ultra Bold
  • Estilo da fonte: maiúscula

espaçamento

Finalmente, também adicionamos valores personalizados de margem e preenchimento para obter o resultado desejado.

  • Margem inferior: 10vw
  • Preenchimento: 15px
  • Preenchimento inferior: 15px
  • Preenchimento à esquerda: 50px
  • Estofado à direita: 50px

Resultado final

Isso é o que parece o que nós construímos até agora.

Últimos pensamentos

Neste artigo, mostramos a você como usar personagens grandes para criar lindas máscaras de fundo com Divi. Essa é uma ótima maneira de criar um design da Web personalizado sem precisar usar o software de edição de imagens. Se você tiver dúvidas ou sugestões, por favor deixe um comentário na seção de comentários abaixo!

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
2 ações
ação2
chilrear
Enregistrer
Whatsapp