Crie um tutorial usando o modelo de tutorial popup da base de conhecimento

Este artigo não é mais mantido, portanto seu conteúdo pode estar desatualizado.

Este conjunto de slides foi construído no WebMaker Thimble, essencialmente, um editor "o que você vê é o que você obtém" que também irá hospedar seus makes. Para começar, você precisa de uma conta WebMaker.

  1. Clique aqui para criar uma conta se não tiver uma.
  2. Uma vez que possua uma conta, abra esse link https://binab.makes.org/thimble/knowledge-base-take-8 em uma nova janela do navegador.
  3. Clique no botão Remix para criar seu próprio make.

Agora você deve ter uma janela com um editor de texto completo do código na esquerda e os slides à direita. Thimble Window

Existem diferentes tipos de slides e cada slide individual é marcado com <--! e uma nota com algumas informações sobre ele.

  • Slide de Imagem com texto – Possue uma imagem principal e uma texto que pode estar acima ou abaixo da mesma.
  • Fonte Grande – Todos os textos em letras grandes.
  • Video/iFrame - Insere um vídeo ou iFrame, de até 370 por 208 pixels.
  • Slide de texto – Pequeno texto que pode usar para criar cabeçalhos.
  • Slide de textos com cabeçalho- Use as tags h2 tags para criar cabeçalhos.
  • Slide de listas - Numerada (ol) e listas com marcadores (ul)

Recorte, cole e edite cada slide para que ele se encaixe em seus critérios.

Imagens: Vai precisar de uma pasta pública ou qualquer fonte de imagens que desejar. Eu escolhi o DropBox, mas pode usar qualquer fonte, flicker, etc.

Uma vez que seu conjunto de slides estiver completo você vai inseri-lo no código do botão, em seguida, poderá usar seu conjunto de slides como quiser.

No canto superior direito do Thimble tem um botão "Publicar". Clique nele e siga as instruções para salvar seu make. No final, será dado um link para copiar. Copie o link.

Com esse link em sua área de transferência, abra o Thimble para o botão https://binab.makes.org/thimble/button Cole seu link sobre o espaço existente na linha 16. Você deve ser capaz de clicar no novo botão na WYSIWYG janela à direita.

Altere o nome do botão para o texto desejado na linha 16, editando "Torne-se um escritor técnico Ninja".

Agora selecione o código entre as linhas 9 e 42 e colá-los onde deseja que seu botão aparecesse.

Obrigado!

Essas pessoas ajudaram a escrever este artigo:

Illustration of hands

Torne-se um voluntário

Desenvolva e compartilhe sua especialidade com outras pessoas. Responda perguntas e aprimore nossa base de conhecimento.

Saiba mais