Como criar um fundo de imagem de paralaxe com uma sobreposição de gradiente misturado no Divi
Publicados: 2022-08-03Nas versões anteriores do Divi, adicionar uma sobreposição de gradiente a uma imagem de fundo de paralaxe não era uma opção integrada. Mas, com as novas opções de plano de fundo do Divi (e o Gradient Builder), você pode criar facilmente belos planos de fundo de paralaxe com inúmeros designs de sobreposição de gradiente.
Neste tutorial, mostraremos como usar as opções de plano de fundo do Divi para adicionar uma sobreposição de gradiente colorida que combina com uma imagem de plano de fundo usando os métodos True e CSS Parallax.
Espiada
Aqui está uma rápida olhada nos designs de plano de fundo que construiremos neste tutorial.
Este primeiro tem uma sobreposição de gradiente com o modo de mesclagem de cores usado na imagem de fundo usando o método True Parallax.
E aqui está o mesmo design usando o método CSS Parallax. Observe que o gradiente permanece fixo/anexado à imagem de fundo para que pareça ser uma parte da imagem real e não apenas uma camada.
E aqui está um exemplo de uma sobreposição de gradiente usando paradas de cores semitransparentes sem um modo de mesclagem.
O conceito
A ideia básica deste projeto envolve duas etapas:
1. Crie um gradiente de fundo para uma seção usando o construtor de gradiente, certificando-se de colocar o gradiente acima da imagem de fundo.
2. Adicione uma imagem de fundo à mesma seção que usa um dos métodos de paralaxe e o modo de mesclagem de cores.
Isso permitirá que o gradiente colorido sobreponha a imagem de paralaxe enquanto ela se move ao rolar a página. O modo de mesclagem de cores mescla a sobreposição de gradiente com a imagem para uma bela imagem que fica ótima com paralaxe.
Baixe o Layout GRATUITAMENTE
Para colocar as mãos nos designs deste tutorial, primeiro você precisará baixá-lo usando o botão abaixo. Ganhar
acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo
assinante, você receberá ainda mais produtos Divi e um pacote Divi Layout gratuito toda segunda-feira! Se você já está no
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 criar um fundo de imagem de paralaxe com uma sobreposição de gradiente misturado no Divi
1. Crie a linha de preenchimento e o texto do cabeçalho
Embora estejamos nos concentrando no design do plano de fundo da seção para este tutorial, faz sentido adicionar uma linha de preenchimento e um título para ter uma ideia melhor de como será o design em um caso de uso normal.
Para começar, adicione uma linha de uma coluna à seção existente no construtor.
Em seguida, adicione um módulo de texto à linha/coluna.
Configurações de texto
Abra as configurações do Módulo de Texto. Na guia Conteúdo, adicione um título H2 ao conteúdo do corpo.
<h2>Say Hello to Divi</h2>
Na guia design, atualize as opções de título e a largura máxima da seguinte forma:
- Título 2 Fonte: Inter
- Cabeçalho 2 Peso da Fonte: Negrito
- Cor do texto do título 2: #fff
- Título 2 Tamanho do texto: 8vw
- Altura da Linha de Cabeçalho 2: 1,2em
- Título 2 Sombra de texto: veja a captura de tela
- Cabeçalho 2 Força do Desfoque de Sombra de Texto: 0,28em
- Cor da sombra do texto do título 2: #10076d
- Largura máxima: 50%
Configurações de linha
Agora que o título está no lugar, vamos atualizar o tamanho e o espaçamento da linha para torná-lo mais responsivo.
Abra as configurações de linha. Na guia Design, atualize o seguinte:
- Largura: 100%
- Largura máxima: 80vw
- Preenchimento: 15vw superior, 15vw inferior
2. Projete o Plano de Fundo Gradiente para a Seção
Agora que o conteúdo de preenchimento está completo, estamos prontos para começar a projetar nosso plano de fundo gradiente de seção.
Configurações de gradiente de fundo
Abra as configurações da seção. Na guia Conteúdo, selecione a guia gradiente nas opções de plano de fundo e atualize as opções de gradiente da seguinte maneira:
- Parada de gradiente 1: #0094ff (a 0%)
- Parada de gradiente 2: #ff00c7 (a 25%)
- Parada de gradiente 3: #0094ff (a 50%)
- Parada de gradiente 4: #ff00c7 (a 75%)
- Parada de gradiente 5: #0094ff (a 100%)
- Tipo de gradiente: Circular
- Posição do gradiente: Inferior esquerdo
- Colocar gradiente acima da imagem de fundo: SIM
3. Adicione uma imagem de fundo de paralaxe com modo de mesclagem de cores
Quando o design do gradiente estiver concluído, estamos prontos para adicionar nossa imagem de fundo de paralaxe. Em seguida, aplicaremos o modo de mesclagem de cores para mesclar o design de gradiente com a imagem de fundo para um belo design de fundo de paralaxe.
Configurações de imagem de fundo
Enquanto estiver nas opções de plano de fundo da seção, selecione a guia Imagem de plano de fundo e carregue uma imagem de plano de fundo . A atualização o seguinte:
- Usar efeito de paralaxe: SIM
- Método de Paralaxe: Paralaxe Verdadeira
- Mistura de imagem de fundo: cor
Por que o modo de mesclagem de cores?
O modo de mesclagem de cores combina uma versão em tons de cinza da imagem com as cores (matiz e saturação) do gradiente. Isso preserva a qualidade visual da imagem com um esquema de cores totalmente novo.
4. Adicione uma máscara de fundo (por que não?)
Para finalizar o design, vamos adicionar uma máscara de fundo que ficará atrás do nosso título para fazer o texto aparecer um pouco mais e enfatizar o efeito de paralaxe.
Configurações de máscara de fundo
Enquanto estiver nas opções de plano de fundo da seção, selecione a guia Máscara de plano de fundo e atualize o seguinte:
- Máscara: Lâminas
- Transformação de Máscara: Virar Horizontalmente, Inverter
- Tamanho da máscara: tamanho personalizado
- Largura da máscara: 72vw
- Posição da máscara: superior direito
5. Adicione algum espaço de rolagem temporário para teste
Antes de verificarmos os resultados finais, precisamos adicionar algum espaço acima e abaixo de nossa seção para que tenhamos espaço de rolagem suficiente para ver o efeito de paralaxe em ação. Para fazer isso, basta adicionar a seguinte margem à seção:
- Margem: 80vh superior, 80vh inferior
Não se esqueça de remover esse espaçamento ao adicionar a seção à sua própria página.
Resultados finais
Vamos dar uma olhada no resultado final em uma página ao vivo.
E aqui está o mesmo design usando o método CSS Parallax. Observe que o gradiente permanece fixo/anexado à imagem de fundo para que pareça ser uma parte da imagem real e não apenas uma camada.
Usando uma sobreposição de gradiente sem o modo de mesclagem
Embora eu ame o modo de mesclagem para este design, você pode sentir a necessidade de uma sobreposição de gradiente mais tradicional para sua imagem de fundo de paralaxe.
Por exemplo, você pode optar por não adicionar um modo de mesclagem ao design e simplesmente dar a cada uma das cores do gradiente uma cor semitransparente. Isso permitiria que você visse uma representação mais sutil da imagem de fundo atrás da sobreposição de gradiente.
Para fazer isso, você pode reduzir a opacidade de cada cor para algo como 72% e, em seguida, definir a opção de mesclagem da imagem de fundo de volta para Normal.
Aqui está um exemplo de como isso seria.
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.
Pensamentos finais
A criação de um design de plano de fundo paralaxe com uma sobreposição de gradiente combinada pode ser feita facilmente usando as opções de plano de fundo integradas do Divi. Realmente dá a você o poder do Photoshop no Divi como nunca antes. Sinta-se à vontade para explorar diferentes combinações de cores com inúmeras paradas e posições de cores gradientes. Além disso, você também pode experimentar diferentes modos de mesclagem.
Espero que isso seja útil para seu próprio site ou seu próximo projeto.
Estou ansioso para ouvir de você nos comentários.
Felicidades!