Postagens longas são mais fáceis de ler quando os visitantes podem ver toda a forma na frente e pular direto para a parte que desejam O gratuito Widget de índice em Complementos Mestres para Elementor lê os títulos em sua página e os transforma em um índice vinculado Nenhuma lista manual para construir e nenhuma para manter em sincronia posteriormente.
Você solta o widget, escolhe quais níveis de cabeçalho incluir e ele se preenche A partir daí você pode torná-lo dobrável, adicionar um botão rolar para cima e estilizar tudo Este guia cobre todas as configurações do widget.
O que o widget Índice faz #
O widget verifica a página para títulos e constrói uma lista aninhada de links a partir deles Cada item aponta em seu título, então um clique salta para baixo para essa seção Adicione um título mais tarde e a lista o pega por conta própria, que é a parte que economiza mais tempo.
Duas abas executam. Conteúdo contém o título, os níveis de cabeçalho, a opção dobrável e o comportamento de rolagem. Estilo controla o preenchimento do contêiner, o título, o separador e os itens da lista As opções usuais do Elementor Advanced ficam ao lado delas.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo. Novo no plugin? veja o guia instalação.
- Uma página ou postagem com títulos reais (H2, H3 e assim por diante) para o widget ler.
Como adicionar o widget Índice #
No editor Elementor, abra o Elementos painel e pesquisa Índice, ou vá até a seção Master Addons (os widgets carregam um emblema MA roxo).Arraste-o para o topo do seu conteúdo, ou para uma barra lateral, e ele se preenche dos títulos da página imediatamente.
Defina o título e quais títulos incluir #
Abrir o Conteúdo guia e o Índice seção. É aqui que você nomeia a caixa, escolhe o estilo da lista e escolhe quais níveis de cabeçalho aparecem.
- Insira o texto do título: o título acima da lista, como Índice ou TOC.
- Estilo da lista: Padrão (sem marcador), marcadores ou números.
- Incluir/Excluir: a guia Incluir contém tags de título e a guia Excluir explica como deixar títulos únicos de fora.
- Tags de título: escolha os níveis para puxar, como H2 e H3. adicione ou remova tags para controlar a profundidade da lista.
Quer pular um único título? Adicione o jltma-toc-hide-heading classifique para a guia Avançado desse título, no campo Classes CSS, e o widget o deixa de fora. É útil quando um título de seção apenas desordem a lista.
Tornar a lista dobrável #
O Desmontável as opções permitem que os visitantes dobrem a lista apenas para o título. Isso ajuda no celular ou em uma barra lateral onde o espaço é apertado.
- Torne o conteúdo dobrável: adicione uma alternância para que a lista seja aberta e fechada.
- Mantenha o colapso inicialmente: carregue-o fechado para que ele mostre apenas o título até clicar.
- Tamanho e cor do ícone: a aparência do colapso alterna.
Configure o comportamento de rolagem #
Abrir o Rolar seção de como a página se move quando alguém usa o índice Você pode adicionar um botão back-to-top e ativar a rolagem suave.
- Role para cima: adicione uma seta fixa no canto inferior direito Ele aparece uma vez que um visitante rola para baixo e os leva de volta ao índice.
- Role para o deslocamento superior: uma posição de rolagem para onde enviar os leitores em vez do índice.
- Atraso de animação de rolagem e rolagem suave: o atraso define quanto tempo o scroll leva (500 ms por padrão).Ligar o Smooth Scroll adiciona Smooth Scroll Offset (px), que para antes do cabeçalho para que um cabeçalho fixo não o cubra.
Estilize o contêiner e o título #
Abrir o Estilo guia. O Recipiente a seção define o preenchimento em torno de toda a caixa e do Título a seção estiliza o título acima da lista.
- Recipiente: preenchimento para a caixa Adicione um plano de fundo, borda ou raio da guia Avançado.
- Título: alinhamento, cor, tipografia e espaçamento inferior para o título.
- Separador: estilo, cor, espessura e espaçamento inferior para a linha sob o título O pergaminho para a seta superior é estilizado na seção Rolar.
Estilize os itens da lista #
O Conteúdo a seção na guia Estilo lida com os links em si Você obtém tipografia, espaçamento entre itens e cores separadas para os estados Normal, Hover e Ativo.
- Tipografia e Espaçamento: a fonte e a lacuna entre as linhas.
- Normal /Passe o mouse/Ativo: uma cor para cada estado Ativo aplica-se ao item em que um leitor clicou pela última vez.
- Cor do texto: a cor do link para o estado que você selecionou.
Casos de uso comum #
- Tutoriais e guias longos dando aos leitores um mapa e saltos rápidos.
- Páginas documentação onde cada título é uma seção que as pessoas procuram.
- Barras laterais com um índice dobrável ao lado do artigo.
- Arredondamentos e listas assim, os visitantes podem pular para a entrada que desejam.
- Páginas legais e políticas isso precisa de âncoras claras para cada cláusula.
Dicas para trabalhar com o widget Índice #
- Use uma estrutura de cabeçalho limpa. A lista é tão boa quanto seus H2 s e H3 s, então escreva títulos que leiam bem por conta própria.
- Inclua apenas dois níveis. H2 e H3 geralmente fazem um índice arrumado Puxe em H4 e além e começa a ficar barulhento.
- Recolha-o no celular. Mantenha Recolhido Inicialmente salva muita rolagem em telas pequenas.
- Ligue o rolo suave. Um deslizamento para a seção é melhor do que um salto em força, e o deslocamento mantém os rumos livres de um cabeçalho pegajoso.
- Saltar os títulos perdidos. Use a classe jltma-toc-hide-heading em títulos que você não deseja na lista, como um CTA ou um título de barra lateral.
Perguntas frequentes #
O que é o widget Índice em Master Addons?
É um widget Elementor gratuito que lê os títulos em sua página e constrói um índice vinculado a partir deles automaticamente Cada item salta para sua seção no clique, e você controla quais níveis de cabeçalho aparecem, se a lista entra em colapso e como ela parece, tudo a partir do painel Elementor.
Como o widget sabe quais títulos listar?
Você escolhe as tags de cabeçalho na guia Conteúdo, como H2 e H3, e o widget lista todos os cabeçalhos correspondentes na página Para pular um nível inteiro, deixe essa tag de fora Para soltar um cabeçalho específico, adicione a classe jltma-toc-hide-heading a ele na guia Avançado.
Posso tornar o índice dobrável?
Sim. As opções Desmontável adicionam um alternador para que os visitantes possam dobrar a lista apenas para o títuloLigar Manter Recolhido Inicialmente para carregá-lo fechado, o que funciona bem em uma barra lateral ou no celular onde você deseja economizar espaço vertical.
Ele atualiza quando adiciono novos títulos?
Sim. a lista é gerada a partir dos títulos da página, portanto, quando você adiciona, remove ou renomeia um título, o índice reflete a alteração Não há lista manual para manter em sincronia, que é a principal razão para usar o widget sobre um construído à mão.
Posso adicionar um scroll suave e um botão de trás para cima?
Sim. Clicar em um item rola em sua seção e o Scroll Animation Delay define quanto tempo isso leva. Smooth Scroll adiciona um deslocamento para cabeçalhos fixos. Rolar para cima adiciona uma seta no canto inferior direito com seu próprio deslocamento, tamanho e cores.
Embrulhando #
O widget Índice transforma seus títulos em um índice vinculado sem qualquer manutenção manual: coloque-o, escolha os níveis de cabeçalho, torne-o dobrável, defina o comportamento de rolagem e, em seguida, estilize-o para combinar Para uma visão geral e uma comparação com o Elementor Pro, consulte o Widget de índice Elementor página. Para widgets relacionados, consulte Linha do tempo e Menu NAV, navegue por completo Widgets e extensões Master Addons, e verifique o página preços para o que cada plano inclui.
