Como construir um índice clicável para uma postagem de blog com o Divi Layout Block

Adicionar um índice clicável a uma postagem de blog é uma ótima maneira de melhorar a experiência do usuário. Em muitos casos, o índice de uma postagem de blog usa links âncora para ajudar os usuários a navegar pelo conteúdo. E, um índice (com links de âncora) é realmente simples de construir usando HTML básico. No entanto, adicionar design / CSS para personalizá-lo pode ser um desafio. É aqui que o Divi Layout Block se torna útil.

Neste tutorial, vamos projetar um índice clicável para uma única postagem do blog (em Gutenburg) que usa links de âncora para levar os usuários a cabeçalhos designados ao longo da postagem. Para fazer isso, usaremos o bloco Divi Layout para criar o Índice com todas as ferramentas de design poderosas do construtor Divi à nossa disposição.

Vamos começar!

Espiada

Baixe GRATUITAMENTE o bloco de layout de índice reutilizável

Para colocar suas mãos no bloco de layout do Índice deste tutorial, primeiro você precisa baixá-lo usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

Como usar o download para importar este bloco de layout em seu site

Para importar esses Divi Image Layout Block reutilizáveis ​​para o seu site, primeiro você precisa descompactar o arquivo de download. Lá você encontrará os três arquivos JSON que precisará importar para o seu site.

Vá para editar uma postagem usando o editor padrão (Gutenberg). Abra o menu “Mais ferramentas e opções” no canto superior direito da página e selecione “Gerenciar todos os blocos reutilizáveis”.

Em seguida, clique no botão Importar do JSON. Escolha um dos arquivos JSON da pasta de download e clique no botão importar.

Uma vez feito isso, adicione um novo bloco em Gutenberg. Poderemos encontrar os blocos de layout Reutilizáveis ​​importados no botão Alternar opção Reutilizável. Basta clicar naquele chamado “Índice” para adicioná-lo à sua postagem.

É isso!

Vamos para o tutorial, vamos?

O que precisamos para começar

Para começar, precisaremos fazer o seguinte:

1. Se ainda não o fez, instale e ative o Divi Theme.
2. Crie uma nova postagem no WordPress e use o editor padrão (Gutenberg) para adicionar algum conteúdo fictício (título, cabeçalhos, parágrafos, imagem em destaque, etc.). Certifique-se de criar pelo menos três blocos de título com conteúdo em cada um. Como adicionaremos links âncora ao índice, precisamos de três títulos para criar um link para mais adiante na postagem.

Depois disso, estamos prontos para começar.

Criação de um índice clicável para uma postagem de blog com o Divi Layout Block

Adicionar Bloco de Layout Divi

Primeiro, adicione um novo Bloco de Layout Divi ao topo do conteúdo da postagem do seu blog.

Em seguida, clique no botão Construir Novo Layout. Isso implantará o editor de layout, que é o construtor Divi para um bloco de layout.

Adicionar linha

No Editor de Layout, inicie o design adicionando uma linha de uma coluna.

Adicionar Divisor Superior

Dentro da coluna, adicione um módulo divisor. Este será um dos dois divisores que usaremos para enquadrar o índice analítico.

Configurações do divisor

Em seguida, atualize as configurações do divisor da seguinte forma:

• Cor da linha: #eeeeee
• Posição da linha: centrado verticalmente
• Peso do divisor: 3px
• Largura: 25%
• Preenchimento: 30px superior, 30px inferior

Adicionar Divisor Inferior

Para criar o segundo divisor, duplique o divisor anterior.

Crie o cabeçalho do índice com um módulo do Blurb

Depois que as divisórias estiverem no lugar, vamos criar nosso título para o índice analítico.

Adicione um novo módulo de sinopse entre os dois divisores.

Conteúdo do Blurb

Abra as configurações do blurb e atualize o conteúdo da seguinte maneira:

• Título: “Índice”
• Ícone de uso: SIM
• Ícone: veja a captura de tela

Configurações de design do Blurb

Na guia de design, atualize o seguinte:

• Cor do ícone: #eeeeee
• Posicionamento de imagem / ícone: esquerda
• Use o tamanho da fonte do ícone: SIM
• Tamanho da fonte do ícone: 100px
• Título Título Nível: H2
• Largura do conteúdo: 100%
• Altura: 38px

Observe que a altura da sinopse é menor que a altura do ícone. Isso permite que o ícone se estenda para baixo próximo aos itens de sinopse que adicionaremos a seguir.

Assim que a sinopse do título estiver no lugar, estamos prontos para começar a adicionar os itens / sinopses clicáveis ​​que compõem nosso índice. Para fazer isso, também vamos usar módulos blurb.

Adicionar item nº 1 Blurb

Adicione um novo módulo de sinopse sob a sinopse do título.

Conteúdo do Blurb

Abra as configurações de sinopse e retire o conteúdo do corpo padrão para que apenas o título fique visível. O título é onde você adicionará o bloco de texto que corresponde à seção / título para o qual queremos criar um link mais adiante na postagem.

Em seguida, atualize o conteúdo com o ícone de seta para a direita na área de trabalho.

Implante a opção de foco para o ícone e mude o ícone para a seta para baixo ao passar o mouse. Esta será uma boa microinteração que enfatiza que o link irá rolar para um local abaixo da postagem.

Blurb Design

