O bloco Barra de Progresso permite adicionar barras de progresso animadas e visuais a qualquer página do SeedProd. Se você deseja destacar uma meta de arrecadação de fundos, exibir níveis de habilidade, mostrar a conclusão de uma campanha ou comunicar qualquer métrica baseada em porcentagem, este bloco facilita a apresentação dessas informações de maneira clara e envolvente.
Cada barra de progresso é totalmente personalizável — defina o texto do rótulo, a porcentagem de progresso e a cor da barra na guia Conteúdo, escolha entre quatro modelos de estilo prontos e, em seguida, ajuste a tipografia, a cor de fundo, o raio da borda e os efeitos de sombra na guia Avançado. O bloco também inclui controles de espaçamento e visibilidade por dispositivo para que suas barras de progresso tenham uma ótima aparência em qualquer tamanho de tela.
Adicionando o bloco Barra de Progresso às suas páginas
Siga estas etapas para adicionar um bloco de barra de progresso à sua página SeedProd:
Passo 1: Adicione o bloco
Em Design > Blocos, arraste e solte o bloco Barra de progresso na seção desejada da sua página.
Etapa 2: Configurar as definições de conteúdo
Depois de adicioná-lo, clique no bloco Barra de progresso para abrir suas configurações. Na guia Conteúdo, a seção Barra de progresso permite definir o rótulo, a porcentagem e a cor de preenchimento da barra.
- Texto da barra: insira o rótulo exibido dentro da parte preenchida da barra de progresso (por exemplo, “75% concluído”, “Meta de financiamento” ou o nome de uma habilidade). Esse texto é sobreposto ao preenchimento da barra para que os visitantes vejam imediatamente o que o progresso representa.
- Porcentagem: defina o nível de preenchimento da barra usando o controle deslizante (0–100). Esse valor controla quanto da barra é preenchida visualmente e representa a porcentagem de progresso exibida aos visitantes.
- Cor: defina a cor de preenchimento da barra. Essa cor se aplica à parte preenchida (progresso) da barra, enquanto a cor de fundo não preenchida é definida separadamente na guia Avançado.
Etapa 2a: Escolha um estilo de modelo
Na guia Modelos, você pode selecionar estilos de barra de progresso pré-concebidos para alterar rapidamente a aparência geral da sua barra.
- Modelos de estilo: escolha entre quatro designs de modelos diferentes, cada um com um estilo visual e tratamento de cores exclusivos. Clique em qualquer modelo para aplicá-lo instantaneamente — você sempre pode retornar às guias Conteúdo e Avançado para fazer ajustes adicionais após selecionar um estilo.
Etapa 3: Personalizar o design
Na guia Avançado, você pode ajustar a aparência da sua barra de progresso com tipografia, cores, efeitos de sombra e muito mais.
Estilos:
- Tipografia: defina a família de fontes, tamanho, espessura, altura da linha, espaçamento entre letras e transformação do texto para o texto do rótulo da barra.
- Cor de fundo: Defina a cor da parte não preenchida (faixa) da barra de progresso — o fundo visível atrás da seção preenchida. O padrão é um cinza claro (
#F7F7F7). - Raio da borda: defina o arredondamento dos cantos para a barra e o preenchimento (0–25 px). Aumente esse valor para criar uma barra em forma de comprimido ou totalmente arredondada.
- Sombra do texto: Adicione um efeito de sombra ao texto do rótulo da barra. Escolha entre tamanhos predefinidos (Nenhum, Fino, Pequeno, Médio, Grande, Extragrande, 2X Grande) para adicionar profundidade ou tornar o rótulo mais legível em relação à cor da barra.
- Sombra: Adicione uma sombra ao elemento da barra de progresso geral para dar uma sensação de profundidade e separação do fundo da página.
Espaçamento:
- Margem: controle o espaçamento externo ao redor do seu bloco Barra de Progresso (superior, direito, inferior, esquerdo). Isso determina quanto espaço aparece entre a barra e os elementos ao redor na página.
- Preenchimento: ajuste o espaçamento interno dentro do seu bloco Barra de Progresso (Superior, Direito, Inferior, Esquerdo). Isso cria um espaço entre a barra e as bordas do bloco.
Atributos:
- ID CSS: exibe o identificador exclusivo gerado automaticamente para o seu bloco Barra de Progresso. Esse ID é criado automaticamente pelo SeedProd para personalização de estilo ou segmentação JavaScript.
- Classe personalizada: adicione classes CSS personalizadas para aplicar estilos específicos do seu tema ou CSS personalizado.
- Atributos personalizados: adicione quaisquer atributos HTML ao elemento wrapper do bloco. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor (por exemplo, data-progress|75).
Visibilidade do dispositivo:
- Ocultar na área de trabalho: oculta o bloco Barra de progresso nas telas da área de trabalho.
- Ocultar no tablet: Oculte o bloco Barra de progresso em dispositivos tablet.
- Ocultar no celular: oculte o bloco Barra de progresso em dispositivos móveis.
Efeitos de animação:
- Animação de entrada: escolha entre vários efeitos de animação que são reproduzidos quando o bloco da barra de progresso aparece na tela. As opções incluem saltar, aparecer gradualmente, ampliar, girar e muito mais — ótimo para chamar a atenção para uma métrica importante à medida que os visitantes rolam a página para baixo.
Etapa 4: Salve suas alterações
Depois de terminar de configurar o bloco Barra de Progresso e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco Barra de Progresso à sua página! As barras de progresso são uma forma eficaz de comunicar a conclusão, os níveis de habilidade, as metas de arrecadação de fundos ou qualquer métrica baseada em porcentagem rapidamente. Experimente diferentes estilos de modelo, cores de preenchimento, valores de raio de borda e animações de entrada para criar barras de progresso que chamem a atenção e reforcem a mensagem da sua página.