Ir para o conteúdo principal

Tutorial Divi: Como Usar Ações de Rolagem - Parte Um

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]

A cada semana, o Elegant Theme oferece novos pacotes de layout Divi gratuitos que você pode usar para o seu próximo projeto. Para um dos pacotes de apresentação, eles também compartilham um caso de uso que ajudará você a levar seu site ao próximo nível. Esta semana, como parte da iniciativa de design de Divi em andamento, mostraremos como usar criativamente as opções de viaduto da Divi para destacar CTAs em suas páginas. Usamos o pacote de serviços de lavanderia Divi e abordaremos três exemplos diferentes de destaque para sua chamada à ação.

exame

Antes de mergulhar no tutorial, vamos examinar rapidamente o que vamos criar, para ter uma ideia.

animação de realização divi.gif

Adicionar uma nova página usando o layout do serviço de lavanderia ou lavanderia

Comece adicionando uma nova página ao seu site e baixe a página inicial da lavanderia. Os três exemplos que criaremos serão baseados nesta disposição. Depois de ter a abordagem, você pode aplicar esses exemplos a qualquer layout em que esteja trabalhando.

lavanderia demo.jpg

Clone o módulo de texto

Vamos começar com o primeiro exemplo! Transformamos um módulo de texto existente em uma incitação de foco. Essa abordagem só aparecerá na área de trabalho. É por isso que clonamos o módulo inicial para permitir que ele apareça em telas menores sem afetar os efeitos.

clone o módulo text.jpg

visibilidade

Módulo de texto # 1

Continue ocultando o primeiro módulo no tablet e no telefone.

elemento de visibilidade divi.jpg

Módulo de texto # 2

E oculte o segundo módulo na área de trabalho.

desktop de visibilidade divi.jpg

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]

Adicione um efeito de rollover ao módulo de texto da área de trabalho

Adicionar um título de conteúdo 3

Apenas editamos o primeiro módulo de texto, que será aquele que aparece na área de trabalho. Abra o módulo e adicione conteúdo do tópico 3 à área de conteúdo.

modificação do primeiro módulo texte.jpg

Passe o mouse sobre as configurações de texto

Em seguida, vá para as configurações de texto e "oculte" o texto do parágrafo de seu módulo adicionando 0px ao tamanho do texto no rollover.

  • Tamanho do texto: 0px

módulo de parâmetros de texto divi.jpg

Passe o mouse sobre as configurações de texto 2

Faça o mesmo para os parâmetros de texto de sobrecarga 2.

  • Tamanho do texto do título 2: 0px

configuração de cabeçalho 2 divi.jpg

3 título de texto padrão

Em seguida, acesse os parâmetros de texto do tópico 3 e faça as alterações.

  • Cabeçalho 3 Font: Josefin Sans
  • Título 3 Fontes: Semi negrito
  • Tamanho do texto do título 3: 0px

configurando o cabeçalho 3 fonts.jpg

Passe o mouse sobre o cabeçalho de parâmetros de texto 3

Altere o tamanho do texto ao passar o mouse.

  • Tamanho do texto do título 3: 40px

configuração de cabeçalho 3 divi.jpg

Configurações de espaçamento padrão

Em seguida, acesse as configurações de espaçamento e verifique se os seguintes valores de preenchimento personalizados se aplicam:

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]

  • Preenchimento superior: 80px
  • Preenchimento inferior: 50px
  • Preenchimento à esquerda: 40px
  • Estofado à direita: 40px

padding options.jpg

Configurações de espaçamento de passagem

Adicione também uma margem de rolagem personalizada.

  • Margem superior: 50px
  • Margem esquerda: -53.5vw

pairando overflight configuration.jpg

Configurações de borda padrão

Também adicionamos uma borda inferior sem borda.

  • Largura da borda inferior: 0px
  • Cor da borda inferior: # ff947f
  • Estilo da borda inferior: pontilhado

configuração de fronteira divi.jpg

Configurações de borda de sobrevoo

Altere a largura da borda suspensa.

  • Largura da borda inferior: 5px

concentre-se em ctas

Configurações de sombra da caixa padrão

Em seguida, adicione um sombreamento de caixa.

  • Posição Vertical da Sombra da Caixa: 50px
  • Força de desfoque de sombra de caixa: 54px
  • Espalhe a força da sombra da caixa: -32px
  • Cor da sombra: rgba (255,255,255,0)

opção dombres divi.jpg

Configurações de sombra da caixa de depósito

E mude a cor da sombra da caixa.

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]

  • Cor da sombra: rgba (0,0,0,0,2)

configuração de borda no flyover divi.jpg

Transições

Para criar uma transição suave, aumente o tempo de transição nas configurações de transição.

  • Duração da transição: 750ms

transição divi builder block text.jpg

Resumo

Finalmente, neste tutorial estávamos falando sobre a criação de uma animação que destaca uma seção em nossa página Divi. As possibilidades com Divi são quase ilimitadas, usando as diferentes opções (combinações de várias opções diferentes), você será capaz de criar interfaces com uma animação dinâmica e atraente. Não sendo completado, cobriremos a segunda parte deste tutorial mais tarde. Até lá, se você tiver alguma dúvida, sinta-se à vontade para perguntar na seção de comentários.

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.

Cool WordPress temas que eu encontrei em
E há mais temas e modelos 50 000 para você escolher!

De volta ao topo
1 ações
ação1
chilrear
Enregistrer
Whatsapp