Como adicionar animação na rolagem no Elementor (como Apple AirPods)
Publicados: 2022-07-21Procurando uma maneira de adicionar animação na rolagem no Elementor, como a Apple e a Sony usam em seus sites?
Embora o Elementor Pro inclua todos os tipos de efeitos de animação por meio do recurso Motion Effects, ele não permite criar uma sequência de imagens realmente envolvente em efeitos de rolagem como os que você vê no site da Apple (além de muitos outros). Por exemplo, a página AirPods Pro .
Com o plug-in Scrollsequence, você pode adicionar facilmente esses tipos de animações de rolagem cinematográfica ao Elementor ( incluindo a versão gratuita do Elementor ).
É difícil descrever em palavras, então confira o exemplo abaixo ( a animação se move conforme o visitante rola a página ):
Se você quiser saber mais sobre o Scrollsequence em geral, leia nossa análise completa do Scrollsequence.
Neste post, no entanto, vamos nos concentrar especificamente em como adicionar animação na rolagem no Elementor usando Scrollsequence.
Vamos cavar!
Como criar animações de rolagem cinematográfica no Elementor com Scrollsequence
Aqui está uma visão geral das etapas envolvidas – continue lendo para o tutorial detalhado:
- Instale o plugin Scrollsequence
- Crie sua animação
- Adicione a animação de rolagem ao Elementor
1. Instale o plug-in Scrollsequence
Para começar, você deseja instalar o plug-in Scrollsequence em seu site Elementor.
Scrollsequence tem uma versão gratuita no WordPress.org, bem como uma versão premium que adiciona mais recursos. A versão gratuita permite configurar animações básicas com até três cenas e um máximo de 100 imagens por cena, enquanto a versão premium remove todos os limites e também adiciona animações e recursos mais avançados.
Scrollsequence – Plugin de animação de imagem de rolagem cinematográficaVersão atual: 1.2.7
Última atualização: 9 de maio de 2022
scrollsequence.1.2.7.zip
Você também pode experimentar todos os recursos premium gratuitamente com uma avaliação gratuita de 14 dias, para que não precise pagar nada apenas para testá-lo.
Se você decidir que deseja a versão premium após o teste, ela começa em US $ 69,99. No entanto, você pode usar nosso cupom exclusivo Scrollsequence para economizar 20%:
Hospedagem WordPress 20i
Detalhes
Desconto exclusivo de 50% no 20i WordPress Hosting, apenas para leitores do WP Mayor.
Astra
Detalhes
Obtenha um desconto exclusivo de 10% no Astra Pro, no pacote Essential e no pacote Growth.
Promoção de aniversário do Astra
Detalhes
25% de desconto nos pacotes Astra Pro ou Astra Agency, além de uma entrada gratuita em um sorteio para ganhar um iMac novinho em folha!
Autonome
Detalhes
Desconto exclusivo de 10% no Autonami – Gerencie relacionamentos com clientes usando marcação, segmentação e transmissões sem sair do WordPress.
Avada
Detalhes
Avada é o melhor construtor de sites WordPress. Confiável por iniciantes, profissionais de marketing e profissionais, construído com usabilidade e desempenho em mente.
Celeiro2
Detalhes
Os leitores do WP Mayor obtêm um desconto adicional de 5% na oferta de 30% da Black Friday! Isso será aplicado automaticamente no checkout.
Construtor de castores
Detalhes
Ganhe 25% de desconto no Beaver Builder - o construtor de páginas do WordPress que você pode confiar para o seu negócio.
Bluehost
Detalhes
Bluehost é nosso provedor de hospedagem compartilhada WordPress recomendado. Ganhe até $ 15 de desconto por mês na hospedagem compartilhada Bluehost.Domínio grátis com Bluehost
Detalhes
Obtenha seu registro de domínio gratuito ao se inscrever na hospedagem econômica e confiável da Bluehost.
Boletim
Detalhes
20% de desconto em todos os planos da Bulletin! O plugin de banner de anúncio mais fácil e poderoso para o seu site WordPress.
Elementor Pro
Detalhes
Junte-se a uma comunidade de mais de 8 milhões de profissionais que constroem sites, colaboram e crescem junto com a plataforma de criação web nº 1 para WordPress.
EngineThemes
Detalhes
Ganhe 35% OFF EngineThemes - Temas de aplicativos WordPress feitos por especialistas para o seu ofício.
Plugin Essencial
Detalhes
Ganhe 15% de desconto no pacote Essential Plugin.
Pronto tudo em um
Detalhes
1 mês GRÁTIS para todos os novos clientes na solução Pronto All-in-one, um dos principais temas de fotografia para WordPress.
Marmota
Detalhes
Desconto exclusivo de 15% em Groundhogg.
Growanizer
Detalhes
30% de desconto exclusivo no Growanizer – a nova geração de vendas inteligentes para WooCommerce.
Presença Humana
Detalhes
Desconto exclusivo de 20% na presença humana – interrompa os checkouts de bots e crie spam sem afetar a experiência do usuário.
IconicWP
Detalhes
Nesta Black Friday, você pode obter até 40% de desconto nos plug-ins e pacotes de plug-ins WooCommerce que aumentam as vendas da IconicWP.IconicWP
Detalhes
Neste mês do WooCommerce, ganhe até 15% de desconto nos plug-ins e pacotes de plug-ins WooCommerce que aumentam as vendas da IconicWP.
Kbucket
Detalhes
Ganhe 40% de desconto no plugin KBucket - crie um hub de conteúdo personalizável.
Linguise
Detalhes
20% de desconto na Linguise - Aumente o tráfego do seu site com traduções instantâneas em mais de 80 idiomas.
Web líquida
Detalhes
35% OFF por 4 meses na hospedagem gerenciada do WordPress.Web líquida
Detalhes
Ganhe 33% de desconto nos especialistas em hospedagem WooCommerce gerenciados pela Liquid Web.
Widget de vídeo Magnifi
Detalhes
Incorpore, personalize e faça videochamadas com segurança com o Magnifi Video Widget do seu site em minutos.
Master Addons para Elementor
Detalhes
Desconto exclusivo de 50% em Master Addons para Elementor.
Cola de boletim informativo
Detalhes
O Newsletter Glue conecta seu serviço de e-mail ao WordPress para que você possa publicar boletins da mesma forma que publica posts de blog!Ganhe 15% de desconto na sua primeira compra.
Notificação X
Detalhes
A melhor solução de marketing de prova social e FOMO confiável por mais de 30.000 empresas em todo o mundo.
OceanWP
Detalhes
O tema WordPress que oferece mais!
Encomendável
Detalhes
Leve o pedido online a um nível totalmente novo. Obtenha o melhor preço em Orderable com o código WPMAYOR .
Outfunnel
Detalhes
Ganhe 25% de desconto nos primeiros 3 meses no Outfunnel – acompanhe as visitas ao site e sincronize os envios de formulários para o seu CRM.
Página de pagamento
Detalhes
15% de desconto na página de pagamento.
PeepSo
Detalhes
Ganhe 10% de desconto em um pacote anual de PeepSo.
Rápido
Detalhes
Ganhe 20% de desconto nos primeiros dois meses em todos os pacotes do QuicqSequência de rolagem
Detalhes
Obtenha um desconto exclusivo de 20% no Scrollsequence com o cupom WPMAYOR20. Crie sua animação de rolagem em minutos.
Pronto para loja
Detalhes
Ganhe 20% de desconto exclusivo no ShopReady.
Spotlight PRO
Detalhes
Ganhe 20% de desconto no Spotlight PRO para dobrar o impacto do seu conteúdo no Instagram!
Venda Estelar
Detalhes
Obtenha 40% de desconto em todos os plugins IconicWP, incluindo seus pacotes (obtenha um enorme desconto de $ 199 no All Access Bundle)!
Venda Estelar
Detalhes
Ganhe 40% de desconto no Events Calendar Pro - Calendários, emissão de ingressos e ferramentas poderosas do WordPress para gerenciar seus eventos do início ao fim.
Tripetto Pro
Detalhes
Ganhe 10% de desconto nas licenças Tripetto Pro.
WP ilimitado
Detalhes
Obtenha um desconto de 20% no seu primeiro mês de UnlimitedWP.
Compositor Visual
Detalhes
Ganhe 10% de desconto no Visual Composer - Crie seu site WordPress hoje. Comece fácil. Construa rápido.WooFunnels
Detalhes
Dobre seus lucros nesta alta temporada! Grandes economias no WordPress Funnel Builder & Marketing Automation Engine do WooFunnels!
WP Adminify
Detalhes
Desconto exclusivo de 30% no WP Adminify – um kit de ferramentas poderoso para o seu painel do WordPress.
Bônus de WP
Detalhes
10% de desconto no WP Buffs – seu parceiro técnico 24 horas por dia, 7 dias por semana, para planos de cuidados e serviços de manutenção.
WP Chamar Atenção
Detalhes
Economize 40% em edições ilimitadas do Draw Attention - a ferramenta nº 1 para criar imagens interativas no WordPress.
Motor WP
Detalhes
Ganhe 4 meses grátis nos planos anuais ou 20% de desconto no primeiro mês nos planos mensais.
Gerenciador de eventos WP
Detalhes
Ganhe 10% de desconto no WP Event Manager - Calendário, emissão de ingressos e ferramentas poderosas do WordPress para gerenciar seus eventos.
WP Migrate DB Pro
Detalhes
Nova oferta ao cliente — Economize até 50% em seu primeiro ano do WP Migrate DB Pro para uso individual. O WP Migrate DB Pro permite que você copie todo o seu site WordPress de um ambiente para outro com um clique em seu painel.
WP Webhooks Pro
Detalhes
Desconto exclusivo de 15% no WP Webhooks Pro. Estenda seu site com o sistema de webhook mais poderoso. (O desconto se aplica ao primeiro período de cobrança).
Plugins Yith WooCommerce
Detalhes
Compre tudo com 30% de desconto! Sem cupons necessários.2. Crie sua animação
Depois de instalar o plugin, vá para Scrollsequence → Add New Scrollsequence para configurar sua primeira animação de rolagem.
Cada animação consiste em uma ou mais cenas e cada cena conterá várias imagens organizadas em uma sequência. O plugin irá então gerar a animação com base em todas as imagens na sequência.
Uma “cena” é uma sequência de animação completa. Se você decidir adicionar várias cenas, o usuário avançará para a próxima cena depois de percorrer completamente a animação da primeira cena.
Na maioria das situações, você desejará basear as imagens em sua sequência em um vídeo básico. Para converter um vídeo existente em uma sequência de imagens separadas, você pode usar uma dessas ferramentas da documentação do plugin. A opção mais simples é o conversor Ezgif baseado em navegador, mas você obterá melhor qualidade com software dedicado.
Crie cenas e adicione imagens
Depois de criar sua animação de alto nível, clique no botão Adicionar cena para adicionar sua primeira cena.
Isso expandirá um novo conjunto de opções que permitem carregar todas as imagens para sua sequência de animação. Os desenvolvedores recomendam o upload de pelo menos 50-100 imagens por cena para garantir uma animação suave.
Depois de carregar as imagens, você pode usar a opção de classificação para garantir que elas estejam na ordem correta. Se eles não estiverem na ordem correta, sua animação não parecerá correta .
Se você quiser criar outra cena, clique no ícone de mais ao lado da guia Cena 0 .
Adicionar conteúdo fixo e animações
Para adicionar o conteúdo fixo que aparece sobre as imagens de animação, você pode usar a caixa Conteúdo Fixo para o próprio conteúdo.
Em seguida, você pode usar a seção Animação de conteúdo fixo para configurar suas regras de animação. Cobrimos isso em detalhes na Etapa 4 de nossa revisão do Scrollsequence, mas a ideia básica é a seguinte:
- Você adiciona seletores CSS ao conteúdo na caixa Conteúdo Fixo (usando a guia Texto ).
- Você configura suas regras de animação na caixa Animação de conteúdo fixo direcionando esses seletores CSS e também escolhendo o tempo de como animar o conteúdo nesses seletores. Por exemplo, você pode dizer que deseja mostrar determinado texto para as imagens 30-55.
Aqui está um exemplo de como adicionar os seletores CSS ao seu conteúdo:
E aqui está como é configurar as regras de animação:
Além de animar seu conteúdo fixo, você também pode ajustar a duração da imagem.
Defina outras configurações conforme necessário
A configuração de suas cenas, imagens e conteúdo fixo são as partes mais importantes da criação de uma animação.
No entanto, Scrollsequence também oferece algumas outras configurações nesta interface que você pode querer explorar.
Por exemplo, você pode ajustar a escala e o alinhamento da imagem na parte inferior da área de configurações da cena.
Você também obtém algumas configurações gerais na área Scrollsequence Settings da barra lateral. Neste widget, você pode controlar a largura da imagem e o atraso de rolagem, além de adicionar CSS personalizado, se desejar.
Publique sua animação
Para finalizar, clique no botão Publicar para publicar sua animação, assim como faria com um post de blog.
Depois de publicá-lo, você pode encontrar o shortcode desta animação acessando Scrollsequence → Scrollsequence :
Mantenha este código de acesso à mão porque você precisará dele em um segundo para adicionar animação na rolagem no Elementor.
3. Adicione sua animação de rolagem ao Elementor
Quando estiver satisfeito com sua animação de rolagem, você estará pronto para adicioná-la ao seu design Elementor.
Você pode criar um design Elementor separado exclusivamente para a animação de rolagem. Ou você também pode incluir a animação de rolagem como parte de um design maior. Nesse caso, o conteúdo acima e abaixo da animação de rolagem permaneceria estático.
Para começar, inicie o editor Elementor para o conteúdo em que deseja adicionar sua animação de rolagem.
Então, veja como adicionar a animação de rolagem:
- Adicione o widget Shortcode do Elementor onde você deseja que a animação de rolagem apareça.
- Cole o código de acesso da animação ( mais uma vez, você pode encontrá-lo indo em Scrollsequence → Scrollsequence ) .
- Clique no botão Aplicar nas configurações do widget Shortcode para que o Elementor gere uma visualização ao vivo de sua animação no editor.
Você pode experimentar sua animação completa sem sair do editor Elementor - basta rolar para baixo na visualização visual!
E é isso - você acabou de aprender a configurar uma animação de rolagem cinematográfica no Elementor, assim como a Apple faz com muitas de suas páginas de destino.
Se você deseja criar animações adicionais ou adicionar novas cenas à sua animação, basta repetir as etapas acima.
Crie seu primeiro Elementor na animação de rolagem hoje
As pessoas adoram o Elementor por causa da flexibilidade que ele oferece quando se trata de criar seu design.
No entanto, uma coisa que o Elementor não pode fazer por si só é configurar os tipos de cinemáticas nas animações de rolagem que você vê da Apple e de outros.
Ao emparelhar o Elementor com o Scrollsequence, você pode adicionar facilmente esses tipos de animações aos seus designs do Elementor.
Se você quiser experimentá-lo, você tem duas opções:
- Basta usar a versão gratuita do Scrollsequence no WordPress.org.
- Use a avaliação gratuita de 14 dias para acessar todos os recursos premium do Scrollsequence.
Se você decidir que deseja usar a versão premium do Scrollsequence, use nosso cupom exclusivo do Scrollsequence para economizar 20% em seu pedido.
Hospedagem WordPress 20i
Detalhes
Desconto exclusivo de 50% no 20i WordPress Hosting, apenas para leitores do WP Mayor.Astra
Detalhes
Obtenha um desconto exclusivo de 10% no Astra Pro, no pacote Essential e no pacote Growth.Promoção de aniversário do Astra
Detalhes
25% de desconto nos pacotes Astra Pro ou Astra Agency, além de uma entrada gratuita em um sorteio para ganhar um iMac novinho em folha!Autonome
Detalhes
Desconto exclusivo de 10% no Autonami – Gerencie relacionamentos com clientes usando marcação, segmentação e transmissões sem sair do WordPress.Avada
Detalhes
Avada é o melhor construtor de sites WordPress. Confiável por iniciantes, profissionais de marketing e profissionais, construído com usabilidade e desempenho em mente.Celeiro2
Detalhes
Os leitores do WP Mayor obtêm um desconto adicional de 5% na oferta de 30% da Black Friday! Isso será aplicado automaticamente no checkout.Construtor de castores
Detalhes
Ganhe 25% de desconto no Beaver Builder - o construtor de páginas do WordPress que você pode confiar para o seu negócio.Bluehost
Detalhes
Bluehost é nosso provedor de hospedagem compartilhada WordPress recomendado. Ganhe até $ 15 de desconto por mês na hospedagem compartilhada Bluehost.Domínio grátis com Bluehost
Detalhes
Obtenha seu registro de domínio gratuito ao se inscrever na hospedagem econômica e confiável da Bluehost.Boletim
Detalhes
20% de desconto em todos os planos da Bulletin! O plugin de banner de anúncio mais fácil e poderoso para o seu site WordPress.Elementor Pro
Detalhes
Junte-se a uma comunidade de mais de 8 milhões de profissionais que constroem sites, colaboram e crescem junto com a plataforma de criação web nº 1 para WordPress.EngineThemes
Detalhes
Ganhe 35% OFF EngineThemes - Temas de aplicativos WordPress feitos por especialistas para o seu ofício.Plugin Essencial
Detalhes
Ganhe 15% de desconto no pacote Essential Plugin.Pronto tudo em um
Detalhes
1 mês GRÁTIS para todos os novos clientes na solução Pronto All-in-one, um dos principais temas de fotografia para WordPress.Marmota
Detalhes
Desconto exclusivo de 15% em Groundhogg.Growanizer
Detalhes
30% de desconto exclusivo no Growanizer – a nova geração de vendas inteligentes para WooCommerce.Presença Humana
Detalhes
Desconto exclusivo de 20% na presença humana – interrompa os checkouts de bots e crie spam sem afetar a experiência do usuário.IconicWP
Detalhes
Nesta Black Friday, você pode obter até 40% de desconto nos plug-ins e pacotes de plug-ins WooCommerce que aumentam as vendas da IconicWP.IconicWP
Detalhes
Neste mês do WooCommerce, ganhe até 15% de desconto nos plug-ins e pacotes de plug-ins WooCommerce que aumentam as vendas da IconicWP.Kbucket
Detalhes
Ganhe 40% de desconto no plugin KBucket - crie um hub de conteúdo personalizável.Linguise
Detalhes
20% de desconto na Linguise - Aumente o tráfego do seu site com traduções instantâneas em mais de 80 idiomas.Web líquida
Detalhes
35% OFF por 4 meses na hospedagem gerenciada do WordPress.Web líquida
Detalhes
Ganhe 33% de desconto nos especialistas em hospedagem WooCommerce gerenciados pela Liquid Web.Widget de vídeo Magnifi
Detalhes
Incorpore, personalize e faça videochamadas com segurança com o Magnifi Video Widget do seu site em minutos.Master Addons para Elementor
Detalhes
Desconto exclusivo de 50% em Master Addons para Elementor.Cola de boletim informativo
Detalhes
O Newsletter Glue conecta seu serviço de e-mail ao WordPress para que você possa publicar boletins da mesma forma que publica posts de blog!Ganhe 15% de desconto na sua primeira compra.
Notificação X
Detalhes
A melhor solução de marketing de prova social e FOMO confiável por mais de 30.000 empresas em todo o mundo.OceanWP
Detalhes
O tema WordPress que oferece mais!Encomendável
Detalhes
Leve o pedido online a um nível totalmente novo. Obtenha o melhor preço em Orderable com o código WPMAYOR .Outfunnel
Detalhes
Ganhe 25% de desconto nos primeiros 3 meses no Outfunnel – acompanhe as visitas ao site e sincronize os envios de formulários para o seu CRM.Página de pagamento
Detalhes
15% de desconto na página de pagamento.PeepSo
Detalhes
Ganhe 10% de desconto em um pacote anual de PeepSo.Rápido
Detalhes
Ganhe 20% de desconto nos primeiros dois meses em todos os pacotes do QuicqSequência de rolagem
Detalhes
Obtenha um desconto exclusivo de 20% no Scrollsequence com o cupom WPMAYOR20. Crie sua animação de rolagem em minutos.Pronto para loja
Detalhes
Ganhe 20% de desconto exclusivo no ShopReady.Spotlight PRO
Detalhes
Ganhe 20% de desconto no Spotlight PRO para dobrar o impacto do seu conteúdo no Instagram!Venda Estelar
Detalhes
Obtenha 40% de desconto em todos os plugins IconicWP, incluindo seus pacotes (obtenha um enorme desconto de $ 199 no All Access Bundle)!Venda Estelar
Detalhes
Ganhe 40% de desconto no Events Calendar Pro - Calendários, emissão de ingressos e ferramentas poderosas do WordPress para gerenciar seus eventos do início ao fim.Tripetto Pro
Detalhes
Ganhe 10% de desconto nas licenças Tripetto Pro.WP ilimitado
Detalhes
Obtenha um desconto de 20% no seu primeiro mês de UnlimitedWP.Compositor Visual
Detalhes
Ganhe 10% de desconto no Visual Composer - Crie seu site WordPress hoje. Comece fácil. Construa rápido.WooFunnels
Detalhes
Dobre seus lucros nesta alta temporada! Grandes economias no WordPress Funnel Builder & Marketing Automation Engine do WooFunnels!WP Adminify
Detalhes
Desconto exclusivo de 30% no WP Adminify – um kit de ferramentas poderoso para o seu painel do WordPress.Bônus de WP
Detalhes
10% de desconto no WP Buffs – seu parceiro técnico 24 horas por dia, 7 dias por semana, para planos de cuidados e serviços de manutenção.WP Chamar Atenção
Detalhes
Economize 40% em edições ilimitadas do Draw Attention - a ferramenta nº 1 para criar imagens interativas no WordPress.Motor WP
Detalhes
Ganhe 4 meses grátis nos planos anuais ou 20% de desconto no primeiro mês nos planos mensais.Gerenciador de eventos WP
Detalhes
Ganhe 10% de desconto no WP Event Manager - Calendário, emissão de ingressos e ferramentas poderosas do WordPress para gerenciar seus eventos.WP Migrate DB Pro
Detalhes
Nova oferta ao cliente — Economize até 50% em seu primeiro ano do WP Migrate DB Pro para uso individual. O WP Migrate DB Pro permite que você copie todo o seu site WordPress de um ambiente para outro com um clique em seu painel.WP Webhooks Pro
Detalhes
Desconto exclusivo de 15% no WP Webhooks Pro. Estenda seu site com o sistema de webhook mais poderoso. (O desconto se aplica ao primeiro período de cobrança).Plugins Yith WooCommerce
Detalhes
Compre tudo com 30% de desconto! Sem cupons necessários.Você ainda tem alguma dúvida sobre como adicionar animação na rolagem no Elementor? Dê-nos um grito na seção de comentários e deixe-nos saber o que está em sua mente.