Timeline Infographic

A Timeline Infographic é uma experiência única e envolvente de longa página que fornece uma maneira divertida de exibir a linha do tempo de seu produto, serviço, marca ou organização. Possui elementos interativos ao longo da experiência e contagem regressiva no final da página, os visitantes irão navegar e interagir no seu conteúdo enquanto aprendem mais e formam um envolvimento mais profundo com sua marca.

COMPLEXIDADE

Baixa

FORMATO

Infográfico

APLICAÇÃO

Engajamento

Interatividade disponível

Principais features, funcionalidades e elementos interativos utilizados neste template.

Animation

Animation permite a animação de elementos através de microthemes. Um exemplo de uso seria ter uma seção aparecer com animção fade up ao rolar na página.

Anchor Link

Anchor permite vincular uma seção ou elemento de página a um link ou botão específico. Um exemplo seria colocar um Anchor em uma seção de Sobre Nós que se conecte ao link Sobre Nós na barra navegação da página.

Custom Code

O Custom Code lhe permite adicionar interatividade personalizada via Javascript ou CSS ao seu criativo. Um caso de uso para isto seria este script odômetro que é adicionado à página e ao elemento de texto para que ele atue como contagem numérica.

Tabs

As Tabs permitirão que você organize o conteúdo em abas separadas vertical ou horizontalmente. Um caso de uso para isto seria criar uma linha do tempo de eventos organizados por datas, onde cada tab label teria sua própria data e lista de eventos dentro da seção de Tabs.

Passo a Passo

Guia prático e ilustrado para te ajudar a tirar o máximo proveito das features, funcionalidades e elementos interativos disponíveis neste template na hora de editar e personalizar a sua experiência.

Selecione o elemento que você deseja animar.

Sob o painel Animation, escolha o tipo de animação.

Da lista de animações disponíveis, selecione a desejada.

Selecione uma seção onde você deseja que o CTA role e adicione um Anchor.

Atribua ao Anchor um nome único (ex. Seção 1 - Tópico). 

Selecione o botão e, sob o painel de Behavior, selecione o Anchor e atribua uma Tag única.

Selecione o countdown timer para editar as suas configurações.

A partir das configurações no painel Variables, você pode ajustar a data da contagem regressiva na seção End Date. A mensagem que será exibida após a conclusão do timer pode ser ajustada na guia End Message. 

O tamanho da borda, cor, estilo do countdown timer e configurações de texto podem ser alterados dentro de suas respectivas abas.

Para atualizar o conteúdo dentro de cada Tab, comece selecionando-o na tela.

A partir das configurações em Variables, selecione uma aba dropdown que contenha o conteúdo dentro dela. Como no Accordion, você é capaz de editar o Label e a Tag.

Dentro da Tab há uma Responsive Grid de duas colunas, fique à vontade para editar o Responsive Grid, e/ou o conteúdo dentro de suas colunas.

Produção do conteúdo

Documento delineando a estrutura do template para facilitar a produção do conteúdo escrito, desde acessar os direcionamentos estratégicos, a compreender a estrutura textual, até identificar a quantidade de palavras e imagens necessárias para cada etapa da redação.
Template para a Produção do ConteúdoOpens in a new window.

Melhores práticas

Certifique-se de taguear tudo o que pode ser tagueado para que você tenha os dados propriamente coletados e devidamente organizados e identificáveis em seus relatórios de desempenho.

Reveals
Flows
Flowsteps
Links
Tabs
Accordions
Lightboxes
Rotators
Sliders

O ponto de conversão é a medida mais importante para determinar se a taxa de conversão da sua experiência está dentro das expectativas. Recomendamos ter somente um ponto de conversão por conteúdo. Você pode marcar um ponto de conversão a partir de:

Links
Behaviors
Actions

Antes de ir ao ar como seu conteúdo interativo, não deixe de realizar um último controle de qualidade. Esse processo revisará a experiência como um todo, apontando quaisquer ajustes necessários antes da publicação. Seguem os pontos mais importantes a serem conferidos antes do lançamento da experiência:

  • Conferir quaisquer integrações
  • Conferir o ponto de conversão 
  • Conferir o tagueamento
  • Links externos estão funcionando corretamente (abrindo em uma nova aba)
  • Marcar respondentes sempre como novos caso use a experiência em algum evento ao vivo
  • Desmarcar as diretrizes de meta robots (no archive, no follow, no index)
  • Remover path description (se aplicável)
  • Certificar que a fonte de tráfego foi adicionada ao compartilhamento em redes sociais — og URL, Twitter (criar bit.ly), e-mail
  • Depois de publicada, testar postagem no Facebook (se aplicável)

Templates relacionados

Se você gostou deste template, talvez queira conferir também esses outros modelos similares.

Ficou com alguma dúvida?

Ainda com dúvidas ou enfrentando problemas ao lidar com este template? Por favor, não deixe de mandar suas perguntas para que possamos manter essa página constantemente atualizada.