Animação

Adicionando um Elemento Animado ao site


WdNAnimado-2.gif


Com o "Elemento Animado" do Construtor de Sites Builderall Builder, você consegue adicionar contadores e barras de progresso animadas, deixe sua tela mais dinâmica e chame a atenção do visitantes enquanto navegam pelo seu site! 







Como adicionar um Elemento Animado?  

Passo 1 - Acesse o site e a página que deseja adicionar o Elemento Animado no Construtor de Sites Builderall Builder.

Passo 2 - Escolha um painel em sua página ou adicione um novo para a configuração do elemento.

Passo 3 - Acesse o menu lateral direito do construtor de sites; selecione a opção adicionar e clique na área de elementos; selecione a opção "Elementos Animados". 



Passa 4 - Selecione um entre os três tipos de elementos animados disponíveis no construtor de sites e arraste até o painel desejado. 

Adicionar.gif



Como editar os Elementos Animados?

Antes de aprendermos as opções de configurações, vamos conhecer o submenu indicado ao selecionar o elemento animado. 


Salvar elemento - selecione para salvar o elemento criado como um "elemento pessoal" e utilizá-lo em outros sites e páginas sem a necessidade de repetir todas as configurações. 


Camada abaixo/acima - selecione para mover o elemento entre as camadas do painel e ajustar a sobreposição dos elementos. 


Elemento central -
selecione para ajustar automaticamente o elemento no centro do painel/caixa que ele foi adicionado.


Elemento clone -
selecione para duplicar o elemento animado selecionado.  


Ocultar elemento - selecione para adicionar o elemento na parte de "ocultados" do site, ocultar não é sinônimo de deletar o seu elemento, elementos ocultos constam no carregamento da página e podem ser adicionados novamente ao site quando desejar. 


Excluir - selecione para deletar o elemento criado. 


Editar elemento - selecione para acessar o menu de opções de configurações externas do elemento. 



Opções de edições dos elementos animados: 






Largura máxima no tablet: configure a largura máxima do                            elemento na versão tablet, caso habilitada em seu site.   

• Cores em Geral:
configure as cores do elemento adicionado.

• Borda:
crie uma borda para o seu elemento de diferentes tamanhos,             formas e cores. 

• Raio: configure os cantos do seu elemento, eles podem ser                           quadrados, arredondados ou completamente circulares. 

• Texto do contador:
configure o número inicial, final, o tempo de
   contagem entre esses números e todas as configurações voltadas
   ao texto do seu contador. 

• Sombra:
crie e configure uma sombra para o elemento animado.

• Configuração de tags:
função utilizada para tags em scripts externos.
  O atributo tag deve ser utilizado somente por usuários experientes.
  Com essa tag é possível manipular os elementos através do seletor
  data-tag.

• Avançado:
alternativa para as configurações de: camada de                           posicionamento e salvar como elemento pessoal. 

 

 






Pronto! Finalizamos assim a configuração do nosso tutorial; configure quantos elementos animados desejar em um único ou em diferentes painéis e aproveite da melhor forma possível esse recurso no Construtor de Sites Builderall Builder! Não se esqueça de salvar e republicar sua página antes de realizar os testes.


Avalie a nossa Central de Ajuda, sua opinião é importante para nós! 

Faça seu negócio decolar 🚀
Equipe Builderall




Como ativar as animações em meu sistema operacional?


Está tentando configurar as opções de animações nos elementos do seu site no Cheetah, porém aparece um aviso de erro? Não se preocupe! Esse erro ocorre devido à opção de "permitir animações" do seu sistema operacional estar desabilitado por padrão, refletindo no Construtor de Sites Cheetah, que não terá permissão, pelo seu próprio sistema, para mostrar as animações selecionadas corretamente.








Vamos aprender a como ativar as animações em cada sistema operacional? Siga as instruções apenas do seu sistema operacional!  

Windows 7                                                                                                                             windows.png

