Widget de índice do elementor gratuito
O próprio widget de Índice do Elementor vem com o Elementor Pro. O widget de Índice em Master Addons é gratuito Solte-o em um post ou página e ele lê os títulos lá, em seguida, constrói uma lista vinculada a partir deles em ordem de título Um clique em qualquer item rola o leitor para essa seção Você escolhe quais tags de título incluir e se a lista mostra marcadores ou números Você pode deixar os leitores dobrarem a caixa e adicionar uma seta de volta para cima, e o título, separador e links cada um tem seus próprios controles de estilo.
Como adicionar um índice no Elementor
Você precisa Elementor e o plugin Master Addons gratuito, nada mais 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, a seta de trás para cima e um deslocamento de rolagem para o seu cabeçalho.
- 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.
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 configuração pegajosa própria Para manter a caixa à vista enquanto as pessoas lêem, torne sua coluna pegajosa com seu tema ou com Elementor Pro Motion Effects.
Saltos suaves e uma seta de volta ao topo
Clicar em um item rola a página até seu título. Atraso de animação de rolagem (ms) define quanto tempo leva esse scroll, 500 por padrão e até 2000. Com Rolo Suave você também consegue Deslocamento de rolagem suave (px), que pára antes do título para que um cabeçalho fixo não o cubra Você pode definir um deslocamento diferente para desktop, tablet e celular.
- 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.
Í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 títulos aparecem e como a lista se comporta durante a rolagem Master Addons lida com o trabalho diário gratuitamente e adiciona uma seta de volta para cima.
| Característica | Elementor Pro | Adições Mestres |
|---|---|---|
| Preço | Precisa do Elementor Pro | Grátis com complementos mestres |
| 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 | Atraso de animação de rolagem e deslocamento por dispositivo de rolagem suave |
| 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 gratuito com uma caixa dobrável e uma seta de volta para cima, use este Relacionado: Barra de progresso de leitura, Acordeão Avançado e Conteúdo Off-Canvas (Pro).
Perguntas frequentes para índice
O widget Índice é gratuito?
Sim. faz parte do plugin gratuito Master Addons no WordPress.org, e cada configuração descrita nesta página está na versão gratuita O widget de Índice do próprio Elementor 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.
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.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
Duplicador de postagem/página
