Como adicionar um índice às postagens do seu blog no Elementor

Criar conteúdo de blog de formato longo é ótimo para SEO, mas também pode fazer com que suas postagens pareçam ... bem, por muito tempo. Percorrer um artigo enorme sem saber onde você está ou quanto resta pode ser frustrante para os leitores. É aí que um índice (TOC) é útil.

Um índice (TOC) age como um mapa, ajudando os leitores a encontrar rapidamente o que precisam, a pular para uma seção e obter uma melhor sensação da sua estrutura de conteúdo. Além disso, ele pode aumentar seu SEO, permitindo ricos trechos nos resultados da pesquisa.

Se você estiver usando o Elementor para projetar suas postagens de site e blog, adicionar um índice é super simples, especialmente quando você usa o plug -in PowerPack Addons.

Neste guia, mostraremos como adicionar um índice à sua postagem no Blog no Elementor sem adicionar nenhum código HTML ou CSS.

Por que você deve adicionar um índice

Antes de entrar no instruções, vamos falar rapidamente sobre por que um TOC é uma adição inteligente às postagens do seu blog.

• Melhora a experiência do usuário: os leitores podem pular instantaneamente para a seção que os interessa.
• Aumenta o SEO: os mecanismos de pesquisa geralmente exibem links TOC como sitelinks, o que pode melhorar as taxas de cliques.
• Incentiva o engajamento mais longo: ao dar aos usuários controle sobre a navegação, você os mantém na página por mais tempo.
• Reduz a taxa de rejeição: os visitantes não se sentem sobrecarregados por um longo conteúdo quando podem desviá -lo facilmente.

Agora, vamos entrar em como você pode adicionar um toque totalmente funcional e elegante no Elementor.

Como adicionar um índice às postagens do seu blog no Elementor

Etapa 1: Instale os complementos do PowerPack para elementar

Antes de prosseguirmos, verifique se você instalou e ativou os addons do PowerPack para Elementor em seu site. Para saber mais, consulte nosso guia sobre como instalar e ativar o PowerPack Addons Pro.

Etapa 2: Ative o widget do índice

Depois que o plug -in está ativo, é uma boa ideia garantir que o widget do TOC esteja realmente ativado.

Para fazer isso, vá para Elementor >> PowerPack >> Elementos no seu painel WordPress. A partir daí, procure o widget “Índice” e verifique se a alternativa ao lado está ligada (azul).

Agora você está pronto para usá -lo no Elementor.

Etapa 3: Crie um único modelo de postagem no Elementor

Para aplicar o índice de forma consistente em todas as postagens do seu blog, é melhor adicioná -lo dentro de um único modelo de postagem.

Aqui está como:

• Vá para modelos >> Adicione novo.
• No menu suspenso, escolha uma única postagem.
• Dê um nome ao seu modelo, como " Layout do blog " ou " Modelo de postagem " e clique em " Criar modelo ".

O Elementor agora perguntará se você deseja começar com uma tela em branco ou usar um layout pré-construído.

Etapa 4: use um modelo de postagem pré-projetado (opcional)

Se você não deseja construir o layout do zero, o Elementor facilita a inserção de um modelo pronto. Escolha uma das opções pré-projetadas; Normalmente, ele inclui elementos essenciais, como o título da postagem, a imagem em destaque, a caixa de autores e o conteúdo da postagem.

Você sempre pode modificá -los mais tarde para se adequar melhor ao design do seu blog.

Etapa 5: Adicione o widget de Índice ao seu modelo

Em seguida, precisamos adicionar o widget de Índice.

No painel Elementor, pesquise "Índice". Quando o widget aparecer (procure o ícone PP no canto), arraste e solte -o para o layout.

Um local comum para colocar o índice (TOC) está logo abaixo do título da postagem ou da imagem em destaque, mas você pode colocá -lo onde quer que faça sentido para o seu conteúdo.

Depois de adicionar o widget, ele detectará e exibirá automaticamente todos os títulos (como H2S e H3S) da sua postagem.

