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 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 elementar 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.
- Smooth Scroll, atraso de animação de rolagem e deslocamento de rolagem suave (px): cada salto rola suavemente e pára cerca de 30 px acima do título Se os valores de atraso ou deslocamento não tiverem efeito em seu site, use a ponta fixa do cabeçalho abaixo.
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.
- Limpar um cabeçalho fixo. Se um cabeçalho fixo cobrir títulos após um salto, adicione
.elementor-heading-title[id] { padding-top: 90px; margin-top: -90px; }em Aparência, Personalizar, CSS Adicional Cada cabeçalho cai 90 px mais baixo e parece o mesmo. - Torna-o pegajoso. Coloque o widget em uma coluna da barra lateral e adicione
selector { position: sticky; top: 32px; }em CSS Avançado e Personalizado. O Página do produto Índice caminha por ele. - 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, incluído em Master Addons, 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 suavemente até sua seção e para cerca de 30 px acima do título 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.