Agora podemos projetar o módulo blurb como quisermos. Para este exemplo, vamos atualizar as configurações de sinopse da seguinte maneira:

• Cor do ícone: # b856c7
• Ícone de círculo: SIM
• Cor do círculo: #ffffff
• Mostrar borda do círculo: SIM
• Cor da borda do círculo: # b856c7
• Posicionamento de imagem / ícone: esquerda
• Use o tamanho da fonte do ícone: SIM
• Tamanho da fonte do ícone: 16px
• Tamanho do texto do texto: 16px
• Altura da linha do título: 2em
• Largura do conteúdo: 100%
• Margem: 118px restantes
• Preenchimento: 10px superior
• Preenchimento (pairar): 10 px à esquerda

Blurb duplicado para mais itens

Agora que nosso primeiro item de sinopse foi concluído, podemos duplicá-lo quantas vezes forem necessárias, dependendo do número de links clicáveis ​​que desejamos incluir na postagem. Por enquanto, vamos apenas duplicá-lo duas vezes para criar um total de três itens para nosso índice analítico.

Adicionando os URLs do link âncora

No momento, nossos itens de sinopse não são clicáveis, então precisamos adicionar os URLs de link de âncora necessários a cada um deles. O URL do link âncora sempre começa com uma hashtag (#) seguida por qualquer ID que você deseja incluir.

Link de âncora nº um

Para simplificar, adicionaremos o link de âncora “#um” à primeira sinopse da lista. Para fazer isso, abra as configurações do primeiro módulo de sinopse na lista (não a sinopse do título) e atualize o seguinte:

• URL do link do módulo: #one

Link de âncora nº dois

Em seguida, abra as configurações do segundo item da sinopse e adicione o seguinte link:

• URL do link do módulo: #two

Link de âncora nº3

Por fim, adicione o seguinte link ao terceiro item da sinopse:

• URL do link do módulo: #three

Apertando o Espaçamento

Configurações de linha

No momento, há muito espaço entre os elementos de nossa linha. Para corrigir isso, abra as configurações de linha e atualize a largura da medianiz e o preenchimento da seguinte forma:

• Largura da calha: 1
• Largura: 100%
• Preenchimento: 0 px superior, 0 px inferior

Configurações da seção

Vamos retirar o preenchimento da seção também. Abra as configurações da seção e atualize o seguinte:

• Preenchimento: 0 px superior, 0 px inferior

Salvar o Layout

Concluímos o design de nosso índice. Certifique-se de salvar e sair do editor de layout.

Agora você deve ver seu novo índice dentro do editor de bloco padrão.

Adicionando âncoras HTML aos cabeçalhos de postagem

Adicionamos os URLs do link de âncora a cada uma das sinopses que constituem os itens de nosso índice analítico. Agora precisamos adicionar o ID CSS correspondente (ou âncora HTML) aos blocos de título mais adiante na postagem.

HTML âncora um

Clique no bloco que contém o primeiro cabeçalho ao qual deseja vincular / pular. Em seguida, abra as configurações desse bloco. No botão Alternar opções avançadas, adicione “um” à caixa de entrada HTML Âncora:

Âncora HTML: um

Lembre-se de que nosso primeiro item de sinopse tem o URL “#um” que terá um link para este. Mas não adicione a hashtag a esta âncora HTML. Não é necessário.)

HTML âncora dois

Em seguida, selecione o segundo bloco de título e atualize o seguinte:

• Âncora de HTML: dois

HTML âncora três

E, finalmente, selecione o terceiro bloco de título e adicione a âncora HTML da seguinte maneira:

• Âncora HTML: três

Resultado final

Vamos ver o resultado final na postagem ao vivo.

E aqui está como os links de âncora funcionarão. Observe o efeito de foco nos ícones e como o link rola suavemente para a âncora correspondente abaixo da página.

Adicionando o índice como um bloco de layout reutilizável

Se você quiser continuar usando este bloco de layout como um modelo para postagens futuras, seria uma boa ideia salvar o bloco de layout como um bloco de layout reutilizável. Isso permitirá que você adicione um bloco de “índice” facilmente a partir da lista de blocos incorporada.

Para fazer isso, clique no bloco Divi Layout que contém o índice e abra o menu de mais configurações. Em seguida, selecione “Adicionar a blocos de layout reutilizáveis”.

Digite um nome para o bloco reutilizável (“Índice”) e clique em salvar.

Agora você terá o bloco disponível na lista de Blocos Reutilizáveis ​​ao adicionar um novo bloco à postagem.

Agora, o bloco de layout serve como um modelo conveniente para a construção de um índice analítico para sua postagem. Não se esqueça de converter o bloco em um bloco de layout regular antes de personalizá-lo para uma postagem específica. Você não deseja alterar o bloco de layout reutilizável.

Para fazer isso, abra o menu de mais configurações do bloco de layout reutilizável e selecione “Converter em bloco regular”.

Pensamentos finais

Espero que este bloco de layout Divi do índice analítico seja útil para as postagens que são longas o suficiente para precisar deles. Se você estiver interessado em que isso seja feito para você dinamicamente (como construir o índice analítico para você automaticamente com base nos títulos de uma postagem), existem plug-ins por aí, como o Table of Contents Plus, que fazem esse tipo de coisa para você. Este post é para quem gosta de projetar com Divi e não se importa em construir o índice post a post.

Estou ansioso para ouvir de você nos comentários.

Saúde!