Inserir Animações

Com o uso da animação no web design cria-se uma sensação de movimento, pois gera fluidez e dinamismo na experiência de usuário e dinamismo na experiência de usuário. A animação tem sido também uma das principais tendências do web design nos últimos anos, o que significa que os visitantes de um web site já esperam ver alguma animação nas suas páginas. Por isso, é imperativo perceber como inserir e editar animações ao introduzir conteúdo simples no web site.

Como inserir animações

Após efetuar o login ao site, aparecerá no canto superior direito, uma "Roda dentada", que é precisamente, o método de entrada para o modo de edição no frontoffice.

Ao clicar na roda dentada, irá ficar disponível um número de funcionalidade. Para poder adicionar conteúdo simples ou secções de conteúdo. Clique em "Editar conteúdos" para o site ficar em modo de edição.

Ao passar o cursor por cima dos locais que se encontram com um traço descontínuo, aparecerá um pequeno botão, "Edit" que ao pressionar, será possível adicionar novos conteúdos onde for necessário.

Ao clicar em "Edit" poderá editar o conteúdo que incluído até ao momento. Quando se trata de uma imagem, por exemplo, para se adicionar uma animação a uma imagem basta, após clicar na mesma, pressionar a opção "More" situada no canto inferior direito da imagem.

Após clicar em "More", aparecem algumas opções de edição, entre elas, "SETTINGS", a opção que se deve clicar para que se possa adicionar animação ao conteúdo que se pretende animar.

De seguida, no lado direito do ecrã, são muitas as opções de edição de conteúdo, sejam elas de texto como também de imagem. Ao clicar em "more", no fundo de todas as opções disponíveis, surge a opção "ANIMATION", que se clica para se poder adicionar uma certa determinada animação ao conteúdo pretendido.

Após clicar em "ANIMATION" surgem inúmeras opções de animação, basta escolher, diante de todas, a que mais se adequa perante as necessidades pretendidas.

Após optar por uma animação, é possível também escolher qual a duração, "Duration", da animação e ainda qual o atraso que essa animação tem perante a animação anterior, "Delay".

Depois de todos os fatores anteriores, executados, para finalizar, é necessário testar a animação "text" para perceber se tudo se apresenta tal como foi previamente escolhido nas opções acima e ainda clicar no visto de "Animate Once" para que a animação decorra somente uma vez ao navegar no site.

Após a inserção da animação, é estritamente necessário guardar todo o processo realizado:

• Após terminar de inserir ou editar conteúdo, deve clicar no botão verde "Save", no canto superior esquerdo da caixa "Click to add content";

• Depois de clicar em "Save" para guardar todo o processo, ou "Cancel" se pretender apagar todo o processo realizado, deve clicar no botão na lateral direita, "Roda dentada", para poder abrir o menu principal;

• No menu "Roda dentada", deve clicar em "Publicar página" e depois no botão "Guardar" para poder guardar todo o processo desenvolvido e para que o mesmo seja visível ao visitante do website. Se clicar em "Guardar" sem antes deixar acionado o botão "Publicar página", o processo desenvolvido vai ficar guardado mas não irá ser visível para quem visita o website, por isso, não é aconselhado guardar as edições feitas em frontoffice sem antes acionar o botão "Publicar página".

Tutorial - Assista ao video abaixo para mais facilmente compreender como criar secções de conteúdo: