Como criar transições de design de plano de fundo perfeitas entre elementos Divi

Criar transições de design de plano de fundo perfeitas entre elementos Divi é uma ótima maneira de elevar o design do seu site Divi. A ideia é criar designs de fundo correspondentes (tanto para uma linha quanto para uma seção) que compartilhem o mesmo tamanho e posição em relação à largura do navegador (usando unidades de comprimento vw). Isso permite que você faça a transição perfeita de um gradiente, padrão e máscara de plano de fundo entre uma linha e uma seção de maneiras criativas. Por exemplo, você pode ter uma transição de padrão ou máscara para cores diferentes sem perder o alinhamento geral e o aspecto simétrico do design.

Neste tutorial, usaremos as opções de design de plano de fundo integradas do Divi para criar uma transição de design de plano de fundo perfeita entre uma seção e uma linha do Divi. A aplicação e a versatilidade deste design são ilimitadas, levando as opções de design de plano de fundo do Divi a um nível totalmente novo!

Vamos começar.

Espiada

Aqui está uma rápida olhada no design que construiremos neste tutorial.

Aqui estão mais alguns exemplos de designs que são possíveis com apenas algumas mudanças simples nas máscaras e padrões de fundo.

Baixe o Layout GRATUITAMENTE

Para colocar as mãos no design 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.

Baixe os arquivos

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.

DOWNLOAD

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:

1. Navegue até a Biblioteca Divi.
2. Clique no botão Importar na parte superior da página.
3. No pop-up de portabilidade, selecione a guia de importação
4. Escolha o arquivo de download do seu computador (certifique-se de descompactar o arquivo primeiro e usar o arquivo JSON).
5. 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:

1. Se você ainda não o fez, instale e ative o Divi Theme.
2. Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
3. Escolha a opção “Build From Scratch”.

Depois disso, você terá uma tela em branco para começar a desenhar no Divi.

Criando uma transição de design de plano de fundo perfeita entre uma seção e uma linha Divi

Parte 1: Criando um título como conteúdo simulado

Antes de começarmos a projetar nossos planos de fundo, precisamos adicionar um título como conteúdo simulado. Para começar, adicione uma linha de uma coluna à seção padrão da página.

Em seguida, adicione um módulo de texto à linha.

Adicione um título H1 ao conteúdo do corpo.

Na guia design, atualize o design do texto do título da maneira que desejar. Para este design, ajuda a adicionar uma unidade de comprimento VW para o tamanho do texto do cabeçalho, para que ele seja dimensionado com fluidez com o restante do design.

2. Projetando o Plano de Fundo da Seção

Adicionando preenchimento VW à seção

Depois que o título simulado estiver no lugar, abra as configurações da seção e atualize o espaçamento da seguinte maneira:

• Preenchimento: 15vw superior, 15vw inferior

Adicionando o gradiente de fundo à seção

Agora que temos mais espaço para trabalhar, estamos prontos para adicionar nosso design de plano de fundo à seção. Na guia gradiente, adicione as seguintes paradas de gradiente:

• Parada de gradiente 1: #4f0f75 (a 0%)
• Parada de gradiente 2: #2843c9 (a 25%)
• Parada de gradiente 3: #4ae2e0 (a 50%)
• Parada de gradiente 4: #3881ff (a 75%)
• Parada de gradiente 5: #4f0f75 (a 100%)

Adicionando um padrão de fundo à seção

Na guia Padrão, atualize o seguinte:

• Padrões: listras diagonais
• Cor do padrão: rgba(79,15,117,0,23)
• Transformação de padrão: girar
• Tamanho do padrão: tamanho personalizado
• Largura do padrão: 7vw
• Altura do padrão: 5vw
• Origem da repetição do padrão: Centro

Nota: Certifique-se de usar a unidade de comprimento VW para a largura e altura do padrão. E, também certifique-se de definir a origem repetida para “centro”. Isso manterá o padrão de plano de fundo no mesmo lugar que o padrão de plano de fundo que adicionaremos à linha mais tarde.

Adicionando uma máscara de fundo à seção

Na guia Máscara, adicione o seguinte:

