What is the Table of Contents widget in Master Addons?

It is an Elementor widget that reads the headings on your page and builds a linked index from them automatically. Each item jumps to its section on click, and you control which heading levels appear, whether the list collapses, and how it looks, all from the Elementor panel.

How does the widget know which headings to list?

You pick the heading tags in the Content tab, like H2 and H3, and the widget lists every matching heading on the page. Switch to the Exclude tab to skip levels instead. To drop one specific heading, add the ignore-this-tag class to it in the Advanced tab.

Can I make the table of contents collapsible?

Yes. The Collapsible options add a toggle so visitors can fold the list to just the title. Turn on Keep Collapsed Initially to load it closed, which works well in a sidebar or on mobile where you want to save vertical space.

Does it update when I add new headings?

Yes. The list is generated from the page's headings, so when you add, remove, or rename a heading, the table of contents reflects the change. There is no manual list to keep in sync, which is the main reason to use the widget over a hand-built one.

Can I add a smooth scroll and a back-to-top button?

Yes. The Scroll section has a Smooth Scroll toggle that glides to the target section, with a delay you can set. It also has a Scroll to Top option that adds a back-to-top arrow at the bottom of the page, with its own offset, size, and colors.

Elementor Índice Widget: Índice de página automática

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 Índice widget 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.

Elementor Table of Contents widget em uma página, mostrando uma lista numerada de onze títulos sob o título TOC

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 recipiente, o título, os itens da lista e o marcador de índice As opções habituais 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.

Widget de índice no painel Elementor Elements sendo arrastado para a página

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.

Guia Conteúdo do índice com as guias Insira o texto do título, Estilo da lista, Inclua e exclua e Tags de título definidas como H2, H3 e H4

Insira o texto do título: o título acima da lista, como Índice ou TOC.
Estilo da lista: nenhum, balas ou números para os itens.
Incluir/Excluir: alterne entre listar tags de cabeçalho para mostrar ou aquelas para pular.
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 ignore-this-tag 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.

Índice com Tornar o Conteúdo Desmontável e Manter Recolhido Inicialmente definido como Sim, mostrando a lista recolhida para três itens com um ícone de alternância

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.

Seção de rolagem do índice com rolagem para a parte superior definida para mostrar, deslocamento, tamanho, ícone e cor de fundo, rolagem suave e atraso de animação de rolagem

Role para cima: adicione uma seta na parte inferior da página que salta de volta para cima.
Role para o deslocamento superior: a que distância da página a seta aparece.
Rolo suave e atraso: deslize até o alvo em vez de pular e defina a velocidade.

Estilize o contêiner e o título #

Abrir o Estilo guia. O Recipiente a seção define o preenchimento, o fundo e a borda ao redor de toda a caixa e o Título a seção estiliza o título acima da lista.

Tabela de Conteúdo Guia de estilo com a seção Contêiner aberta, mostrando o preenchimento definido como 40 pixels em todos os lados, próximo à lista numerada

Recipiente: preenchimento, fundo, borda e raio da caixa.
Título: cor, tipografia e espaçamento do título.
Índice e botão: o marcador na frente de cada item e o botão rolar para cima.

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.

Índice Seção de estilo de conteúdo com um selecionador de cores de texto aberto, mostrando os links da lista azulados

Tipografia e Espaçamento: a fonte e a lacuna entre as linhas.
Normal /Passe o mouse/Ativo: uma cor para cada estado, para que a seção atual possa se destacar.
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 que segue o 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 ignore esta etiqueta 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 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 Mude para a guia Excluir para pular níveis. Para eliminar um título específico, adicione a classe ignorar esta etiqueta 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. a seção Rolar tem um alternador Smooth Scroll que desliza para a seção de destino, com um atraso que você pode definir Ele também tem uma opção Rolar para cima que adiciona uma seta de trás para cima na parte inferior da página, 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 corresponder Para widgets relacionados, consulte o Widget de linha do tempo e o Widget do menu de navegação, navegue por completo Widgets e extensões Master Addons, e verifique o página preços para o que cada plano inclui.

Construtor Tema

Construtor Popup

Construtor de widgets

Mega Construtor de Menu

Css personalizado

Tags Dinâmicas

Condições de exibição

Biblioteca Ícones

Animação

Kits de modelos

Seções Prontas

Popups prontos

Páginas Prontas

Cabeçalho Pronto

Rodapé Pronto

WP Administrar

Editor de barras administrativas

Loginfy

Suíte Rolemaster

Blocos Mestres

Destaque WP