Como adicionar sobreposições de cor e gradiente a fundos de paralaxe e vídeo Divi

Sobreposições de cores e gradientes são excelentes elementos de design que podem capturar a atenção do seu público e fazer seu conteúdo se destacar. Eles funcionam muito bem com imagens de fundo. Adicione uma imagem de plano de fundo a uma seção, linha ou coluna, adicione uma sobreposição de cor ou gradiente e coloque seu conteúdo sobre ela. Um problema, porém, é que as sobreposições de cores e gradientes não funcionam com paralaxe e fundos de vídeo em Divi por padrão.

Neste tutorial, mostraremos como adicionar sobreposições de cores e gradientes a planos de fundo com uma imagem em paralaxe ou um vídeo usando um plug-in de terceiros de nosso mercado. Também veremos as sobreposições trabalhando com divisores de seção. Normalmente, isso exigiria código, mas com as ferramentas certas, não é difícil para qualquer um implementar.

Comecemos.

Espiada

Aqui está uma olhada no que construiremos neste tutorial.

Estou criando um layout com fundo de paralaxe em uma seção e fundo de vídeo em outra. O fundo de paralaxe terá um gradiente e o fundo do vídeo terá uma sobreposição de cor única. Também estilizaremos os divisores de seção. Estou usando a página de destino do Pizzeria Layout Pack porque, bem, pizza. É assim que fica em uma área de trabalho.

É assim que o mesmo design fica em um telefone.

Planos de fundo padrão de paralaxe e vídeo de Divi

As ferramentas Divi padrão permitem adicionar imagens de fundo e vídeos a seções, linhas e colunas, mas as sobreposições para eles são limitadas. Para imagens de fundo, você pode adicionar uma sobreposição de gradiente, mas não uma sobreposição para uma cor sólida. As opções de vídeo não incluem sobreposições.

As opções para imagens de plano de fundo incluem paralaxe, mas se você ativar a paralaxe para a imagem de plano de fundo, a sobreposição não será mais exibida sobre a imagem. Ele está desativado, embora você tenha selecionado para exibir a sobreposição.

Como adicionar sobreposições de cor e gradiente a fundos de paralaxe e vídeo Divi

Adicionaremos sobreposições de cores e gradientes a fundos de paralaxe e de vídeo usando um plugin de terceiros chamado Divi Background Plus. Também veremos como estilizar os divisores de seção usando este plugin.

Instale Divi Background Plus

Divi Background Plus está disponível no Divi Marketplace. Vamos ver como começar. Primeiro, adquira e baixe Divi Background Plus para o seu computador.

No painel do WordPress, vá para Plug - ins e selecione Adicionar novo . Clique em Carregar plug - in na parte superior da tela.

Selecione Escolher arquivo , navegue até o arquivo compactado em seu computador, selecione o arquivo e clique em Instalar agora .

Assim que o arquivo for carregado, clique em Ativar Plug-in . Nenhuma outra configuração é necessária. O plugin agora está pronto para uso.

Um novo módulo é adicionado ao Divi Builder chamado Divi Background Plus. Usaremos este módulo para criar nosso gradiente e sobreposições de cores para fundos de vídeo de anúncios de paralaxe. Este plugin e os planos de fundo nas seções são tudo de que precisaremos para este tutorial.

Adicionar Gradient Overlays ao Divi Parallax Background

Abra as configurações da seção onde você fará o upload da sua imagem de plano de fundo. Neste exemplo, estou usando a imagem de fundo com a primeira seção no pacote de layout Pizzeria, mas você pode carregá-la em qualquer seção, linha ou coluna que desejar.

Abra a guia da imagem nas configurações de conteúdo. Ative Usar efeito de paralaxe . Estou usando True Parallax, que é a configuração padrão. CSS Parallax também funciona.

Ativar o efeito de paralaxe desativa o gradiente, mas as configurações do gradiente ainda estão em vigor. Em vez de usar o gradiente nas configurações da seção, adicionaremos o gradiente nas configurações do módulo Divi Background Plus.

Se você quiser usar o mesmo gradiente que já é usado para esta seção (como eu), selecione a guia Gradiente e clique com o botão direito em algum lugar do gradiente. Clique em Copiar cores gradientes de fundo .

Selecione para adicionar um novo módulo à seção com sua imagem de fundo e escolha Divi Background Plus .

Nas configurações de Layout na guia Conteúdo, escolha aplicar as configurações à seção, linha ou coluna. Estou selecionando Seção .

Abra as configurações de fundo e selecione a guia Gradiente. O gradiente padrão é aplicado automaticamente. Você pode ajustar a opacidade para que o plano de fundo apareça, criar seu próprio gradiente ou usar o do layout.

