Como usar criativamente as sombras da caixa de linha com Divi

Uma das atualizações mais recentes do Divi era muito esperada; a integração de sombras de caixa em seções, linhas e módulos. Nesta postagem, vamos nos concentrar em como as sombras das caixas de linha podem melhorar a aparência geral do seu site.

Para ilustrar a profundidade que as sombras da caixa podem trazer ao seu site, criamos um exemplo que mostraremos como recriar passo a passo.

Resultado

Área de Trabalho

O layout que mostraremos a você como recriar se parece com este no desktop:

Móvel

E assim no celular:

Como usar criativamente as sombras da caixa de linha com Divi

Inscreva-se no nosso canal no Youtube

Formato de cabeçalho

A primeira coisa que você precisa fazer é escolher o formato de cabeçalho correto. Vá para o Painel do WordPress> Personalizar> Cabeçalho e navegação> Formato do cabeçalho> e escolha 'Centralizado' como estilo do cabeçalho .

Barra de Menu Principal

Volte para Cabeçalho e navegação> Barra de menu principal> E faça os seguintes ajustes:

• Ocultar imagem do logotipo: Habilitar
• Altura do menu: 211
• Altura máxima do logotipo: 30
• Tamanho do texto: 16
• Espaçamento entre letras: 2
• Fonte: Lato Light
• Estilo da fonte: maiúsculas
• Cor do texto: #FFFFFF
• Cor do link ativo: #FFFFFF
• Cor de fundo: rgba (255,255,255,0)
• Cor de fundo do menu suspenso: rgba (255,255,255,0)

Primeira sessão

Depois de fazer as alterações no Theme Customizer, é hora de começar com o layout. Crie uma nova página, ative o Divi Builder e mude para o Visual Builder. Em seguida, adicione uma primeira seção padrão à página.

Fundo do gradiente da seção

Esta seção precisará do seguinte fundo gradiente:

• Primeira cor: # ea2e7d
• Segunda cor: # edd900
• Tipo de gradiente: Linear
• Direção do gradiente: 110deg
• Posição inicial: 0%
• Posição final: 100%

Espaçamento

Vá para a guia Design. Na subcategoria Espaçamento, use '100px' para o preenchimento superior e '200px' para o preenchimento inferior.

Linha de uma coluna

Fundo Gradiente de Linha

Continue adicionando uma linha de uma coluna à seção e use o seguinte fundo gradiente:

• Primeira cor: rgba (255,255,255,0)
• Segunda cor: # ea2e7d
• Tipo de gradiente: radial
• Direção Radial: Centro
• Posição inicial: 56%
• Posição final: 100%

Fundo do gradiente da coluna

Role para baixo e use o seguinte fundo gradiente para a coluna dessa linha:

• Primeira cor: rgba (237.217,0,0,77)
• Segunda cor: rgba (255,255,255,0)
• Tipo de gradiente da coluna: Linear
• Direção do gradiente da coluna: 180 graus
• Posição inicial da coluna: 0
• Posição final da coluna: 100

Dimensionamento

Vá para a guia Design e faça as seguintes alterações aplicadas à subcategoria Dimensionamento:

• Usar largura personalizada: Sim
• Largura personalizada: 27%

Espaçamento

Em seguida, use '20px' para o preenchimento personalizado superior, direito, inferior e esquerdo da linha.

Módulo de Texto

Depois de concluir as configurações de linha, adicione um Módulo de Texto e use as seguintes configurações para a subcategoria Texto:

• Fonte do Texto: Arvo
• Tamanho da fonte do texto: 98px
• Cor do texto: #FFFFFF
• Espaçamento entre letras do texto: 32px
• Altura da linha de texto: 1,4em
• Orientação do Texto: Centro

Segunda Seção

Adicione outra seção logo abaixo da primeira seção. Esta seção conterá todas as outras linhas que estão presentes no layout.

Fundo do gradiente da seção

Em primeiro lugar, use o seguinte fundo gradiente para esta seção:

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

Espaçamento

Em seguida, vá para a guia Design e adicione '100px' ao preenchimento inferior.

Primeira linha de duas colunas

Cor de fundo da linha

Adicione a primeira linha de duas colunas a esta nova seção e use '#dddddd' como a cor de fundo.

Fundo Gradiente da Coluna 1

A primeira coluna precisará do seguinte fundo gradiente:

• Primeira cor: # 6ac922
• Segunda cor: # b6c1b2
• Tipo de gradiente da coluna 1: Linear
• Direção do gradiente da coluna 1: 136 graus
• Posição inicial da coluna 1: 23%
• Posição final da coluna 1: 100%

Cor de fundo da coluna 2

Role para baixo e use '#dddddd' como a cor de fundo da coluna 2.

Dimensionamento

Vá para a guia Design e use as seguintes configurações para a subcategoria Dimensionamento:

