Como usar as sombras da caixa como plano de fundo de deslizamento ao pairar

Todas as semanas, fornecemos pacotes de layout Divi novos e gratuitos que você pode usar em seu próximo projeto. Para um dos pacotes de layout, também compartilhamos um caso de uso que o ajudará a levar seu site para o próximo nível.

Esta semana, como parte de nossa iniciativa de design Divi em andamento, mostraremos como usar sombras de caixas como fundos de tela ao pairar. Lidaremos com três exemplos diferentes que parecem impressionantes na página inicial do Personal Stylist Layout Pack, mas as possibilidades que você tem são infinitas. Vamos recriar cada um dos fundos de deslizamento passo a passo usando apenas as opções integradas do Divi.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial e em seus diferentes exemplos, vamos dar uma olhada no resultado.

Exemplo 1

Exemplo # 2

Exemplo # 3

Carregar a página inicial do pacote de layout do estilista pessoal para a nova página

Comece adicionando uma nova página ao seu site e carregue o layout da página inicial do Personal Stylist. Embora usemos esse layout para realizar todos os três exemplos mostrados acima, você pode usar essa abordagem para qualquer tipo de layout ou site em que estiver trabalhando.

Recriar o Exemplo # 1

Cor da sombra da caixa de botões

Vamos começar a recriar o primeiro exemplo! Este exemplo ajuda a destacar a seção do herói. A primeira coisa que você precisa fazer é abrir o Módulo de Botão que você pode encontrar na primeira coluna e alterar a cor da sombra da caixa. Estamos fazendo isso para garantir que a cor combine com a sombra da caixa rosa que adicionaremos ao pairar.

Configurações da seção

Cor de fundo padrão

Continue abrindo as configurações da seção. Certifique-se de que a cor de fundo padrão permaneça a mesma.

• Cor de fundo: # 2a2a2a

Hover Background Color

Altere o foco do plano de fundo.

• Cor de fundo: #ffffff

Sombra de caixa padrão

Continue adicionando uma Box Shadow padrão à seção.

• Posição horizontal da sombra da caixa: 0 px
• Posição vertical da sombra da caixa: 0 px
• Cor da sombra: rgba (255,137,159,0,82)
• Posição da sombra da caixa: sombra interna

Hover Box Shadow

Altere a posição horizontal da sombra da caixa. Adicione qualquer valor de escolha.

• Posição horizontal da sombra da caixa: 800px

Se quiser que o efeito de deslizar apareça de cima para baixo, você pode alterar a posição vertical da sombra da caixa.

• Posição vertical da sombra da caixa: 650 px

Transições

Por último, mas não menos importante, diminua a duração da transição na guia avançada para criar uma transição rápida entre a cor de fundo e o fundo de deslizamento da sombra da caixa.

• Duração da transição: 200ms
• Curva de velocidade de transição: facilidade

Recriar o Exemplo # 2

Modificar o Módulo do Primeiro Texto

Configurações de texto flutuante

Vamos para o próximo exemplo! Abra o Módulo de Texto que você pode encontrar na primeira coluna e mude a cor do texto ao passar o mouse.

• Cor do Texto: Claro

Hover Border

Continue alterando a cor da borda ao passar o mouse na guia de design.

• Cor da borda: rgba (255,137,159,0,82)

Sombra de caixa padrão

Em seguida, vá para as configurações de sombra de caixa e adicione uma sombra de caixa padrão.

• Posição horizontal da sombra da caixa: 0 px
• Posição vertical da sombra da caixa: 0 px
• Cor da sombra: rgba (255,137,159,0,82)
• Posição da sombra da caixa: sombra interna

Hover Box Shadow

Altere a posição horizontal ao pairar.

• Posição horizontal da sombra da caixa: 520 px

Transições

Por último, mas não menos importante, aumente a duração da transição na guia avançada para criar uma transição suave.

• Duração da transição: 700ms
• Curva de velocidade de transição: facilidade

