10 truques de design de plano de fundo agora possíveis com as novas configurações de plano de fundo da Divi

Desde o lançamento da nova interface de opções de plano de fundo do Divi, o Divi se tornou ainda mais poderoso. Os novos recursos abriram muitas possibilidades de design. Hoje, vou apresentar alguns novos truques de design dos quais você pode não estar ciente e, com sorte, posso inspirá-lo a criar alguns designs de plano de fundo incríveis.

Existem inúmeras combinações e misturas de design de plano de fundo que você pode criar usando o Visual Builder. Os 10 truques que escolhi para esta postagem irão apenas arranhar a superfície, mas eles têm como objetivo apresentar a você diferentes conceitos e despertar seu interesse. A maioria desses truques de design é realizada usando as novas opções de plano de fundo, como as novas opções de plano de fundo gradiente e a combinação de imagens de plano de fundo com cores de gradiente.

Devo avisá-lo embora. Depois de começar a pesquisar as opções de plano de fundo, você nunca mais desistirá! Isto é muito divertido. Bem, pelo menos foi assim para mim.

Aproveitar.

Aqui está uma prévia dos truques de design

Como seguir esta postagem

Em vez de ter que começar do zero toda vez que explico um novo truque de design, usei o mesmo design de exemplo para a maioria deles e adicionei diferentes truques a esse design. Isso significa que a maioria dos exemplos exige que você tenha um truque de design anterior concluído antes de aplicar o novo truque. Todos os truques # 1-9 seguem a mesma configuração básica e requerem o truque # 1 como pré-requisito. Portanto, se você estiver testando os recursos, sugiro começar com o truque nº 1.

10 truques de design de plano de fundo com Divi

Inscreva-se no nosso canal no Youtube

Truque # 1: sobreposição diagonal

Adicione uma seção de largura total e insira um módulo de cabeçalho de largura total.

Em seguida, atualize as configurações do módulo de cabeçalho da seguinte forma:

Opções de conteúdo

Título: [insira o título]
Subtítulo: [insira o subtítulo]
URL da imagem do logotipo: [inserir logotipo]
Cores gradientes de fundo: rgba (12.113.195,0.55), rgba (255.255.255,0)
Tipo de gradiente: Linear
Direção do gradiente: 135 graus
Posição inicial: 60%
Posição final: 60% (qualquer coisa 60% ou abaixo funcionará)

Como o gradiente começa e termina no mesmo ponto, basicamente não há efeito de gradiente acontecendo. O resultado são as duas cores de cada lado do marcador de 60%. Isso combinado com o ângulo da direção do gradiente cria o efeito.

Opções de Design

Cor do Texto: Claro
Fonte do título: padrão, negrito (B), maiúscula (TT)
Tamanho da fonte do título: 40px
Tamanho da fonte do subtítulo: 24px

Opções avançadas

Em CSS personalizado na caixa Elemento principal, adicione o seguinte CSS:

Padding: 150px 0;

Isso é apenas para adicionar algum preenchimento adicional às partes superior e inferior do módulo de cabeçalho

Salvar configurações

Agora é hora de adicionar um plano de fundo à sua seção de largura total. Acesse as Configurações da seção de largura total clicando no ícone de engrenagem na caixa de controle roxa.

Em seguida, atualize as Opções de Conteúdo das Configurações da Seção da seguinte maneira:

Imagem de fundo: [insira a imagem de fundo aqui. Deve ter pelo menos 1960 px de largura. Escolhi esta imagem em unsplash.com e recortei-a para que a seção de destaque da imagem ficasse no lado direito.]
Use Parallax Effect: YES (isso é opcional, mas acho que funciona bem com a sobreposição diagonal)
Método Parallax: True Parallax

É isso! Sinta-se à vontade para ajustar a opacidade da cor do gradiente e o grau de direção do gradiente de acordo com sua preferência.

Começamos bem, eu acho. Vamos passar para o segundo truque.

Truque # 2: sobreposições diagonais em camadas

Este truque de design é uma continuação do truque nº 1, portanto, certifique-se de ter concluído o truque nº 1 antes de continuar.

No truque nº 1, paramos com uma sobreposição diagonal usando a opção de gradiente de fundo no Módulo de cabeçalho de largura total.

Usando o mesmo exemplo, adicione um gradiente de fundo adicional à seção de largura total. Já temos uma imagem de fundo para essa seção, mas com as novas opções do Divi, podemos combinar cores de gradiente com sua imagem de fundo e depois mesclá-las com certos efeitos.