• Máscara de fundo: blob de camada
• Cor da máscara: rgba(0,0,0,0.7)
• Tamanho da máscara: 100vw
• Posição da Máscara: Centro

Nota: Assim como no molde, devemos dar um tamanho à máscara usando a unidade de comprimento VW. Devemos também dar à máscara uma posição central.

3. Projetando o plano de fundo da linha

Copie e cole o plano de fundo da seção no plano de fundo da linha

Para acelerar o processo de criação do plano de fundo da linha, copie as configurações de plano de fundo da seção.

Em seguida, cole o plano de fundo na linha existente.

Neste ponto, você já pode ver como o padrão de fundo e a máscara na linha fazem uma transição perfeita para o plano de fundo da seção. Parece que a linha tem um fundo transparente, mas na verdade é o mesmo padrão e máscara usados ​​na seção com o mesmo tamanho e posição.

Ajuste o tamanho e o preenchimento da linha usando o VW

Em seguida, precisamos dar à nossa linha uma largura personalizada usando a unidade de comprimento VW. Atualize o seguinte:

• Largura: 75vw
• Largura máxima: 75vw
• Preenchimento: 10vw superior, 10vw inferior, 10vw esquerdo, 10vw direito

Visão geral do espaçamento e dimensionamento em unidades de comprimento VW

Até agora, adicionamos valores de espaçamento e posição em nosso layout usando a unidade de comprimento VW. Aqui está uma ilustração rápida dos valores que estão sendo usados ​​atualmente.

Até agora, temos uma transição perfeita entre o plano de fundo da linha e o plano de fundo da seção para os padrões e máscaras. Em seguida, vamos atualizar o gradiente de plano de fundo da linha para que também seja contínuo.

Ajustar paradas de gradiente na linha

Em seguida, precisamos ajustar as paradas de gradiente no fundo da linha para uma transição perfeita para o gradiente de fundo da seção. Na guia gradiente, vamos manter as três paradas de gradiente do meio herdadas do plano de fundo da seção) e excluir a primeira e a última parada de gradiente. Em seguida, posicione a primeira parada em 0% e a terceira parada em 100%. Uma vez feito, você deve ter os seguintes gradientes.

• Parada de gradiente 1: #2843c9 (a 0%)
• Parada de gradiente 2: #4ae2e0 (a 50%)
• Parada de gradiente 3: #3881ff (a 100%)

Adicionar sombra de caixa à linha

Para dar ao design um pouco de elevação e enfatizar a transição perfeita do plano de fundo, podemos adicionar uma sombra de caixa à linha.

• Box Shadow: veja a captura de tela
• Posição vertical da sombra da caixa: 0px
• Força do desfoque de sombra da caixa: 4vw
• Cor da sombra da caixa: rgba(0,0,0,0.5)

Ajustar a cor do padrão de fundo da linha

Agora que temos todos os elementos de fundo em seus devidos lugares, podemos começar a ajustar as cores para um design mais criativo. Na opção de padrão para a linha, atualize o seguinte:

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

Ajustar a cor da máscara de fundo da linha

Também podemos atualizar a cor da máscara para a linha para realmente destacar o design! Na guia máscara, atualize o seguinte:

• Cor da máscara: #ffffff
• Transformação de Máscara: Invertida

Resultado final

Vamos conferir o resultado final.

Mais possibilidades

Aqui estão mais alguns exemplos de designs que são possíveis com apenas algumas mudanças simples nas máscaras e padrões de fundo.

Pensamentos finais

A chave para criar transições de design de plano de fundo perfeitas no Divi é usar essas unidades de comprimento VW com sabedoria. Primeiro, precisamos criar um design de plano de fundo de seção que seja dimensionado com a largura da janela de visualização do navegador (de uma posição centralizada na página). Uma vez feito, podemos usar o mesmo design de plano de fundo em uma linha. Depois disso, basta fazer alguns ajustes no gradiente e nas cores para um design incrível. Esperançosamente, esta técnica irá adicionar outra habilidade de design útil para projetos futuros

Estou ansioso para ouvir de você nos comentários.

Felicidades!