Quer destacar uma parte específica da sua página? Hoje mostraremos como criar sobreposições de bordas animadas para destacar o conteúdo da sua página. Criaremos essas bordas animadas usando o modelo App Developer Layout Pack, disponível em Divi Construtor. No entanto, você pode usar esta técnica para qualquer tipo de site da Web que você cria. 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 também.
Visão geral
Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado desses três exemplos. Você também pode esperar um resultado semelhante em telas menores.
Crie uma nova página usando a página inicial do App Developer Layout Pack
A primeira coisa a fazer é criar uma nova página e usar o App Developer Layout Pack.
Clone Hero Section
Nosso exemplo será criado na seção do herói. Como lembrete, aqui está o que criaremos:
Adicione uma nova linha à seção do herói
Estrutura da coluna
Vamos começar a recriar o primeiro exemplo! Adicione uma nova linha na seção especializada usando a seguinte estrutura de coluna:
Adicione um módulo de texto
Deixe o conteúdo vazio
Adicione um novo módulo de texto à linha e certifique-se de deixar a caixa de texto conteúdo vazio. Usamos o módulo por suas opções de design integradas, não para exibir conteúdo. conteúdo escrita.
espaçamento
Vá para as configurações de espaçamento do módulo de texto e modele-o adicionando margens internas e inferiores personalizadas. Crie a sobreposição entre este módulo e os módulos anteriores, adicionando também uma margem superior negativa.
- Margem superior: -480px
- Melhor preenchimento: 223px
- Preenchimento inferior: 223px
Fronteira
Em seguida, vá para as configurações de borda do módulo e adicione uma borda de sua escolha.
- Largura da borda: 9px
- Cor da borda: #0ae2ff
- Estilo de borda: Outset
Caixa de sombra
Adicione uma sombra de caixa também.
- Força de desfoque de sombra de caixa: 1px
- Espessura 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 trazer o conteúdo. Você deve observar, no entanto, que pode usar a opção que mais gosta.
- Animação de Estilo: Flip
- Repetir animação: uma vez
- Direção de Animação: Direita
- Duração da animação: 1500ms
- Atraso de animação: 1500 ms
- Animação de Intensidade: 500%
Visão geral
Agora que passamos por todas as etapas, vamos dar uma última olhada no resultado dos três exemplos que recriamos ao longo deste tutorial.
Considerações finais
Neste tutorial, mostramos como destacar seu conteúdo usando sobreposições de borda animadas. Essa é uma ótima técnica para chamar a atenção para uma parte específica da sua página e fazê-la de maneira elegante. Você pode usar esta técnica para qualquer tipo de site da Web que você constrói. Se você tiver alguma dúvida ou sugestão, não se esqueça de deixar um comentário na seção de comentários abaixo!