Passo 1: Acesse o painel de controle do Windows 7.
Passo 2: Acesse a opção "Facilidade de Acesso".
Passo 3: Escolha a opção do tópico "Facilite a visualização do computador".
Passo 4: Ative a opção "Ativar todas as animações (quando possível)".

Windows 10                                                                                                                          windows-(1).png

Passo 1: Acesse as "Configurações" do Windows 10
Passo 2: Acesse a opção "Facilidade de Acesso".
Passo 3: Acesse no menu lateral em "Visão" a opção "Tela". 
Passo 4: No tópico "Simplificar e personalizar o Windows", ative a opção "Mostrar animações no Windows".

MacOS e IOS                                                                                                                        logotipo-da-apple.png

MacOS

Passo 1: Acesse as "Preferências do Sistema" no MacOS. 
Passo 2: Acesse a opção "Acessibilidade".
Passo 3: Acesse a área de "Exibição". 
Passo 4: Desmarque a opção "Reduzir movimento". 

IOS

Passo 1: Acesse as "Configurações" do IOS. 
Passo 2:
Acesse a opção "Acessibilidade" dentro da área "Geral".
Passo 3: Desmarque a opção "Reduzir movimento". 

GTK/GNOME (Linux)                                                                                                             linux.png

Passo 1: Acesse o painel de "Ajustes" do Linux.
Passo 2: Acesse a opção "Aba Geral" ou "Aparência" (O nome varia dependendo da versão do seu Linux).
Passo 3: Ative a opção de "Animações" na mesma aba. 

Android 9+                                                                                                                            android.png

Passo 1: Acesse as "Configurações" do seu Android.
Passo 2: Acesse a opção "Acessibilidade"
Passo 3: Desmarque a opção "Remover animações". 



Após ativar as animações, basta retornar ao Cheetah e testar a configuração da animação em seus elementos novamente! 


Avalie a nossa Central de Ajuda, sua opinião é importante para nós! 

Faça seu negócio decolar 🚀
Equipe Builderall


Lottie Files

Design-sem-nome-1--unscreen.gif
O que é a Lottie Files? 

O termo "Lottie" refere-se a um formato de arquivo de animação baseado em JSON. Esse tipo de arquivo se destaca por ser pequeno, porém sem comprometer a alta qualidade das animações, funciona em qualquer dispositivo e pode ser ampliado ou reduzido sem pixelização. Dessa forma é possível utilizar animações em qualquer plataforma com a mesma facilidade de usar imagens estáticas. 

Com a plataforma externa "Lottie File's" é possível criar, editar, procurar arquivos já prontos de animações, entre outras opções para arquivos Lottie. Aprenda neste tutorial a como adicionar esse estilo de arquivo diretamente ao seu site no Builderall Builder e crie experiências que conectam, divertem e envolvem os seus visitantes. 

Curiosidade! O termo "Lottie" é uma homenagem a Charlotte "Lotte" Reiniger, uma pioneira alemã da animação em silhueta.

Atenção! A plataforma externa Lottie Files não possui tradução para a língua portuguesa. 


 

Como adicionar animações da Lottie Files no meu site no Builderall Builder?


Passo 1
- Acesse o site da Lottie Files; faça o login em sua conta ou crie uma nova conta. 

Passo 2
- Acesse a área de "Biblioteca de Animações Gratuitas". A Lottie Files oferece diferentes opções para adquirir animações: contratação de ilustradores, compra de ilustrações especificas, animações liberadas através do plano pro e animações no plano gratuito. Acesse a área de animações gratuitas através do menu superior em "Products" > "Animations" > "Free Animations



Passo 3
- Ao encontrar uma animação que você goste, clique em cima para abrir o pop-up de opções da animação. A plataforma Lottie Files oferece diferentes opções para a animação ao abrir pop-up, nesse tutorial, vamos focar nas opções que permitem adicionar a imagem ao site no Builderall Builder. É possível adicionar a animação selecionada de duas formas: 

1º Forma: 

