Como criar sobreposições de bordas animadas para destacar o conteúdo com Divi

Procurando uma maneira única de colocar uma parte específica de sua página em destaque? Continue lendo! Hoje, vamos mostrar a você como criar sobreposições de borda animadas para destacar o conteúdo em sua página. Criaremos três sobreposições de bordas animadas diferentes na página de destino do Pacote de layout do desenvolvedor de aplicativos, mas você pode usar essa técnica para qualquer tipo de site que estiver construindo. Isso definitivamente ajudará você a adicionar uma dimensão extra à sua página. Esperamos que este tutorial inspire você a criar suas próprias sobreposições de borda animadas alternativas também.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado de todos os três exemplos. Você pode esperar um resultado semelhante em tamanhos de tela menores também.

Exemplo 1

Exemplo # 2

Exemplo # 3

Inscreva-se no nosso canal no Youtube

Crie uma nova página usando a página inicial do pacote de layout do desenvolvedor de aplicativos

A primeira coisa que você precisa fazer é criar uma nova página usando a página inicial do App Developer Layout Pack.

Clone Hero Section

Nossos primeiros dois exemplos são criados na seção de heróis. Se você quiser recriar os dois exemplos, é recomendável clonar a seção do herói para poder passar para a duplicata e recriar o segundo exemplo.

Recriar o Exemplo # 1

Adicionar nova linha à seção Hero

Estrutura da Coluna

Vamos começar a recriar o primeiro exemplo! Adicione uma nova linha na seção de especialidade usando a seguinte estrutura de coluna:

Adicionar Módulo de Texto

Deixe a caixa de conteúdo vazia

Adicione um novo Módulo de Texto à linha e certifique-se de deixar a caixa de conteúdo vazia. Estamos usando o módulo por suas opções de design embutidas, não para exibir conteúdo escrito.

Espaçamento

Vá para as configurações de espaçamento do Módulo de Texto e dê ao módulo uma forma adicionando preenchimento superior e inferior personalizado. Crie a sobreposição entre este módulo e os módulos anteriores, adicionando alguma margem superior negativa também.

• Margem superior: -480 px
• Preenchimento superior: 223 px
• Preenchimento inferior: 223 px

Fronteira

Em seguida, vá para as configurações de borda do módulo e adicione uma borda de sua escolha.

• Largura da borda: 9 px
• Cor da borda: # 0ae2ff
• Estilo de borda: Outset

Sombra da caixa

Adicione uma sombra de caixa também.

• Força do desfoque de sombra da caixa: 1px
• Força de propagação da sombra da caixa: 15px
• Cor da sombra: rgba (10.226.255,0.59)

Animação

E brinque com as configurações de animação para fazer o conteúdo se destacar.

• Estilo de animação: Flip
• Repetição de animação: uma vez
• Direção da animação: direita
• Duração da animação: 1500ms
• Atraso de animação: 1500ms
• Intensidade de animação: 500%

Recriar o Exemplo # 2

Adicionar nova linha à seção duplicada do herói

Passemos ao segundo exemplo! Adicione uma nova linha à seção duplicada do herói usando a seguinte estrutura de coluna:

Adicionar Módulo de Texto # 1

Deixe a caixa de conteúdo vazia

Estamos, novamente, usando um Módulo de Texto vazio.

Espaçamento

Vá para as configurações de espaçamento e dê ao módulo uma forma usando preenchimento superior e inferior personalizado. Faça com que ele se sobreponha aos módulos anteriores adicionando alguma margem superior negativa também.

• Margem superior: -480 px
• Preenchimento superior: 223 px
• Preenchimento inferior: 223 px

Fronteira

Continue adicionando uma borda ao Módulo de Texto.

• Largura da borda: 9 px
• Cor da borda: # 0ae2ff
• Estilo de borda: duplo

Animação

E brinque com as configurações de animação para criar um efeito de rolamento.

• Estilo de animação: Roll
• Repetição de animação: uma vez
• Direção da Animação: Centro
• Duração da animação: 4500ms
• Atraso de animação: 1500ms
• Intensidade de animação: 100%
• Opacidade inicial da animação: 100%

Clonar Módulo de Texto

Assim que terminar de modificar o primeiro Módulo de Texto, vá em frente e clone-o.

Alterar espaçamento

Abra as configurações da duplicata e altere o valor da margem superior nas configurações de espaçamento.

• Margem superior: -495 px

Alterar borda

Modifique a cor da borda também.

• Cor da borda: #ededed

Alterar Animação

