O bloco de Sumário gera automaticamente um menu de navegação clicável com base nos títulos encontrados na sua página SeedProd. Os visitantes podem visualizar todas as suas seções rapidamente e pular diretamente para o conteúdo que precisam — sem rolar a página inteira.
Este bloco é especialmente útil para conteúdo de formato longo, como guias detalhados, tutoriais, documentação de produtos e páginas de destino com várias seções. Você controla quais níveis de título são incluídos, se a numeração é exibida, como os itens aninhados são indentados e se a caixa pode ser recolhida pelos visitantes. O design é totalmente personalizável com controles de tipografia, cor e borda separados para o título, links e contêiner.
Adicionando o Bloco de Sumário às Suas Páginas
Siga estas etapas para adicionar um bloco de Sumário à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos, arraste e solte o bloco Sumário na seção desejada da sua página. Este bloco é tipicamente colocado perto do topo do seu conteúdo, após uma breve introdução, mas antes que as seções principais comecem.
Etapa 2: Configurar as Definições de Conteúdo
Uma vez adicionado, clique no bloco de Sumário para abrir suas configurações. Na aba Conteúdo, as configurações são organizadas em dois grupos.
Geral:
- Mostrar Título: Alterne se um título é exibido acima do sumário. Defina como Sim para mostrar um rótulo de título, ou Não para exibir apenas links.
- Texto do Título: Insira o texto que aparece como o título do sumário quando Mostrar Título está ativado (padrão: “Sumário”).
- Tag do Título: Escolha a tag de título HTML usada para renderizar o título — H2, H3, H4 ou DIV.
- Incluir Títulos: Insira uma lista separada por vírgulas de níveis de título para procurar links (por exemplo, h2,h3,h4). Apenas os títulos que correspondem a essas tags aparecem na navegação gerada.
- Contêiner de Conteúdo: Insira um seletor CSS para limitar a busca de títulos a uma área específica da página. Deixe em branco para escanear a página inteira.
- Excluir Seletores: Insira seletores CSS separados por vírgulas para quaisquer títulos que você deseja omitir do sumário.
- Mostrar Números: Alterne a numeração automática para os itens do sumário (Sim/Não).
- Numeração Hierárquica: Use numeração aninhada para subtítulos quando Mostrar Números estiver ativado (por exemplo, 1.1, 1.2, 2.1).
- Rolagem Suave: Ative uma animação de rolagem suave quando os visitantes clicarem em um link do sumário (Sim/Não).
- Offset de Rolagem (px): Defina o número de pixels para compensar o destino da rolagem — útil quando sua página tem um cabeçalho fixo que, de outra forma, obscureceria o título de destino.
- Estilo da Lista: Escolha o estilo de marcador para os itens do sumário: Nenhum, Disco, Círculo, Quadrado ou Decimal.
Opções Adicionais:
- Minimizar Caixa: Permita que os visitantes recolham e expandam toda a tabela de conteúdos usando um botão de alternância (Sim/Não).
- Ícone de Expandir: Escolha o ícone exibido no botão de alternância quando a tabela de conteúdos estiver recolhida.
- Ícone de Recolher: Escolha o ícone exibido no botão de alternância quando a tabela de conteúdos estiver expandida.
Etapa 3: Personalizar o Design
Na aba Avançado, você pode personalizar a aparência visual e o comportamento do seu bloco de Tabela de Conteúdos.
Estilos do Título (visível apenas quando Mostrar Título está ativado):
- Tipografia do Título: Defina a família da fonte, tamanho, peso, estilo, altura da linha, espaçamento entre letras e caixa de letras para o cabeçalho da tabela de conteúdos.
- Cor do Título: Escolha a cor do texto para o cabeçalho.
- Espaçamento do Título: Ajuste a margem inferior entre o título e a lista de links (0–50px).
Estilos dos Links:
- Tipografia do Link: Defina a família da fonte, tamanho, peso, estilo e outras propriedades tipográficas para os links de navegação.
- Cor do Link: Defina a cor padrão para os links da tabela de conteúdos.
- Cor do Link ao Passar o Mouse: Defina a cor que os links exibem quando os visitantes passam o mouse sobre eles.
- Espaçamento entre Itens: Controle o espaço vertical entre cada item da lista (0–30px).
- Recuo da Lista: Defina a indentação horizontal aplicada aos níveis de cabeçalho aninhados (0–100px).
Estilos do Contêiner:
- Cor de Fundo: Defina a cor de fundo para todo o contêiner da tabela de conteúdos.
- Largura do Contêiner: Ajuste a largura do contêiner usando um controle deslizante, com um alternador de unidade para alternar entre pixels (0–1200) e porcentagem (0–100).
- Preenchimento do Contêiner: Defina o espaçamento interno entre as bordas do contêiner e o conteúdo interno (1–100px).
- Borda: Adicione e configure uma borda ao redor do contêiner — escolha o estilo da borda, defina larguras individuais para cada lado (Superior, Direita, Inferior, Esquerda) e escolha uma cor de borda.
- Raio da Borda: Arredonde os cantos do contêiner (0–50px).
Espaçamento:
- Margem: Defina o espaçamento externo ao redor do bloco em todos os quatro lados, com controles independentes para desktop, tablet e celular.
- Preenchimento: Defina o espaçamento interno dentro do wrapper do bloco em todos os quatro lados, com controles por dispositivo.
Atributos:
- Classe Personalizada: Adicione uma ou mais classes CSS personalizadas ao wrapper do bloco para estilização direcionada.
- ID CSS: O SeedProd gera automaticamente um ID CSS exclusivo para este bloco. Você pode usá-lo para referenciar o bloco em CSS ou JavaScript personalizado.
- Atributos Personalizados: Adicione atributos HTML personalizados ao elemento wrapper do bloco. Insira cada atributo em uma nova linha usando o formato chave|valor.
Posição:
- Posição: Defina o posicionamento CSS do bloco — Estático, Relativo, Fixo, Absoluto ou Pegajoso — com valores independentes para desktop, tablet e celular.
- Offset: Ao usar posicionamento Fixo, Absoluto ou Pegajoso, defina as distâncias de offset Superior, Direita, Inferior e Esquerda por dispositivo.
- Z-Index: Defina a ordem de empilhamento do bloco em relação a outros elementos na página, com valores por dispositivo.
- Overflow: Controle como o conteúdo que se estende além das bordas do bloco é tratado — Visível, Oculto, Rolagem ou Automático — por dispositivo.
Visibilidade do Dispositivo:
- Ocultar no Desktop: Ative para ocultar o bloco quando visualizado em telas de desktop.
- Ocultar no Tablet: Ative para ocultar o bloco quando visualizado em telas de tablet.
- Ocultar no Celular: Ative para ocultar o bloco ao ser visualizado em telas de celular.
Efeitos de Animação:
- Efeito de Rolagem: Aplique uma animação acionada por rolagem ao bloco, incluindo opções de Rolagem Vertical e Rolagem Horizontal com controles de direção, velocidade e deslocamento de visualização.
- Efeito do Mouse: Aplique um efeito de paralaxe ao bloco, acionado pelo movimento do mouse.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco de Tabela de Conteúdos e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Sumário à sua página! Esta ferramenta de navegação ajuda os visitantes a entenderem imediatamente a estrutura da sua página e a chegarem às seções mais relevantes para eles. Experimente com níveis de títulos, estilos de lista e estilos de contêiner para criar um sumário que se sinta natural dentro do design da sua página e mantenha seu público engajado.