Como adicionar sombras de caixa unilateral a elementos de design em Divi

Adicionar sombras de caixa unilaterais a vários elementos de design no Divi é uma maneira sutil de adicionar um floreio criativo sem desviar a atenção do conteúdo. Neste tutorial, vou mostrar como adicionar sombras de caixa unilateral ao layout da página de perguntas frequentes sobre terapia do Divi. Como uma dica bônus, também mostrarei como combinar ícones do blurb como um gráfico centralizado verticalmente. Ao aprender essas técnicas de design Divi, você pode adicionar sombras de caixa unilateral a quaisquer módulos ou colunas que desejar.

Vamos começar.

Espiada

Aqui está uma prévia do design de layout de FAQ que iremos construir usando sombras de caixa de um lado.

Começando

Para começar, você precisará criar uma nova página. No painel do WordPress, navegue até Pages> Add New. Em seguida, dê um título à sua página e implemente o construtor visual. Selecione a opção “Choose a Premade Layout”. No pop-up Carregar da biblioteca, localize e selecione o Pacote de layout do terapeuta. Em seguida, selecione o layout da página de perguntas frequentes do terapeuta e clique em “Usar este layout”.

Agora você está pronto para começar a projetar.

Parte 1: Organizando o Layout

Neste layout predefinido, concentraremos nossa atenção na segunda seção que contém as questões simuladas dentro de vários módulos de alternância. Para começar, vamos alterar o layout da coluna da linha para três colunas (1/3 1/3 1/3).

Em seguida, mova todos os módulos da coluna 2 para a coluna 3 usando o recurso Multiselect do Divi. Para fazer isso, mantenha pressionado Command (ou Control) e clique em cada módulo na coluna 2 até que todos sejam selecionados. Em seguida, arraste-os para a coluna 3.

Agora precisamos dar um pouco mais de espaço à nossa linha. Abra as configurações de linha e atualize o seguinte:

Largura: 80%
Largura da calha: 2
Equalize a altura das colunas: SIM

Parte 2: Projetando os Módulos de Alternância

Para personalizar o design de todos os módulos de alternância nesta seção de uma vez, use o recurso Multiselect para selecionar cada um dos módulos de alternância. Assim que todos estiverem selecionados, abra as configurações de qualquer um dos módulos de alternância.

Em seguida, atualize o seguinte:

Abrir Alternar Cor do Texto: #ffffff
Abrir Alternar Cor de Fundo: rgba (0,0,0,0)
Cor do texto de alternância fechada: #ffffff
Cor de fundo de alternância fechada: rgba (0,0,0,0)

Cor do corpo do texto: #ffffff

Preenchimento personalizado: 3vw superior, 3vw inferior, 2vw esquerdo, 2vw direito

Agora podemos adicionar uma sombra de caixa no lado esquerdo do nosso módulo de alternância, atualizando as opções de sombra da caixa da seguinte maneira:

Posição horizontal da sombra da caixa: -30px
Posição vertical da sombra da caixa: 0 px
Força do desfoque de sombra da caixa: 40px
Força de propagação da sombra da caixa: -35px
Cor da sombra: rgba (0,0,0,0.4)

O truque para posicionar a sombra da caixa corretamente é movê-la para a esquerda, definindo a posição horizontal para -30 px. Depois disso, você precisa encontrar o equilíbrio certo entre a força do desfoque e a força da propagação para manter a sombra da caixa visível à esquerda sem que ela vaze para a parte superior e inferior do módulo.

Salvar configurações.

Agora todos os seus módulos de alternância foram atualizados com o novo design.

No entanto, queremos que a sombra da caixa dos módulos de alternância na coluna da direita seja posicionada no lado direito (não no esquerdo). Para mudar isso, use Multiselect para selecionar todos os módulos de alternância na coluna da direita e abrir as configurações do elemento. Em seguida, altere a posição horizontal de -30 px para 30 px da seguinte forma:

Posição horizontal da sombra da caixa: 30px

Em seguida, salve as configurações.

Isso cuida de nossos módulos de alternância com suas sombras de caixa unilaterais exclusivas. Agora precisamos adicionar sombras de caixa de um lado semelhantes às nossas colunas.

