5 sobreposições de máscara e padrão de fundo que você pode aplicar à sua imagem de fundo

Publicados: 2022-08-08

Com a mais recente versão de máscara de fundo e padrão de fundo do Divi, você pode criar algumas seções de heróis exclusivas para o seu site. Uma seção de herói é a primeira seção do seu site e é a primeira coisa que seus visitantes veem antes de percorrer seu site, por isso é importante ser atraente! A combinação das opções de imagem de plano de fundo, máscara de plano de fundo e padrão de plano de fundo do Divi nos permite criar seções de herói atraentes para que seu site cause uma ótima primeira impressão.

Este post mostrará como criar cinco sobreposições de padrões e máscaras de fundo exclusivas que você pode aplicar a uma imagem de fundo para criar seções de heróis verdadeiramente impressionantes. Este tutorial cobrirá as etapas essenciais necessárias para criar cada seção de herói e fornecerá as ferramentas necessárias para criar uma seção de herói impressionante para seu site em minutos.

Usaremos fotos gratuitas do Pacote de Layout do Curso Online neste exemplo. Para usar as mesmas imagens, role até o final desta postagem para baixar as imagens em resolução completa.

Vamos começar!

O que estamos criando

Aqui está uma rápida olhada nas cinco seções de heróis que criaremos neste post hoje.

Os designs são sutis, simples e ainda assim impactantes.

Baixe o Layout GRATUITAMENTE

Se você quiser baixar o design de layout pré-projetado deste tutorial, primeiro você precisará baixá-lo usando o botão abaixo. Para ter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como novo assinante, você receberá ainda mais produtos Divi e um pacote Divi Layout gratuito toda segunda-feira! Se você já está na lista, basta digitar seu endereço de e-mail abaixo e clicar em download. Você não será “subscrito novamente” ou receberá e-mails extras.

Baixe os arquivos
Download de graça

Download de graça

Junte-se ao Boletim Divi e nós lhe enviaremos por e-mail uma cópia do pacote de layout de página de destino Divi, além de muitos outros recursos, dicas e truques incríveis e gratuitos do Divi. Acompanhe e você será um mestre Divi em pouco tempo. Se você já é inscrito, basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

Você se inscreveu com sucesso. Verifique seu endereço de e-mail para confirmar sua assinatura e ter acesso a pacotes de layout Divi semanais gratuitos!

Como baixar e usar os layouts

Para importar o layout da seção para sua biblioteca Divi, faça o seguinte:

  1. Navegue até a Biblioteca Divi.
  2. Clique no botão Importar na parte superior da página.
  3. No pop-up de portabilidade, selecione a guia de importação.
  4. Escolha o arquivo de download do seu computador (certifique-se de descompactar o arquivo primeiro e usar o arquivo JSON).
  5. Em seguida, clique no botão importar.

Depois de importar os layouts com sucesso, eles serão vistos em sua biblioteca Divi e estarão disponíveis para uso no Divi Builder.

Agora, vamos ao tutorial!

O que você precisa para começar

Antes de começarmos, você precisará:

  1. Instale e ative o Tema Divi.
  2. Crie uma nova página, publique-a e clique no botão “Use The Divi Builder” para editar a página no front-end usando o Visual Builder.
  3. Escolha a opção “Build From Scratch”.

Agora temos uma tela em branco para começar a projetar!

Como criar 5 sobreposições de máscara e padrão de fundo para aplicar a uma imagem de fundo

Primeiro, vamos criar a seção Hero

Todos os nossos exemplos de design usam a mesma estrutura de seção, linha e coluna, então vamos configurá-los agora.

1. Criar Estrutura de Layout

Adicione uma linha à sua página e clique no ícone verde “+” para abrir a estrutura da coluna e selecione a primeira coluna, a coluna de largura total.

2. Adicionar espaçamento de seção

Agora que temos nossa linha e coluna configuradas, é hora de adicionar espaçamento à seção.

Na guia Espaçamento, atualize o seguinte:

  • Desktop: 400px superior e 400px inferior
  • Tablet: 200px superior e 200px inferior; 25px à esquerda e à direita
  • Telefone: 50px superior e 50px inferior; 25px à esquerda e à direita

Como projetar a seção de herói nº 1

Vamos projetar a primeira seção de heróis.

1. Adicione o texto do título

Clique no ícone cinza “+” para abrir a biblioteca de módulos. Role até o texto e clique para carregar.

Digite o texto do título e, em seguida, na guia Texto do título, defina estas configurações:

  • Família de fontes: Work Sans
  • Cor da fonte: Branco #ffffff
  • Tamanho da fonte:
    • Desktop: 3rem
    • Tablet: 2.2rem
    • Telefone: 1.4rem

2. Adicionar módulo de botão

