Widget de barras de habilidade do elementor: várias barras de progresso em uma lista
O widget Master Addons Progress Bars empilha várias barras de habilidade horizontais em um widget É gratuito Adicione uma barra para cada habilidade, serviço ou meta, dê um título e uma porcentagem de 1 a 100, e escolha uma cor por barra se quiser As barras preenchem de zero quando rolam para a vista, com a porcentagem mostrada dentro de cada barra Use-a para habilidades em uma página sobre, status do projeto ou resultados de pesquisa Procurando um único círculo ou medidor em vez disso? use o Barra Progresso widget com suas predefinições Circle e Fan. Para uma barra que enche à medida que os visitantes rolam por um post, use Barra de progresso de leitura.
Como adicionar barras de habilidade no Elementor
Você precisa do Elementor e do plugin gratuito Master Addons. Confira isso Barras de progresso docs.
- Verifique se as barras de progresso estão ligadas Complementos mestres, widgets.
- No editor Elementor, procure por Barras Progresso e arraste-o para a página.
- Nas Barras de Estatísticas, edite as três barras de amostra e clique em Adicionar Item para mais informações.
- Defina um título e uma porcentagem para cada barra e uma cor de barra se desejar cores diferentes.
- Na guia Estilo, defina as cores da trilha e do preenchimento, altura da barra, espaçamento e raio.
- Estilize os títulos e porcentagens, em seguida, visualize a página e role para o widget.
Adicione quantas barras de habilidades você precisar
Bares moram no Estatísticas Barras repetidor na guia Conteúdo Clique em Adicionar item para cada barra e defina o Título das estatísticas (por exemplo “Web Design”), o Valor percentual de 1 a 100, e um opcional Cor da barra para essa barra Arraste os itens para os reordenar O campo de título aceita as marcas dinâmicas do Elementor.
- Qualquer número de barras em um widget.
- Cada barra tem seu próprio título, porcentagem e cor.
- As barras sem cor própria usam a Cor da Barra Ativa da guia Estilo.
Estile as barras, títulos e porcentagens
O Estatísticas Bar conjuntos de seções de estilo Bar BG Color (a trilha vazia), Active Bar Color (o preenchimento), Espaçamento Vertical entre barras (5 a 128 px), Altura da Barra (1 a 96 px) e Raio de Fronteira da Barra de Estatísticas para barras quadradas ou em forma de comprimido. Título das estatísticas possui alinhamento, cor e tipografia, e Porcentagem de estatísticas possui cor e tipografia para o número dentro da barra.
- Cores separadas para a pista e o preenchimento.
- Raio da borda em px ou % para barras arredondadas.
- Preencha a animação reproduzida uma vez quando o widget rola para a visualização; valores mais altos levam mais tempo para serem preenchidos.
Barra de progresso do elementor vs barras de progresso dos complementos mestres
Elementor tem um widget gratuito da Barra de Progresso que mostra uma barra Aqui está como os dois se comparam.
| Característica | Barra de Progresso do Elementor | Barras de progresso de complementos mestres |
|---|---|---|
| Barras por widget | Um | Tantos quantos você adicionar |
| Cor por barra | Um widget, uma cor | Sim, por item repetidor |
| Texto dentro do bar | Sim, texto interno personalizado | Apenas percentual |
| Animar quando rolado à vista | Sim | Sim |
| Tags dinâmicas | Sim | Apenas título |
| Custo | Grátis | Grátis |
Para uma barra com texto interno personalizado, o próprio widget do Elementor é suficiente Para uma lista de habilidades, um widget de Barras de Progresso as mantém alinhadas Relacionadas: Barra Progresso para círculos e medidores, Barra de progresso de leitura para progresso de rolagem e Contrapor para números animados.
Perguntas frequentes para barras de progresso
As barras animam quando rolam para a vista?
Sim. Cada barra preenche de zero ao seu valor uma vez que o widget entra na janela de visualização O preenchimento leva cerca de 20 milissegundos por ponto percentual, então uma barra de 90% leva menos de dois segundos Não há configuração para alterar a velocidade ou desligar a animação.
O widget Barras de Progresso é gratuito?
Sim. Barras de progresso faz parte do plugin gratuito Master Addons com todo o conteúdo e controle de estilo Não há versão Pro deste widget.
As barras de progresso respondem no celular?
Sim. As barras ocupam toda a largura da sua coluna, por isso encolhem com o ecrã A Altura da Barra e o Espaçamento Vertical não são controlos responsivos, mas a tipografia de título e percentagem pode usar tamanhos de letra mais pequenos no tablet e no telemóvel.
Posso usar um gradiente para a cor da barra ativa em vez de uma cor sólida?
No. Bar BG Color, Active Bar Color e a própria cor de cada barra tomam uma cor sólida apenas Se você precisar de um preenchimento gradiente, contacte-nos e podemos sugerir um trecho CSS.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
![Extensão Master Addons Post/Page Duplicator para Elementor: MA Link de linha Duplicator na lista de páginas WordPress criando uma página de destino - rascunho [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de postagem/página