Copiar e colar estilos de módulo para o terceiro módulo de texto

Estamos usando os mesmos estilos de módulo para o terceiro Módulo de texto também. Para economizar tempo, vamos simplesmente copiar os estilos de módulo do primeiro Módulo de Texto e colá-los no terceiro Módulo de Texto.

Modificar segundo módulo de texto

Configurações de texto

O segundo Módulo de Texto, entretanto, é um pouco diferente. Abra o módulo e vá para as configurações de texto. A única coisa que você precisa fazer é alterar a cor do texto ao pairar.

• Cor do Texto: Claro

Hover Border

Continue indo para as configurações de borda e alterando a cor da borda ao passar o mouse.

• Cor da borda: rgba (255,137,159,0,82)

Sombra de caixa padrão

É hora de adicionar o plano de fundo do furto! Comece adicionando uma sombra de caixa padrão usando as seguintes configurações:

• Posição horizontal da sombra da caixa: 0 px
• Posição vertical da sombra da caixa: 0 px
• Cor da sombra: rgba (255,137,159,0,82)
• Posição da sombra da caixa: sombra interna

Hover Box Shadow

Altere a posição vertical da sombra da caixa ao pairar.

• Posição vertical da sombra da caixa: 500px

Transições

Por último, mas não menos importante, aumente também a duração da transição deste Módulo de Texto.

• Duração da transição: 700ms
• Curva de velocidade de transição: facilidade

Recriar o Exemplo # 3

Alterar configurações de linha

Dimensionamento

Vamos para o próximo e último exemplo! Comece abrindo as configurações de linha e faça algumas alterações nas configurações de dimensionamento.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 2

Espaçamento

Continue adicionando algum preenchimento personalizado à linha também.

• Preenchimento esquerdo: 10vw
• Preenchimento direito: 10vw
• Coluna 2 Preenchimento esquerdo: 15vw (desktop), 0vw (tablet e telefone)

Sombra de caixa padrão

Em seguida, adicione uma sombra de caixa padrão à linha.

• Posição horizontal da sombra da caixa: 0 px
• Posição vertical da sombra da caixa: 0 px
• Cor da sombra: # ff899f
• Posição da sombra da caixa: sombra interna

Hover Box Shadow

Altere a posição horizontal ao pairar.

• Posição horizontal da sombra da caixa: 50px

Transições

Também estamos alterando a duração e o atraso da transição na guia avançada.

• Duração da transição: 1000ms
• Atraso de transição: 700ms
• Curva de velocidade de transição: facilidade

Alterar as configurações da seção

Remover dimensionamento

Quando terminar de modificar as configurações de linha, vá em frente e abra as configurações de seção. Vá para a guia de design e redefina a largura clicando com o botão direito e clicando em redefinir.

Remover borda

Faça o mesmo para a largura da borda.

Sombra de caixa padrão

Continue adicionando uma sombra de caixa padrão.

• Posição horizontal da sombra da caixa: 0 px
• Posição vertical da sombra da caixa: 0 px
• Cor da sombra: # 2a2a2a
• Posição da sombra da caixa: sombra interna

Hover Box Shadow

Altere a posição horizontal da sombra da caixa ao pairar.

• Posição horizontal da sombra da caixa: 60px

Transições

E para finalizar o design, aumente a duração da transição na guia avançado.

• Duração da transição: 1000ms

Antevisão

Agora que passamos por todas as etapas, vamos dar uma olhada final nos três exemplos diferentes que recriamos passo a passo.

Exemplo 1

Exemplo # 2

Exemplo # 3

Pensamentos finais

Nesta postagem, mostramos como usar sombras de caixa como fundos de tela com as opções integradas do Divi apenas. Este tutorial é parte de nossa iniciativa de design Divi em andamento, onde tentamos colocar algo extra em sua caixa de ferramentas a cada semana. Esperamos que este tutorial inspire você a usar sombras de caixa de uma forma única e criativa. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!