E modifique as configurações de animação para alcançar o resultado que você viu na prévia deste post.

• Repetição de animação: Loop
• Duração da animação: 5000ms
• Atraso de animação: 2.000 ms

Recriar o Exemplo # 3

Alterar o espaçamento do módulo de imagem na coluna 2

Vamos para o próximo e último exemplo! Navegue até a seção do processo na página e adicione algum preenchimento superior ao Módulo de imagem contendo a grande ilustração no meio.

• Margem superior: 70 px (desktop), 0 px (tablet e telefone)

Adicionar cor de fundo a módulos de texto existentes

Continue adicionando uma cor de fundo branca a cada um dos Módulos de Texto na primeira e na terceira colunas.

• Cor de fundo: #ffffff

Adicionar Módulo de Texto à Coluna 1

Deixe a caixa de conteúdo vazia

Agora podemos começar a adicionar a primeira sobreposição de borda animada! Adicione um novo Módulo de Texto à primeira coluna (consulte a tela de impressão) e certifique-se de deixar a caixa de conteúdo vazia.

Espaçamento

Vá para as configurações de espaçamento do Módulo de Texto a seguir e crie a forma e a sobreposição usando valores de margem e preenchimento personalizados.

• Margem superior: -230 px
• Margem esquerda: 80px
• Margem direita: 100px
• Enchimento superior: 120px
• Preenchimento inferior: 120px

Fronteira

Adicione uma borda a seguir.

• Largura da borda: 13px
• Cor da borda: # bcf5f3
• Estilo de borda: duplo

Animação

Continue adicionando uma animação de sua escolha que o ajudará a destacar o conteúdo que você está compartilhando.

• Estilo de animação: Dobra
• Repetição de animação: uma vez
• Direção da animação: direita
• Intensidade de animação: 100%

Índice Z

Para garantir que as bordas apareçam abaixo do conteúdo, usaremos um valor negativo para o índice Z do Módulo de Texto contendo as configurações de borda.

• Índice Z: -1

Clonar Módulo de Texto e Colocar no Final da Coluna 1

Assim que terminar de criar e modificar o Módulo de Texto, vá em frente e clone-o. Coloque a duplicata no final da primeira coluna.

Alterar borda

Altere a cor da borda.

• Cor da borda: # ffc0ec

Alterar Animação

E adicione um atraso de animação também.

• Atraso de animação: 1000 ms

Adicionar Módulo de Texto à Coluna 3

Deixe a caixa de conteúdo vazia

Continue adicionando um Módulo de Texto à terceira coluna (consulte a tela de impressão) e certifique-se de deixar a caixa de conteúdo vazia.

Espaçamento

Passe para as configurações de espaçamento e crie a forma e a sobreposição usando margens personalizadas e valores de preenchimento.

• Margem superior: -230 px
• Margem esquerda: 100px
• Margem direita: -80px
• Enchimento superior: 120px
• Preenchimento inferior: 120px

Fronteira

Adicione uma borda de sua escolha a seguir.

• Largura da borda: 13px
• Cor da borda: # 7479ff
• Estilo de borda: duplo

Animação

Junto com uma animação que inclui um atraso de animação maior do que os que foram dados aos dois Módulos de Texto anteriores.

• Estilo de animação: Dobra
• Repetição de animação: uma vez
• Direção da animação: esquerda
• Atraso de animação: 2.000 ms
• Intensidade de animação: 100%

Índice Z

Certifique-se de que o módulo apareça abaixo do conteúdo usando um índice Z negativo.

• Índice Z: -1

Clonar Módulo de Texto e Colocar no Final da Coluna 3

Quando terminar de adicionar e modificar o Módulo de Texto, clone-o e coloque a duplicata no final da terceira linha.

Alterar borda

Altere a cor da borda da duplicata.

• Cor da borda: # b3d1ff

Alterar Animação

Adicione algum atraso extra na animação e pronto!

• Atraso de animação: 3000ms

Antevisão

Agora que passamos por todas as etapas, vamos dar uma olhada final no resultado de todos os três exemplos que recriamos ao longo deste tutorial.

Exemplo 1

Exemplo # 2

Exemplo # 3

Pensamentos finais

Nesta postagem, mostramos como colocar seu conteúdo em destaque usando sobreposições de bordas animadas. Essa é uma ótima técnica para chamar a atenção para uma parte específica da página e também fazê-lo de maneira elegante. Você pode usar essa técnica para qualquer tipo de site que estiver construindo. Se você tiver alguma dúvida ou sugestão, deixe um comentário na seção de comentários abaixo!