Para usar o do layout, clique com o botão direito e selecione Colar cores de gradiente de fundo . Isso não só aplicará as cores, mas também as configurações para o tipo de gradiente, direção, posição inicial e posição final e colocação do gradiente acima da imagem de fundo.

Aqui está o resultado. Agora tenho uma versão do original que inclui a mesma imagem e sobreposição, mas agora exibe o fundo em paralaxe real.

Esta é a aparência do mesmo layout em um telefone.

Adicionar sobreposição de cor ao plano de fundo do vídeo Divi

Adicione uma nova seção regular na primeira seção. Adicionaremos o vídeo de fundo a esta seção, um módulo Divi Background Plus para a sobreposição e adicionaremos módulos de texto para exibir mensagens, informações de contato e um CTA na sobreposição.

Pretendo usar o texto da seção Call to Action. Isso é fácil de fazer com as ferramentas de camada do Divi. Para fazer isso, clique com o botão direito na seção que deseja copiar e selecione Go To Layer .

Clique com o botão direito nas linhas que deseja copiar e selecione Copiar linha .

Em seguida, selecione a seção onde deseja colocar a linha, clique com o botão direito e selecione Colar linha . Estou fazendo isso para as duas linhas que desejo copiar desta seção. Como alternativa, eu poderia ter copiado esta seção e adicionado o módulo Divi Background Plus a ela.

Agora tenho uma nova seção com Divi Background Plus, vários módulos de texto e um CTA.

Em seguida, adicione o vídeo ao fundo da seção. As cores do vídeo funcionam bem com as cores do texto, mas quero adicionar uma sobreposição para destacá-las um pouco mais. Para o meu vídeo de fundo, estou usando o vídeo gratuito Mistura de coberturas sobre uma pizza de Pexels, de Tima Miroshnichenko.

Abra as configurações do Divi Background Plus e escolha a seção para o layout.

Role para baixo até a guia Plano de fundo e selecione a opção de cor. Claro, suas cores serão diferentes dependendo do seu vídeo. Eu queria dar ao vídeo um tom vermelho. Eu usei:

• rgba (150,0,0,0.15)

Esta é a aparência do vídeo de fundo com minha sobreposição tingida de vermelho em uma área de trabalho.

Aqui está o mesmo layout em um telefone.

Para mais alguns exemplos, aqui está o fundo roxo padrão com 30% de opacidade.

Este é o laranja padrão com 80% de opacidade.

Definir o estilo do divisor de seção

As sobreposições também funcionam com divisórias de seção. Para adicionar um divisor de seção, abra as configurações da seção.

Vá para a guia Design, selecione Divisores e escolha Superior ou Inferior , dependendo de onde deseja adicionar um divisor. Estou adicionando uma divisória apenas na parte inferior. Clique na caixa suspensa chamada Estilo do divisor para escolher seu divisor.

Escolha o estilo de divisória que você deseja. Estou selecionando o quinto estilo, que cria um ângulo com duas cores.

Selecione o ícone de edição para adicionar uma cor personalizada. Esta é a cor que aparece na seção onde a divisória não aparece. A cor padrão é o branco, como você pode ver no exemplo anterior. Adicione a cor como um código hexadecimal ou escolha a cor no seletor de cores. Estou adicionando a cor # 0d0d0d, que é uma das cores na seção abaixo do vídeo.

• Cor # 0d0d0d

O vídeo agora tem uma divisória estilizada para a parte inferior dessa seção. Você pode ver o vídeo sendo exibido através das partes transparentes do divisor e combina bem com as duas seções.

Resultado

Vamos dar uma olhada na aparência do layout em desktops e dispositivos móveis.

Aqui está uma olhada na versão para desktop. Ele tem um fundo de paralaxe verdadeiro com uma sobreposição de gradiente na primeira seção. A segunda seção inclui uma imagem de plano de fundo com uma sobreposição de cor e um divisor de seção que a separa da próxima seção.

Veja como fica o layout em um telefone. Todos os elementos funcionam bem em dispositivos móveis.

Reflexões finais

Esta é a nossa visão sobre como adicionar sobreposições de cores e gradientes a fundos de paralaxe e vídeo Divi. Divi Background Plus torna-os fáceis de construir e usar. Funciona com seções, linhas e colunas e é fácil escolher entre elas. Todas as personalizações são ferramentas e configurações Divi padrão, portanto, são familiares.

Agora seus planos de fundo podem incluir sobreposições de cores e gradientes sem ter que desativar a paralaxe e os vídeos!

Nós queremos ouvir de você. Você criou sobreposições de cores e gradientes para suas imagens e vídeos de paralaxe com Divi Background Plus? Deixe-nos saber o que você pensa sobre isso nos comentários.

Imagem em destaque via Lauritta / shutterstock.com