Vá para as configurações da Seção de largura total e atualize as seguintes opções de conteúdo :

Cores gradientes de fundo: rgba (131,0,233,0,38), rgba (255,255,255,0)
Tipo de gradiente: Linear
Direção do gradiente: 135 graus (o mesmo que a outra direção do gradiente em seu módulo de cabeçalho)
Posição inicial: 38%
Posição final: 38%

Agora clique no ícone da imagem de plano de fundo e altere o seguinte:

Use o efeito de paralaxe: Não
Mistura de imagem de fundo: multiplique

Agora você tem 2 sobreposições diagonais sobrepostas que podem ser facilmente personalizadas para um design de fundo exclusivo.

Truque # 3: sobreposição de círculo

Este truque de design é uma continuação do truque nº 1, portanto, certifique-se de ter concluído o truque nº 1 antes de continuar.

Agora vamos transformar a sobreposição diagonal do truque nº 1 em uma sobreposição circular. Para fazer isso, vá para as configurações do módulo de largura total e atualize o seguinte:

Opções de conteúdo

Tipo de gradiente de fundo: radial
Direção Radial: Centro
Posição inicial: 30%
Posição final: 30%

Opções de Design

Texto e orientação do logotipo: centro

Agora verifique o novo fundo do cabeçalho.

Este truque cria cabeçalhos ou frases de chamariz de ótima aparência. O tamanho da sobreposição do círculo pode ser facilmente ajustado e responde bem a diferentes tamanhos de tela. No momento, estou usando uma cor gradiente semitransparente em cima de uma imagem de plano de fundo, mas ficaria ótimo sem uma imagem de plano de fundo.

Aqui está um exemplo de como ficaria sem uma imagem de fundo e com uma cor de texto mais escura.

Truque # 4: Sobreposições de círculo em camadas para criar uma borda de círculo

Esta é uma continuação do truque nº 3 onde paramos com a adição de uma sobreposição de círculo a um módulo de cabeçalho de largura total. Assim que a sobreposição de seu círculo estiver no lugar, podemos adicionar uma segunda sobreposição de círculo para servir como uma borda para a primeira. Fazemos isso adicionando outro gradiente de fundo à seção Fullwidth que fica atrás do módulo Fullwidth Header.

Vá para as configurações da seção de largura total e atualize o seguinte:

Opções de conteúdo

Na guia Imagem de fundo:

Use o efeito de paralaxe: NÃO
Mistura de imagem de fundo: multiplique

Na guia Gradiente de fundo:

Cores gradientes de fundo: rgba (0,0,0,0.45), rgba (255,255,255,0)
Tipo de gradiente de fundo: radial
Direção Radial: Centro
Posição inicial: 34%
Posição final: 34%

Salvar configurações

É isso.

Você também pode alterar facilmente o tamanho do círculo de gradiente de fundo ajustando a porcentagem da Posição inicial.

Truque # 5: Sobreposição de círculo inverso

Esta é uma continuação do truque nº 3, que parou com uma sobreposição de círculo no módulo de cabeçalho de largura total. No momento, o círculo é azul semitransparente e o resto da imagem de fundo não tem nenhuma cor de sobreposição de gradiente. Para este truque, vou mudar isso e inverter a sobreposição do círculo para que a sobreposição de gradiente azul semitransparente rodeie o círculo e dentro do círculo exponha a imagem de fundo atrás dele.

Para fazer isso, vá para as configurações do cabeçalho Fullwidth e atualize o seguinte:

Opções de conteúdo

Cores gradientes de fundo: rgba (255.255.255,0), rgba (12.113.195.0,79)

Nota: Tudo o que você realmente está fazendo aqui é trocar as cores à esquerda e à direita. Agora, a cor transparente é o que aparece dentro do círculo e o gradiente azul o rodeia. Eu aumentaria a opacidade do azul para que ficasse um pouco mais escuro.

Confira…

Truque # 6: Sobreposição de círculo inverso com fundo de vídeo

Esta é uma continuação do truque # 5 que nos deixou com uma sobreposição de círculo inverso com um fundo azul circundante. Atualmente, o círculo expõe uma imagem de fundo atrás dele. Você pode adicionar facilmente um fundo de vídeo para sentar atrás desta sobreposição de círculo. Eu sugeriria usar um vídeo que não distraia muito. Além disso, sempre que estiver usando vídeos, certifique-se de que o tamanho do arquivo seja pequeno para que o tempo de carregamento da página não seja prejudicado.