Adicione um botão e defina estas configurações:

  • No tipo de guia Texto: Saiba mais
  • Na guia Alinhamento, escolha: Centro
  • Clique em Usar estilos personalizados e configure:
    • Tamanho do texto do botão:
      • Área de trabalho: 20px
      • Tablet: 16px
      • Telefone: 14px
    • Cor do Texto do Botão: Branco #ffffff
    • Cor de fundo do botão: Preto #1d1d1d
    • Largura da borda do botão: 0
    • Raio da borda do botão: 0
    • Espaçamento entre letras do botão: 3pt
    • Fonte do botão: Work Sans
    • Estilo da Fonte do Botão: Maiúsculas

3. Adicionar imagem de fundo

Agora que temos nosso conteúdo configurado, é hora de começar a projetar o plano de fundo da seção.

  1. Navegue até a alternância de plano de fundo e clique na 3ª guia, na guia de imagem e clique em "Adicionar imagem de plano de fundo".
  2. Isso abrirá sua biblioteca de mídia, onde você pode selecionar uma foto ou fazer upload de uma nova.
  3. Depois que sua foto for selecionada, clique no botão "Fazer upload de uma imagem" no canto inferior direito.

4. Adicionar padrão de fundo

Agora que temos nossa imagem de fundo configurada, vamos adicionar um padrão.

  • Dentro da guia Plano de fundo, navegue até a 5ª guia, a guia de padrões e clique em "Adicionar padrão de plano de fundo".
  • Selecione Tufted no menu suspenso e defina estas configurações:
    • Cor do padrão – rgba(255,255,255,0,31)
    • Transformação de padrão: nenhum
    • Tamanho do padrão: tamanho real
    • Origem da repetição do padrão: superior esquerdo
    • Repetir Padrão: Repetir
    • Modo de Mistura: Normal

5. Adicionar máscara de fundo

Agora que temos nossa imagem de fundo e padrão configurados, vamos adicionar uma máscara de fundo.

  • Dentro da guia Plano de fundo, navegue até a 6ª guia, a guia máscara e clique em "Adicionar máscara de plano de fundo".
  • Selecione Bean no menu suspenso e defina estas configurações:
    • Cor da máscara: rgba(0,0,0,0.36)
    • Proporção da máscara: retângulo horizontal
    • Tamanho da máscara: esticar para preencher

Voilá! Agora você tem uma seção de heróis lindamente projetada.

Como projetar a seção 2 do herói

Agora, vamos projetar a segunda seção do herói.

1. Adicione uma imagem de fundo e defina o Blend Mode para Overlay

Selecione sua imagem de fundo, defina o modo de mesclagem para Overlay e adicione uma cor de sobreposição de rgba(10,10,10,0.64).

2. Adicionar padrão de fundo

Agora que temos a imagem de fundo configurada, vamos adicionar um padrão de fundo.

  • Dentro da guia Plano de fundo, navegue até a 5ª guia, a guia de padrões e clique em "Adicionar padrão de plano de fundo".
  • Selecione Tufted no menu suspenso e defina estas configurações:
    • Cor do padrão – rgba(255,255,255,0,09)
    • Transformação de padrão: nenhum
    • Tamanho do Padrão: Capa
    • Origem da repetição do padrão: superior esquerdo
    • Repetir Padrão: Repetir
    • Modo de Mistura: Normal

3. Adicionar máscara de fundo

Agora que temos nossa imagem de fundo e padrão configurados, vamos adicionar uma máscara de fundo.

  • Dentro da guia Plano de fundo, navegue até a 6ª guia, a guia máscara e clique em "Adicionar máscara de plano de fundo".
  • Selecione Caret no menu suspenso e defina estas configurações:
    • Cor da máscara: rgba(0,0,0,0.36)
    • Transformação de Máscara: Nenhuma
    • Proporção da máscara: retângulo horizontal
    • Tamanho da máscara: esticar para preencher
    • Modo de mistura de máscara: Normal

Como projetar a seção de herói nº 3

Agora, vamos projetar a terceira seção do herói.

1. Adicione uma imagem de fundo e defina o Blend Mode para Overlay

Selecione sua imagem de fundo, defina o modo de mesclagem para Overlay e adicione uma cor de sobreposição de rgba(10,10,10,0.39).

2. Adicionar padrão de fundo

Agora que temos nossa imagem de fundo configurada, vamos adicionar um padrão de fundo.

  • Dentro da aba Background, navegue até a 5ª aba, a aba Patterns, e clique em “Add Background Pattern”.
  • Selecione Diagonal Stripes 2 no menu suspenso e defina estas configurações:
    • Cor do padrão – rgba(0,0,0,0,06)
    • Transformação de padrão: nenhum
    • Tamanho do padrão: tamanho real
    • Origem da repetição do padrão: superior esquerdo
    • Repetir Padrão: Repetir
    • Modo de Mistura: Normal

3. Adicionar máscara de fundo

