Ir para o conteúdo principal

Como criar bordas animadas em Divi

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Deseja destacar uma parte específica da sua página? Hoje, mostraremos como criar sobreposições de borda animadas para destacar o conteúdo da sua página. Criaremos essas bordas animadas usando o modelo do App Developer Layout Pack, disponível no Divi Builder. No entanto, você pode usar essa técnica para qualquer tipo de site que você criar. Definitivamente, isso ajudará você a adicionar uma dimensão extra à sua página. Esperamos que este tutorial o incentive a criar também suas próprias sobreposições de borda animadas.

Visão geral

Antes de mergulhar no tutorial, vamos dar uma olhada rápida nos resultados desses três exemplos. Você também pode esperar um resultado semelhante em telas menores.

Crie uma nova página usando a página de destino do App Developer Layout Pack

A primeira coisa a fazer é criar uma nova página e usar o layout do App Layout Pack.

Clone Hero Section

Nosso exemplo será criado na seção do herói. Como lembrete, aqui está o que criaremos:

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

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 deixe a área de conteúdo em branco. Usamos o módulo para suas opções de design integradas, não para exibir conteúdo escrito.

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

espaçamento

Acesse as configurações de espaçamento do módulo de texto e dê uma forma 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 exibir o conteúdo. No entanto, observe que você pode usar a opção que mais gosta.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [Recomendado]

  • Animação de Estilo: Flip
  • Repetir animação: uma vez
  • Direção de Animação: Direita
  • Duração da animação: 1500ms
  • Tempo de animação: 1500ms
  • 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 excelente técnica para chamar a atenção para uma parte específica da sua página e fazê-lo de maneira elegante. Você pode usar essa técnica para qualquer tipo de site criado. Se você tiver alguma dúvida ou sugestão, deixe um comentário na seção de comentários abaixo!

Este artigo contém comentários 0

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
4 ações
ação4
chilrear
Enregistrer