O elemento de sumário do Geppetto é um recurso que permite criar uma navegação indexada dentro de um curso online com links que deslocam o aluno automaticamente até seções específicas da página ou que saltam para páginas diferentes quando o conteúdo está paginado. Neste guia, é possível acompanhar o passo a passo completo de como adicionar, configurar e personalizar esse elemento.

Para quem preferir ver na prática, há um vídeo demonstrando todos os recursos citados aqui: assista à demonstração completa no YouTube.

O que é o elemento de sumário no Geppetto Creator

O sumário é um elemento disponível no plano Expert do Geppetto. Ele funciona como um índice dinâmico: ao ser inserido em um curso, captura automaticamente os títulos e elementos marcados para aparecer no sumário e exibe uma lista navegável para o aluno. Ao clicar em qualquer entrada do sumário, o aluno é redirecionado diretamente para aquele trecho — seja na mesma página ou em uma página diferente, quando há paginação configurada.

Passo 1: adicionar o elemento de sumário ao layout

Para inserir o sumário, é necessário primeiro adicionar um novo grid ou sub-grid ao layout do curso. Dentro desse espaço, o elemento “Sumário” fica disponível para inserção. Após adicionado, ele exibe automaticamente um aviso informando que ainda não há nenhum item configurado para aparecer no índice — o que é esperado nessa etapa inicial.

Passo 2: marcar os elementos que vão aparecer no sumário

O sumário não captura todos os títulos do curso automaticamente. É preciso marcar cada elemento que deve ser indexado. Para isso, basta selecionar o elemento desejado — como um cabeçalho ou um card estilizado — e, na aba Geral, ativar a opção “Incluir sumário”.

No momento em que essa opção é ativada, a entrada correspondente aparece imediatamente no sumário, com o título do elemento como rótulo padrão.

Passo 3: configurar o rótulo e o nível hierárquico

Quando o título original do elemento é muito longo ou não é adequado para o sumário, é possível substituí-lo por um rótulo personalizado. Essa configuração fica disponível logo abaixo da opção “Incluir sumário”, no mesmo painel do elemento. O rótulo definido é atualizado em tempo real no sumário, sem necessidade de salvar antes de visualizar.

Além do rótulo, é possível definir o nível hierárquico de cada entrada — nível 1, 2 ou 3. Isso permite criar uma estrutura com entradas principais e subentradas, organizando o sumário de forma clara para o aluno. Essa configuração pode ser feita tanto no painel do elemento quanto diretamente dentro do sumário.

Opcionalmente, é possível associar um ícone a cada entrada do sumário. O ícone é escolhido no painel do elemento e pode ser ajustado a qualquer momento.

Passo 4: configurar a ancoragem

Cada elemento marcado para o sumário recebe automaticamente um ID de âncora, que é o identificador usado para o deslocamento da página ao clicar no link. Esse ID pode ser mantido no padrão gerado automaticamente ou substituído por um valor personalizado.

Quando o aluno clica em uma entrada do sumário e o conteúdo está na mesma página, a rolagem acontece automaticamente até o item. Se o posicionamento final não ficar exatamente onde o esperado — o aluno para um pouco antes ou depois do título — é possível ajustar o deslocamento de ancoragem com um controle fino disponível no painel do elemento, deslocando para cima ou para baixo conforme necessário.

Quando há paginação no curso, o sumário também funciona entre páginas: ao clicar em uma entrada que está em outra página, o Geppetto navega para a página correta e posiciona o aluno no elemento correspondente.

Passo 5: personalizar o estilo do sumário

Dentro do elemento de sumário, há opções de customização visual que permitem ajustar a aparência do índice. Os estilos disponíveis incluem:

• Moderno — layout limpo com visual contemporâneo
• Minimalista — variação com menos elementos visuais
• Caixa — sumário com moldura, ideal para destaque
• Com barra lateral — variação com acento visual lateral

Outras opções de personalização incluem: numeração de entradas, exibição do número de página (quando há paginação), pontilhado entre o rótulo e o número, exibição dos ícones associados a cada entrada, tamanho de fonte e espaçamento entre itens.

Visualizando o resultado

Após salvar as configurações, a visualização do curso exibe o sumário completo com todas as entradas configuradas, seus rótulos, níveis hierárquicos, ícones (quando definidos) e numeração. Em dispositivos móveis, o sumário se ajusta automaticamente ao tamanho de tela, com fontes reduzidas para manter a legibilidade sem comprometer o layout.

Veja na prática

A configuração completa do elemento de sumário, incluindo a demonstração visual de cada estilo e a navegação entre páginas com paginação, pode ser acompanhada no vídeo original: assistir ao tutorial completo no YouTube →

Perguntas frequentes

O elemento de sumário está disponível em todos os planos do Geppetto?
Não. O sumário é um elemento do plano Expert do Geppetto.

O sumário captura todos os títulos do curso automaticamente?
Não. Apenas os elementos com a opção “Incluir sumário” ativada aparecem no índice. Isso permite controle total sobre o que é exibido.

É possível ter mais de um nível hierárquico no sumário?
Sim. Cada entrada pode ser definida como nível 1, 2 ou 3, criando uma estrutura hierárquica com entradas principais e subentradas.

O sumário funciona entre páginas quando o curso tem paginação?
Sim. Ao clicar em uma entrada que está em outra página, o Geppetto navega automaticamente para a página correta e posiciona o aluno no elemento correspondente.

É possível ajustar o posicionamento de ancoragem?
Sim. Há um controle de deslocamento que permite ajustar para cima ou para baixo o ponto exato onde a página para ao clicar em uma entrada do sumário.

O sumário funciona em dispositivos móveis?
Sim. O elemento se adapta automaticamente a telas menores, ajustando o tamanho do texto e o layout para manter a usabilidade em celulares e tablets.