Agora que adicionamos uma imagem de fundo e um padrão, vamos adicionar uma máscara de fundo.

  • Dentro da guia Plano de fundo, navegue até a 6ª guia, a guia máscara e clique em "Adicionar máscara de plano de fundo".
  • Selecione Triângulos no menu suspenso e defina estas configurações:
    • Cor da máscara: rgba(10,10,10,0,61)
    • Transformação de padrão: nenhum
    • Proporção da máscara: retângulo horizontal
    • Tamanho da máscara: esticar para preencher
    • Modo de mistura de máscara: Normal

Como projetar a seção de herói nº 4

Agora, vamos projetar a quarta seção do herói.

1. Adicione uma imagem de fundo

Selecione sua imagem de fundo.

2. Adicionar padrão de fundo

Agora que adicionamos nossa imagem de plano de fundo, vamos adicionar um padrão de plano de fundo.

  • Dentro da guia Plano de fundo, navegue até a 5ª guia, a guia de padrões e clique em "Adicionar padrão de plano de fundo".
  • Selecione Smiles na lista suspensa e defina estas configurações:
    • Cor do padrão – rgba(0,0,0,0.2)
    • Transformação de padrão: nenhum
    • Tamanho do Padrão: Capa
    • Origem da repetição do padrão: superior esquerdo
    • Repetir Padrão: Repetir
    • Modo de Mistura: Normal

3. Adicionar máscara de fundo

Agora que temos nossa imagem de fundo e padrão aplicados, vamos adicionar uma máscara de fundo.

  • Dentro da guia Plano de fundo, navegue até a 6ª guia, a guia máscara e clique em "Adicionar máscara de plano de fundo".
  • Selecione Corner Lake no menu suspenso e defina estas configurações:
    • Cor da máscara: rgba(10,10,10,0,61)
    • Transformação de Máscara: Horizontal
    • Proporção da máscara: retângulo horizontal
    • Tamanho da Máscara: Capa
    • Posição da Máscara: Centro Esquerdo
    • Modo de mistura de máscara: Normal

3. Defina as configurações de linha

Antes de irmos, esta seção de heróis tem estilos de linha exclusivos. Vamos configurar isso.

  • Dimensionamento:
    • Largura: 80%
    • Largura máxima: 800px
  • Alinhamento de linhas:
    • Área de trabalho: padrão
    • Tablet: Centro
    • Telefone: Centro
  • Espaçamento:
    • Esquerda: 20vw

Como projetar a seção de herói nº 5

Agora, vamos projetar a quinta seção do herói.

1. Adicione uma imagem de fundo

Selecione sua imagem de fundo.

2. Adicionar padrão de fundo

Agora que temos nossa imagem de fundo configurada, vamos aplicar um padrão de fundo.

  • Dentro da guia Plano de fundo, navegue até a 5ª guia, a guia de padrões e clique em "Adicionar padrão de plano de fundo".
  • Selecione Cruzes no menu suspenso e defina estas configurações:
    • Cor do padrão – #ffffff
    • Transformação de padrão: nenhum
    • Tamanho do padrão: tamanho personalizado
    • Largura do padrão: 10px
    • Altura do padrão: 10px
    • Origem da repetição do padrão: superior esquerdo
    • Repetir Padrão: Repetir
    • Modo de Mistura: Normal

3. Adicionar máscara de fundo

Agora que temos uma imagem de fundo e um padrão aplicados, vamos adicionar uma máscara de fundo.

  • Dentro da guia Plano de fundo, navegue até a 6ª guia, a guia máscara e clique em "Adicionar máscara de plano de fundo".
  • Selecione Diagonal Pills no menu suspenso e defina estas configurações:
    • Cor da máscara: rgba(10,10,10,0,61)
    • Transformação de Máscara: Horizontal
    • Proporção da máscara: retângulo horizontal
    • Tamanho da Máscara: Capa
    • Posição da Máscara: Centro Esquerdo
    • Modo de mistura de máscara: Normal

3. Defina as configurações de linha

Antes de irmos, esta seção de heróis tem estilos de linha exclusivos. Vamos configurar isso.

  • Dimensionamento:
    • Largura: 80%
    • Largura máxima: 800px
  • Alinhamento de linhas:
    • Área de trabalho: padrão
    • Tablet: Centro
    • Telefone: Centro
  • Espaçamento:
    • Direita: 18vw

Obtenha mais designs de máscaras e padrões de fundo!

Se você quiser mais designs como este, confira esses 12 designs de máscaras e padrões de fundo gratuitos para download.

Pensamentos finais

Projetar uma seção de herói única e atraente para o seu site é fácil com as novas opções de padrão e máscara de fundo do Divi. Cada recurso tem muitas opções que permitem criar designs de plano de fundo verdadeiramente criativos. Além disso, você pode adicionar padrões e máscaras de fundo a qualquer elemento do Divi Builder! As opções de design são infinitas.