• Usar largura personalizada: Habilitar
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

A subcategoria Spacing precisará do seguinte preenchimento e margem:

• Preenchimento superior, direito, inferior e esquerdo: 0 px
• Margem superior: -150px
• Preenchimento superior da coluna 1: 235 px (desktop), 0 px (tablet e telefone)
• Preenchimento inferior da coluna 1: 235 px (desktop), 0 px (tablet e telefone)
• Preenchimento superior da coluna 2: 150 px
• Preenchimento inferior da coluna 2: 150 px

Sombra da caixa

Abra a subcategoria Box Shadow e use as seguintes configurações:

• Posição horizontal da sombra da caixa: -3px
• Posição vertical da sombra da caixa: -18 px
• Força do desfoque de sombra da caixa: 77 px
• Força de propagação da sombra da caixa: 23px
• Cor da sombra: rgba (0,0,0,0.3)

Módulo de Primeiro Texto

Em seguida, adicione o primeiro Módulo de Texto à segunda coluna e use as seguintes configurações para a subcategoria Texto:

• Fonte do Texto: Arvo
• Tamanho da fonte do texto: 34px
• Cor do texto: # 7a7a7a
• Orientação do Texto: Centro

Segundo Módulo de Texto

Adicione outro Módulo de Texto, mas use as seguintes configurações:

• Fonte do texto: Lato Light
• Orientação do Texto: Centro

Abra a subcategoria Sizing, use uma largura de '75% 'e selecione o Alinhamento do módulo central.

Por último, adicione uma margem superior de '50px'.

Segunda linha de duas colunas

Cor de fundo da linha

Adicione outra linha de duas colunas à seção e escolha '# b99bc1' como sua cor de fundo.

Cor de fundo da coluna 1

Role para baixo e escolha '#dddddd' para a Cor de fundo da coluna 1.

Dimensionamento

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

• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

Em seguida, use o seguinte preenchimento:

• Preenchimento superior, direito, inferior e esquerdo: 0 px
• Preenchimento superior da coluna 1: 150 px (desktop), 0 px (tablet e telefone)
• Preenchimento inferior da coluna 1: 50 px (desktop), 0 px (tablet e telefone)
• Preenchimento superior da coluna 2: 150 px
• Preenchimento inferior da coluna 2: 150 px

Sombra da caixa

Abra a subcategoria Box Shadow e use as seguintes configurações:

• Posição horizontal da sombra da caixa: -4px
• Posição vertical da sombra da caixa: 24px
• Força do desfoque de sombra da caixa: 77 px
• Força de propagação da sombra da caixa: 23px
• Cor da sombra: rgba (0,0,0,0.3)
• Posição da sombra da caixa: sombra externa

Módulo de primeira imagem na primeira coluna

Continue adicionando um Módulo de imagem à primeira coluna. Depois de enviar a imagem, aplique as seguintes configurações à subcategoria Espaçamento:

• Mostrar espaço abaixo da imagem: Sim
• Margem superior: -500 px (desktop), 0 px (tablet e telefone)
• Margem direita: -50px (desktop), 0px (tablet e telefone)
• Margem esquerda: 200px (desktop), 0px (tablet e telefone)

Abra a subcategoria Box Shadow e use a seguinte caixa shadow:

• Posição horizontal da sombra da caixa: 2 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: 30px
• Cor da sombra: rgba (255,255,255,0,68)
• Posição da sombra da caixa: sombra externa

Segunda coluna de imagem na primeira coluna

Adicione outro Módulo de imagem à mesma coluna e use a seguinte margem:

• Margem superior: -50px (desktop), 0px (tablet e telefone)
• Margem direita: 100px (desktop), 0px (tablet e telefone)
• Margem inferior: 30px
• Margem esquerda: 100px (desktop), 0px (tablet e telefone)

Em seguida, role para baixo e use a seguinte sombra de caixa:

• Posição horizontal da sombra da caixa: 2 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: 30px
• Cor da sombra: rgba (255,255,255,0,68)
• Posição da sombra da caixa: sombra externa

Clonar Módulos de Texto e Colocar na Segunda Coluna

Por último, clone os dois Módulos de Texto da linha anterior e coloque-os na segunda coluna desta linha. Só há uma coisa que você terá que mudar; a cor do texto. Abra as configurações de cada Módulo de Texto e altere a cor do texto para '#FFFFFF'.

Resultado

Área de Trabalho

Todas as etapas desta postagem levarão ao seguinte resultado no desktop:

Móvel

E o seguinte resultado no celular:

Pensamentos finais

Nesta postagem, mostramos como você pode usar criativamente as sombras das caixas nas linhas. Criamos um exemplo colorido onde você pode notar claramente as sombras da caixa de profundidade atribuídas a um layout. 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 Dmitry Guzhanin / shutterstock.com