O bloco Índice 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 ir diretamente para o conteúdo que precisam, sem precisar rolar a página inteira.
Este bloco é especialmente útil para conteúdos longos, 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 recuados e se a caixa pode ser recolhida pelos visitantes. O design é totalmente personalizável, com controles separados de tipografia, cor e borda para o título, links e contêiner.
Adicionando o bloco Índice às suas páginas
Siga estas etapas para adicionar um bloco de Índice à sua página SeedProd:
Passo 1: Adicione o bloco
Em Design > Blocos, arraste e solte o bloco Índice na seção desejada da sua página. Esse bloco é normalmente colocado na parte superior do seu conteúdo, após uma breve introdução, mas antes do início das seções principais.
Etapa 2: Configurar as definições de conteúdo
Depois de adicionado, clique no bloco Índice para abrir suas configurações. Na guia Conteúdo, as configurações estão organizadas em dois grupos.
Geral:
- Mostrar título: alterne entre exibir ou não um título acima do índice. 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 aparecerá como título do índice quando a opção Mostrar título estiver ativada (padrão: “Índice”).
- Tag de 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 dos níveis de título a serem verificados em busca de links (por exemplo, h2, h3, h4). Apenas os títulos que correspondem a essas tags aparecem na navegação gerada.
- Content Container: Insira um seletor CSS para limitar a varredura de títulos a uma área específica da página. Deixe em branco para varrer a página inteira.
- Excluir seletores: insira seletores CSS separados por vírgulas para quaisquer títulos que você deseja omitir do índice.
- Mostrar números: Ativar ou desativar a numeração automática dos itens do índice (Sim/Não).
- Numeração hierárquica: use numeração aninhada para subtítulos quando a opção Mostrar números estiver ativada (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 índice (Sim/Não).
- Deslocamento da rolagem (px): defina o número de pixels para deslocar o destino da rolagem — útil quando sua página tem um cabeçalho fixo que, de outra forma, ocultaria o título de destino.
- Estilo da lista: escolha o estilo dos marcadores para os itens do índice: Nenhum, Disco, Círculo, Quadrado ou Decimal.
Opções adicionais:
- Minimizar caixa: Permita que os visitantes ocultem e expandam todo o índice usando um botão de alternância (Sim/Não).
- Expandir ícone: escolha o ícone exibido no botão de alternância quando o índice estiver recolhido.
- Ícone de recolher: escolha o ícone exibido no botão de alternância quando o índice estiver expandido.
Etapa 3: Personalizar o design
Na guia Avançado, você pode personalizar a aparência visual e o comportamento do seu bloco Índice.
Estilos de título (visíveis apenas quando a opção Mostrar título está ativada):
- Tipografia do título: defina a família, o tamanho, a espessura, o estilo, a altura da linha, o espaçamento entre letras e as maiúsculas e minúsculas da fonte para o título do índice.
- Cor do título: escolha a cor do texto para o título.
- Espaçamento do título: ajuste a margem inferior entre o título e a lista de links (0–50 px).
Estilos de link:
- Tipografia do link: defina a família de fontes, tamanho, espessura, estilo e outras propriedades tipográficas para os links de navegação.
- Cor do link: defina a cor padrão para os links do índice.
- Cor do link ao passar o mouse: defina a cor que os links exibirão quando os visitantes passarem o mouse sobre eles.
- Espaçamento entre itens: controle o espaço vertical entre cada item da lista (0–30 px).
- Recuo da lista: defina o recuo horizontal aplicado aos níveis de título aninhados (0–100 px).
Estilos de contêineres:
- Cor de fundo: defina a cor de fundo para todo o contêiner do índice.
- Largura do contêiner: ajuste a largura do contêiner usando um controle deslizante, com uma alternância 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 dentro dele (1–100 px).
- Borda: adicione e configure uma borda ao redor do contêiner — escolha o estilo da borda, defina larguras individuais para cada lado (superior, direito, inferior, esquerdo) e selecione uma cor para a borda.
- Raio da borda: Arredonde os cantos do contêiner (0–50 px).
Espaçamento:
- Margem: defina o espaçamento externo ao redor do bloco nos quatro lados, com controles independentes para desktop, tablet e celular.
- Preenchimento: defina o espaçamento interno dentro do bloco wrapper nos quatro lados, com controles por dispositivo.
Atributos:
- Classe personalizada: adicione uma ou mais classes CSS personalizadas ao invólucro do bloco para obter um estilo específico.
- 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 personalizados.
- Atributos personalizados: adicione atributos HTML personalizados ao elemento wrapper do bloco. Insira cada atributo em uma nova linha usando o formato chave|valor.
Cargo:
- Posição: defina o posicionamento CSS do bloco — Estático, Relativo, Fixo, Absoluto ou Fixo — com valores independentes para desktop, tablet e celular.
- Deslocamento: ao usar o posicionamento Fixo, Absoluto ou Fixo, defina as distâncias de deslocamento Superior, Direita, Inferior e Esquerda por dispositivo.
- Z-Index: Define a ordem de empilhamento do bloco em relação a outros elementos na página, com valores por dispositivo.
- Transbordamento: controle como o conteúdo que ultrapassa os limites do bloco é tratado — Visível, Oculto, Rolagem ou Automático — por dispositivo.
Visibilidade do dispositivo:
- Ocultar na área de trabalho: alterne para ocultar o bloco quando visualizado em telas de desktop.
- Ocultar no tablet: alterne para ocultar o bloco quando visualizado em telas de tablet.
- Ocultar no celular: Alterne para ocultar o bloco quando visualizado em telas de celular.
Efeitos de animação:
- Efeito de rolagem: aplique uma animação acionada pela rolagem ao bloco, incluindo opções de rolagem vertical e horizontal com controles de direção, velocidade e deslocamento da janela de visualização.
- Efeito do mouse: aplique um efeito de paralaxe acionado pelo movimento do mouse ao bloco.
Etapa 4: Salve suas alterações
Depois de terminar de configurar o bloco Índice e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Índice à sua página! Essa ferramenta de navegação ajuda os visitantes a entender imediatamente a estrutura da sua página e acessar as seções mais relevantes para eles. Experimente diferentes níveis de títulos, estilos de lista e estilos de contêiner para criar um índice que pareça natural no design da sua página e mantenha o público envolvido.