Barras de habilidades, metas de financiamento e status do projeto, todos leem melhor como um visual do que como um número enterrado em uma frase O livre Widget da Barra de Progresso em Complementos Mestres para Elementor oferece uma barra animada com um título e uma porcentagem, além de um menu suspenso Predefinições de estilo que alterna entre uma linha simples, uma linha com uma bolha, um círculo completo e um medidor de meio círculo.
Você define um título e um valor, escolhe uma predefinição e depois colorir a barra frontal, a barra traseira e o valor para combinar com sua marca. Este guia cobre todas as configurações do widget.
O que o widget da Barra de Progresso faz #
O widget renderiza um indicador de progresso: um título, um valor percentual e uma barra que preenche esse valor quando a página é carregada Predefinições de estilo dropdown muda a forma, de modo que o mesmo valor pode mostrar como uma linha horizontal, uma linha com uma bolha flutuante, um círculo de donuts ou um medidor de semicírculo.
Tem três abas. Conteúdo detém o título e o valor. Estilo controla a predefinição, as cores da barra frontal e traseira, o balão, o título e o texto do valor. Avançado carrega as opções usuais de espaçamento e visibilidade do Elementor.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo. Novo no plugin? veja o guia instalação.
- Os rótulos e porcentagens que você deseja mostrar, como WordPress 60% ou Java 85%.
Como adicionar o widget da Barra de Progresso #
No editor Elementor, abra o Elementos painel e pesquisa Barra de progresso, ou vá até a seção Master Addons (os widgets carregam um emblema MA roxo).Arraste-o para sua página e ele carrega com uma única barra pronta para editar.
Atenção: existem dois widgets semelhantes. Barra de progresso é uma única barra (este guia) e Barras de progresso (o Widget de barras de progresso) empilha várias barras dentro de um widget Para algumas barras independentes em estilos diferentes, a única Progressbar é a escolha flexível.
Defina o título e o valor #
Abrir o Conteúdo guia. Existem apenas dois campos, que mantém a configuração rápida.
- Título: a etiqueta acima da barra, como WordPress ou Design.
- Valor: a porcentagem que a barra preenche de 0 a 100.
Como cada Barra de Progresso é uma barra, você constrói um conjunto duplicando o widget Clique com o botão direito e escolha Duplicar (ou pressione Ctrl/Cmd + D), depois altere o título e o valor em cada cópia. Foi assim que as barras WordPress e Java acima acabaram lado a lado.
Escolha uma predefinição de estilo #
Mudar para o Estilo aba e abrir Estilos Gerais. O Predefinições de estilo dropdown é onde você escolhe a forma O Bolha de linha predefinir adiciona uma bolha flutuante que mostra a porcentagem e cavalga no final do preenchimento.
- Predefinições de estilo: Linha, bolha de linha, círculo e ventilador (medidor de meio círculo).
- Cor da bolha: a cor da bolha percentual na predefinição da bolha.
- Posição da bolha: mova a bolha para cima ou para baixo contra a barra.
Predefinições de bitola de círculo e semicírculo #
O Círculo predefinir desenha um donut completo com a porcentagem no meio, que se adapta a um bloco de estatísticas compacto.
O Ventilador a predefinição desenha um medidor de meio círculo, um bom ajuste para uma classificação no estilo painel ou uma aparência de velocímetro.
Estilo as peças da barra #
O Estilo tab divide o widget em partes que você pode estilizar por conta própria: Estilos Gerais, Título, Bar Frontal, Barra Traseira, e Valor. Se o grátis Padrões a extensão está ligada, a Padrões seção para sobreposições decorativas aparece nesta aba também.
- Título: cor e tipografia para o rótulo.
- Barra dianteira: a cor e a largura da peça preenchida.
- Barra traseira: a cor e a largura da pista não preenchida atrás dela.
- Valor: cor e tipografia para o texto percentual.
Aberto Bar Frontal para definir a cor e a largura de preenchimento. É isso que carrega a cor da sua marca em toda a barra ou medidor.
Casos de uso comum #
- Barras habilidade em uma página sobre ou retomar (WordPress 90%, Design 75%).
- Medidores de financiamento ou metas mostrando o quão perto está uma campanha.
- Estatísticas do círculo em um bloco de serviços ou resultados.
- Medidores de meio círculo para pontuações, classificações ou widgets do painel.
- Estado do projeto barras em uma página de cliente ou portfólio.
Dicas para trabalhar com o widget Progress Bar #
- Duplique e edite. Estilo uma barra do jeito que você quiser, depois copie e altere o título e o valor.
- Mantenha a balança honesta. O valor é uma porcentagem, então 60 significa 60% cheio.
- Combine o contraste da barra frontal e traseira. Uma trilha leve atrás de um preenchimento de cor de marca é lida claramente.
- Use a bolha para números exatos. A predefinição Line Bubble coloca a porcentagem diretamente no preenchimento.
- Escolha a forma para o contexto. Linhas para listas de habilidades, círculos e fãs para estatísticas de destaque único.
Assista ao tutorial em vídeo #
Prefere acompanhar na tela? o tutorial em vídeo abaixo percorre o elemento Progress Bar do início ao fim, mostrando como cada predefinição de estilo, cor e valor funciona no editor Elementor.
Perguntas frequentes #
O que é o widget Progress Bar em Master Addons?
É um widget Elementor que mostra um indicador de progresso animado com um título e uma porcentagem Um dropdown de Predefinições de Estilo alterna entre uma linha, uma linha com uma bolha, um círculo completo e um medidor de meio círculo, e você colorir cada parte do painel Elementor.
Quais estilos de barras de progresso o widget inclui?
Quatro predefinições: Linha, Bolha de Linha, Círculo e Ventilador A linha é uma barra horizontal simples, a Bolha de Linha adiciona uma bolha percentual flutuante, o Círculo desenha um donut completo com o valor no centro e o Ventilador desenha um medidor de meio círculo O valor permanece o mesmo em todos eles.
Posso fazer uma barra de progresso circular ou de calibre no Elementor?
Sim. Defina predefinições de estilo para circular para um donut completo com a porcentagem no meio ou para ventilador para um medidor de meio círculo. Ambos animam para o valor definido e podem ser coloridos nas seções Barra frontal e Barra traseira na guia Estilo.
Como adiciono várias barras de progresso?
Cada widget da Barra de Progresso é uma barra, então duplique o widget e altere o título e o valor em cada cópia Coloque as cópias em colunas para uma linha de barras de habilidade Para várias barras gerenciadas dentro de um widget, use o widget separado da Barra de Progresso em vez disso.
A barra de progresso anima?
Sim, uma vez A barra preenche de zero até o seu valor em cerca de um segundo quando a página carrega, não quando ele rola para a vista, então barras colocadas perto do topo mostram o movimento melhor Ele funciona da mesma forma na linha, círculo e predefinições de ventilador.
Embrulhando #
O widget Progress Bar transforma uma porcentagem simples em uma linha animada, bolha, círculo ou medidor Defina um título e valor, escolha uma predefinição e, em seguida, colorir a barra frontal, a barra traseira e o valor para combinar com seu design Para uma visão geral e uma comparação com a própria Barra de Progresso do Elementor, consulte o Widget da barra de progresso do círculo do elementor página. Para widgets relacionados, consulte Barras Progresso para barras de habilidade, Barra de progresso de leitura para um indicador de rolagem, o Widget de compensação e o Widget de caixa de informações, navegue por completo Widgets e extensões Master Addons, e verifique o página preços para o que cada plano inclui.
