Como criar uma barra de informações de postagem dinâmica para o modelo de postagem do seu blog Divi

Adicionar conteúdo dinâmico ao modelo de postagem do seu blog é essencial para fornecer itens como título da postagem, metadados, imagem em destaque, etc. Normalmente, esses elementos dinâmicos são colocados como elementos estáticos normais dentro do design do layout. No entanto, pode ser útil manter alguns desses elementos dinâmicos em primeiro plano para seus leitores. É aqui que uma barra de informações de postagem dinâmica se torna útil. Uma barra de informações de postagem dinâmica permanece fixa na parte superior do navegador (como um cabeçalho fixo faria) e inclui peças úteis de conteúdo dinâmico e outros CTAs. Por exemplo, você pode usar esta barra para lembrar os leitores da postagem que estão lendo no momento, um link para deixar um comentário ou um link para uma categoria relacionada.

Neste tutorial, mostraremos como criar uma barra de informações de postagem dinâmica e adicioná-la ao modelo de postagem do seu blog usando o Divi Theme Builder. Uma vez feito isso, essa barra funcionará perfeitamente para todas as postagens do blog em todo o site.

Vamos começar!

Espiada

Aqui está uma rápida olhada no design que construiremos neste tutorial. Observe como os links âncora (“Deixe um comentário” e “Assine”) direcionam os usuários para a área correspondente na postagem.

Baixe o Layout GRATUITAMENTE

Para colocar suas mãos nos designs deste tutorial, primeiro você precisa fazer o download 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!

Para importar o layout da seção para o Divi Theme Builder, navegue até o Divi Theme Builder.

Clique no ícone de portabilidade.

No pop-up de portabilidade, selecione a aba de importação e escolha o arquivo de download do seu computador.

Em seguida, clique no botão importar.

Uma vez feito isso, o modelo de seção aparecerá no Divi Theme Builder.

Vamos para o tutorial, vamos?

Parte 1: Importando os modelos pré-fabricados

Para este tutorial, usaremos alguns modelos predefinidos de nosso sexto pacote de construção de temas. Vamos importar o modelo de site padrão que nos dará um cabeçalho global funcional onde adicionaremos a barra de informações do post. E vamos importar o modelo de postagem do blog para testar nossos resultados em uma postagem ativa.

IMPORTANTE: Seria melhor importar esses modelos em um site de teste para não bagunçar um site ativo.

Importar o modelo de site padrão

Primeiro, você precisará baixar o Sexto Pacote de Construtor de Tema GRÁTIS para Divi. Em seguida, descompacte o arquivo.

No painel do WordPress, navegue até Divi> Theme Builder. Em seguida, clique no ícone de portabilidade no canto superior direito. No pop-up de portabilidade, selecione a guia de importação. Em seguida, escolha o arquivo json do modelo de site padrão da pasta baixada e clique no botão importar. Isso importará um novo modelo de site padrão com um cabeçalho e rodapé globais.

Importar o modelo de postagem

Repita esse processo para importar o modelo de postagem da mesma pasta baixada. Abra o pop-up de portabilidade, escolha o arquivo json do modelo de postagem e clique no botão importar. Isso lhe dará um modelo de postagem atribuído a todas as postagens em seu site, junto com o cabeçalho padrão um rodapé.

Desativar global no cabeçalho do modelo de postagem

Vamos adicionar nossa barra de informações de postagem dinâmica ao cabeçalho do modelo de postagem. No entanto, como queremos a barra de informações de postagem apenas no modelo de postagem, precisamos desabilitar o global no cabeçalho para que nossa barra não seja adicionada a todos os cabeçalhos de todo o site. Para desabilitar global no cabeçalho global, abra o menu de configuração no cabeçalho global e selecione “Desabilitar Global”.

Agora, o cabeçalho deve estar cinza com o rótulo “Cabeçalho personalizado”. Quando estiver pronto, clique no ícone de edição para editar o modelo de layout do cabeçalho.

Criação da barra de informações de postagem dinâmica

Adicionando a Seção e Linha

Dentro do editor de layout de cabeçalho, crie uma nova seção regular sob a seção atual que contém o cabeçalho.

Em seguida, adicione meia coluna de um quarto de um quarto à seção.

Configurações da seção

Abra as configurações da seção e atualize o seguinte:

• Cor de fundo: #eceffe
• Preenchimento: 10px superior, 10px inferior

Configurações de linha

Depois que as configurações da seção forem adicionadas, abra as configurações da linha e atualize o seguinte:

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

Na guia avançada, adicione o seguinte CSS personalizado ao elemento principal:

display:flex !important;
flex-wrap: nowrap;
align-items: center;

Isso garantirá que as colunas sejam empilhadas no celular.

Adicionar conteúdo dinâmico de título de postagem

A primeira parte do conteúdo dinâmico que vamos adicionar à barra é o título da postagem. Isso servirá como um lembrete útil para o leitor do título da postagem que está lendo no momento.

Adicionar Módulo de Texto

Para criar o título da postagem como conteúdo dinâmico, crie um novo módulo de texto dentro da coluna da esquerda.

Adicionar postagem / título de arquivo como conteúdo dinâmico

Em seguida, clique no ícone “Usar conteúdo dinâmico” enquanto passa o mouse sobre a área do corpo das configurações de texto. Selecione “Post / Archive Title” na lista.

Abra as configurações de conteúdo dinâmico para o título da postagem / arquivo e adicione o seguinte na caixa de entrada antes:

You're Reading: 

Em seguida, salve as alterações.

Configurações de design

Na guia de design, personalize o estilo do título dinâmico da seguinte maneira:

• Fonte do texto: Ubuntu
• Peso da fonte do texto: médio
• Cor do texto do texto: # 121212
• Tamanho do texto do texto: 14 px (desktop), 12 px (tablet), 11 px (telefone)