• Copie a URL da animação em "Lottie Animation URL"



• Acesse o seu site no construtor de sites Builderall Builder; escolha um painel em sua página ou adicione um novo para a configuração do elemento; acesse o menu lateral direito do construtor de sites; selecione a opção Adicionar e clique na área de Elementos; selecione a opção "Lottie File":



• Selecione a animação exemplo e arraste até o local do painel que deseja adicionar a animação:

Gif---Lottie.gif



• Abra a área de edições do elemento no Builderall Builder; selecione a aba de "Configurações"; cole a URL copiada no campo "External url": 

Gif---Lottie-2.gif

A animação será adicionada automaticamente no elemento do painel. 



2° Forma: 


• Clique na área de "Download" no menu superior do pop-up, entre as opções de download, selecione o arquivo "Lottie JSON". 



• Acesse o seu site no construtor de sites Builderall Builder; escolha um painel em sua página ou adicione um novo para a configuração do elemento; acesse o menu lateral direito do construtor de sites; selecione a opção Adicionar e clique na área de Elementos; selecione a opção "Lottie File":




• Selecione a animação exemplo e arraste até o local do painel que deseja adicionar a animação:

Gif---Lottie.gif



• Abra a área de edições do elemento no Builderall Builder ; selecione a aba de "Configurações"; clique na opção "Lottie File" para acessar a área de diretório das animações, nessa área é possível: realizar o upload de uma nova animação em JSON ou acessar animações adicionadas anteriormente:



• Acesse a área de "Upload file"; clique no botão "escolher arquivo" e selecione o arquivo que deixa realizar o upload; para confirmar o envio do arquivo ao diretório, selecione a opção "Enviar Lottie File": 

A animação será adicionada automaticamente a área de "List Files", selecione a animação desejada para substituir o elemento adicionado no painel. 



Como editar a animação escolhida?
Antes de aprendermos as opções de configurações para a animação no Builderall Builder, vamos conhecer o submenu indicado ao selecionar a animação. 


Salvar elemento - selecione para salvar o elemento criado como um "elemento pessoal" e utilizá-lo em outros sites e páginas sem a necessidade de repetir todas as configurações. 


Camada abaixo/acima - selecione para mover o elemento entre as camadas do painel e ajustar a sobreposição dos elementos. 


Elemento central - 
selecione para ajustar automaticamente o elemento no centro do painel/caixa que ele foi adicionado.


Ocultar elemento - selecione para adicionar o elemento na parte de "ocultados" do site, ocultar não é sinônimo de deletar o seu elemento, elementos ocultos constam no carregamento da página e podem ser adicionados novamente ao site quando desejar. 


Excluir - selecione para deletar o elemento criado. 


Editar elemento - selecione para acessar o menu de opções de configurações externas do elemento. 



Opções de edição para animações Lottie File:






Configurações: adicionar a animação deseja e altere as opções de "loop" e
   "controles" da animação.  
   
Tamanho: configure a altura e largura do elemento adicionado na versão
  desktop; para a versão mobile e tablet (caso habilitada) é possível configurar
  apenas a altura.

Configurações de Fundo: altere a cor de fundo da animação adicionada.

• Tag: função utilizada para tags em scripts externos. O atributo tag
   deve ser utilizado somente por usuários experientes. Com essa
   tag é possível manipular os elementos através do seletor data-
   tag.

• Camadas: alternativa para a configuração de posicionamento das
   camadas. 

• Avançado: alternativa para as configurações de salvar a imagem
  como elemento pessoal



Pronto! Finalizamos assim a configuração do nosso tutorial; configure quantas animações Lottie desejar em um único ou em diferentes painéis e aproveite da melhor forma possível esse recurso no Construtor de Sites Builderall Builder! Não se esqueça de salvar e republicar sua página antes de realizar os testes.


Avalie a nossa Central de Ajuda, sua opinião é importante para nós! 

Faça seu negócio decolar 🚀
Equipe Builderall