Como criar uma barra de progresso no WordPress

Uma barra de progresso é um indicador poderoso que informa aos usuários quanto progresso eles fizeram com uma determinada tarefa ou habilidade. Ele os informa sobre os tempos restantes de upload e download ou quanto dinheiro foi arrecadado em uma arrecadação de fundos da qual participaram e muito mais.

As barras de progresso são práticas e fornecem feedback que faz com que os usuários se sintam engajados e motivados a permanecer até que seus objetivos sejam alcançados. Eles veem o progresso que fizeram em um processo específico e estão altamente motivados para concluí-lo totalmente. Essa sensação de realização ativa alguns produtos químicos do bem-estar em seus cérebros para fazê-los sentir-se felizes e contentes consigo mesmos. Além disso, uma barra de progresso mata a sensação de ansiedade que os usuários podem sentir quando estão prestes a iniciar uma pesquisa on-line de várias páginas, dizendo-lhes exatamente quanto tempo é a pesquisa ou quantas perguntas eles precisam responder.

Barra de progresso GIF

Para criar uma barra de progresso no WordPress, a maneira mais fácil e rápida de fazer isso é instalando um plugin para adicionar essa funcionalidade ao seu site, já que a plataforma não a inclui por padrão. Mostraremos como fazer isso usando o plugin Progress Bar & Skill Bar. Além disso, também falaremos sobre como adicionar uma barra de progresso de leitura às suas postagens com a ajuda do plugin Worth the Read, caso queira informar os usuários sobre o progresso de leitura que alcançaram. E uma vez que também existem alguns temas premium no mercado que permitem aos usuários criar barras de progresso sem a necessidade de usar um plug-in, vamos guiá-lo por esse processo também, usando nosso tema Bridge como exemplo.

  • Como criar uma barra de progresso no WordPress usando um plugin
  • Como adicionar uma barra de progresso de leitura no WordPress usando um plugin
  • Como criar uma barra de progresso no WordPress usando um tema Qode interativo

Como criar uma barra de progresso no WordPress usando a barra de progresso e o plugin da barra de habilidade

Embora existam vários plug-ins que permitem aos usuários adicionar barras de progresso a seus sites, o que gostaríamos de recomendar é o Barra de progresso e barra de habilidade plugue.

Barra de progresso e barra de habilidade

Este é um ótimo plugin que permite aos usuários adicionar barras de progresso personalizadas aos seus sites WordPress sem muitos problemas.

Para começar a criar sua barra de progresso, vá para ProgressBar WP> Adicionar nova barra de progresso.

Adicionar nova barra de progresso

