Como projetar um plano de fundo com duas camadas de gradientes, máscaras e padrões no Divi
Publicados: 2022-05-07Se você deseja criar um plano de fundo criativo para o seu site, o Divi possui algumas opções de design integradas poderosas para você explorar. Já mostramos como combinar os gradientes, máscaras e padrões de fundo do Divi usando as opções de fundo para uma única seção. Mas, hoje, estamos ultrapassando os limites do design de plano de fundo. Neste tutorial, mostraremos como criar planos de fundo com duas camadas de gradientes, máscaras e padrões no Divi. Isso duplica o número de opções de plano de fundo para um único design de plano de fundo. E com todas essas camadas de design opcionais, as combinações de design possíveis aumentam exponencialmente.
Neste post, mostraremos como criar um plano de fundo com:
– duas máscaras (uma de cada lado)
- dois gradientes avançados sobrepostos
– dois padrões que combinam com o design
Além disso, demonstraremos como pode ser fácil e divertido alterar as combinações de design com apenas alguns cliques.
Vamos nos divertir!
Inscreva-se em nosso canal no Youtube
Espiada
Aqui estão alguns exemplos de projetos que podemos construir usando este tutorial.
O conceito
O conceito para este design é bastante simples. Começamos com uma seção que possui as opções de design de plano de fundo internas do Divi (gradiente, máscaras, padrões etc.). Em seguida, criamos uma linha que é posicionada de forma que cubra completamente a seção (como uma sobreposição). Como uma linha Divi também possui as mesmas opções de design de plano de fundo embutidas, agora temos duas camadas (a seção e a linha) de opções de plano de fundo para projetar um plano de fundo para nosso conteúdo.
Baixe o Layout GRATUITAMENTE
Para colocar as mãos no design de layout 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.
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!
Para importar o layout da seção para sua biblioteca Divi, faça o seguinte:
- Navegue até a Biblioteca Divi.
- Clique no botão Importar na parte superior da página.
- No pop-up de portabilidade, selecione a guia de importação
- Escolha o arquivo de download do seu computador (certifique-se de descompactar o arquivo primeiro e usar o arquivo JSON).
- Em seguida, clique no botão importar.
Uma vez feito, o layout da seção estará disponível no Divi Builder.
Vamos ao tutorial?
O que você precisa para começar
Para começar, você precisará fazer o seguinte:
- Se você ainda não o fez, instale e ative o Divi Theme.
- Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
- Escolha a opção “Build From Scratch”.
- Agora tem uma tela em branco para começar a desenhar no Divi!
Como projetar um plano de fundo com duas camadas de gradientes, máscaras e padrões
Adicionar linhas à seção
Para começar, adicione uma linha de uma coluna à seção existente no construtor. Essa linha acabará se tornando a segunda camada do design do plano de fundo.
Em seguida, duplique a linha que você acabou de criar. Esta segunda linha (duplicada) será usada para nosso conteúdo como você faria normalmente. Agora você deve ter uma linha superior para a camada de fundo extra e uma linha para o conteúdo regular.
Voltaremos às linhas mais tarde. Por enquanto, vamos começar a projetar a primeira camada do nosso design de plano de fundo usando a seção.
Adicionar espaçamento vertical à seção
Para que nosso design de plano de fundo preencha o navegador, precisamos adicionar alguma altura vertical à seção. Uma maneira fácil de fazer isso é adicionar um valor mínimo de altura à seção.
Abra as configurações da seção. Na guia design, atualize a altura e o preenchimento da seguinte maneira:
- Altura mínima: 70vh
- Preenchimento: 0px superior, 0px inferior
Crie o design do plano de fundo da seção (a primeira camada)
Agora que temos nossa altura de seção no lugar, temos nossa tela para criar nossa primeira camada de design de plano de fundo. O Divi tem muitas opções disponíveis para criar planos de fundo. Para este tutorial, vamos nos concentrar em gradientes de fundo, máscaras e padrões.
Projete um gradiente de fundo para a seção
Para nosso primeiro elemento de design de plano de fundo, podemos adicionar um gradiente de plano de fundo personalizado à seção. Para este gradiente, adicionaremos 4 paradas de gradiente espaçadas de maneira bastante uniforme. Essas 4 cores criarão um lindo gradiente multicolorido para a primeira camada do nosso design de plano de fundo.
Para adicionar as primeiras paradas de gradiente, verifique se as configurações da seção estão abertas na guia de conteúdo. Em seguida, selecione a guia gradiente e clique para adicionar um novo gradiente. Isso adicionará duas cores de gradiente padrão. Começando com a primeira parada de gradiente à esquerda, atualize/adicione as seguintes paradas de gradiente com uma cor e uma posição da seguinte forma:
Parada de gradiente nº 1
- Cor de parada de gradiente: #bae9ff
- Posição de parada de gradiente: 0%
Parada de gradiente nº 2
- Cor de parada de gradiente: #adfff1
- Posição de parada de gradiente: 32%
Parada de gradiente nº 3
- Cor de parada de gradiente: #ffffff
- Posição de parada de gradiente: 64%
Parada de gradiente nº 4
- Cor de parada de gradiente: #f9b8dd
- Posição de parada de gradiente: 100%
Em seguida, atualize o tipo e a posição do gradiente:
- Tipo de gradiente: Circular
- Posição do gradiente: Centro
Criar um padrão de fundo para a seção
Agora que nosso gradiente de plano de fundo está pronto, podemos adicionar um padrão de plano de fundo para complementar o design. Neste exemplo, vamos criar um padrão sutil usando o padrão Waves.
Na guia padrões, atualize o seguinte:
- Padrão de fundo: ondas
- Cor do padrão: rgba(127,206,255,0,59)
- Tamanho do padrão: tamanho personalizado
- Largura do padrão: 30vw
- Altura do padrão: 10px
DICA: Com padrões de fundo, geralmente é melhor mantê-lo sutil. Tente usar tamanhos personalizados para padrões menores e, em seguida, elimine a opacidade da cor. Dito isto, não tenha medo de pensar fora da caixa.
Criar uma máscara de fundo para a seção
Com nosso padrão de plano de fundo no lugar, estamos prontos para adicionar uma máscara de plano de fundo para concluir nosso design de plano de fundo para a primeira camada. Há um monte de opções e variações para escolher. Para este exemplo, vamos usar a máscara Diagonal Pills .
Na guia máscaras, atualize o seguinte:
- Máscara: pílulas diagonais
- Cor da máscara: #ffffff
- Transformação de máscara: inversão vertical, inversão
- Tamanho da máscara: esticar para preencher
Aqui está o resultado até agora…
Posicione a linha como uma segunda camada
Agora que o design do plano de fundo da nossa seção está pronto, podemos adicionar a segunda camada usando a linha que criamos anteriormente. Para editar a linha, clique no ícone de engrenagem da linha superior da seção.
É importante usar a linha superior para que o design do plano de fundo não sobreponha a outra linha designada para o nosso conteúdo (uma maneira fácil de evitar lidar com o índice Z).
Na guia Avançado, atualize o seguinte:
- Posição: Absoluto
Isso permitirá que a linha fique acima (ou sobreponha) a seção sem ocupar nenhum espaço real no documento. Agora, tudo o que precisamos fazer é atualizar a altura e a largura para que abranja toda a largura e a altura da seção. Isso criará a sobreposição de que precisamos e nossa segunda camada de design de plano de fundo.
Na guia design, atualize as opções de dimensionamento da seguinte forma:
- Equalizar Alturas das Colunas: SIM
- Largura: 100%
- Largura máxima: 100%
- Altura: 100%
Certifique-se de retirar o preenchimento da linha também.
- Preenchimento: 0px superior, 0px inferior
Crie o design do plano de fundo da linha (a segunda camada do design)
Agora você pode não conseguir ver a linha, mas agora ela está sobrepondo perfeitamente todo o plano de fundo da seção. Isso nos dá nossa segunda camada e outra tela em branco para completar nosso design.
Projetar um gradiente de fundo para a linha
Como este é o nosso gradiente da segunda camada, é importante usarmos paradas de cores transparentes (ou semitransparentes) para que as cores do gradiente da primeira camada permaneçam visíveis em determinadas áreas. Isso permite que você crie uma mistura de cores mais exclusiva que não é possível com apenas uma camada de gradientes.
Para este gradiente, vamos adicionar 3 paradas de gradiente que são espaçadas de maneira bastante uniforme. A parada de gradiente do meio é transparente para revelar o design de gradiente da primeira camada. Juntas, essas cores sutis complementam bem o gradiente na primeira camada.
Para adicionar as primeiras paradas de gradiente, verifique se as configurações da seção estão abertas na guia de conteúdo. Em seguida, selecione a guia gradiente e clique para adicionar um novo gradiente. Isso adicionará duas cores de gradiente padrão. Começando com a primeira parada de gradiente à esquerda, atualize/adicione as seguintes paradas de gradiente com uma cor e uma posição da seguinte forma:
Parada de gradiente nº 1
- Cor de parada de gradiente: #7fceff
- Posição de parada de gradiente: 0%
Parada de gradiente nº 2
- Cor de parada de gradiente: transparente
- Posição de parada de gradiente: 40%
Parada de gradiente nº 3
- Cor de parada de gradiente: #f1ddff
- Posição de parada de gradiente: 100%
Em seguida, atualize o tipo e a posição do gradiente:
- Tipo de gradiente: elíptico
- Posição do gradiente: Inferior direito
Criar um padrão de fundo para a seção
Agora que nosso segundo gradiente de camada está no lugar, podemos adicionar um padrão de fundo para complementar o design. Para o nosso padrão de segunda camada, vamos usar o padrão Confetti.
Na guia padrões, atualize o seguinte:
- Padrão de fundo: confete
- Cor do padrão: #00ff4c
- Tamanho do padrão: tamanho personalizado
- Largura do padrão: 45vw
- Modo de Mistura Padrão: Tela
Este padrão usa o modo de mesclagem de tela para uma versão clara da cor do padrão misturada com as cores de gradiente por trás dele. Ele aprimora o design e torna o padrão mais sutil.
Criar uma máscara de fundo para a linha
Com nosso padrão de segunda camada no lugar, estamos prontos para adicionar uma máscara de segunda camada para completar nosso design de plano de fundo de duas camadas. Para a máscara da segunda camada, usaremos a mesma máscara Diagonal Pills invertida e virada horizontalmente para que apareça no lado esquerdo da seção, adjacente à máscara da primeira camada.
Na guia máscaras, atualize o seguinte:
- Máscara: pílulas diagonais
- Cor da máscara: #ffffff
- Transformação de máscara: inversão horizontal, inversão
Aqui está o resultado até agora…
As Duas Camadas (antes e depois)
Aqui está uma ilustração rápida de como a primeira camada se parece antes da segunda camada ser aplicada.
Adicione o título
Na linha que salvamos para nosso conteúdo, adicione um módulo de texto para seu título principal.
Em seguida, abra as configurações do módulo de texto e atualize o seguinte:
- Corpo do texto: [adicionar título com tag H1]
- Fonte do título: Inter
- Peso da fonte do título: Negrito
- Cor do texto do título: #000000
- Tamanho do texto do título: 8vw (computador), 62px (tablet), 32px (telefone)
- Margem: 30vh superior, 30vh inferior
Resultado final
Vamos dar uma olhada no resultado final do nosso design em desktop e dispositivos móveis.
Mude-o!
Para um visual diferente, você pode experimentar diferentes máscaras e padrões em cada camada.
Aqui estão alguns exemplos.
Experimente mais gradientes!
O Gradient Builder pode criar muito mais cores e tipos de gradiente que você pode usar para destacar esses designs de plano de fundo em camadas. Você pode conferir nossas demonstrações ao vivo de mais possibilidades de design de gradiente de fundo.
Obtenha mais designs de máscaras e padrões de fundo!
Se você quiser mais inspiração sobre como usar máscaras e padrões de fundo, confira esses 12 designs de máscaras e padrões de fundo gratuitos para download.
Pensamentos finais
É incrível como é fácil criar designs de plano de fundo tão bonitos com as opções de plano de fundo do Divi. E adicionar outra camada de design de plano de fundo aumenta exponencialmente as possibilidades de design. Além disso, nem mencionamos a terceira camada, que também está disponível no design deste tutorial. Você consegue adivinhar o que é?
Para saber mais, confira nossas postagens de lançamento de recursos sobre o criador de gradientes e máscaras e padrões de plano de fundo. Você também pode achar útil saber como usar máscaras e padrões para criar uma seção de heróis.
Estou ansioso para ouvir de você nos comentários.
Saúde!