5 Dicas

para criar experiências interativas com o ion

5 Dicas

para criar experiências interativas com o Ion

5 Dicas

para criar experiências interativas com o ion

O Ion é um grande aliado dos profissionais de marketing e designers. Utilizando esta ferramenta, é possível criar experiências de conteúdo interativo incríveis sem o uso de código. Você pode começar do zero ou usar um template do Quick Start.
 
Se você está dando os primeiros passos no Ion, e ainda não está familiarizado com a ferramenta, continue lendo! 
 
Neste infográfico interativo, você vai encontrar 5 dicas preciosas que vão te ajudar na hora de criar questionários, calculadoras, ebooks, infográficos interativos e outros formatos interativos.

01.

Trabalhando com texto

O Ion permite que você crie diferentes estilos de textos sem precisar usar o HTML.
Clique para saber mais >

01. Trabalhando com texto

Dicas

Ao trabalhar com o texto em sua página configure corretamente as heading tags

H1,

H2,

H3...

Para mudar o estilo do texto, priorize utilizar as opções que estão disponíveis no menu Micro-Themes
  • Alignment
    Opções de alinhamento à esquerda, direita e central.  
  • Bullet List
    Oferece opções de marcadores usados ​​em uma lista
  • Color
    Mude facilmente a cor do texto.
  • Fonts
    Altere a fonte usada no texto
Ao copiar o texto de um editor de texto, cole usando Ctrl+Shift+V.
 
Assim o seu texto será colado sem as configurações de formatação anterior e você poderá personalizar o seu texto utilizando o Micro-Theme.

Dicas Avançadas

Adicione um hiperlink no meio de um bloco de texto utilizando o Código-fonte.
<a href="https://SEULINK">SEU TEXTO</a>
Personalize a entrelinha do seu bloco de texto.

Personalize a entrelinha do seu bloco de texto.

line-height:1.0

Personalize a entrelinha do seu bloco de texto.

Sem line-heigh

Personalize a entrelinha do seu bloco de texto.

line-heigh:1.75
Selecione o bloco de texto que você deseja personalizar em: Custom > CSS Styles e adicione “line-height: x.y”
  • ‹ prev
  • next ›
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
< Click para fechar saiba mais

02.

Vá além do uso de imagens

Fotografias e ilustrações são um ótimo modo de ilustrar o seu conteúdo, mas o Ion permite que você vá além e adicione gif e vídeos. 
Click para saber mais >

02. Vá além do uso de imagens

GIFs

Para adicionar gifs na sua experiência, você deve arrastar o ícone de imagens da categoria "Basics" da paleta de ferramentas até a sua página no local em que você quer exibir o gif.
 
Para adicionar o gif na sua biblioteca de imagens, basta arrastar o gif do seu desktop até o editor de imagens e o solte por lá. Você também pode clicar no botão "+Add" para procurar e selecionar uma imagem do seu desktop.

Vídeos

Você pode adicionar um vídeo do YouTube, Vimeo, Brightcove ou Ooyala a sua experiência.
 
Para fazer isso, você deve arrastar o ícone de vídeo da categoria "Interactive" da paleta de ferramentas até a sua página no local em que você quer exibir o vídeo. 
 
Feito isso, você deve definir as configurações dele em "General Settings" na aba de edição e lá você poderá escolher o tipo de vídeo, como Vimeo, YouTube, Brightcove ou Ooyala e, por fim, definir a largura e altura do vídeo.
< Clique para fechar saiba mais

03.

Brinque com o posicionamento dos elementos

Os elementos da sua página podem ser posicionados onde você quiser, mas é preciso estar atento a alguns detalhes.
Click para saber mais >

03. Brinque com o posicionamento dos elementos

Os elementos da sua página podem ser posicionados livremente, mas é preciso estar atento a alguns detalhes.  
 
1° O elemento deve estar dentro de um container
 
2º Você deve liberá-lo clicando no no ícone de tachinha
Pronto, agora você já pode posicionar o elemento em qualquer lugar da página.

Dica:  Ao usar esse recurso, o conteúdo será alinhado de forma absoluta a página. Isso quer dizer que ele permanecerá no mesmo lugar da página, independentemente do tamanho do navegador usado.

 

Por isso utilize esse recurso com certa moderação; teste o preview de visualização em diferentes tamanhos de navegadores. 

< Click para fechar saiba mais

04.

Copie e Cole

Essa pode parecer uma dica simples, mas copiar e colar ajuda a otimizar o tempo construindo experiências Ion.
Click para saber mais >

04. Copie & Cole

Copiar e colar pode parecer uma dica simples, mas vai te ajudar a otimizar tempo construindo experiências Ion.
 
O Ion permite que você copie responsive imagens, grids ou até containers de um criativo para outro. Assim, se você viu uma estrutura em um Quick Start, e gostaria de adicionar a página que está construindo, pode facilmente copiar e colar.

Dica: Antes de copiar um elemento de um Quick Start, análise em LIST como ele foi construído, assim você vai aprender como funciona as hierarquias de dentro do Ion.

< Clique para fechar saiba mais

05.

Não seja tímido com as Tags

O Ion permite que você acompanhe os cliques em diversos elementos da sua página por meio das tags.
Click para saber mais >

05. Não seja tímido com as Tags

Como?

Todos os elementos que podem ser clicados também podem ser marcados para fins de rastreamento. Ao adicionar uma ação a um determinado link ou formulário, você verá a opção “Tag as”. 
 
Para adicionar uma tag ao seu link, basta selecionar uma das tags disponíveis ou criar uma nova tag.

Dicas

  • Quanto mais, melhor: adicione tags a tudo que o visitante possa clicar. Assim você vai entender melhor como as pessoas interagem com o seu conteúdo e poderá otimizar a experiência.
  • Cuide para que suas tags sejam descritivas e objetivas, assim você poderá analisar rapidamente os dados e identificar facilmente quais cliques estão ajudando em sua taxa de conversão.
  • Se você tiver ações semelhantes em uma determinada página, certifique-se de que esses cliques sejam marcados de forma exclusiva. Por exemplo, você pode ter o mesmo CTA no Header e no Rodapé. Nesse caso, você pode diferenciá-las como CTA_Header, CTA_Footer.
Click para fechar saiba mais