Como guiar o usuário através do seu website con intro.js

0

Quando usamos ferramentas on-line, tais como editores de multimídia, gestores de tarefas ou de projetos, entre muitos outros, é comum ver o texto típico onde eles explicam passo a passo as diferentes opções que temos. Neste artigo vamos explicar como orientar os usuários através de seu website com intro.js.

 

Este passo a passo é muito útil para o usuário aprender as funções básicas a serem transmitidas sem ter que olhar qualquer manual. Agora, se considerarmos qualquer tipo de site, seja uma ferramenta online, um blog ou uma página corporativa, o intro.js também será capaz de destacar e facilmente explicar tudo o que queremos, por exemplo, seções de nossa web, um guia através dos serviços, uma explicação de como a sua loja on-line funciona e tudo o que passar por sua cabeça.

code-1689066_960_720

O que necessitamos?

Intro.js javascript plugin disponível no GitHub.

O primeiro passo é colocar na pasta nossos scripts os intro.js de arquivo. À frente do nosso documento HTML que chamamos de CSS e JavaScript arquivos do plugin.

<! – Intro.js CSS -> <link rel = “stylesheet” type = “text / css” href = “css / introjs.css” /> <! – Bibliotecas javascript -> <script type = “text / javascript” src = “js / intro.js”> </ script>

HTML

Podemos usar as caixas de contêiner que você quiser, em nossa demo usamos uma estrutura <div>. Cada seção que você deseja usar como uma etapa deverá ter, pelo menos, os atributos e as etapas de dados de dados de introdução. Na primeira etapa, vamos colocar o número que corresponde e o segundo a descrição. Por exemplo:

<Div dados passo = “1”-introdução de dados = “Lorem ipsum dolor sit amet”> <! – O conteúdo aqui -> </ div>

html-1714767_960_720

No nosso exemplo, ter colocado o código javascript no botão serve para iniciar a demonstração. Como se segue:

<A onclick = “javascript :. IntroJs () setOptions ({ ‘skipLabel’ ‘Jump’, ‘nextLabel’ ‘Próximo’ ‘prevLabel’: ‘anterior’, ‘doneLabel’ ‘Finish’}) começar (. ); ” javascript ‘href =: void (0); “> iniciar a demonstração </a>

Configurações personalizadas

Atributos que podem colocar seções

  • dados intro: obrigatória. Aqui vai intensificar descrição
  • dados passos: Obrigatório (se você tem várias etapas). O número do passo (1, 2, 3 …)
  • dados tooltipClass: class CSS que pode colocar a ponta da ferramenta, onde a descrição definida na data-introdução.
  • dados posições: posição em que a dica de ferramenta aparece. Os valores possíveis são superior, esquerda, direita ou inferior. O padrão é inferior.

Opções e parâmetros que podem ser passados para a função

  • passos: definir as etapas de configuração usando JSON
  • nextLabel: rotular o botão para ir para a próxima etapa
  • prevLabel: rotular o botão para voltar para a etapa anterior
  • skipLabel: rotular o botão para pular etapas (partida)
  • doneLabel: botão de marcador depois de terem completado todas as etapas
  • tooltipPosition: posição padrão da ponta da ferramenta. Os valores possíveis são superior, esquerda, direita ou inferior
  • tooltipClass: para adicionar uma única classe CSS a todos dica
  • exitOnEsc: permitir a conclusão dos passos com a tecla Escape. Valores verdadeiro ou falso
  • exitOnOverlayClick: permitir a conclusão dos passos, clicando fora da etapa de caixa. Valores verdadeiro ou falso
  • showStepNumbers: mostrar o número da etapa em cada dica. Valores verdadeiro ou falso
  • KeyboardNavigation: permitem navegar entre as etapas com o teclado. Valores verdadeiro ou falso
  • showButtons: mostra botões para pular, ao lado, anterior, feito. Valores verdadeiro ou falso

Para ver o funcionamento deste plugin você pode assistir a demo que fizemos no Endeos. Se você tiver qualquer problema, não hesite em deixar um comentário.

 

E aí, gostou das dicas? Compartilhe aqui nos comentários quais são as suas.

 

Deixe uma resposta