Precisa criar ou adicionar um índice em Elementor ?

Ao escrever um artigo longo, como uma lista de ferramentas ou locais, você pode adicionar um índice analítico. No WordPress, há vários plug-ins que você pode usar para criar um índice em seu artigo.

Mas com Elementor, você não precisa instalar um plug-in de índice se quiser adicionar um índice. Elementor tem um widget padrão que permite adicionar um índice ao seu longo artigo. Nós vamos cobrir isso aqui.

Conteúdo é um novo widget recentemente introduzido por Elementor. Com este widget, você pode fornecer navegação de página adicional para seu artigo longo, permitindo que seu visitantes saltar facilmente entre as seções do seu artigo.

O widget de sumário do Elementor permite que você escolha as tags de cabeçalho exatas a serem exibidas em seu sumário. Você também pode usar cabeçalhos de um contêiner específico na página.

Observação: O índice é um widget profissional. Você deve instalar a versão pro do Elementor para usá-lo.

Como usar o widget de índice no Elementor

Existem duas maneiras ideais de usar o widget Índice no Elementor. Antes de tudo, você pode usá-lo em páginas e postagens (páginas e postagens criadas inteiramente com o Elementor). Como alternativa, você pode criar o widget de Índice em seu modelo de postagem exclusivo. site WordPress.

Leia também: Como criar um formulário de upload de arquivo no Elementor

Claro, o modelo de postagem exclusivo deve ser feito com o Elementor. Ao implementar o widget de Índice no modelo de postagem única, um índice será gerado automaticamente em sua postagem, desde que a postagem contenha as tags de cabeçalho com base nos níveis de cabeçalho que você definiu no widget de Índice.

Adicione o widget de índice a um único modelo de postagem

Neste artigo, mostraremos como adicionar o widget Table of Contents a um único template de postagem. Você pode criar um novo modelo de postagem única ou editar o modelo existente. Criaremos um novo modelo de postagem única neste exemplo.

Para começar, faça login no painel do WordPress e navegue até Modelos -> Criador de temas. Na página Theme Builder, navegue até Guia única e clique no botão ADICIONE UM ÚNICO para criar um modelo.

Na seção Selecione a tipo de modelos, selecionar Single Post. Dê um nome à sua modelo e clique no botão CRIE UM MODELO.

Criaremos o modelo de postagem única do zero; feche a biblioteca de modelos.

Veja também: Como adicionar reCAPTCHA ao seu formulário Elementor

Adicione uma nova seção clicando no botão de adição na caixa de edição do Elementor e selecione a estrutura de três colunas.

Defina a largura das colunas com uma comparação de cerca de 28%: 61%: 10%.

Como adicionar um índice no Elementor

Adicione elementos comuns como título da postagem, informações da postagem e conteúdo da postagem na segunda coluna e personalize de acordo. Uma vez feito isso, adicione o widget Table Of Contents à primeira coluna.

Defina o título do seu índice na seção Título e defina os níveis de cabeçalho que deseja incluir na seção Âncoras por marcas.

Se você tiver conhecimento em CSS, poderá excluir os seletores de CSS para evitar que apareçam na lista de conteúdos.

Leia também: Como adicionar divisor para criar seção no Elementor

Na secção Visualização do marcador, você pode definir o marcador para itens de conteúdo (marcadores ou números). Se você selecionar marcadores, poderá definir o ícone da biblioteca de ícones.

aberto Adicional Opções para exibir outras opções de configuração e selecionar as configurações desejadas.

Como adicionar um índice no Elementor

Agora vá para a aba Style para personalizar seu Índice. Você pode definir a cor de fundo, cor da borda, largura da borda e raio da borda na seção Box.

Enquanto para definir a cor do cabeçalho, tipografia e texto do cabeçalho, você pode ir para a seção Cabeçalho.

Na secção Lista, Você pode definir a cor do texto do elemento ativo, a cor do texto do elemento ao passar o mouse sobre ele e a cor do texto dos elementos no modo normal. Você também pode definir a cor do marcador, bem como a tipografia dos elementos de conteúdo aqui.

Veja também: Como instalar o Elementor no WordPress

Para tornar seu sumário mais útil, você pode torná-lo visível quando visitantes role o mouse para baixo. Para fazer isso, abra a guia avançado e acesse a opção Efeito de movimento. Definir o pegajoso em cima e defina o deslocamento em cerca de 80. Se quiser, você também pode definir a animação de entrada na seção Animação de entrada.

Você pode brincar com o painel esquerdo até ficar satisfeito com seu índice. Feito isso, clique no botão PUBLICAR e definir a condição de exibição.

Aqui está um exemplo de índice que criamos.

Como adicionar um índice no Elementor

Se você definir a condição de exibição do modelo de postagem única criado acima para Tudo Singular, você terá automaticamente um índice analítico sempre que escrever um artigo longo que contenha as tags de cabeçalho de acordo com o nível de cabeçalho especificado.

No final

Adicionar um índice a um artigo longo fornece uma melhor experiência do usuário para o seu visitantes. Eles podem facilmente passar de uma seção do seu artigo para outra clicando nos itens do índice. Com o novo widget do Elementor, você não precisa instalar um plugin adicional para adicionar um índice a um artigo.

Você pode usar o widget Índice ao criar uma página ou postagem com o Elementor. Como alternativa, você também pode adicionar o widget Table Of Contents em seu modelo de postagem única site WordPress para que sempre que você escrever um post longo com tags de cabeçalho, o índice seja gerado automaticamente.

Obtenha o Elementor Pro agora!

Conclusão

Aqui está ! É isso neste artigo que mostra como adicionar um índice analítico no Elementor. Se você tiver alguma dúvida sobre como chegar lá fdeixe-nos saber no Comentários.

No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.

Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.

...