Como usar os modos de mesclagem de padrões em suas imagens de fundo Divi

As configurações de padrão de plano de fundo integradas do Divi permitem que você crie designs atraentes e adicione um toque especial às imagens de plano de fundo do seu site. Você pode usar as configurações de modos de mesclagem para ajustar a maneira como o padrão se mescla com a imagem de fundo. Combine imagens de plano de fundo, padrões e modos de mesclagem para criar planos de fundo exclusivos e elementos de design para seu layout. Com 24 padrões para escolher e 16 modos de mesclagem, sem mencionar todas as outras configurações que você pode usar para ajustar a aparência do padrão, o céu é o limite para o seu design de plano de fundo!

Neste tutorial, mostraremos alguns exemplos de como adicionar um modo de mesclagem de padrão às imagens de fundo da sua página. Acompanhe para recriar esses looks por conta própria ou use-os como inspiração para criar seus próprios designs personalizados.

Vamos começar!

Espiada

Aqui está uma prévia do que vamos projetar neste tutorial.

Primeiro layout

Segundo layout

Terceiro layout

O que você precisa para começar

Antes de começarmos, instale e ative o Divi Theme e verifique se você tem a versão mais recente do Divi em seu site.

Agora, vamos começar!

Como usar os modos de mesclagem de padrões em suas imagens de fundo Divi

Criar uma nova página com um layout pré-fabricado

Começaremos usando um layout pré-criado da biblioteca Divi. Para este design, usaremos a Marina Landing Page do Marina Layout Pack.

Adicione uma nova página ao seu site e dê um título a ela, depois selecione a opção Usar o Divi Builder.

Usaremos um layout pré-fabricado da biblioteca Divi para este exemplo, então selecione Browse Layouts.

Pesquise e selecione o layout da página de destino da Marina.

Selecione Usar este layout para adicionar o layout à sua página.

Agora estamos prontos para construir nosso projeto.

Primeiro layout

Para nosso primeiro design, adicionaremos um padrão chevron à primeira imagem do cabeçalho. Isso adicionará algum interesse visual ao cabeçalho. Por causa do modo de mesclagem que aplicaremos, o padrão será mais sutil e ainda permitirá que a imagem de fundo fique visível.

Primeiro, abra as configurações da seção e navegue até a seção Background. Clique na guia padrão e selecione Adicionar padrão de fundo.

Em seguida, selecione o tipo de padrão. Como você pode ver, há muitos padrões diferentes para escolher, e todos eles podem ser personalizados pelas configurações de padrão abaixo.

• Tipo de Padrão: Chevrons Invertidos 2

Adicionando o modo de mesclagem de padrões

Por fim, defina o modo de mesclagem do padrão. Usaremos o modo de mesclagem Soft Light para este cabeçalho. Este modo de mesclagem torna o padrão mais sutil para que não distraia da imagem de fundo.

• Modo de mistura padrão: luz suave

Design final

Aqui está o design final para o nosso primeiro layout.

Aqui está a visualização móvel para este design.

Segundo layout

Para o segundo layout, adicionaremos um padrão à seção Como funciona do layout da página de destino da Marina. Usaremos um padrão de onda sobreposto na imagem de fundo e gradiente, que vai bem com o tema náutico da página. Vamos começar.

Primeiro, navegue até a seção Como funciona e abra as Configurações da seção. Abra as configurações de plano de fundo, selecione a guia Padrão e clique em Adicionar padrão de plano de fundo.

Para este projeto, usaremos o tipo de padrão Waves.

• Tipo de Padrão: Ondas

Em seguida, altere a cor do padrão para branco.

• Cor do padrão: #FFFFFF

Adicionando o modo de mesclagem de padrões

Agora podemos adicionar o modo de mesclagem ao nosso padrão. Defina o modo de mesclagem de padrão para sobreposição. Este modo de mesclagem torna as cores escuras na imagem de fundo mais escuras e as cores claras mais claras. Quando o modo de mesclagem é adicionado a esta seção, o padrão de onda branca muda para tons de azul, criando um efeito de padrão interessante que fica ótimo com o design desta página.

• Modo de mesclagem de padrão: sobreposição

Design final

Aqui está o design final para a seção Como funciona.

E aqui está o design móvel.

Terceiro layout

Vamos começar em nosso terceiro layout. Para este layout, adicionaremos algumas listras diagonais opacas ao plano de fundo da seção “Segurança e reparos de primeira qualidade”.

Comece abrindo as configurações da seção e navegando até a seção de fundo. Clique na guia padrão e selecione Adicionar padrão de fundo.

Selecione o padrão de Listras Diagonais.

Em seguida, defina a cor do padrão.

• Cor do padrão: rgba(255,255,255,0,25)

Vire o padrão horizontalmente usando as configurações de transformação de padrão. Esta é outra configuração que pode ajudá-lo a ajustar o padrão ao seu gosto.

• Transformação de padrão: horizontal

Adicionando o modo de mesclagem de padrões

Por fim, defina o modo de mesclagem do padrão. Para este design, usaremos o modo de mesclagem de luminosidade. Isso combinado com a cor do nosso padrão adiciona uma tela de luz à imagem, mas ainda permite que a foto seja exibida. Com este design, a imagem do barco se destaca mais do fundo, pois o padrão adiciona um contraste distinto.

• Modo de Mistura Padrão: Luminosidade

Design final

Aqui está o projeto final para esta seção.

E aqui está o design móvel para esta seção.

Resultado final

Agora vamos dar uma olhada no design completo da página com os modos de mesclagem de padrões.

Pensamentos finais

Adicionar um padrão pode ser uma ótima maneira de adicionar interesse visual à sua imagem de plano de fundo, mas às vezes o padrão pode sobrecarregar a imagem de plano de fundo. Ou talvez você queira que a cor do seu padrão mude com base na imagem por trás dele. Felizmente, o Divi vem com muitos modos de mesclagem para que você possa personalizar os padrões o quanto quiser. Você pode brincar com diferentes combinações de padrões, modos de mesclagem, cores de padrões, tamanhos de padrões e muitas outras configurações Divi para criar um design totalmente exclusivo para suas imagens de fundo.

Espero que este tutorial tenha inspirado você a incorporar alguns padrões e usar modos de mesclagem nos designs de seu site! Para outro tutorial de design usando padrões, confira este tutorial para aprender a criar máscaras sutis de padrão de fundo. E para uma visão geral dos diferentes filtros, efeitos e modos de mesclagem que você pode usar com o Divi, dê uma olhada nestes artigos: Parte 1 e Parte 2. Você já usou os padrões e modos de mesclagem do Divi em suas imagens de fundo antes? Deixe-nos saber nos comentários!