header-logo
Primeiros passosConfira como você pode usar o Wix para criar seu site e seu negócio. Personalize seu site usando templates ou contrate um profissional para criar ou aprimorar sua presença online.
Crie o seu siteAprenda a usar o Editor Wix e a gerenciar o conteúdo de seu site. Descubra como proteger a privacidade de seus visitantes e tornar seu site acessível.
Conta e faturamentoRevise as configurações da sua conta, gerencie suas assinaturas e planos Premium e entenda suas faturas.
Use os apps mobile do WixUse o app Wix Owner para administrar seu negócio com eficiência, interagir com seus visitantes e criar uma comunidade.
Conecte um domínioEntenda como comprar, conectar ou transferir um domínio e como manter os dados do seu site seguros.
Gerencie o seu negócioEncontre as ferramentas certas para criar e expandir seus negócios: aceite pagamentos, analise suas estatísticas, conecte-se com visitantes e muito mais.
Promova o seu siteConfira como promover seu site nos motores de busca, enviar campanhas de email e veicular anúncios pagos.
Wix Studio, Parceiros e empresasTire o máximo proveito da sua conta do Wix Studio, Parceiro Wix ou Wix Empresarial, para que você possa expandir seus negócios.
AjudaObtenha informações sobre como resolver os problemas técnicos e de desempenho do seu site. Além disso, acompanhe os próximos recursos em nosso roadmap de produtos.
placeholder-preview-image
Wix LearnDomine novas habilidades com nossos cursos e tutoriais.
Blog do WixConfira nossas dicas de web design, marketing e mais.
Learning Hub de SEOAumente o tráfego orgânico vindo dos motores de busca.
Website developmentDesenvolva um site único com a nossa plataforma full-stack.
Contrate um profissionalAlcance seus objetivos com a ajuda de um especialista.
placeholder-preview-image
  1. Início
  2. Crie o seu site
  3. Recursos avançados
  4. CMS
  5. Conecte elementos de entrada do usuário ao CMS
  6. CMS: adicionar e configurar uma barra de progresso

CMS: adicionar e configurar uma barra de progresso

Adicione uma barra de progresso para mostrar uma representação visual do progresso para atingir uma meta. Você pode usar um código no Velo ou um campo de coleção do CMS para representar o valor do progresso. Para o valor objetivo, você pode definir um valor estático que não muda ou definir um valor dinâmico com o Velo ou ao conectar um campo de coleção.   
Captura de tela de um exemplo de barra de progresso.
Exemplos do uso de barras de progresso:
  • Mostre quantas tarefas estão marcadas como "concluídas" em uma lista de tarefas.
  • Mostre a porcentagem de etapas concluídas durante um processo de integração. 
  • Mostre o valor de dinheiro arrecadado para uma meta de angariação de fundos.
  • Mostre o número de pessoas que assinaram uma petição que precisa de um determinado número de assinaturas.
Dica:
Você pode usar o Velo para atualizar o valor da barra de progresso sem conectar ao CMS. Para saber como, consulte Trabalhar com a API da barra de progresso (em inglês).
Antes de começar:
Adicione o CMS ao seu site e crie uma coleção que inclui um tipo de campo "Número" para o valor do seu progresso. Se quiser usar um valor dinâmico para o valor do objetivo, adicione também um campo "Número" que representa o objetivo. 

Para adicionar e configurar uma barra de progresso:

  1. Vá para o seu editor.
  2. Certifique-se de que você ativou o Velo no seu editor: 
    1. Clique em Avançado na parte superior.
    2. Clique em Ativar modo avançado.
  3. Clique em Elementos   no lado esquerdo do editor.
  4. Clique em Interativo. 
  5. Clique em Barra de progresso em Indicadores. 
  6. Clique e arraste a barra de progresso que desejar para a página. 
  7. Clique em Configurações na barra de progresso. 
  8. Insira uma Etiqueta que informe aos visitantes e leitores de tela o que a barra representa (por exemplo: "Progresso do objetivo")
  9. Escolha se deseja definir o valor objetivo como um valor dinâmico ou um valor estático: 

Esse artigo foi útil?

|
Contrate um profissionalEncontre um Parceiro Wix que pode ajudar você a alcançar os objetivos do seu site.
Começar

Esse artigo foi útil?

|