Etapa 6: Personalize as configurações de conteúdo

Com o widget na página, você verá uma lista de todos os títulos do seu conteúdo da postagem. Agora, vamos personalizar o índice.

Na guia Conteúdo, você encontrará várias configurações:

Você pode alterar o título do índice (TOC) para algo como "navegação rápida" ou "nesta página". Se você está pensando em SEO e acessibilidade, também pode ajustar a tag HTML do título e defini -lo como H2 ou H3 , dependendo de como ela se encaixa na sua hierarquia.

Em seguida, existem configurações para incluir ou excluir certos níveis de cabeçalho . Por exemplo, você deve mostrar apenas H2s e H3s e pular H4s e abaixo. E você pode escolher o estilo da lista, vá com números para uma sensação estruturada e passo a passo ou balas para uma aparência mais mínima.

Etapa 7: Explore recursos extras (opcional, mas útil)

O widget PowerPack Table Tables vem embalado com recursos que ajudam a melhorar a usabilidade e o design.

Você pode fazer com que o Índice (TOC) colapsível , o que é ótimo para usuários móveis ou quando deseja manter o layout limpo. Adicione um ícone para expandir/colapso e especifique quando o widget deve entrar em colapso em dispositivos móveis, tablets, desktop ou todos os dispositivos.

Há também uma opção de visão hierárquica . Isso mostra a relação entre H2s, H3s e H4s, recuperando subtidings sob os títulos dos pais. Se você tiver uma postagem detalhada, a criação de um índice (TOC) torna mais organizado e mais fácil digitalizar.

Para postagens mais longas, ativar o toque pegajoso no rolagem é super útil. Ele mantém o TOC visível à medida que os usuários rolam para que possam pular entre as seções a qualquer momento. Você pode até adicionar um rolagem ao botão superior no widget para ajudar os usuários a retornar rapidamente ao início da sua postagem.

Se você tiver um cabeçalho pegajoso no seu site, considere ajustar a rolagem t offse t para que os títulos não estejam escondidos atrás dele quando um usuário clicar em um link TOC.

Etapa 8: estilize o TOC para combinar com seu site

Agora que a funcionalidade está configurada, vamos garantir que o widget pareça ótimo. Na guia Style, você encontrará um conjunto completo de opções de personalização:

• Estilo de caixa: você pode ajustar a cor de fundo do TOC, o tipo de borda e o raio de borda e até adicionar uma sombra para fazê -la se destacar. Se você estiver indo para um layout limpo, uma borda sutil e um fundo leve funcionam lindamente.
• Estilo de cabeçalho: deseja personalizar o título do TOC? Você pode definir o alinhamento do texto, alterar o preenchimento e ajustar cores, tipografia e ícones. Você pode até adicionar uma linha separadora e personalizar sua largura e cor.
• Estilo de lista: é aqui que você personaliza os itens reais do TOC, os links da seção. Ajuste o preenchimento, altere o texto e o título de título, escolha o recuo para subtítulos e personalize o estilo de marcador (como cor e tamanho da bala).

Com essas opções de estilo, você pode fazer com que o Toc pareça uma extensão natural do seu site, em vez de algo que acabou de aparecer.

Etapa 9: Publicar e definir condições

Quando tudo parecer do jeito que você quiser, vá em frente e clique em publicar. O Elementor perguntará onde exibir este modelo.

Escolha a condição 'inclua >> todas as postagens' para que o modelo (e o TOC dentro dele) seja aplicado a todas as postagens do blog em seu site.

Clique em Salvar e Clos e, e pronto!

Principais destaques do widget do PowerPack Table Table

O widget PowerPack Table Table está repleto de recursos úteis que não apenas aprimoram a experiência de leitura, mas também fornecem controle completo sobre como o índice aparece e funciona no seu site.

Personalize facilmente o título da tabela

Você pode personalizar o título do seu índice para ajustar melhor o tom ou o objetivo da sua postagem. Se você deseja nomear "navegação rápida", "conteúdo" ou "pular para a seção", o widget do PowerPack Toc permite atualizá -lo em apenas alguns cliques.

