Easy Savings Calculator

A Easy Savings Calculator é uma experiência interativa que permite que os usuários explorem seus gastos totais e possíveis economias. Na landing page dessa experiência, há microanimações que acontecem imediatamente e se repetem com a rolagem, revelando blocos com mais informações e links externos, e um formulário para geração de leads na parte inferior. A página de resultados mostra os cálculos finais e as informações adicionais exibidas por meio de abas. A Easy Savings Calculator incentiva os usuários a encontrar suas possíveis economias. 

COMPLEXIDADE

Médio

FORMATO

Calculadora

APLICAÇÃO

Sales Enablement

Interatividade disponível

Principais features, funcionalidades e elementos interativos utilizados neste template.

Reveal Tiles

O Reveal permitirá que você crie conteúdo interativo em dois estágios. Um exemplo de uso seria uma dica de ferramenta de informações, em que em um estado é exibido um ícone de informações, mas quando se passa o mouse sobre ele ou se clica nele, um segundo estado é mostrado, exibindo o texto da dica de ferramenta.

Image Positioning

Em andamento (…)

Tabs

As Tabs permitirão que você organize o conteúdo em abas separadas na vertical ou na horizontal. Um exemplo de uso seria criar uma linha do tempo de eventos organizada por datas, em que cada rótulo de guia teria sua própria data e lista de eventos na seção da aba.

Animation

A animação permitirá que você anime elementos por meio de micro-temas. Um exemplo de uso seria fazer com que uma seção se mova para cima, dentro de uma página, por meio de rolagem.

Inline Block Images

Em andamento (…)

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 substituir ou alterar o ícone da imagem, clique duas vezes no container da imagem, no canto direito do editor de imagens, e selecione < reselect image e, em seguida, selecione Add Images. Para obter uma imagem semelhante à dos outros ícones de revelação, adicione uma imagem de 120x120px.

Para alterar a cor do plano de fundo do reveal trigger, navegue até Micro-Themes e, em plano de fundo, altere a cor. Para alterar a cor da borda do reveal container, selecione o reveal container e navegue até Borders & Corners. Defina uma cor e a espessura.

Para alterar a altura da sobreposição do reveal na seção inicial, selecione a Row em que todas as reveals estão. Navegue até o painel Layout e ajuste a margem superior. Quanto menor o valor, mais alto as revelações se deslocarão para cima. 

Para alterar o local em que o ícone se sobrepõe à imagem, selecione o container externo no qual o ícone está localizado. Navegue até o painel Layout e role para baixo até Position. Quanto mais baixo for o valor superior, mais alto o ícone se moverá. Quanto mais baixo for o valor à direita, mais à direita o ícone se moverá.

Selecione o container Tabs e navegue até o painel Tabs no lado direito. Expanda a próxima guia vazia para adicionar uma nova guia. Selecione +label para adicionar um nome à seção da nova guia.
*Não se esqueça de adicionar uma tag para acompanhamento de seu comportamento.

Para remover um container de Tabs, navegue até o painel de Tabs do lado direito. Expanda a guia que deseja remover e remova-a usando o ícone de lixeira.

Para ajustar o tipo de animação, selecione o elemento com a animação existente. Navegue até o painel Animation no lado direito, defina o trigger como Immediate, scroll into view ou etc. Em seguida, um segundo dropdown aparecerá e selecione o tipo de animação.

Para adicionar uma animação a um elemento, selecione o elemento e navegue até o painel Animation no lado direito. Selecione um gatilho e, em seguida, selecione o tipo de animação.

Selecione a imagem, o texto ou o container e navegue até o painel Layout. Role para baixo até Display e defina-o como Inline-block.

Adicione margens a imagens e containers para que haja espaço entre dois elementos. Para elementos como texto, talvez não seja necessária uma margem.

Template da lógica

Aqui está o template da lógica e um rápido tour em vídeo para facilitar o uso desse template, desde os overviews das regras, passando pela análise das fórmulas, até a edição da lógica e das equações, se necessário.
Template da LógicaOpens in a new window.Assistir rápido tour da lógicaOpens in a new window.

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 *