Parte 3: Adicionando sombras de caixa unilateral às colunas

Para adicionar sombras de caixa unilateral às colunas, precisaremos adicionar alguns trechos de CSS na guia avançada das configurações de linha.

Abra as configurações de linha e clique na guia avançado. Dentro do elemento principal da coluna 1, adicione o seguinte CSS:

box-shadow: 30px 0px 70px -45px rgba (0,0,0,0.4)

Se você não está familiarizado com CSS, deve ser capaz de reconhecer a semelhança do código com as configurações do módulo de sombra de caixa disponíveis no construtor Divi. No código acima ...

30px é o valor para a posição horizontal
0px é o valor para a posição vertical
70px é o valor para a intensidade do desfoque
-45px é o valor para a força de propagação
rgba (0,0,0,0.4) é a cor da sombra

Dei à sombra da caixa de coluna uma força de desfoque maior do que os módulos de alternância para criar uma profundidade um pouco maior.

Para adicionar uma sombra da caixa esquerda à coluna 3, você precisará adicionar o seguinte CSS ao elemento principal da coluna 3:

box-shadow: -30px 0px 70px -45px rgba(0,0,0,0.4)

Novamente, a única diferença entre este CSS e o usado para a coluna 1 é a posição horizontal negativa.

Parte 4: Adicionando ícones do Blurb à coluna 2

Agora que nossas sombras de caixa de um lado estão completas, temos uma coluna do meio vazia onde podemos combinar alguns ícones do módulo do blurb para criar um design gráfico simples. Para fazer isso, primeiro adicione um módulo de sinopse e exclua o título e o conteúdo. Em seguida, clique para usar um ícone e selecione o seguinte ícone de bate-papo.

Em seguida, atualize as configurações de design da seguinte forma:

Cor do ícone: rgba (203.241.252,0.37)
Tamanho da fonte do ícone: 20vw
Margem personalizada: 0px inferior

Em seguida, duplique o módulo blurb para criar um adicional embaixo.

Em seguida, atualize a sinopse superior com um ícone de ponto de interrogação e atualize as seguintes configurações de design:

Tamanho da fonte do ícone: 9vw
Largura: 40%
Alinhamento do Módulo: Direito
Margem personalizada: -2vw

Por fim, copie o módulo de texto de ponto de interrogação que você acabou de criar e cole-o no módulo de texto de ícone de bate-papo grande. Em seguida, atualize as configurações de design para esse módulo de sinopse da seguinte maneira:

Parte 5: Centralizando verticalmente os módulos na coluna 2

Para finalizar o design, precisamos centralizar verticalmente os ícones do blurb na coluna 2 para que permaneçam um elemento de design centralizado em nosso layout. Para conseguir isso, vamos capitalizar o uso de flex da Divi. Como selecionamos igualar as alturas das colunas para nossa linha, podemos usar um trecho simples de CSS para centralizar todos os módulos na coluna 2. Você sempre pode aprender mais sobre como alinhar verticalmente o conteúdo no Divi conforme sua conveniência. Mas, por enquanto, abra as configurações de linha e clique na guia avançado. Em seguida, insira o seguinte css dentro do Elemento Principal da Coluna 2:

margin: auto

Agora todos os módulos do blurb serão centralizados verticalmente na coluna 2.

Para tornar as coisas mais fáceis para os olhos, centralize o texto em cada um dos módulos de texto no topo da coluna 1 e coluna 2. Em seguida, adicione um gradiente de fundo à seção da seguinte maneira:

Cor do gradiente de fundo à esquerda: # 616ce1
Cor certa do gradiente de fundo: # 3846e0

É isso. Agora o design está completo.

Confira o resultado final.

E observe como a sombra da caixa se expande e se contrai ao abrir e fechar as chaves.

Pensamentos finais

Adicionar sombras de caixa unilaterais a módulos e colunas pode dar profundidade ao seu conteúdo de maneiras criativas. O truque é saber como ajustar as configurações de design da sombra da caixa do Divi de forma eficaz. O layout da página de FAQ é apenas um dos muitos exemplos em que você pode incorporar este design. Mas o processo geral é bastante simples e deve ser uma boa técnica que você pode manter em sua caixa de ferramentas de design para projetos futuros.

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

Saúde!