Ir para o conteúdo principal

Como criar seções animadas clicando no Divi Builder

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]

As opções de transformação incorporadas da Divi provaram ser uma ferramenta de design extremamente útil, permitindo redimensionar, girar, inclinar ou posicionar qualquer elemento de uma página com facilidade. E você pode até optar por transformar elementos em um estado de rolagem para obter efeitos impressionantes de passagem. Hoje, estamos mostrando como implantar essas animações em um clique.

Este método requer o uso de jQuery. A principal vantagem dessa técnica é que você pode usar os parâmetros de design internos do Divi para atribuir um estilo às propriedades de transformação e, em seguida, ativar (ou desativar) essas propriedades de transformação com um clique do mouse. Isso abrirá várias possibilidades únicas de revelar conteúdo oculto movendo itens com um clique e não com o passar do mouse. E também ajuda a reduzir a necessidade de conhecer muito CSS.

Vamos começar.

O que você precisa para começar

Para este tutorial, tudo que você precisa é Divi. Para começar, acesse o painel do WordPress. Crie uma nova página, atribua um título à sua página e continue o design no gerador Divi em primeiro plano. Selecione a opção "Build From Zero". Agora você está pronto para ir!

A ideia básica explicada

Antes de entrar em muitos detalhes deste tutorial, explicarei o princípio de como essa técnica funciona em poucas palavras.

Sempre que você personaliza um elemento (seção, linha ou módulo) no Divi, adiciona CSS personalizado a esse elemento em segundo plano. Por exemplo, usando os parâmetros Divi internos, você pode adicionar uma propriedade de rotação de transformação a um módulo de sinopse para que ele gire o módulo ao longo do eixo Z dos graus 20.

Mas nos bastidores, você cria um CSS personalizado que é adicionado a este módulo de texto e tem a seguinte aparência:

.et_pb_text_0 {transform: rotateZ (20deg); }

Bem simples. Digamos que você queira adicionar esta mesma opção de transformação de sobrevôo. Você só precisa aplicar a propriedade de transformação ao estado de rolagem nas configurações do Divi Builder.

E o código será algo assim nos bastidores:

.et_pb_text_0: hover {transform: rotateZ (20deg); }

No entanto, se você deseja implantar a propriedade de transformação para clicar, as coisas terão que funcionar um pouco diferente. Você precisará inserir um código javascript para acionar um evento de clique no elemento (ou no módulo de texto).

No nosso exemplo atual, nosso objetivo principal é essencialmente ativar e desativar a propriedade de transformação "transform: rotateZ (20deg)" para clicar. Uma maneira simples de fazer isso é criar uma classe CSS customizada com a propriedade transform: none! Importante "nas configurações da página (ou folha de estilos externa). Seria algo como isto.

.toggle-transform-animation {transformar: nenhum! importante; }

Com este CSS no lugar. Podemos adicionar a classe CSS "toggle-transform-animation" ao elemento do módulo Blurb que possui nossa propriedade de transformação.

Isso desativará (substituirá) a propriedade de transformação e impedirá que ela seja ativada inicialmente, mesmo que o estilo da propriedade de transformação já tenha sido adicionado a ela.

Agora você só precisa ativar (adicionar e remover) essa classe CSS personalizada quando clicar no item. Assim, toda vez que clicarmos no item, a classe será excluída e as propriedades da transformação (aquelas que você adicionou com o Divi) serão implantadas.

Aqui está um exemplo simples de como proceder. Primeiro, adicione outra classe CSS ao módulo do Blurb chamado "transform_target".

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]

Divi Transform Properties on Click

Em seguida, vá para Divi> Opções de tema> Integração e adicione o seguinte script jQuery na parte superior do seu blog:

<Script> jQuery (document) .ready (function () {jQuery () click (function () {jQuery (this) .toggleClass ( 'toggle-transformar-animação') 'transform_target ..';});}); </ Script>

Isso é tudo! Agora, sempre que você clicar no módulo de apresentação, a propriedade de transformação que você adicionou à apresentação no Divi será ativada ou desativada.

Vamos agora criar um exemplo para que você possa ver como isso pode ser útil para seus próprios projetos.

Como ativar as propriedades de transformação Clique em para exibir o conteúdo em Divi