Adicionar informações de categorias de postagem dinâmica

Para criar as informações das categorias de postagem, duplique o módulo de texto que contém o título da postagem.

Em seguida, abra as configurações do módulo de texto duplicado e adicione as categorias de postagem como conteúdo dinâmico ao corpo.

Abra as Configurações de conteúdo dinâmico das categorias de postagem e atualize o seguinte:

• Antes: Em
• Separador de categorias: &

Atualizar cor do link

Na guia de design, atualize a cor do link da seguinte maneira:

• Cor do texto do link: # 4160fd

Adicionando as informações de contagem de comentários dinâmicos

Outra informação útil que adicionaremos à barra de informações da postagem é a contagem de comentários, que lembra o usuário de se envolver com seus próprios comentários, se desejar. A contagem de comentários também incluirá um link para os comentários da postagem.

Para criar as informações de contagem de comentários dinâmicos, duplique o módulo de texto com as categorias e arraste-o para a coluna do meio.

Em seguida, adicione a contagem de comentários de postagem como conteúdo dinâmico ao corpo do texto.

Abra as configurações de contagem de comentários de postagem e adicione o seguinte:

• Depois: comentário (s)

Adicionando a frase de chamariz “Deixe um comentário”

Além da contagem de comentários, adicionaremos uma simples chamada à ação para deixar um comentário. O link será um link âncora que rola para a seção de comentários na parte inferior da postagem.

Para criar o CTA, duplique o módulo Texto na coluna 2 que contém a contagem de comentários.

Em seguida, abra as configurações de texto para a duplicata e adicione o seguinte link html ao corpo:

<a href="#respond">Leave a Comment</a>

Adicionando o botão de inscrição

A última coisa que vamos adicionar à barra de informações do post é um botão de inscrição. Este também será um link de âncora que leva o usuário à seção do modelo de postagem que inclui um formulário de inscrição por e-mail.

Para fazer isso, adicione um módulo de botão na coluna da extrema direita.

Na guia de design, atualize os estilos de botão da seguinte maneira:

• Tamanho do texto do botão: 14 px (desktop), 12 px (tablet), 11 px (telefone)
• Cor do texto do botão: #ffffff
• Gradiente de fundo do botão Cor esquerda: # 7e5ce6
• Gradiente de fundo do botão - cor certa: # 25b8ee
• Largura da borda do botão: 0 px
• Raio da borda do botão: 100 px
• Espaçamento entre letras dos botões: 2 px
• Fonte do botão: Ubuntu
• Peso da fonte do botão: negrito
• Estilo da fonte do botão: TT
• Preenchimento (desktop): 10px superior, 10px inferior, 20px à esquerda, 20px à direita
• Preenchimento (tablet): 6px superior, 6px inferior, 14px à esquerda, 14px à direita

Para adicionar o link âncora ao botão, vá para a guia de conteúdo e adicione o seguinte URL do link do botão:

• URL do link do botão: #subscribe

Este link não funcionará até que adicionemos um ID CSS correspondente à seção que contém o formulário de aceitação de e-mail no corpo do modelo de postagem.

Desativar coluna 1 no celular

Há muito espaço no celular para uma barra fixa. É por isso que precisaremos tomar decisões sobre quais informações incluir. Para este exemplo, vamos deixar as duas colunas com os CTAs no celular e desabilitar a coluna com o título e as categorias do post.

Para fazer isso, abra as configurações da coluna 1. Na guia avançado, desative a visibilidade no telefone e tablet.

Dando à Seção uma Posição Fixa e um Índice Z alto

Assim que o design estiver concluído, podemos agora dar à seção uma posição fixa. A ideia é esconder a barra atrás da seção com o cabeçalho inicialmente. Então, conforme o usuário rola, a barra de informações da postagem fixa será revelada sob o cabeçalho.

Abra as configurações da seção e atualize o seguinte:

• Cargo: Fixo
• Índice Z: 998

Observe que o índice z é 998 porque quero que a barra fixa fique acima do resto do conteúdo da postagem.

Atualizar o índice do cabeçalho Z da seção

Como a seção da barra de informações do post tem um índice z mais alto, ela será exibida acima da seção com o cabeçalho. Para corrigir isso, abra as configurações da seção para a seção com o cabeçalho e adicione o seguinte:

• Índice Z: 999 (um a mais que a seção com a barra)

Salve as alterações no editor de layout.

Adicionar CSS ID à linha de aceitação de e-mail no modelo do corpo

O CTA do botão de inscrição que adicionamos à barra ainda precisa de uma âncora, ou um lugar para “pular”, no modelo de postagem. Uma vez que o CTA é para “inscrever-se”, precisamos pular para o formulário de opi-in por e-mail.

Para fazer isso, abra a área “corpo personalizado” do modelo de postagem no criador de temas.

Encontre a linha com o formulário de aceitação de e-mail na parte inferior do layout e adicione o seguinte ID CSS:

• ID CSS: inscrever-se

Isso permitirá que o link de âncora do botão de inscrição role para esta área específica do modelo.

Uma vez feito isso, salve as alterações no layout e no construtor de tema.

Resultado final

Para ver o resultado final, basta abrir e ver uma postagem ao vivo no site. Observe como os links âncora (“Deixe um comentário” e “Assine”) direcionam os usuários para a área correspondente na postagem.

Pensamentos finais

Esperançosamente, esta barra de informações de postagem dinâmica será útil para impulsionar a UX de suas postagens de blog Divi. Sinta-se à vontade para experimentar outras informações também. Tenho certeza de que há uma maneira de apresentar uma postagem relacionada com um módulo de blog.

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

Saúde!