Para substituir a imagem de fundo por um vídeo, vá para Configurações da seção de largura total, clique no
ícone de vídeo de fundo e adicione seu vídeo.

Agora vá para as configurações do cabeçalho Fullwidth e atualize o seguinte:

Opções de conteúdo

Cores de gradiente de fundo: rgba (12.113.195,0.67), # 333333

Com as novas cores de gradiente, o vídeo de fundo só é visível dentro do círculo. E as cores sobrepostas realmente fazem o texto se destacar.

Truque # 7: Sobreposição de círculo inverso descentrado

Esta é uma continuação do truque # 5 que nos deixou com uma sobreposição de círculo inverso. Se você voltar para as Configurações de largura total do cabeçalho, poderá ajustar a Direção radial para configurações diferentes para criar visuais diferentes para o cabeçalho.

Vá para Configurações do cabeçalho Fulwidth e atualize o seguinte:

Opções de conteúdo

Direção radial: direita

Opções de Design

Texto e orientação do logotipo: esquerda

Aqui está o resultado final e alguns exemplos de diferentes direções radiais:

Esses exemplos obviamente precisam de algum trabalho, mas essa é a ideia.

Truque nº8: usando gradientes para efeitos de sombra

Este truque pode não cair o queixo, mas é extremamente útil. Para aqueles de nós que não querem se preocupar em usar um editor de fotos como o Photoshop para adicionar sombras às suas imagens, este é para você.

Esta é uma continuação do truque # 1 que parou com uma sobreposição diagonal usando a opção de gradiente de fundo no Módulo de cabeçalho de largura total. Agora vamos alterar a sobreposição azul semitransparente para um sombreamento escuro que começa à esquerda da imagem e desaparece gradualmente à direita. Desta forma, a parte principal da imagem à direita permanece intacta e a sombra escura à esquerda ajuda a tornar o texto mais legível.

Para adicionar o efeito de sombra, vá para Configurações do cabeçalho Fullwidth e atualize o seguinte:

Opções de conteúdo

Cores de gradiente de fundo: rgba (0,0,0,0.55), rgba (0,0,0,0)
Direção do gradiente: 90 graus
Posição inicial: 38%
Posição final: 85%

Aqui está o resultado.

Truque # 9: Combinação de imagem de fundo

As novas opções de plano de fundo da Divi incluem modos de mesclagem CSS para personalizar imagens. Explorar as diferentes combinações de imagens é muito divertido e tende a criar alguns designs surpreendentes. Para aqueles de vocês que não são designers, você não precisa saber a definição de saturação ou luminosidade para aproveitar essas opções legais. Você precisará ter uma cor de fundo ou gradiente definido em combinação com a imagem de fundo para ver todos os efeitos legais (não funcionará realmente com apenas uma imagem de fundo). Em seguida, brinque até obter a aparência desejada. Os resultados podem te surpreender.

Para este exemplo, vou continuar a partir do truque nº 1, que foi interrompido com uma sobreposição diagonal usando a opção de gradiente de fundo no Módulo de cabeçalho de largura total.

Vá para Configurações de cabeçalho de largura total e exclua os gradientes de fundo em Opções de conteúdo.

Salvar configurações

Agora vá para as configurações da seção e atualize o seguinte:

Opções de conteúdo

Cores de gradiente de fundo: rgba (0,0,0,0.76), # 0c71c3
Direção do gradiente: 90 graus
Posição inicial: 50%
Posição final: 50%

Você não pode ver nenhuma mudança ainda. Tudo bem. Vá para a guia Imagem de fundo e atualize o seguinte:

Use o efeito de paralaxe: NÃO
Mistura de imagem de fundo: luz forte

É isso. Confira o resultado.

Nota: as cores usadas aqui criarão efeitos diferentes com base na imagem de fundo que você usa. Portanto, sugiro brincar com as cores e opções de mistura até encontrar uma que goste.

Truque # 10: Camadas para adicionar mais cores ao seu fundo gradiente.

Por padrão, cada seção, linha, coluna e módulo pode ter dois gradientes de cor. No entanto, ao combiná-los e colocá-los em camadas um sobre o outro, você pode criar 5 cores para o fundo gradiente. E quando essas 5 cores se misturam, você pode criar um espectro muito legal.

