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]

Souhaitez-vous mettre en valeur une partie spécifique de votre page ? Aujourd’hui, nous allons vous montrer comment créer des superpositions de bordures animées pour mettre en surbrillance le contenu de votre page. Nous allons créer ces bordures animées en utilisant le modèle App Developer Layout Pack, disponible depuis le Divi Builder. Cependant vous pouvez utiliser cette technique pour tout type de site Web que vous créez. Cela vous aidera certainement à ajouter une dimension supplémentaire à votre page. Nous espérons que ce didacticiel vous incitera à créer également vos propres superpositions de bordures animées.

Visão geral

Avant de plonger dans le didacticiel, examinons rapidement le résultat de ces trois exemples. Vous pouvez également vous attendre à un résultat similaire sur des écrans plus petits.

Créer une nouvelle page à l’aide de la page de destination de App Developer Layout Pack

La première chose à faire est de créer une nouvelle page et d’utiliser la mise en page App Developer Layout Pack .

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]

Clone Hero Section

Notre exemple sera créé dans la section héros. Pour rappel, voici ce que nous allons créer :

Ajouter une nouvelle ligne à la section héros

Estrutura da coluna

Commençons à recréer le premier exemple ! Ajoutez une nouvelle ligne dans la section spécialisée en utilisant la structure de colonne suivante:

Adicione um módulo de texto

Deixe o conteúdo vazio

Ajoutez un nouveau module de texte à la ligne et veillez à laisser la zone de contenu vide. Nous utilisons le module pour ses options de conception intégrées, et non pour afficher du contenu écrit.

espaçamento

Accédez aux paramètres d’espacement du module de texte et donnez-lui une forme en ajoutant des marges intérieures et inférieures personnalisées. Créez le chevauchement entre ce module et les modules précédents en ajoutant également une marge supérieure négative.

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]

  • Marge supérieure: -480px
  • Melhor preenchimento: 223px
  • Rembourrage inférieur: 223px

Fronteira

Accédez ensuite aux paramètres de bordure du module et ajoutez une bordure de votre choix.

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

Caixa de sombra

Ajouter une ombre de boîte aussi.

  • Força de desfoque de sombra de caixa: 1px
  • Epaisseur de l’ombre de la boîte: 15px
  • Cor da sombra: rgba (10,226,255,0.59)

Animação

Et jouez avec les paramètres d’animation pour faire apparaître le contenu. Vous devez cependant remarquer que vous pouvez utiliser l’option qui vous plaira le plus.

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. [FREE]

  • Animação de Estilo: Flip
  • Repetir animação: uma vez
  • Direção de Animação: Direita
  • Durée de l’animation: 1500ms
  • Tempo de animação: 1500ms
  • Animação de Intensidade: 500%

Visão geral

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d’œil au résultat des trois exemples que nous avons recréés tout au long de ce didacticiel.

Considerações finais

Dans ce tutoriel, nous vous avons montré comment mettre votre contenu en lumière à l’aide de superpositions de bordures animées. Il s’agit d’une excellente technique pour attirer l’attention sur une partie spécifique de votre page et pour le faire de manière élégante. Vous pouvez utiliser cette technique pour tout type de site Web que vous construisez. Si vous avez des questions ou des suggestions, veillez à laisser un commentaire dans la section des commentaires ci-dessous !

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