CMS: adicionar e configurar uma barra de progresso

6 min de leitura
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.   
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 se conectar ao CMS. Para saber como, consulte Trabalhar com o elemento Barra de progresso (em inglês).
Antes de começar:
Adicione o CMS ao seu site e crie uma coleção que inclui um campo numérico para o valor do seu progresso. 

Para adicionar e configurar uma barra de progresso:

Editor Wix
Editor X
Editor do Wix Studio
  1. Acesse o Editor.
  2. Certifique-se de ter ativado 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 mais gostar para a página. 
  7. Clique no ícone Conectar ao CMS no elemento Barra de progresso. 
  8. Clique no dropdown Escolha um conjunto de dados e selecione um conjunto de dados existente que se conecte à sua coleção. Se preferir, clique em Criar um novo conjunto de dados e escolha a coleção que deseja conectar, dê um nome ao conjunto de dados e clique em Criar.
  9. Clique no dropdown Valor de progresso se conecta a e selecione o campo que deseja usar para representar o progresso para alcançar objetivo.
  10. Defina o valor objetivo como um número estático que permanece sempre o mesmo ou como um valor dinâmico:
    • Definir valor objetivo estático: clique em Definir valor objetivo no elemento Barra de progresso e insira o valor no campo Valor objetivo.  
    • Definir valor objetivo dinâmico: clique no dropdown O valor do objetivo se conecta a e selecione o campo que deseja usar para representar o objetivo.
  11. Clique no ícone Layout  e escolha a direção do progresso. 
  12. Clique no ícone Design  e escolha um design predefinido ou personalize o design existente ainda mais. 
  13. (Opcional) Clique no ícone Animação  para adicionar um efeito de animação ao elemento. 

Esse artigo foi útil?

|