Como combinar as opções de fundo de imagem e sombra de caixa com Divi

Neste post Divi, mostraremos como você pode combinar as opções de fundo e sombra de um Módulo de Imagem. Esta postagem tem o objetivo de estimular sua imaginação e mostrar como os novos recursos do Divi podem funcionar com os existentes - levando a resultados criativos. Para ajudá-lo no processo criativo, criamos 4 combinações que mostraremos como recriar passo a passo. Vamos dar uma olhada nos exemplos.

Primeiro exemplo

Área de Trabalho

Móvel

Segundo exemplo

Área de Trabalho

Móvel

Terceiro exemplo

Área de Trabalho

Móvel

Quarto exemplo

Área de Trabalho

Móvel

Como combinar as opções de fundo de imagem e sombra de caixa com Divi

Inscreva-se no nosso canal no Youtube

Primeiro exemplo

Agora que mostramos o que você pode esperar desta postagem, vamos dar uma olhada em como você pode recriar o exemplo a seguir com apenas algumas etapas no Divi e nenhum código CSS adicional:

Adicionar linha de duas colunas

Cor de fundo da coluna 1

Adicione uma linha de duas colunas a uma seção padrão e escolha 'rgba (12.113.195,0.11)' como a cor de fundo da coluna 1.

Espaçamento

Em seguida, vá para a guia Design. Adicione '200px' à margem superior e '150px' ao preenchimento inferior da primeira coluna.

Adicionar Módulo de Imagem à Primeira Coluna (Desktop e Tablet)

Dimensionamento

Em seguida, adicione um Módulo de imagem à primeira coluna da linha que você criou. Este Módulo de imagem se aplica apenas a desktops e tablets. A primeira coisa que você precisa fazer é alterar a largura para '94% '.

Espaçamento

Em seguida, abra a subcategoria Espaçamento, ative a opção 'Mostrar espaço abaixo da imagem', adicione '-150px' à margem superior e '-110px' à margem esquerda da imagem.

Sombra da caixa

Role mais para baixo na guia e aplique a seguinte sombra de caixa à imagem:

• Posição horizontal da sombra da caixa: 80px
• Posição vertical da sombra da caixa: 80px
• Força do desfoque de sombra da caixa: 0 px
• Força de propagação da sombra da caixa: 6px
• Cor da sombra: rgba (173,173,173,0,79)
• Posição da sombra da caixa: sombra externa

Visibilidade

Por último, vá para a guia Avançado e desative o Módulo de imagem no celular.

Módulo de imagem clone (telefone)

A maioria das configurações que usamos para a versão para desktop e tablet do Módulo de imagem também são iguais para a versão móvel. É por isso que vamos clonar o Módulo de imagem e fazer algumas alterações adicionais que corresponderão à tela do celular.

Mudar a sombra da caixa

A primeira coisa que precisamos mudar é a sombra da caixa. Em vez de usar as configurações da área de trabalho, use as seguintes configurações:

• Posição horizontal da sombra da caixa: 33 px
• Posição vertical da sombra da caixa: 78 px
• Força do desfoque de sombra da caixa: 0 px
• Força de propagação da sombra da caixa: 6px
• Cor da sombra: rgba (173,173,173,0,79)
• Posição da sombra da caixa: sombra externa
  

Visibilidade

A próxima e última coisa que precisaremos fazer é alterar a visibilidade deste segundo Módulo de Imagem. Em vez de desativá-lo no telefone, vá em frente e desative-o no tablet e no desktop.

Segundo exemplo

A seguir, temos o segundo exemplo que se parece com este no desktop:

Adicionar linha de duas colunas

Fundo Gradiente de Linha

Adicione uma nova linha de duas colunas à seção em que está trabalhando e use o seguinte fundo gradiente para ela:

• Primeira cor: rgba (237.240,0,0,55)
• Segunda cor: rgba (255,255,255,0)
• Tipo de gradiente: radial
• Direção Radial: Centro
• Posição inicial: 50,8%
• Posição final: 50,8%

Dimensionamento

Vá para a guia Design e ative a opção 'Make This Row Fullwidth'.

Espaçamento

Por último, adicione um preenchimento superior de '200px' à segunda coluna.

Adicionar Módulo de Imagem à Primeira Coluna

Espaçamento

Depois de concluir as configurações de linha, vá em frente e adicione um Módulo de imagem à primeira coluna. Abra a subcategoria Espaçamento na guia Design e adicione '30px' ao preenchimento superior, direito, inferior e esquerdo.

Sombra da caixa

Role para baixo na mesma guia e use as seguintes configurações para a subcategoria Box Shadow:

