Como adicionar um efeito de pausa no divi builder

Wordpress

Existem muitas maneiras de tornar uma página da Web no seu site mais atraente. Uma delas é que você pode adicionar um efeito de hover a um determinado elemento da página. Se você tem um website baseado em WordPress construído com Divi Builder , você pode adicionar sem esforço um efeito de pairar a um elemento da sua página. O que é o Divi Builder, a propósito?

No caso de você não ter conhecimento do Divi Builder. É um plugin de construtor de páginas para WordPress tal como o Elementor (Elementor é o mais popular construtor de páginas para WordPress). Ele também vem com um editor visual para facilitar a criação da página. O Divi Builder vem com alguns recursos embutidos para adicionar efeitos de animação, incluindo os que você pode adicionar quando um visitante paira sobre um determinado elemento da sua página. Dê uma olhada no screencast abaixo.

Os efeitos hover acima são criados com o Divi Builder. O próprio Divi Builder faz uso da transformação CSS para a função de efeito de pairar. Então, tecnicamente, quando você adiciona um efeito hover a um determinado elemento no Divi Builder, você está implementando a transformação CSS na sua página.

No Divi Builder, o elemento de design se divide em três tipos: seção, linha e módulo. Você pode adicionar um efeito de hover a esses três tipos de elementos. Neste exemplo, vamos mostrar-lhe como adicionar um efeito hover a um módulo de imagem (como pode ver no screencast acima).

Como adicionar um efeito hover no Divi Builder

Primeiro, precisa de preparar uma secção assim como uma linha na área de tela do Divi Builder. Para isso, clique no botão azul mais para adicionar uma nova seção (você pode adicionar uma seção regular para este exemplo). Insira uma linha e selecione a estrutura da coluna de acordo com a sua necessidade. Neste exemplo, selecionamos a estrutura de três colunas.

Após a linha ser adicionada, clique no ícone cinza mais em uma das colunas para adicionar um módulo. Como queremos adicionar o efeito hover à imagem então selecione Image para adicionar o módulo Image.

O painel de configurações do módulo Image aparecerá logo após você adicionar o módulo Image. Para adicionar uma imagem, você pode clicar no suporte da imagem no bloco Image sob o bloco Content tab.

Após a imagem ser adicionada, vá para o bloco Design e abra o bloco Transformação . No bloco Transformação , clique no ícone do cursor e depois clique na aba hover (que também é representada com um ícone do cursor).

Selecione um tipo de transformação que você deseja adicionar clicando em uma das abas disponíveis e use o mouse para definir o valor. Ou, você também pode definir o valor da transformação manualmente, digitando o seu valor preferido.

É isso mesmo. Você pode aplicar as alterações clicando no ícone verde da lista de verificação no canto inferior direito do painel de configurações.

A fim de tornar sua página mais atraente, você também pode exibir uma imagem diferente no hover. Você pode este artigo para saber mais.

Você pode ir pelo mesmo caminho para adicionar um efeito de pairar em uma seção e linha. Primeiro, abra o painel de configurações e depois vá para Design separador. No separador Design , pode abrir o separador Transformar bloco. Você pode definir o efeito de pairar sobre este bloco, como acabamos de cobrir acima.

YouTube video: Como adicionar um efeito de pausa no Divi Builder


.

Rate article