Como construir uma barra de progresso de leitura para suas postagens de blog Divi (sem um plug-in)

Adicionar uma barra de progresso de leitura (ou indicador de rolagem) ao modelo de postagem de seu blog é uma maneira inteligente de mostrar o progresso de leitura de um determinado artigo de um usuário. A ideia é exibir uma barra de progresso fixa no topo da postagem que se correlaciona diretamente com a posição de rolagem do usuário no conteúdo da postagem. Quando o usuário chega ao artigo, a barra de progresso começa a se encher. Quando o usuário chega ao final do artigo, a barra de progresso está 100% cheia.

Neste tutorial, mostraremos como criar uma barra de progresso de leitura para as postagens do blog Divi que seja inteligente o suficiente para saber quando o usuário inicia e termina (rolando) o conteúdo da postagem real, não a página inteira. Isso dará uma indicação mais precisa do progresso da leitura.

Mostraremos como adicionar essa barra de progresso de leitura ao modelo de postagem de blog padrão da Divi ou a um modelo de postagem personalizado usando o Divi Theme Builder.

Vamos começar!

Espiada

Aqui está uma rápida olhada no design que construiremos neste tutorial. Observe como a barra de progresso é fixada na parte superior do modelo de postagem. A barra de progresso começa a encher assim que o usuário atinge o conteúdo real da postagem / artigo e termina quando o usuário termina o conteúdo da 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 Quarto 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 de modelo de site padrão na 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.

Projetando a Barra de Progresso de Leitura

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 uma coluna à seção.

Configurações da seção

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

• Preenchimento: 0 px superior, 0 px 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:

• cor de fundo: # 2b2b2b

Na guia de design, atualize o seguinte:

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

Criando a barra de rolagem com um módulo divisor

A barra de progresso aumentará gradualmente em largura para ocupar o contêiner / linha vazia. Para construir isso, usaremos um módulo divisor com uma cor de fundo personalizada. Depois de projetar o divisor com o estilo que queremos para a barra de progresso, adicionaremos o código necessário para fazer o divisor aumentar em largura no momento certo enquanto rola a página para baixo.

Adicionar Módulo Divisor

Crie um novo módulo divisor dentro da coluna.

Em seguida, desative a visibilidade do divisor. Vamos adicionar uma cor de fundo para servir como a cor da barra de progresso. Atualize o seguinte:

• Mostrar divisor: NÃO
• Cor do gradiente de fundo à esquerda: # ff4349
• Cor certa do gradiente de fundo: # fe7f47
• Direção do gradiente: 90 graus

Na guia de design, atualize a altura da barra de progresso:

• altura: 20px

Na guia avançada, forneça ao divisor um ID CSS personalizado da seguinte maneira:

• ID CSS: scrollBar

Precisamos disso para direcionar a barra de rolagem para funcionalidade com jQuery mais tarde.

Adicionar etiqueta do contador de porcentagem da barra de progresso

Para adicionar o rótulo do contador de porcentagem da barra de progresso, adicione um módulo de texto abaixo do módulo divisor.

Em seguida, adicione o seguinte HTML ao conteúdo do corpo:

<p>Reading Progress: <span></span></p>

As tags span são importantes aqui porque usaremos jQuery para preencher as tags span com o contador de porcentagem.

Na guia de design, atualize o seguinte:

• Fonte do Texto: Heebo
• Peso da fonte do texto: negrito
• Estilo da fonte do texto: TT
• Cor do texto do texto: #ffffff
• Tamanho do texto do texto: 13px
• Espaçamento entre letras do texto: 3px
• Altura da linha de texto: 1em

Em seguida, atualize um pouco o preenchimento esquerdo:

• preenchimento: 10px à esquerda

Na guia avançada, dê ao módulo de texto uma posição absoluta no centro da coluna / linha. Isso garantirá que ele não ocupe nenhum espaço real no documento e permaneça centralizado verticalmente na barra.

• Posição: Absoluta
• Localização: Esquerda Centro

Antes de sair do módulo de texto, adicione uma classe CSS para que possamos direcioná-la com nosso código jQuery.

• Classe CSS: et-progress-label

Adicionando o código jQuery

Para dar à barra de progresso a funcionalidade mágica de que precisa, precisamos adicionar o código jQuery necessário.

Para fazer isso, adicione um novo módulo de código no módulo de texto.