Neste exemplo, vamos nos ater a um exemplo de texto introdutório simples usado acima. Em seguida, adicionaremos um texto introdutório extra por trás deste, para que cada vez que você clicar no texto da apresentação superior, ele se afaste para revelar o conteúdo adicional do texto da apresentação, localizado atrás do documento.

Criando módulos Blurb na frente e atrás

Em seguida, adicione um módulo de apresentação à coluna 1.

Atualize o conteúdo do texto do layout para incluir apenas um título (remova o conteúdo do corpo padrão) e adicione um ícone de apresentação.

Atualize os parâmetros de design da seguinte maneira:

Cor de fundo: #4c5866
Cor do ícone: #ffffff
Orientação do texto: centro
Cor do texto
: Margem personalizada leve: 0px na parte inferior
Preenchimento personalizado: 15% na parte superior, 15% na parte inferior, 10% na esquerda, 10% na direita

Voltaremos a este módulo mais tarde, mas, por enquanto, precisamos criar nosso segundo módulo Blurb, que servirá como um módulo de "retorno" com conteúdo adicional.

Para fazer isso, duplique o módulo de apresentação que você acabou de criar.

Em seguida, no segundo módulo, exclua o ícone da apresentação (e a imagem padrão) e adicione conteúdo do corpo ao módulo. Atualize os parâmetros de design da seguinte maneira:

Cor de fundo: rgba (76,88,102,0.3)
Cor do texto: preto
Preenchimento personalizado: 20% top

Posicione o módulo antes de Resumo

Agora que nossos dois textos de apresentação são elegantes, precisamos voltar ao nosso módulo de apresentação frontal (em cima) e posicioná-lo acima do módulo de apresentação traseiro (em baixo). Para fazer isso, forneceremos uma posição absoluta com uma altura de 100% e uma largura de 100%.

Primeiro, abra as configurações do módulo de apresentação superior / frontal e atualize o seguinte:

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]

altura: 100%;
largura: 100%;

Divi Transform Properties on Click

Em seguida, adicione o seguinte código CSS personalizado ao elemento principal:

posição: absoluta! importante; transição: todos os .5s;

Atualize o índice z da seguinte maneira:

Índice Z: 2000

A posição absoluta, combinada com a altura e a largura 100% e o índice z, garante que o módulo de sinopse fique acima da sinopse atrás dele. A propriedade de transição é na verdade a duração da transição das opções de transformação que implantaremos no próximo clique. E o "cursor: ponteiro" é alterar o cursor para que o item pareça clicável para o usuário.

Incluindo opções de transformação e classes customizadas na sinopse frontal

Agora é a hora de adicionar nossas propriedades de transformação ao texto da apresentação antes. Em seguida, adicionaremos as classes CSS personalizadas necessárias ao nosso jQuery para mudar essas propriedades para clicar.

Sob os parâmetros de design do Blurb frontal, adicione as seguintes propriedades de transformação:

Escala de transformação X e Y: 20%

Transforme a origem: centro superior

Lembre-se de que o design da transformação que você vê neste momento será acionado clicando em. Simplesmente aproveitamos o fabricante Divi para obter o design desejado. Nesse caso, o texto da apresentação antes dos contratos e fica centralizado na parte superior como um ícone clicável.

Quando terminar, adicione as duas classes CSS necessárias para atingir o anúncio frontal com o jQuery da seguinte maneira:

Classe CSS: toggle-transform-animation transform_target

(não se esqueça de separar o nome de cada classe com um espaço)

Divi Transform Properties on Click

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]

Em seguida, adicione o seguinte snippet de código CSS personalizado que será usado para ativar e desativar as propriedades de transformação com o jQuery.

.toggle-transform-animation {transformar: nenhum! importante; }

Você notará que as propriedades de transformação de blurb adicionadas anteriormente foram desabilitadas porque esta classe foi aplicada a ela.

Vá agora para Divi> Opções de tema> Integração e adicione o seguinte script jQuery ao cabeçalho do blog:

<Script> jQuery (document) .ready (function () {jQuery () click (function () {jQuery (this) .toggleClass ( 'toggle-transformar-animação') 'transform_target ..';});}); </ Script>

Vamos ver o resultado final.

Você pode usar este exemplo para criar designs ainda mais impressionantes. Sinta-se livre para compartilhar sua opinião na seção de comentários.

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
2 ações
ação2
chilrear
Enregistrer