Aqui está como você faz isso. Primeiro, adicione uma seção regular com uma linha de estrutura de 1 coluna. Em seguida, dentro da linha, adicione um Módulo Blurb.

Atualize as configurações do Módulo Blurb da seguinte maneira:

Opções de conteúdo

Título: [insira o título]
Conteúdo: [insira o conteúdo]

Opções de Design

Cor do Texto: Claro
Orientação do Texto: Centro
Fonte do cabeçalho: padrão, negrito (B)
Tamanho da fonte do cabeçalho: 56px
Tamanho da fonte do corpo: 22 px
Preenchimento personalizado: 100 px superior, 100 px inferior

Como o texto da sinopse é branco em um fundo branco, você ainda não pode vê-lo, mas tudo bem. Você irá em breve. É hora de começar a adicionar as cores gradientes.

Estaremos trabalhando de trás para a frente, da esquerda para a direita. Para começar, vá para as Configurações da Seção e atualize o seguinte:

Opções de conteúdo

Cores gradientes de fundo: # ff0077, # 0c71c3
Direção do gradiente: 90 graus
Posição inicial: 0%
Posição final: 30%

Opções de Design

Preenchimento personalizado: 0 px superior, 0 px inferior

Agora vamos atualizar nosso próximo nível de cor gradiente - nossa linha. Vá para Configurações de linha e atualize o seguinte:

Opções de conteúdo

Cores gradientes de fundo: rgba (255,255,255,0), # 8300e9
Direção do gradiente: 90 graus
Posição inicial: 25%
Posição final: 50%
Cores de gradiente de fundo da coluna 1: rgba (255,255,255,0), # e02b20
Direção do gradiente: 90 graus
Posição inicial: 50%
Posição final: 75%

Opções de Design
Tornar esta linha com largura total: SIM
Usar largura de calha personalizada: SIM
Largura da calha: 1
Preenchimento personalizado: 0 px superior, 0 px inferior

Salvar configurações

Agora, para a camada final de gradiente, precisamos ir para o Módulo Blurb e atualizar o seguinte:

Opções de conteúdo
Cores gradientes de fundo: rgba (255,255,255,0), # edf000
Direção do gradiente: 90 graus
Posição inicial: 75%
Posição final: 100%

Opções de Design

Preenchimento personalizado: 100 px superior, 100 px inferior

É isso. Agora você tem cinco cores gradientes combinadas para criar um fundo bastante colorido.

Não se esqueça, você também pode alterar o Tipo de gradiente para Radial (circular) e alterar completamente o design (leva cerca de 20 segundos).

Se você alterar o tipo de gradiente para radial para todas as camadas (seção, linha, coluna e módulo de sinopse), você obterá algo assim.

Truque bônus

Aqui está um exemplo de como você pode sobrepor imagens de fundo com paralaxe. Esta é uma seção regular com uma imagem de fundo usando True Parallax. Dentro da seção, há uma linha de 1 coluna que foi feita em largura total e sem preenchimento, de modo que se estende por toda a largura da seção. Para a linha, adicionei uma imagem de fundo transparente com alguns círculos gradientes (supostamente parecidos com bolhas) usando o método CSS Parallax. Em seguida, adicionei um Módulo de Chamada à Ação à linha com um fundo transparente. Essa combinação cria movimento ao rolar para baixo na seção da página.

Este truque é um pouco mais complicado, pois requer a criação de uma foto personalizada fora do Divi. Eu simplesmente espero mostrar a você as possibilidades.

Mais alguns exemplos

Vou terminar com alguns exemplos de design que construí enquanto testava os mesmos truques mencionados neste artigo.

Pensamentos finais

Espero que você tenha gostado de explorar essas novas opções de plano de fundo e esteja animado com as possibilidades que elas trazem. E, como essas opções estão disponíveis em seções, linhas, colunas e módulos, você pode aplicar esses truques de design em qualquer parte do seu site. Se você ainda não fez isso, reserve um tempo para cavar um pouco mais fundo e deixe sua criatividade fluir. Tenho certeza de que, se você reservar um tempo para explorar as opções de plano de fundo por si mesmo, ficará empolgado para implementá-las em seu próximo projeto. Mal posso esperar para ver o que você descobrirá.

Ansioso por ouvir de você nos comentários.