Widget de índice do elementor, sem necessidade de profissionais
O próprio widget de Índice do Elementor vem com o Elementor Pro. O widget de Índice em Master Addons é executado no Elementor sem Pro. Solte-o em uma postagem ou página e ele lê os títulos lá, então constrói uma lista vinculada a partir deles em ordem de cabeçalho Um clique em qualquer item rola o leitor para essa seção Você escolhe quais tags de cabeçalho incluir e se a lista mostra marcadores ou números Os leitores podem dobrar a caixa, uma seta de volta para cima os traz novamente e uma regra CSS curta mantém a caixa em vista em uma barra lateral.
Como adicionar um índice no Elementor
Você precisa de Complementos Elementor e Master Elementor Pro não é necessário A página também precisa de tags de cabeçalho reais (H2, H3 e assim por diante), porque a lista é construída a partir deles.
- Instalar e ativar Complementos Master do WordPress.orge verifique se o Índice está habilitado no painel de complementos mestres.
- Abra sua postagem ou página com o Elementor e pesquise no painel de widgets Índice.
- Arraste-o onde a lista deve ficar, geralmente acima da primeira seção ou em uma coluna da barra lateral.
- Em Conteúdo, defina o título, escolha um estilo de lista e escolha as tags de cabeçalho a serem incluídas.
- Aberto Desmontável e Rolar para adicionar a alternância e a seta de trás para cima.
- Estile o título, separador e links na guia Estilo, em seguida, visualize a página e clique em alguns itens para testar os saltos.
Cada configuração é coberta pelo Configurações do widget do índice guia.
Resumo do índice
O que o widget faz, leia Master Addons 3.2.3.
| Item | Widget de índice |
|---|---|
| Onde encontra títulos | Dentro do conteúdo de .entry primeiro, depois do conteúdo de .page e depois da área de conteúdo Elementor |
| Níveis de rumo | Qualquer um de H1 a H6, com H2, H3 e H4 selecionados por padrão |
| Deixar de fora uma rubrica | Adicione o título jltma-toc-hide da classe CSS a esse título |
| Lista estilo | Predefinição (sem marcador), Balas ou Números |
| Aninhamento | Sempre aninhado por nível de rumo |
| Caixa dobrável | Alterne ao lado do título, com Keep Collapsed Inicialmente |
| Rolagem | Rolo suave que para cerca de 30 px acima do rumo |
| Voltar ao topo | Seta no canto inferior direito após 250 px de rolagem |
| Item ativo | O item em que o leitor clicou pela última vez (sem espião de rolagem) |
| Adesivo | Sem interruptor; posição: pegajoso através de Custom CSS, ou Elementor Pro Motion Effects |
| Necessidades | Complementos Elementor e Master, sem Elementor Pro |
Constrói a Lista a partir dos Seus Cabeçalhos
Escolha os níveis em Tags de cabeçalho. H2, H3 e H4 são selecionados por padrão, e qualquer um de H1 a H6 pode ser adicionado Quando a página carrega, o widget encontra esses títulos, dá a cada um um ID se não tiver nenhum, e aninha a lista por nível de cabeçalho Renomear ou adicionar um título e a lista o pega na próxima carga, portanto, não há links de âncora para acompanhar manualmente.
- Estilo da lista: Padrão (sem marcador), Balas ou Números.
- Pule um título: adicionar a classe CSS
jltma-toc-hide-headingna guia Avançado desse título. - Mostrar separador: uma linha opcional sob o título com estilo, cor, espessura e espaçamento próprios.
- Os IDs de cabeçalho são feitos a partir do texto do título, portanto você também pode vincular diretamente a uma seção de outro lugar.
Caixa dobrável para barras laterais e celular
Ligar Tornar o Conteúdo Desmontável e um ícone de alternância aparece ao lado do título Os leitores clicam nele para abrir ou fechar a lista, e ele desliza em vez de pular Ative Mantenha-se em colapso inicialmente se você quiser que a caixa carregue mostrando apenas seu título, o que ajuda em páginas legais longas e em colunas estreitas da barra lateral.
- Controles de tamanho de ícone e cor de ícone para alternar.
- O separador dobra-se com a lista.
- O widget não tem interruptor pegajoso próprio Para manter a caixa à vista enquanto as pessoas leem, consulte Tornar o Índice PEGAjoso abaixo.
Saltos suaves e uma seta de volta ao topo
Clicar em um item rola a página suavemente até seu título e para cerca de 30 px acima dele, para que o título não fique nivelado com a parte superior da tela. Se o seu site tiver um cabeçalho fixo alto, o FAQ abaixo terá uma correção CSS de duas linhas que mantém os títulos livres dele.
- Role para cima adiciona uma pequena seta no canto inferior direito que mostra uma vez que um visitante rola para baixo.
- A seta leva os leitores de volta ao índice ou à posição definida em Rolar para o deslocamento superior.
- Controles de tamanho, cor do ícone e cor de fundo para a seta.
- O item em que um leitor clicou mantém a cor Ativa da seção Estilo de conteúdo, para que ele possa ver onde pulou.
Torne o índice pegajoso
O widget não tem interruptor pegajoso próprio Você fixá-lo, tornando o widget pegajoso dentro de uma coluna de barra lateral, e Elementor sem Pro pode fazer isso através dos Master Addons Extensão CSS personalizada.
- Coloque o artigo e o índice em uma linha: uma coluna larga para o conteúdo e uma coluna estreita para o widget Índice Deixe a coluna estreita em sua altura padrão para que ela se estique até a altura da linha.
- Selecione o widget Índice, aberto Avançado, então os Master Addons Css personalizado seção e colar
selector { position: sticky; top: 32px; } - Aumente o valor superior se o seu site tiver um cabeçalho fixo, por exemplo, 110 px sob um cabeçalho de 80 px.
- Visualize a página e role A caixa permanece em exibição até o final da linha.
Com Elementor Pro você pode usar Avançado, Efeitos de movimento, Adesivo: Top em vez disso, com Stay In Column ligado.
Duas coisas param de funcionar: um contêiner pai com estouro definido como oculto e uma coluna de barra lateral que não é mais alta que a caixa Nos telefones, a barra lateral fica abaixo do artigo, então ligue Tornar o conteúdo dobrável ali ou oculte esta cópia no celular e coloque um índice recolhido acima do artigo.
O demonstração pegajosa da barra lateral a meio caminho da página A caixa fica no topo da coluna enquanto o artigo rola.
A regra pegajosa na seção Master Addons Custom CSS do widget.
Índice Elementor Pro vs Índice Master Addons
O widget de Índice do Elementor precisa de uma licença do Elementor Pro, e dá-lhe mais controle sobre quais cabeçalhos aparecem e como a lista se comporta durante a rolagem Master Addons lida com o trabalho diário sem Pro e adiciona uma seta de volta para cima.
| Característica | Elementor Pro | Adições Mestres |
|---|---|---|
| Preço | Precisa do Elementor Pro | Incluído em Master Addons, sem Elementor Pro |
| Quais títulos | Âncoras por tags (H1 a H6) mais um seletor de contêiner para limitar a área de pesquisa | Tags de cabeçalho (H1 a H6) da postagem principal ou conteúdo da página |
| Deixando títulos fora | Âncoras Por Seletor, qualquer seletor CSS | Classe CSS jltma-toc-hide-heading em cada título |
| Marcadores | Números, ou Balas com um ícone que você escolher | Predefinição, Balas ou Números |
| Aninhamento | Visualização hierárquica alternar e colapsar subitens | Sempre aninhado por nível de rumo |
| Colapso | Minimize Box com ícones de expansão e colapso, e um ponto de interrupção onde começa minimizado | Torne o conteúdo dobrável e continue colapsado inicialmente |
| Item ativo | Segue a seção em vista enquanto o leitor rola | Marca o item em que o leitor clicou |
| Configurações rolagem | Sem controles de velocidade ou deslocamento no widget | Rolo suave que para cerca de 30 px acima do rumo |
| Adesivo | Nenhuma configuração no widget; use efeitos de movimento pegajosos no widget ou em sua coluna | Nenhuma configuração no widget; adicione posição: pegajoso com CSS personalizado ou use efeitos de movimento pegajosos com Pro |
| Voltar à seta superior | Nenhum | Role para cima com controles de tamanho e cor |
Se você já paga pelo Elementor Pro e quer que a lista rastreie o leitor enquanto ele rola, use seu widget Se você quiser um índice sem o Elementor Pro, com uma caixa dobrável e uma seta de volta para cima, use este.
Combina bem com: Barra de progresso de leitura para um bar que enche à medida que as pessoas lêem, Acordeão Avançado e Guias para dobrar seções longas, Conteúdo Off-Canvas (Pro) para um menu deslizante e blog para as listas de postagens, esses longos artigos estão disponíveis.
Plugin de índice ou widget de elementor?
O WordPress possui dois tipos de índice: plugins que funcionam no conteúdo da postagem e widgets que você coloca no editor Elementor. O caminho certo depende de como a página é construída.
| Opção | Onde funciona | Melhor para |
|---|---|---|
| Índice dos complementos mestres | Em qualquer lugar onde você o coloque no Elementor, incluindo modelos | Sites de elementadores que desejam que a caixa seja estilizada com o design e uma seta de trás para cima |
| Índice Elementor Pro | Em qualquer lugar do Elementor, com licença Elementor Pro | Sites já no Pro que desejam que o item ativo siga o scroll |
| Índice Fácil, LuckyWP | Publicar conteúdo, inserido automaticamente ou com um shortcode | Blogs escritos no editor de blocos ou no Editor Clássico |
| Classificação Bloco de índice do índice de matemática | Bloqueie postagens de editores em sites que usam Rank Math | Postagens de Gutenberg que só precisam de uma lista simples |
Nosso resumo dos melhores plug-ins de índice para WordPress compara oito deles, com contagens de instalação, códigos de acesso e opções pegajosas.
Exemplos de índice
Quatro demos ao vivo construídas com o widget Abra uma e importe o mesmo layout do Visualizador de Modelos abaixo.
- Barra lateral pegajosa: uma lista numerada em uma coluna estreita que permanece à vista enquanto o artigo rola, H3 aninhados sob seus H2 s, e um título deixado de fora com jltma-toc-hide-heading.
- Listar estilos: Padrão, Balas e Números lado a lado, construídos a partir dos mesmos títulos.
- Página de Termos e Condições: a caixa em uma barra lateral direita listando cada seção de uma longa página legal.
- Página da política de privacidade: a caixa à esquerda, com o item clicado na cor Active.
Os três estilos de lista nos mesmos títulos.
Perguntas frequentes para índice
Preciso do Elementor Pro para este índice?
No. O widget de Índice faz parte do Master Addons e é executado no Elementor sem Pro. Cada configuração nesta página está incluída O widget de Índice do próprio Elementor é aquele que precisa do Elementor Pro.
Como excluo um título do índice?
Para largar um nível inteiro, remova essa marca das Marcas de Cabeçalho, por exemplo H4. para esconder um cabeçalho, seleccione - o no Elementor, abra o separador Avançado e adicione jltma-toc-hide-heading para o campo Classes CSS Ele fica na página mas fica de fora da lista.
O item ativo muda conforme o leitor rola?
Não. A cor Active em Style, Content styles o item que um leitor clica, e ele se move quando eles clicam em outro item A lista não rastreia a seção na tela durante a rolagem O widget de Índice do Elementor Pro faz isso.
Posso tornar o índice pegajoso?
Sim, embora não de um switch no widget Coloque-o em uma coluna da barra lateral e adicione selector { position: sticky; top: 32px; } em CSS Avançado e Personalizado Com o Elementor Pro você pode usar os Efeitos de Movimento, Sticky em vez disso Eleve o valor superior se um cabeçalho fixo ficar sobre ele.
Como mantenho o índice expandido ou recolhido quando a página é carregada?
Ative Tornar o Conteúdo Desmontável Com Manter Recolhido Inicialmente desligado, a caixa carrega aberta e os leitores podem dobrá-la Com ela ligada, a caixa carrega mostrando apenas seu título Não há configuração por dispositivo, portanto, para uma caixa fechada em telefones e uma aberta na área de trabalho, use duas cópias e oculte cada uma em Avançado, Responsivo.
A seta Rolar para Cima aparecerá em todas as páginas?
Somente nas páginas que contêm este widget com Rolar para cima ligado A seta fica no canto inferior direito e mostra depois que o visitante rolou cerca de 250 px para baixo da página.
Posso usar ícones personalizados para os marcadores de lista?
Não do painel de widgets List Style oferece Padrão, Balas e Números, e a seção Estilo de conteúdo define a fonte e as cores Ícones de marcadores personalizados precisariam de seu próprio CSS O widget do Elementor Pro tem um seletor de ícones para balas.
Por que meu índice está vazio ou listando os títulos errados?
O widget procura títulos dentro de .entry-content primeiro, depois .page-content, depois a área de conteúdo Elementor e apenas para as tags escolhidas em Heading Tags Uma caixa vazia mostra “Adicione um cabeçalho para começar a gerar o índice” e geralmente significa que os títulos usam uma tag que você não selecionou ou fica fora dessa área Se um plugin de cache atrasar o JavaScript até o primeiro scroll ou clique, a lista permanece vazia até então, portanto, exclua os scripts Master Addons do atraso.
Um cabeçalho fixo cobre o cabeçalho após um salto Como faço para corrigi-lo?
O salto pára cerca de 30 px acima do título, o que não é suficiente sob um cabeçalho fixo alto Adicione isso em Aparência, Personalizar, CSS adicional: .elementor-heading-title[id] { padding-top: 90px; margin-top: -90px; } Cada cabeçalho então pousa 90 px mais baixo e parece o mesmo na página Use sua altura de cabeçalho mais um pouco de espaço.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
![Extensão Master Addons Post/Page Duplicator para Elementor: MA Link de linha Duplicator na lista de páginas WordPress criando uma página de destino - rascunho [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de postagem/página
