O bloco Barra de Progresso permite adicionar barras de progresso visuais e animadas a qualquer página do SeedProd. Quer você queira 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 forma 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 aba 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 aba Avançado. O bloco também inclui controles de espaçamento e visibilidade por dispositivo para que suas barras de progresso fiquem ótimas em todos os tamanhos de tela.
Adicionando o Bloco Barra de Progresso às Suas Páginas
Siga estas etapas para adicionar um bloco Barra de Progresso à sua página SeedProd:
Etapa 1: Adicionar 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
Uma vez adicionado, clique no bloco Barra de Progresso para abrir suas configurações. Na aba 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 porção preenchida da barra de progresso (por exemplo, “75% Concluído”, “Meta de Financiamento” ou um nome de habilidade). Este texto sobrepõe o 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). Este valor controla o quanto da barra está visualmente preenchido e representa a porcentagem de progresso exibida aos visitantes.
- Cor: Defina a cor de preenchimento da barra. Esta cor se aplica à porção preenchida (progresso) da barra, enquanto a cor de fundo não preenchida é definida separadamente na aba Avançado.
Passo 2a: Escolha um Estilo de Modelo
Na aba Modelos, você pode selecionar entre estilos de barra de progresso pré-projetados para alterar rapidamente a aparência geral da sua barra.
- Modelos de Estilo: Escolha entre 4 designs de modelo diferentes, cada um com um estilo visual e tratamento de cor exclusivos. Clique em qualquer modelo para aplicá-lo instantaneamente — você sempre pode retornar às abas Conteúdo e Avançado para fazer mais ajustes após selecionar um estilo.
Etapa 3: Personalizar o Design
Na aba 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 da fonte, tamanho, peso, altura da linha, espaçamento entre letras e transformação de texto para o texto do rótulo da barra.
- Cor de Fundo: Defina a cor da porção não preenchida (trilha) 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 tanto para a trilha da barra quanto para o preenchimento (0–25px). Aumente este valor para criar uma barra em forma de pílula ou totalmente arredondada.
- Sombra do Texto: Adicione um efeito de sombra ao texto do rótulo da barra. Escolha entre tamanhos predefinidos (Nenhum, Fio Dental, Pequeno, Médio, Grande, X Grande, 2X Grande) para adicionar profundidade ou tornar o rótulo mais legível contra a cor da barra.
- Sombra: Adicione uma sombra de caixa ao elemento geral da barra de progresso 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 de Barra de Progresso (Superior, Direita, Inferior, Esquerda). Isso determina quanto espaço aparece entre a barra e os elementos circundantes na página.
- Preenchimento: Ajuste o espaçamento interno dentro do seu bloco de Barra de Progresso (Superior, Direita, Inferior, Esquerda). Isso cria espaço entre a barra e as bordas do bloco.
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de Barra de Progresso. Este ID é criado automaticamente pelo SeedProd para estilização personalizada ou segmentação de 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-progresso|75).
Visibilidade do Dispositivo:
- Ocultar no Desktop: Oculte o bloco de Barra de Progresso em telas de desktop.
- Ocultar no Tablet: Oculte o bloco de Barra de Progresso em dispositivos tablet.
- Ocultar no Celular: Oculte o bloco de 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 de Barra de Progresso entra na visualização. As opções incluem Bounce, Fade In, Zoom In, Rotate In e muito mais — ótimo para chamar a atenção para uma métrica importante enquanto os visitantes rolam a página.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco de Barra de Progresso e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Barra de Progresso à sua página! As barras de progresso são uma maneira poderosa de comunicar conclusão, níveis de habilidade, 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 da borda e animações de entrada para criar barras de progresso que chamam a atenção e reforçam a mensagem da sua página.