Voltar ao site

7. Palco: configurar, mover, duplicar e excluir elementos

Nesta etapa você aprende a trabalhar com os elementos diretamente no palco: selecionar, usar os botões de ação, arrastar para posicionar, abrir o modal de configurações, duplicar e excluir. Cada elemento pode ser ajustado de forma visual e refinado nas opções do modal.

Pré-requisitos

  • Um projeto aberto no editor com ao menos um elemento no palco.
  • Saber que o elemento selecionado exibe a barra de ações (botões) próxima a ele.

7.1 Selecionando e movendo um elemento

Passo 1: Selecionar um elemento no palco

Clique uma vez no elemento. Quando ele estiver selecionado, o Geppeto mostra os controles de manipulação e os atalhos de ação (Configurar, Mover, Excluir etc.).

Passo 2: Arrastar (mover) pelo corpo do elemento

Com o elemento selecionado, clique e segure no corpo do elemento (área principal) e arraste para a nova posição. Solte o clique para fixar a posição no palco.

Passo 3: Ajuste fino após soltar

  • Use pequenos arrastes para alinhar com outros elementos ou com a grade do palco.
  • Se o elemento “grudar” em alinhamentos, aproveite para manter consistência visual.

7.2 Botões de ação no palco (atalhos rápidos)

Os botões podem variar levemente conforme o tipo de elemento, mas o fluxo padrão é o mesmo: ações rápidas no palco e detalhes no modal.

Passo 1: Configurar elemento (abrir o modal)

Clique em Configurar elemento para abrir o modal de configurações. É aqui que você ajusta conteúdo, aparência e comportamento com precisão, sem depender só do posicionamento visual.

Passo 2: Duplicar

Clique em Duplicar para criar uma cópia do elemento mantendo as mesmas configurações. Depois, arraste a cópia para o lugar desejado e ajuste o que for diferente no modal.

Passo 3: Excluir

  • Clique em Excluir para remover o elemento do palco.
  • Se aparecer confirmação, leia com atenção: a exclusão remove o elemento da composição atual.

Passo 4: Outros botões úteis (quando existirem)

Dependendo do elemento, podem existir atalhos adicionais (ex.: travar edição, alternar visibilidade). Use-os para acelerar o trabalho em layouts complexos.

7.3 Modal de configurações: principais seções (o que cada uma faz)

O modal concentra as opções “de produto” do elemento. Abaixo estão os principais campos/seções que você verá com frequência (nomes podem variar conforme o tipo de elemento).

Passo 1: Abrir o modal a partir do palco

Com o elemento selecionado, clique em Configurar elemento. O modal abre com as opções disponíveis para aquele tipo específico.

Passo 2: Identificação / nome interno

  • Nome / título interno: ajuda você a encontrar o elemento na lista e manter organização (não confundir com texto visível ao aluno).
  • ID / chave (quando houver): útil para integrações, navegação por âncora ou automações — use valores estáveis e sem espaços.

Passo 3: Geral (texto, mídia, dados)

Na seção de Geral, você define o que o elemento mostra: textos, imagens, vídeos, listas, perguntas etc. Este é o núcleo da mensagem pedagógica.

Passo 4: Colors(estilo visual)

Na aba Colors nos temos:

Cores: fundo, texto, borda e estados (hover/ativo) quando existirem. 

Passo 5: Typography (estilo do texto)

Dependendo do elemento (Elementos que contém texto), ele pode ter a seção Typography, nessa seção é possível customizar o estilo do texto disponível nesse elemento.

Passo 6: Padding e margem (espaçamento no palco)

No menu Style podemos encontrar o ajuste de Padding e margem que  controlam respiro interno e espaço externo entre elementos vizinhos.

Passo 7: CSS Avançado

Na sessão Css Avançado temos :

  • Custom css class: possibilidade de definir uma classe CSS para o elemento selecionado
  • CSS avançado (para usuários experientes): Campo onde podemos customizar CSS livremente. Recomendado a usuários que possuem conhecimento em CSS

Passo 8: Acessibilidade e leitura (quando existir)

  • Texto alternativo em imagens: descreve o conteúdo para leitores de tela.
  • Rótulos em botões/links: deixe a ação clara (“Próximo”, “Baixar material”, “Iniciar avaliação”).

Passo 9: Checkpoint

A opção Checkpoint, geralmente fica disponível em Grids e seções, essa opção determina que ao o aluno visualizar o elemento que foi habilitada, a atividade será marcada como concluída.  

Passo 10: Salvar e fechar o modal

  • Clique em Salvar para aplicar as alterações.
  • Use Cancelar quando quiser descartar mudanças não salvas (se a interface oferecer essa opção).

Fluxo recomendado (rápido e sem retrabalho)

  1. Insira o elemento → arraste para o lugar aproximado.
  2. Abra Configurar elemento → ajuste Conteúdo e Aparência.
  3. Volte ao palco → refine posição com arrastar.
  4. Se precisar repetir o bloco, use Duplicar e só mude o que for diferente.
  5. Remova o que não for usar com Excluir.

Checklist final

  • Selecionar o elemento e confirmar a barra de ações no palco.
  • Posicionar com arrastar e validar alinhamento visual.
  • Configurar no modal: Conteúdo, Aparência, Dimensões, Comportamento e Acessibilidade (quando houver).
  • Reutilizar com Duplicar ou remover com Excluir.

Nesta página: