Storyteller

O Storyteller é um template de página inteira focado em engajamento. Logo ao se iniciar a experiência, os leitores recebem uma introdução do conteúdo, incluindo um vídeo de fundo, como forma de instigar a leitura. Proporcionando ao menos 3 tipos diferentes de navegação — Em cima, embaixo e no menu hambúrguer —, o leitor tem a autonomia de saltar entre diferentes páginas a todo momento, sempre que sentir necessidade. Contendo diversos formatos de elementos interativos como tabs, accordions e um pequeno quiz, o Storyteller é ideal para conteúdos mais práticos e que ao mesmo tempo guie o leitor através de uma jornada linear ou não. No final da experiência, existe a opção de fazer o download de um material adicional, após o preenchimento do formulário, criando possibilidades de conversão.

COMPLEXIDADE

Médio

FORMATO

eBook

APLICAÇÃO

Engajamento

Interatividade disponível

Principais features, funcionalidades e elementos interativos utilizados neste template.

Hamburger Menu

O Hamburger Navigation permitirá criar uma lista de itens de navegação ou outros elementos que os usuários podem acessar nas páginas da sua experiência interativa. A lista é mantida oculta e o usuário precisa clicar no menu de hambúrguer (três barras empilhadas) para alternar o menu.

Animation

A animação lhe permitirá animar elementos através de microtemas. Uma aplicação para isso seria ter uma seção desbotada para cima e para dentro de uma página via scroll.

Form

O formulário lhe permitirá construir formulários simples a complexos que contêm diferentes tipos de entradas e alternâncias, e pode ser combinado com regras para criar resultados baseados na lógica. As aplicações de um Formulário são quizzes, assessments, calculadoras e formulários tradicionais.

Flow

O flow permitirá construir elementos interativos por etapas, tais como tabs, accordions e outros elementos, com grande facilidade de personalização. Aplicações e exemplos de seu poder são a capacidade de criar um carrossel de imagens até uma avaliação de uma página que apresenta uma pergunta de cada vez.

Video

O vídeo permitirá que você adicione vídeos do YouTube, Vimeo e outros tipos de vídeo à sua página como elemento de vídeo autônomo ou como fundo da página. Uma aplicação para isto seria um vídeo auto-reproduzido em fundo de um container da seção Hero.

Accordion

Accordion permitirá que você organize o conteúdo verticalmente em seções separadas que se expandem e contraem quando clicadas. Uma aplicação para isto seria criar um FAQ de perguntas relacionadas a produtos ou serviços, onde cada título de accordion teria suas próprias perguntas e a resposta dentro da seção do accordion.

Tabs

Tabs permitirá que você organize o conteúdo em tabs separadas vertical ou horizontalmente. Uma aplicação para isto seria criar uma linha de tempo de eventos organizados por datas, onde cada aba com um título teria sua própria data e lista de eventos dentro da seção.

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.
Para editar a pergunta do questionário, comece por localizar o Flow que engloba os componentes do questionário. 
O quiz é composto por um elemento Form com um Form Field dentro. Cada campo do formulário incluirá um Choice Group e Choices dentro dele. Para editar as opções, comece selecionando uma opção da lista.
Clique no painel Behaviors para abrir a janela Edit. 
Na janela Edit, você pode direcionar as opções para um determinado resultado, ajustando as opções Move to Step sob a aba Behavior in Flow. Você pode escolher entre Previous (Anterior), Next (Próximo), First (Primeiro) e Last (Último). Após selecionar o passo, clique em OK.
Para editar ou adicionar uma nova animação, selecione o elemento na tela que você deseja animar.
Sob a aba Animations, escolha um gatilho de animação no menu suspenso. Se você quiser que uma determinada animação seja continuamente acionada, você precisará escolher no dropdown o Scroll into View (always), além da animação em Loop.
Depois de selecionar a animação Trigger, escolha uma animação da lista.
Você pode optar por remover uma animação clicando no X ao lado da tag azul de animação.
Para alterar um campo no Form, selecione o elemento do Form na tela.
Selecione a caixa de texto dentro do campo Form e clique no painel Data Field à direita
Selecione um novo Data Field da lista e pressione OK
Para alterar o copy dentro da caixa de texto, expanda a aba Pre-Populated Value sob o painel Variables. 
Mude o copy clicando no container Placeholder Text.
Para ajustar o flow, localize primeiro o elemento Flow na tela. Cada elemento de Flow contém Flow Steps. Cada Flow Step será exibido um de cada vez. 
Você pode editar a ordem dos Flow Steps usando o comportamento de Scroll To nos elementos, sob o painel Behaviors. Comece selecionando a Coluna e clicando em Scroll To (Rolar para comportamento) para abrir a janela de edição.
Selecione a âncora que você deseja que o elemento role para então pressionar OK.
Para editar o Video Background, primeiro selecione o Vídeo (Container Background) na página.
Sob o painel de Variables, você pode escolher o tipo de vídeo que estará usando.
Sob as Configurações de Vídeo, você precisa digitar a ID do Vídeo para exibir corretamente o vídeo. Observe que cada tipo de vídeo requer informações pouquíssimas diferentes. Para este exemplo, estaremos usando o Vimeo. Você pode encontrar o ID do Vimeo olhando para os últimos dígitos após o /videos/ tag no link.
Selecione o Accordion na tela para editar o conteúdo dentro dela.
Você pode editar a funcionalidade do accordion expandindo a guia de configurações sob o painel de Variables. Aqui também é onde você pode taguear cada seção do Accordion quando ele for expandido.
Você pode editar os títulos do accordion selecionando-os diretamente na tela ou expandindo as Seções sob o painel de Variables.
Uma vez expandida a seção, você pode selecionar a caixa de texto para editar o copy.
Para editar o conteúdo dentro das Tabs, primeiro selecione-o na tela. 
Sob o painel de Variables, você pode escolher as Tabs para serem Responsivas e se desejar taguear os cliques nas Tabs. 
Você pode editar os títulos das Tabs selecionando-as na tela ou expandindo-as sob o painel Variables.

Para remover uma Tab, abra as configurações da guia no painel Variables e pressione o ícone da lixeira para excluir o Label. Também será necessário excluir qualquer conteúdo dentro do container da Tab na página.

O menu hambúrguer é configurado como uma Reveal em cada passo do Flow. 
Para editar a localização de cada título de navegação, comece selecionando o Container. E sob o painel Behaviors, clique no painel Scroll To para abrir a janela de edição.
Escolha a Âncora para a qual deseja que o elemento de navegação se mova, depois pressione OK.
Para atribuir uma nova âncora, selecione o elemento que você deseja ancorar na tela.
Sob o painel Edit, clique no ícone Âncora para atribuir uma nova âncora, e então pressione OK. Favor observar que os nomes das âncoras não podem ser duplicados.

Produção de 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 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.
Nome
E-mail
Dúvida