Em seguida, cole o seguinte código:

<script>
(function($) {
    $(document).ready(function(){
        var winHeight = $(window).height();
        var $scrollBar = $('#scrollBar');
        var $progressLabel = $('.et-progress-label p span');   
        var $postContent = $('.et-post-content');
        $scrollBar.css('width', 0);
        $progressLabel.html('0%');
        $(window).scroll(function(){
            var postContentHeight = $postContent.height();          
            var postContentStartPosition = $postContent.offset().top;
            var winScrollTop = $(window).scrollTop();
            var postScrollTop = postContentStartPosition - winScrollTop;
            var postScrollableArea = postContentHeight - winHeight;
            var postScrollPercentage = Math.abs((postScrollTop/postScrollableArea)*100);
            if (postScrollTop > 0) {
                $scrollBar.css('width', 0);
                $progressLabel.html('0%');
            } else if (postScrollTop < 0 && postScrollTop > -postScrollableArea) {
                $scrollBar.css('width', (postScrollPercentage + '%'));
                $progressLabel.html( Math.round(postScrollPercentage) + '%');
            } else if (postScrollTop < -postScrollableArea) {
                $scrollBar.css('width', '100' + '%');
                $progressLabel.html('100%');
            }
        });
    });
})( jQuery );
</script>    

E para a última etapa, precisamos dar à nossa seção uma posição fixa. Deixamos isso por último porque isso ocultará a seção atrás das seções acima contendo o conteúdo do cabeçalho.

Abra as configurações da seção para a seção que contém a barra de progresso e atualize o seguinte:

• Cargo: Fixo
• Índice Z: 998

Em seguida, abra as configurações da seção superior que contém o conteúdo do cabeçalho e atualize o Índice Z da seguinte forma:

• Índice Z: 999

Agora, a barra de progresso ficará inicialmente oculta atrás da parte superior do cabeçalho. Então, quando o usuário rolar a postagem para baixo, você a verá fixada no topo da página.

Não se esqueça de salvar as alterações.

Adicionando o seletor (classe CSS) ao módulo Post Content no Body Area Template.

No momento, o código é escrito para reconhecer um elemento com a classe “et-post-content” como o conteúdo principal da postagem.

Como estamos usando um modelo personalizado para o corpo da postagem, precisamos aplicar essa classe CSS ao módulo de conteúdo de postagem do modelo para que nosso código possa calcular adequadamente o progresso da leitura conforme o usuário rola a postagem.

Para fazer isso, abra o modelo da área do corpo do modelo de postagem no criador de temas.

Abra as configurações do módulo de conteúdo de postagem e adicione a seguinte classe CSS:

• Classe CSS: et-post-content

Em seguida, salve as alterações.

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

Resultado final

Para ver o resultado em ação, abra uma postagem ao vivo em seu site. Certifique-se de que a postagem tenha conteúdo suficiente para que haja espaço para rolar a página para baixo.

Usando a barra de progresso de leitura no modelo de postagem padrão da Divi (não um modelo personalizado)

Se você não estiver usando um modelo de corpo personalizado para a postagem e quiser adicionar a barra de progresso de leitura ao modelo de postagem de blog padrão no Divi, tudo o que você precisa fazer é atualizar uma única classe CSS no código.

Primeiro, certifique-se de que a área personalizada do corpo do modelo de postagem foi excluída.

Em seguida, abra o layout do modelo de cabeçalho personalizado e atualize o módulo de código, substituindo esta linha de código ...

 var $postContent = $('.et-post-content');

com isso…

 var $postContent = $('.entry-content');

A classe “entry-content” terá como alvo o div no modelo de postagem padrão que contém o conteúdo da postagem do blog (excluindo o título, imagem em destaque, metadados acima e os comentários abaixo, que distorcem o comprimento real do artigo).

Resultado

Aqui está o resultado de uma postagem usando o modelo de postagem padrão.

Pensamentos finais

Esta barra de progresso de leitura é muito mais inteligente do que o indicador de rolagem típico, que mostra o andamento da rolagem por toda a página / documento. Essa barra direciona apenas o conteúdo real da postagem que o usuário irá ler, fornecendo uma descrição precisa do progresso da leitura. Isso é ótimo para os blogs que tendem a ter textos e comentários longos. Eu também funcionaria muito bem em cursos online para dar a esses alunos uma motivação extra para continuar!

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

Saúde!