Uma única barra de progresso conta uma história Um conjunto empilhado deles mostra todo um conjunto de habilidades, uma linha de serviços ou o status de um projeto sem fazer o leitor trabalhar para isso O Widget de barras de progresso em Complementos Mestres para Elementor é construído para esse caso Ele agrupa várias barras animadas em um widget, então você adiciona quantas você precisar e estiliza-los juntos ou um de cada vez.
Pense nisso como o companheiro multi-bar para o autônomo Widget da Barra de Progresso. Em vez de soltar um widget separado para cada métrica, você gerencia todo o grupo a partir de um painel Cada barra obtém seu próprio título, porcentagem e cor, enquanto uma guia Estilo compartilhada controla a aparência do conjunto.
Prefere assistir primeiro? este pequeno tutorial percorre o widget de ponta a ponta, desde arrastá-lo até estilizar as barras:
O que o widget Barras de progresso faz #
O widget renderiza uma lista de barras horizontais que animam de zero até o valor definido quando rolam para a visualização Cada barra mostra um título à esquerda, um rótulo percentual e um preenchimento colorido que cresce para corresponder ao número inserido.
A diferença do widget de barra única é a estrutura Aqui as barras vivem dentro de um repetidor chamado Estatísticas Barras, então você adiciona, duplica, reordena e exclui barras sem tocar na tela Um widget, um conjunto de controles de estilo e qualquer número de barras.
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.
- Uma página aberta no editor Elementor onde as barras irão.
Como adicionar o widget Barras de progresso #
No editor Elementor, abra o Elementos painel e pesquisa Barras Progresso, ou role para baixo até a seção Master Addons Assista aos nomes aqui: existem dois widgets que leem quase o mesmo. Barra de progresso é uma única barra e Barras de progresso é o grupo. Arrastar Barras de progresso na sua página.
Ele aparece com três barras de amostra já preenchidas, então você vê um resultado de trabalho imediatamente e edita a partir daí em vez de começar em branco.
Edite cada barra na guia Conteúdo #
Abrir o Conteúdo tab e você encontrará o Estatísticas Barras repetidor. cada linha é uma barra Clique em uma linha para expandi-la e você obterá três configurações:
- Título das estatísticas: o rótulo mostrado acima da barra, como “Web Design” ou “WordPress” Este campo leva tags dinâmicas Elementor, para que você possa extrair o título de um campo post, meta autor, ou outra fonte dinâmica usando o ícone tag.
- Valor percentual: um número de 1 a 100 que define a distância que a barra preenche e o que a etiqueta lê Insira
87e a barra enche até 87 por cento. - Cor da barra: uma cor opcional para esta barra O deixe vazio para usar a Cor da Barra Activa global, ou defina - a aqui para substituir a cor do grupo para uma única barra.
A cor por barra é o que torna o grupo flexível Mantenha cada barra em uma cor de marca ou dê a cada métrica sua própria tonalidade para que seja fácil diferenciá-la rapidamente.
Adicione barras ilimitadas #
Para adicionar outra barra, clique em Adicionar Item na parte inferior do repetidor Uma nova barra aparece com valores padrão que você pode renomear e definir Não há limite, então construa quantos o conteúdo precisar O ícone de cópia em qualquer linha duplica uma barra com suas configurações intactas, e o ícone X remove uma.
A guia Conteúdo também possui um Documentos de ajuda link para referência rápida e a Link do invólucro opção do grátis Link do invólucro extensão que torna todo o widget clicável Esse é útil quando as barras ficam em um cartão com links para algum lugar.
Estile cada barra da guia Estilo #
Mudar para o Estilo guia para controlar a aparência de todo o grupo Essas configurações se aplicam a todas as barras de uma só vez, e é exatamente por isso que vale a pena conhecer as substituições por barra na guia Conteúdo. A guia Estilo é dividida Estatísticas Bar, Título das estatísticas, Porcentagem de estatísticas, e Padrões.
Estatísticas Bar #
- Barra BG Cor: a cor da faixa vazia atrás de cada preenchimento.
- Cor da barra ativa: a cor de preenchimento padrão para qualquer barra que não tenha seu próprio conjunto de Cor da Barra na guia Conteúdo.
- Espaçamento Vertical: a lacuna entre as barras empilhadas.
- Altura da barra: quão grossas são as barras, em pixels.
- Raio de borda da barra de estatísticas: arredonda os cantos Vincule os quatro valores para um raio par ou defina Top, Direita, Inferior e Esquerda separadamente.
Título das estatísticas #
Esta seção estiliza o rótulo acima de cada barra.
- Alinhamento: esquerda, centro ou direita para o texto do título.
- Cor: a cor do título.
- Tipografia: controle total sobre a família de fontes, tamanho, peso, transformação e o restante das opções de tipo do Elementor.
Porcentagem de estatísticas #
O rótulo percentual obtém seus próprios controles de Cor e Tipografia, para que você possa tornar o número em negrito e grande ou mantê-lo quieto Abaixo dele fica o Padrões seção. Ele vem da extensão Patterns gratuita e adiciona um padrão de fundo de cor fixa atrás de todo o widget, não dentro das barras.
O resultado na página #
Publique ou visualize a página e as barras animam de zero até seus valores definidos à medida que a seção entra na janela de visualização O estilo é executado: cores de barras personalizadas, cor do título, tamanho percentual, espaçamento e altura, tudo exibido na página ao vivo.
Casos de uso comum #
- Barras habilidade em uma página sobre ou retomar (design, desenvolvimento, marketing).
- Forças de serviço em uma página da agência, uma barra por oferta.
- Status do projeto ou campanha mostrado como porcentagens de conclusão.
- Pontuações de recursos em um bloco de comparação, emparelhado com a tabela comparação.
- Destaques do Stat ao lado de números animados do Widget de compensação.
Dicas para trabalhar com Barras de Progresso #
- Defina primeiro o estilo do grupo e depois substitua. Escolha a cor da barra ativa e a altura da barra uma vez e adicione uma cor por barra apenas onde quiser que uma barra se destaque.
- Mantenha as porcentagens honestas. O número também é o rótulo, então uma barra definida como 76 diz “76%” Combine o preenchimento com o valor real.
- Afine a altura e o raio juntos. Uma barra mais alta com um raio correspondente é lida como uma pílula arredondada; uma barra fina com um raio grande pode parecer cortada.
- Use títulos dinâmicos em modelos. Quando as barras estiverem em um modelo de postagem ou arquivo, conecte o título das estatísticas a uma tag dinâmica para que cada entrada se rotule.
- Duplicar em vez de reconstruir. O ícone de cópia clona uma barra com sua cor e tipografia, o que supera a configuração manual de um novo item.
Perguntas frequentes #
O que é o widget Barras de progresso em Master Addons?
É um widget Elementor que agrupa várias barras de progresso animadas em um elemento Você adiciona barras através do repetidor Stats Bars, dá a cada uma um título, porcentagem e cor opcional, e estilo todo o conjunto da guia Estilo É a versão multi-barra do único widget Progress Bar.
Como as barras de progresso são diferentes do widget único da barra de progresso?
O widget único da Barra de Progresso mostra uma barra por widget O widget Barras de Progresso contém um repetidor, então você adiciona barras ilimitadas dentro de um widget e gerencia-as juntas Use a única para uma métrica autônoma e Barras de Progresso para um conjunto empilhado.
Quantas barras de progresso posso adicionar?
Não há limite Clique em Adicionar item no repetidor de barras de estatísticas para adicionar quantas barras você precisar Cada nova barra começa com valores padrão que você pode renomear e ajustar, e você pode duplicar ou excluir barras a qualquer momento.
Cada barra de progresso pode ter uma cor diferente?
Sim. Defina a Cor da Barra Ativa na guia Estilo como padrão do grupo, depois abra qualquer barra na guia Conteúdo e use seu campo Cor da Barra para substituir essa barra. Deixe o campo vazio para manter uma barra na cor do grupo.
As barras de progresso animam?
Sim. Cada barra preenche de zero até sua porcentagem definida quando o widget rola para a visualização na página ao vivo, em cerca de 20 milissegundos por ponto percentual Não há configuração para alterar a velocidade.
Embrulhando #
O widget Barras de progresso transforma uma pilha de métricas em um bloco arrumado e animado Adicione barras no repetidor Barras de estatísticas, defina cada título e porcentagem, colori-los individualmente ou em grupo e moldar todo o conjunto a partir da guia Estilo Para uma única barra autônoma, alcance o Widget da Barra de Progresso em vez disso. Navegue por completo Widgets e extensões Master Addons para ver o que mais você pode construir e ver o Página do widget Barras de progresso para demonstrações O widget é gratuito, sem opções Pro-only.