Incluir ou excluir títulos

Um dos recursos de destaque desse widget é a flexibilidade que ele oferece quando se trata de gerenciar os níveis de título. Você pode escolher quais tags de cabeçalho (H1, H2, H3, etc.) devem aparecer no TOC. Melhor ainda, usando a funcionalidade de seletor CSS interno, você pode incluir ou excluir especificamente seções ou títulos específicos da sua tabela, fornecendo controle completo sobre o que aparece.

Escolha o seu estilo de lista preferido

Deseja apresentar seu conteúdo em uma lista limpa e minimalista ou optar por um formato mais estruturado e numerado? Você tem opções. O widget permite que você defina seu estilo de lista como 'nenhum', 'balas' ou 'números', dependendo da sua preferência de design.

Títulos longos? Sem problemas

Se seus títulos tendem a ser longos, não se preocupe. Você pode ativar a opção Wap Wrap para garantir que o texto quebre bem e o índice (TOC) permaneça limpo e alinhado.

Colapse o TOC com base no tipo de dispositivo

Você pode optar por desmaiar o índice por padrão, dependendo do tipo de dispositivo: Mobile, Tablet ou Desktop. Isso ajuda a manter as coisas arrumadas em telas menores. Além disso, você pode permitir que uma visão hierárquica, permitindo que títulos aninhados (como H3s sob H2s) sejam claramente recuados e estruturados.

Índice pegajoso para postagens longas

Para conteúdo de formato longo, ter um índice (TOC) que rola com o usuário é um divisor de águas. O recurso Sticky Toc permite que a lista de conteúdo permaneça visível à medida que os visitantes do site role a página. Isso facilita a pular entre as seções a qualquer momento, sem precisar rolar de volta para o topo.

Melhores práticas para usar o índice em postagens do blog

Para aproveitar ao máximo o seu TOC, lembre -se dessas dicas:

• Use a estrutura adequada do cabeçalho: comece com H2S para seções principais, seguidas por H3s e H4s, conforme necessário. Evite pular os níveis, como passar do H2 para o H4, pois isso pode confundir os leitores e o próprio índice (TOC).
• Mantenha seus títulos claros e concisos: lembre -se, seus leitores os usarão para navegar na sua postagem. Mantenha o índice (TOC) curto e dobrável. Especialmente para usuários móveis, a ativação do colapso pode manter seu layout limpo.
• Visualizar em todos os dispositivos: verifique se o seu índice (TOC) aparece corretamente e funciona corretamente em desktops, tablets e telefones celulares.

Perguntas frequentes

Ques. Posso ocultar o índice (TOC) em dispositivos móveis?

Ans. Sim, você pode usar a configuração "colapso" para tornar o TOC minimizado por padrão no celular ou no tablet.

Ques. Será atualização automática quando eu adicionar novas seções à minha postagem?

Ans. Sim! O widget puxa dinamicamente as tags de cabeçalho do seu conteúdo, para que seja atualizado automaticamente.

Ques. Posso usar esse widget externo postagens do blog?

Ans. Absolutamente. Você pode adicioná -lo a qualquer página de layout do Elementor, tipo de postagem personalizado ou até descrição do produto, desde que haja tags de cabeçalho para escolher.

Encerrando!

Um índice não é apenas um recurso de design; É uma atualização de usabilidade que pode melhorar a experiência de seus leitores, aumentar o SEO e tornar seu conteúdo mais envolvente.

Com os addons Elementor e PowerPack, adicionar e personalizar um índice (TOC) é surpreendentemente fácil. Você obtém controle total sobre como parece e se comporta, tudo sem escrever uma única linha de código.

Você pode fazer muito mais com os complementos do PowerPack para Elementor. Existem mais de 70 widgets criativos que você pode usar para personalizar suas páginas elementares. Se você deseja saber mais sobre os complementos do PowerPack para Elementor, verifique aqui.