• Posição horizontal da sombra da caixa: 0 px
• Posição vertical da sombra da caixa: 2 px
• Força do desfoque de sombra da caixa: 56 px
• Força de propagação da sombra da caixa: 12px
• Cor da sombra: rgba (0,0,0,0.3)
• Posição da sombra da caixa: sombra externa

Clonar Módulo de Imagem e Colocar na Segunda Coluna

As configurações do Módulo de imagem na segunda coluna são as mesmas. Vá em frente, clone o Módulo de Imagem e coloque-o na segunda coluna.

Terceiro exemplo

Continuando, vamos mostrar a você como obter o seguinte resultado:

Adicionar linha de uma coluna

Cor de fundo da coluna 1

Adicione uma linha de uma coluna e escolha 'rgba (193,145,163,0,6)' como a cor de fundo da primeira coluna.

Adicionar Módulo de Imagem

Imagem de fundo gradiente

Em seguida, adicione um Módulo de imagem à coluna e use o seguinte fundo gradiente para ele:

• Primeira cor: # e2e2e2
• Segunda cor: rgba (255,255,255,0)
• Tipo de gradiente: Linear
• Direção do gradiente: 180 graus
• Posição inicial: 50%
• Posição final: 50%

Fronteira

Vá para a guia Design e faça com que as seguintes configurações se apliquem à subcategoria Borda:

• Borda de uso: Sim
• Cor da borda: # 000000
• Largura da borda: 3px
• Estilo de borda: sólido

Dimensionamento

Em seguida, adicione a seguinte Largura ao Módulo de Imagem:

• Desktop: 85%
• Tablet e telefone: 100%

Espaçamento

Em seguida, abra a subcategoria Spacing e aplique o seguinte preenchimento e marign ao Módulo de Imagem:

• Margem esquerda: 80px (desktop), 0px (tablet e telefone)
• Preenchimento superior, direito, inferior e esquerdo: 30 px

Sombra da caixa

Por último, adicione uma sombra de caixa com as seguintes configurações:

• Posição horizontal da sombra da caixa: 0 px
• Posição vertical da sombra da caixa: 0 px
• Força do desfoque de sombra da caixa: 0 px
• Força de propagação da sombra da caixa: 39px
• Cor da sombra: rgba (0,0,0,0.22)
• Posição da sombra da caixa: sombra externa

Quarto exemplo

E finalmente; o último exemplo que mostraremos como recriar se parece com este:

Adicionar linha de duas colunas

Comece adicionando uma linha de duas colunas. Esta linha, ao contrário dos exemplos anteriores que tratamos nesta postagem, não precisará de nenhuma configuração adicional.

Adicionar Módulo de Imagem à Primeira Coluna

Fundo Gradiente

Adicione um Módulo de imagem à primeira coluna da linha que você acabou de criar e use o seguinte fundo gradiente para ele:

• Primeira cor: rgba (255,255,255,0)
• Segunda cor: rgba (92,0,158,0,46)
• Tipo de gradiente: Linear
• Direção do gradiente: 138 graus
• Posição inicial: 55%
• Posição final: 55%

Espaçamento

Em seguida, vá para a guia Design e use as seguintes configurações para a subcategoria Espaçamento:

• Mostrar espaço abaixo da imagem: Sim
• Preenchimento direito: 30px
• Preenchimento inferior: 30 px

Adicionar Módulo de Segunda Imagem à Primeira Coluna

Cor de fundo

Continue adicionando outro Módulo de imagem logo abaixo do anterior e use 'rgba (96,96,96,0.42)' como sua cor de fundo.

Espaçamento

Em seguida, vá para a guia Design e use as seguintes configurações para a subcategoria Espaçamento:

• Mostrar espaço abaixo da imagem: Sim
• Margem superior: -250 px (desktop), -150 (tablet), -100 (telefone)
• Margem direita: -150 px (desktop), 0 px (tablet e telefone)
• Margem esquerda: 150px
• Enchimento superior: 30px
• Preenchimento esquerdo: 30px

Sombra da caixa

Por último, abra a subcategoria Box Shadow e use as seguintes configurações:

• Posição horizontal da sombra da caixa: 0 px
• Posição vertical da sombra da caixa: 2 px
• Força do desfoque de sombra da caixa: 0 px
• Força de propagação da sombra da caixa: 24px
• Cor da sombra: # e2e2e2
• Posição da sombra da caixa: sombra externa

Pensamentos finais

Os exemplos que compartilhamos neste post são apenas uma fração de quão longe você pode ir com a sombra da caixa do Divi e as opções de plano de fundo. Você pode criar designs exclusivos usando o Módulo de Imagem que aprimorará a aparência geral do seu site. Se você tiver dúvidas ou sugestões; certifique-se de deixar um comentário na seção de comentários abaixo.

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!

Imagem em destaque por Creative Stall / shutterstock.com