Conteúdo de formato longo é fantástico para SEO e para fornecer valor aos seus leitores, mas há um pequeno problema: as pessoas gostam de saber no que estão se metendo.
Quando alguém acessa um tutorial de 3.000 palavras, quer entender seu compromisso antecipadamente. Barras de progresso resolvem isso lindamente, mostrando aos leitores exatamente onde eles estão em seu conteúdo.
Temos usado elas em nosso site de assinatura de vídeo WPBeginner para mostrar o quanto do curso os usuários completaram. Dessa forma, os alunos podem acompanhar facilmente seu progresso de aprendizado e se manter motivados para terminar seu treinamento.
A melhor parte? Você não precisa de nenhuma habilidade de codificação ou plugins caros para adicionar barras de progresso ao seu site WordPress. Neste guia, mostraremos exatamente como criá-las, passo a passo.
Quando Adicionar uma Barra de Progresso a Posts do WordPress
Existem vários cenários onde adicionar uma barra de progresso pode aprimorar seus posts de blog WordPress e torná-los mais impactantes.
Por exemplo, barras de progresso são excelentes para exibir o status de conclusão de projetos.
Se você tem um blog que documenta projetos de longo prazo, adicionar barras de progresso pode dar aos leitores uma atualização visual rápida de quão longe você chegou.
Também usamos barras de progresso em nosso site de assinatura de vídeo.
Isso é para ajudar nossos usuários a verem o quanto eles completaram do curso.
Campanhas de arrecadação de fundos em seu site WordPress também podem se beneficiar muito de barras de progresso. Elas fornecem uma representação visual imediata de quão perto você está de atingir seu objetivo, o que pode incentivar mais doações.
Para conteúdo educacional, barras de progresso podem ilustrar marcos de aprendizado ou a complexidade de diferentes tópicos. Isso pode ajudar os leitores a ver o nível de dificuldade de vários assuntos que você está abordando em seus posts de blog.
Se o seu site foca em tópicos de fitness ou saúde, barras de progresso podem ser usadas para mostrar níveis de intensidade de treino, barra de habilidades, informações nutricionais ou progresso em direção a metas de saúde.
Além disso, adicionar uma barra de progresso a posts sobre estatísticas ou resultados de pesquisas pode tornar os dados mais fáceis de digerir e envolventes. Em vez de apenas listar porcentagens, você pode representar visualmente os dados com barras de progresso coloridas.
Com isso em mente, criamos 2 maneiras fáceis de adicionar uma barra de progresso ao seu site WordPress. Você pode usar os links rápidos abaixo para pular para o seu método preferido:
- Método 1: Adicionar uma Barra de Progresso com um Page Builder (Mais Personalizável)
- Método 2: Usar um Plugin Gratuito de Barra de Progresso (Rápido e Fácil)
- Frequently Asked Questions: Adding Progress Bars in WordPress
Observação: Você está procurando um tutorial de barra de progresso de leitura em vez disso? Se sim, nosso artigo sobre como adicionar uma barra de progresso de leitura em posts do WordPress vale a pena ser lido.
Método 1: Adicionar uma Barra de Progresso com um Page Builder (Mais Personalizável)
Uma maneira eficaz de adicionar uma barra de progresso ao seu site WordPress é usando um construtor de páginas com um recurso de barra de progresso integrado. Essa abordagem garante que sua barra de progresso se integre perfeitamente ao design geral do seu tema.
Para este método, usaremos o Thrive Architect, um poderoso construtor de páginas que oferece muitos modelos de temas diferentes e uma interface amigável de arrastar e soltar. É uma excelente escolha para iniciantes e usuários experientes que desejam uma maneira fácil de personalizar o design de seu site WordPress.
No entanto, tenha em mente que este método envolve alterar seu tema. Se você estiver satisfeito com seu tema atual e não quiser mudar, talvez prefira nosso segundo método.
Além disso, o Thrive Architect não tem versão gratuita. Dito isso, você pode usar nosso código de cupom Thrive Themes para obter até 50% de desconto na sua primeira compra.
Você pode aprender mais sobre a plataforma em nossa revisão do Thrive Architect.
Etapa 1: Instale o Thrive Theme Builder
Para começar, você precisará configurar o Thrive Architect. Comece fazendo login na sua conta Thrive Themes e baixando o plugin Thrive Product Manager.
Depois disso, baixe e instale o plugin Thrive Product Manager. Você pode conferir nosso guia para iniciantes sobre como instalar um plugin do WordPress para instruções passo a passo.
Nesta etapa, prossiga e clique em Product Manager na sua área de administração do WordPress.
Depois de fazer isso, você pode clicar no botão 'Entrar na minha conta' para conectar seu site WordPress à sua conta Thrive Themes.
Agora você deve ver uma lista de todos os produtos Thrive Themes disponíveis em sua conta.
Simplesmente selecione 'Thrive Architect' e marque a caixa 'Instalar Produto'.
Depois disso, vamos rolar para baixo até a seção 'Thrive Theme Builder' e marcar a caixa 'Instalar Tema'. Temos que fazer isso porque o Thrive Architect funciona melhor com um Thrive Theme.
Em seguida, clique no botão ‘Instalar produtos selecionados’.
Agora você deve ver que o Thrive Product Manager está configurando os plugins Thrive Architect e Thrive Theme Builder.
Quando isso terminar, basta clicar em ‘Ir para o Painel do Theme Builder’.
Neste ponto, você pode simplesmente escolher um tema WordPress.
Você também pode clicar no botão ‘Visualizar’ para ver como o tema fica antes de clicar em ‘Escolher’ nele.
Com seu tema configurado, você deve agora chegar ao Assistente do Theme Builder.
Este assistente de integração irá ajudá-lo a fazer o upload do seu próprio logotipo, escolher cores de marca para adicionar ao seu tema e configurar as diferentes estruturas e modelos do seu tema.
Basta concluir a integração para poder passar para a próxima etapa.
Etapa 2: Adicionar uma Barra de Progresso às Suas Publicações do WordPress
Vamos agora adicionar uma barra de progresso às suas publicações do WordPress. Para começar, abra o editor de blocos para uma nova publicação ou uma existente.
Em seguida, digite o título da sua nova publicação lá. Depois disso, clique no botão ‘Iniciar Thrive Architect’.
Agora, você pode usar o Thrive Architect para criar o conteúdo da sua publicação de blog. Ele funciona de forma semelhante ao editor de blocos.
Ou seja, você pode simplesmente clicar no botão ‘+’ e arrastar e soltar qualquer elemento que desejar na seção que diz ‘Clique para adicionar texto ou arraste e solte o elemento do painel direito’.
Aqui está um exemplo de nós adicionando um bloco de Texto usando o editor:
O processo para adicionar uma barra de progresso é praticamente o mesmo. Basta clicar no botão ‘+’ novamente e encontrar o bloco ‘Barra de Progresso’.
Depois disso, basta adicioná-lo à sua postagem.
Em seguida, uma janela pop-up aparecerá, pedindo para você escolher um design de barra de progresso.
Existem dezenas para escolher, e você sempre pode alterá-lo mais tarde, se necessário.
Assim que você fizer sua escolha, retornará à interface principal do editor.
Etapa 3: Personalize a Barra de Progresso
Nesta etapa, você deverá ver uma barra lateral no painel esquerdo com opções de personalização para a barra de progresso.
Existem muitas configurações para configurar, e cobriremos as principais para mostrar como modificar a barra de progresso.
No menu Opções Principais, você pode alterar o design da barra de progresso de um simples para um com Nós. Nós são ícones que mostram onde você está no progresso. Escolhemos esse tipo de design para fins de exemplo.
Você também pode alterar onde colocar os rótulos da barra de progresso, a altura da barra e o nível atual da barra de progresso.
Descendo o painel, você encontrará opções para alterar os rótulos dos Nós.
Para modificá-los, clique no ícone de lápis ‘Editar’ ao lado do rótulo.
Agora, basta digitar seu novo rótulo.
Quando terminar, clique no ícone ‘Salvar’.
O que há de ótimo no Thrive é que ele permite personalizar todas as outras partes da barra de progresso para que você possa projetá-la da maneira que desejar.
Para ver essas opções de personalização em ação, você pode passar o mouse sobre um dos elementos na barra de progresso e clicar nele.
Aqui, selecionamos a parte da barra de progresso que mostra o progresso incompleto.
Agora, um novo conjunto de opções apareceu na barra lateral esquerda.
Se você clicar no menu suspenso ‘Estilizando atualmente’ na parte superior, poderá alterar partes específicas da barra, como os rótulos de progresso, ícones, nós e muito mais.
Certifique-se de explorar cada parte para ver o que você pode personalizar.
Vamos tentar alguns exemplos. Para desativar a animação de listras de doces na barra de fundo, selecione ‘Fundo de linhas agrupadas’ no menu Estilizando atualmente.
Em seguida, desative o botão ‘Animação de listras de doces’.
Se você quiser alterar os ícones dentro dos nós de progresso, mude para ‘Ícones de progresso’ no menu suspenso Estilizando atualmente.
Depois disso, no menu ‘Estado’ na parte superior, selecione ‘Normal.’
Você agora deve ver algumas configurações feitas para alterar os ícones da barra de progresso.
Aqui, clique em ‘Alterar ícone.’
O Thrive Architect possui muitos ícones em sua biblioteca para várias indústrias. Dito isso, certifique-se de que o ícone que você escolher seja adequado para uma barra de progresso.
Depois de fazer sua escolha, basta clicar em ‘Selecionar.’
Para alterar o estilo do ícone, basta clicar no botão ‘Alterar estilo.’
A partir daqui, você verá alguns designs de ícones pré-fabricados que você pode escolher.
Para alterar a aparência do rótulo de progresso, mude para a opção ‘Rótulo de progresso’ no menu suspenso Estilizando atualmente.
Aqui, você verá algumas opções para personalizar a cor do rótulo, realçar, formatação e assim por diante.
Assim que estiver satisfeito com a aparência da barra de progresso, clique em ‘Salvar trabalho’ para armazenar suas alterações.
Certifique-se de visualizar sua postagem de blog no celular, desktop e tablet para que tudo fique ótimo.
Veja como o nosso fica em nosso site de demonstração:
Alternativa: Adicionar uma Barra de Progresso Circular
O Thrive Architect também tem um tipo diferente de barra de progresso em sua coleção de blocos chamado contador de preenchimento. O bloco Contador de Preenchimento se parece com uma barra de progresso circular, o que é ótimo para exibir estatísticas.
Para adicioná-lo, basta clicar no botão '+' na barra lateral direita e encontrar o elemento 'Contador de Preenchimento'. Em seguida, arraste e solte-o em qualquer lugar da postagem.
Assim que você o adicionar, verá algumas opções para personalizar o contador de preenchimento.
Principalmente, você pode alterar o tamanho do contador de preenchimento, a porcentagem de preenchimento, as cores e se o valor da porcentagem deve corresponder ao valor apresentado visualmente no contador.
Você também pode clicar no número dentro do contador de preenchimento para alterar sua aparência.
Sinta-se à vontade para modificar suas cores, tipo de fonte, visibilidade em diferentes dispositivos e muito mais.
Se você quiser alterar o texto abaixo da porcentagem, basta clicar no próprio texto.
Depois disso, você pode digitar uma descrição para o contador de preenchimento.
Não se esqueça de salvar seu trabalho quando terminar.
Alternativa: Não é fã do Thrive Architect? O construtor de páginas SeedProd também tem um bloco de barra de progresso que você pode adicionar ao seu tema ou páginas personalizadas.
Para mais informações sobre como usar o SeedProd, confira nosso guia sobre como criar um tema WordPress personalizado.
Método 2: Usar um Plugin Gratuito de Barra de Progresso (Rápido e Fácil)
Este método é o melhor se você não quiser usar um construtor de páginas e precisar apenas de um plugin de barra de progresso WordPress simples e gratuito.
Para isso, usaremos o plugin gratuito Ultimate Blocks, que adiciona toneladas de blocos extras do Gutenberg ao seu editor do WordPress.
O ótimo deste plugin é que o bloco de barra de progresso está disponível gratuitamente. Dito isso, você pode fazer o upgrade para a versão pro do plugin para obter mais blocos Gutenberg e opções de personalização.
Você pode saber mais sobre o plugin em nossa análise do Ultimate Blocks.
Primeiro, instale e ative o plugin do WordPress em seu site. Feito isso, você pode abrir o editor de blocos para criar uma nova postagem ou editar uma existente.
Agora, clique no botão ‘+’ em qualquer lugar da página e selecione o bloco ‘Barra de Progresso’.
Você adicionou com sucesso um bloco de barra de progresso à sua postagem. Vamos personalizar ainda mais este elemento de design do WordPress para atender às suas necessidades.
Se você olhar na barra lateral de configurações do bloco à direita, verá algumas opções de personalização. Na aba ‘Geral’, você pode alterar a posição percentual da barra de progresso de cima para dentro ou para baixo da barra.
Você também pode desativar ou ativar o design ‘Listras’ e alterar o valor do progresso atual.
Em seguida, você pode personalizar as Configurações de Número.
Aqui, escolhemos não mostrar a porcentagem do número porque não a achamos útil para o nosso exemplo.
Mas se você escolher exibi-lo, então você pode alterar o prefixo do número (um símbolo que aparece antes do número, como um sinal de menos) e o sufixo do número (um símbolo que aparece depois do número, como um sinal de moeda).
O próximo é o Controle Responsivo.
Como as barras de progresso podem ocupar algum espaço em sua postagem, você pode querer ocultá-la quando a postagem estiver sendo visualizada em uma tela menor, como em tablets ou dispositivos móveis.
Quer tornar a barra de progresso mais interativa? Considere adicionar uma animação de entrada. Quando você habilita este recurso, a barra de progresso aparecerá com um efeito animado conforme o espectador rola para baixo até ela.
Você também pode escolher um estilo de animação e definir o período de atraso para que a barra de progresso apareça no momento certo.
Vamos mudar para a aba ‘Estilo’, onde você pode personalizar o design da barra de progresso.
Na parte superior, você pode mudar o design de uma linha para uma barra de progresso circular ou semicircular. Você também pode adicionar um raio de borda ao design da barra para que ela pareça mais circular do que retangular e angular.
Aqui, decidimos manter a barra de progresso linear.
Mas é assim que as barras de progresso circulares e semicirculares ficam:
Rolando para baixo, você pode alterar a espessura da barra de progresso para que ela se destaque ainda mais.
Você também pode querer alterar a cor da barra de progresso, da barra de fundo e do rótulo da barra de progresso para se adequar ao design do seu site.
Outro elemento que você pode alterar é o preenchimento e margem da barra de progresso.
Ambas as configurações controlam essencialmente o espaçamento entre a barra de progresso e os outros blocos ao redor dela.
Você pode aumentar o valor de ambos se não quiser que a barra de progresso fique muito perto dos outros blocos acima ou abaixo dela.
Em seguida, você pode querer adicionar um rótulo ou descrição à barra de progresso para que os leitores obtenham mais contexto visual.
Acima da barra de progresso, basta digitar algum texto. Você também pode querer alterar o alinhamento e o estilo do texto usando as configurações na barra de ferramentas do bloco.
Assim que estiver satisfeito com a aparência da barra de progresso, clique em 'Publicar' ou 'Atualizar' no editor de blocos.
Você também pode querer visualizar a postagem em dispositivos móveis, desktops e tablets para garantir que a barra de progresso fique correta em todos os dispositivos.
É isso! Você adicionou com sucesso uma barra de progresso às suas postagens do WordPress.
Veja como nossa barra de progresso fica em nosso site de demonstração:
Perguntas Frequentes: Adicionando Barras de Progresso no WordPress
Aqui estão algumas perguntas frequentemente feitas por nossos leitores sobre barras de progresso:
1. Quando devo usar uma barra de progresso de leitura versus uma barra de progresso estática?
Recomendamos o uso de uma barra de progresso de leitura quando você deseja manter os leitores engajados em postagens longas. Ela se preenche à medida que eles rolam, mostrando o quanto do artigo eles leram.
Isso funciona bem para tutoriais, guias ou postagens de blog onde você deseja reduzir as taxas de rejeição.
Uma barra de progresso estática é melhor para acompanhar uma meta fixa, como progresso de arrecadação de fundos, conclusão de projeto ou níveis de habilidade. Essas barras não se movem enquanto o usuário rola, mas exibem uma porcentagem ou valor definido, como “60% concluído” ou “R$ 300 de R$ 500 arrecadados”.
Se o seu objetivo é aumentar o engajamento durante a leitura, opte por uma barra baseada em rolagem. Se você quer exibir progresso ou conquistas, escolha uma estática.
2. Quais são algumas boas práticas ao usar barras de progresso?
Aqui estão algumas dicas para tornar sua barra de progresso mais eficaz:
- Mantenha a simplicidade – Uma barra fina e sutil funciona melhor e não distrai do seu conteúdo.
- Combine com sua marca – Personalize a cor e o tamanho para se adequar ao estilo do seu site.
- Escolha o local certo – A maioria dos leitores espera que ela esteja no topo da tela.
- Teste no celular – Algumas barras ficam desajeitadas em telas pequenas. Desative se necessário.
- Opcional: Adicione tempo de leitura – Ajuda a definir expectativas sobre quanto tempo o post levará.
Uma barra de progresso limpa e bem posicionada pode melhorar a experiência do usuário sem diminuir a velocidade.
3. Adicionar uma barra de progresso vai deixar meu site lento?
A maioria dos plugins modernos de barra de progresso são leves e não afetarão visivelmente a velocidade do seu site.
No entanto, plugins mal codificados ou excessivamente grandes podem impactar o desempenho, especialmente em dispositivos móveis. Para ficar seguro:
- Use plugins confiáveis com boas avaliações.
- Teste a velocidade do seu site após a instalação.
- Desative a barra em dispositivos móveis se ela afetar o tempo de carregamento.
Desde que você seja cuidadoso com a escolha do seu plugin, adicionar uma barra de progresso não prejudicará o SEO e pode até aumentar o engajamento.
Elementos de Design Bônus para o Seu Site WordPress
Quer adicionar outros elementos visuais ao seu site WordPress? Confira estes artigos abaixo:
- How to Add Drop Caps in WordPress Posts
- Como Adicionar um Widget de Contador Regressivo no WordPress
- Como Adicionar um Ticker de Notícias Rolante no WordPress
- How to Add an Animated Background in WordPress
- Como Mostrar uma Animação de Contador de Números no WordPress
- Maneiras de Trazer Efeitos de Halloween para o Seu Site WordPress
- Como Adicionar Depoimentos Rotativos no WordPress
- Como Adicionar Caixas de Recursos com Ícones no WordPress
- Como Adicionar Vídeo do YouTube como Fundo em Tela Cheia no WordPress
Esperamos que este tutorial tenha ajudado você a aprender como adicionar uma barra de progresso às suas postagens do WordPress. Você também pode querer conferir nossas escolhas de especialistas dos melhores construtores de temas WordPress e nosso guia sobre como editar um site WordPress.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Sachiko Ishikawa
Hello! I have a question
How can I adjust the size (width) of the progress bar? I’m putting it on my sidebar menu, but unfortunately, it’s too wide…
Pedimos desculpas pelos inconvenientes.