Você pode inserir um título personalizado para sua barra de progresso, escolher entre dois modelos de design gratuitos (o versões profissionais atualmente empacota 34 layouts (incluindo o estilo de gráfico e modelos de meio gráfico de pizza) e define a porcentagem. No lado direito da tela, há uma lista de todos os itens que você pode alterar, incluindo a cor do título, a altura e o peso da fonte do título, a família da fonte, a cor de fundo, etc..

Leia Também:  Baixe 10 plug-ins grátis para acelerar seu site WordPress

Quando terminar, você pode copiar o código de acesso que aparece próximo à parte inferior da página e colá-lo em qualquer página ou postagem. E se você sabe como codificar, você também pode modificar sua barra de progresso usando CSS.

Código curto da barra de progresso

Resumindo, este plugin é uma ótima solução que permite ajustar uma quantidade razoável de atributos e criar uma barra de progresso para atender às suas necessidades. A versão profissional vem com ainda mais opções, incluindo vários efeitos de animação e a capacidade de alterar todas as cores da barra de progresso (incluindo a cor da borda). Resumindo, se você deseja seguir o caminho do plugin, você não irá errar com a barra de progresso e a barra de habilidade.

Como adicionar uma barra de progresso de leitura no WordPress

A próxima coisa que gostaríamos de mostrar a você é como adicionar uma barra de progresso de leitura às suas postagens. Dessa forma, você pode permitir que os usuários entendam o quanto eles rolaram por uma página específica.

A maneira mais fácil de fazer isso é instalando o Vale a pena ler plugue.

Vale a pena ler

Este plugin é mínimo e simples, e a barra de progresso da leitura não aparece na tela até que os usuários comecem a rolar para baixo na página. Quando a rolagem para, a barra desaparece e reaparece apenas quando o usuário continua navegando no conteúdo.

Você pode adicioná-lo a páginas, postagens e tipos de postagem personalizados. O plugin permite que você escolha a localização da barra de progresso, a rolagem, inclua comentários e ajuste ao seu gosto. Você pode alterar a espessura da barra, as cores do primeiro plano e do plano de fundo, cor do comentário, ativar sombra e muito mais.

Funcionalidade de código curto da barra de progresso

Nós gostamos especialmente do Compromisso com horário função que pode ser adicionada acima ou abaixo do título e acima do conteúdo. Você pode especificar o número médio de palavras que os usuários devem ler em um minuto, e esse número varia muito de idioma para idioma. Por exemplo, a velocidade média de leitura para adultos que falam inglês é de 200 a 250 palavras por minuto, então você pode definir o valor padrão como 200.

Leia Também:  Como criar um link curto no WordPress (a maneira mais fácil)

Como criar uma barra de progresso no WordPress usando um tema Qode interativo

A maneira mais fácil e rápida de adicionar uma barra de progresso ao seu site é usando um tema que contém o código curto para a barra de progresso. Dessa forma, você não precisará procurar serviços de terceiros para melhorar a funcionalidade do seu site, pois tudo o que você precisa está incluso no tema.

Bridge é um tema premium versátil que inclui uma coleção de mais de 515 demos que podem ser usadas para criar praticamente qualquer tipo de site que você tenha em mente. Inclui um compêndio de códigos de acesso úteis, um dos quais é o código de atalho da barra de progresso, que permite adicionar sem esforço uma barra de progresso ao seu site. E vamos mostrar agora como fazer isso.

Para começar, vá para a página onde deseja exibir a barra de progresso ou crie uma nova. Vamos começar do zero, então vamos selecionar Páginas> Adicionar Novo.

Adicionar nova página

Explicaremos como criar a barra de progresso usando os três construtores mais populares: WPBakery Page Builder, Elementor e Gutenberg. Vamos começar com o WPBakery Page Builder.

Construtor de páginas de padaria WP

Depois de selecionar o criador de páginas de sua preferência, clique em Adicionar Item.

WP Padaria Adicionar item

Então escreva Barra de progresso no campo de pesquisa. O Bridge vem com três códigos de acesso relacionados à barra de progresso, um dos quais permite personalizar o ícone da barra de progresso, enquanto os outros dois permitem adicionar uma barra de progresso vertical ou horizontal ao seu site. Para fins de teste, selecionamos a barra de progresso – código de acesso horizontal.

Pesquisa de código curto de barra de progresso

O código de acesso em si permite que você personalize vários detalhes de sua preferência, incluindo título, cor do título, porcentagem, cor percentual, tamanho e peso da fonte em porcentagem, cor de fundo ativa e inativa, cor da borda, altura da barra de progresso e muito mais.

Configuração horizontal da barra de progresso

Depois de ajustar todas as configurações aos seus requisitos e estiver satisfeito com a aparência das coisas, salve suas alterações.

No ElementorMais uma vez, você pode encontrar os códigos de acesso usando a opção de pesquisa localizada no canto superior esquerdo da tela.

Pesquisa de barra de progresso de elemento ou
Configurações do elemento ou da barra de progresso

E, finalmente, vamos ver como criar uma barra de progresso no WordPress usando Gutenberg.

Para inserir códigos de acesso personalizados em sua página, você precisa adicionar o HTML personalizado bloquear primeiro.

Bloco HTML personalizado

Em seguida, você precisa colar o trecho de código curto no bloco. Optamos pela barra de progresso: shortcode horizontal e este é o snippet que adicionamos ao bloco:

[progress_bar title_tag="h3" percent_font_weight="600" gradient="yes" title="Test" title_color="#dd3333" percent="72" percent_color="#1e73be" percent_font_size="30px" active_background_color="#81d742" active_border_color="#eeee22" noactive_background_color="#000000" noactive_background_color_transparency="0.5" height="150" border_radius="20px"]

Você pode ajustar todos os parâmetros colocados entre aspas de acordo com suas preferências.

Se você quiser usar outro código de acesso relacionado à barra de progresso ou se quiser fazer modificações sem se preocupar com códigos hexadecimais, etc., a melhor maneira de fazer isso é criar uma nova página usando o construtor de páginas WPBakery. Em seguida, adicione o código de acesso desejado e modifique-o de acordo com sua preferência.

Configurações do ícone da barra de progresso

Salve as alterações e mude para Modo clássico.

Modo clássico

O shortcode aparecerá no editor de texto.

Editor de texto

Tudo o que resta a fazer é copiá-lo e adicioná-lo ao bloco HTML personalizado. Você pode usar este método para adicionar qualquer código de acesso personalizado que desejar ao Gutenberg.

conclusão

As barras de progresso são acréscimos úteis aos sites, pois atuam como fortes motivadores e incentivam as pessoas a continuar até que as tarefas sejam concluídas. Eles também ajudam as marcas a serem mais transparentes com os usuários, pois as pessoas sempre saberão onde estão. Apresentamos vários métodos para criar uma barra de progresso no WordPress, mas agora cabe a você escolher a forma que melhor se adapta às suas necessidades. Nosso conselho seria escolher um tema premium que já inclua o shortcode da barra de progresso, simplesmente porque não há risco de um plugin da barra de progresso não funcionar com o seu tema e também porque o shortcode vem com mais opções para personalização.. No final das contas, o último é de grande importância, pois não é suficiente para que a barra de progresso esteja funcional. Também deve ter uma boa aparência. Barras de progresso são exibidas nas páginas o tempo todo para que os usuários vejam, então você também pode projetá-las de uma forma atraente, o que com o tema e o código curto certos não é nada difícil.

Compartilhe este Link:

Compartilhar no facebook
Compartilhar no twitter
Compartilhar no linkedin
Compartilhar no pinterest
Compartilhar no email
Compartilhar no whatsapp
Compartilhar no telegram

Deixe um comentário

Receba nossos preços
e condções direto no seu email

Por favor, preencha os campos abaixo:

Preferência de contato: