Criar e personalizar barras de progresso no Elementor

As barras de progresso são um elemento eficaz na conceção de sítios Web que informa os seus visitantes sobre o progresso de um projeto ou objetivo de uma forma apelativa. O Elementor, um dos plugins de construção de páginas mais populares para WordPress, oferece-lhe a possibilidade de integrar facilmente barras de progresso nos seus sítios Web. Este guia irá guiá-lo através dos passos para criar e personalizar uma barra de progresso no Elementor.

Principais conclusões

• As barras de progresso fornecem uma representação visual do progresso e dos objectivos.
• Pode personalizar títulos, valores e cores.
• O texto interior pode, opcionalmente, ser mostrado ou ocultado.
• Estão disponíveis diferentes estilos e opções de personalização para adaptar a barra ao seu design.

Instruções passo a passo

Em primeiro lugar, abra o seu sítio WordPress e navegue até ao editor Elementor. Aí, pode adicionar um novo elemento e selecionar a barra de progresso.

Agora, está pronto para introduzir o título da sua barra de progresso. Pense num título adequado, como "Objetivo de vendas". Isto dará aos seus visitantes uma primeira indicação do que se trata.

No passo seguinte, tem de definir o objetivo ou a mensagem de sucesso. Pense exatamente no que pretende apresentar e escreva-o no campo fornecido. Este passo ajuda a tornar a sua barra de progresso mais fácil de compreender para os utilizadores.

Agora pode definir a cor da barra de progresso. Isto não é obrigatório, mas é uma boa oportunidade para personalizar o design. Pode escolher uma cor que se harmonize com o resto do seu sítio Web.

Em seguida, vá para as percentagens. Aqui pode definir o seu progresso, por exemplo, para 40%. Lembre-se que pode definir o valor máximo para 100% e o valor mínimo para 0%. Este feedback ajuda os seus visitantes a compreenderem rapidamente o seu progresso.

A percentagem pode ser apresentada ou ocultada. Muitas vezes, é mais apelativo ocultar o texto, especialmente se preferir um design simples. Pense na variante que melhor se adequa ao seu projeto.

Se quiser, também pode adicionar um texto interior que contenha as percentagens. Esta funcionalidade é particularmente útil se quiser mostrar o progresso imediato. Se não optar por um texto interior, também pode ocultar o número aqui.

Agora é tudo uma questão de estilo da barra de progresso. Pode personalizar a cor da barra, a cor de fundo para a área não preenchida e a altura da barra. Escolha um tom verde-escuro para a área preenchida e uma cor de fundo neutra para um aspeto claro.

Também pode arredondar os cantos da barra de progresso para lhe dar uma forma mais apelativa. Lembre-se de que os cantos só podem ser arredondados na parte da frente até o progresso atingir 100%.

Se quiser personalizar o texto interior, também pode alterar a cor e a tipografia aqui. Pode optar por desativar o tipo de letra para se concentrar no progresso.

Por fim, será levado para as definições avançadas, onde pode ajustar a cor e o estilo do texto para o título. Um título preto e a negrito com uma sombra opcional garante que o seu título se destaca.

Agora, guarde as suas alterações e vá para a sua página para ver o resultado. Pode decidir que faz sentido apresentar a percentagem. Caso contrário, a barra de progresso continuará a ser apresentada de forma atractiva.

A sua barra de progresso mostra agora o valor especificado sem fazer uma contagem ascendente a partir do 0 de forma animada. Em vez disso, o progresso é visualizado imediatamente.

Se estiver a utilizar a versão Pro do Elementor, também lhe serão oferecidos atributos dinâmicos. Esta funcionalidade é particularmente útil para personalizar barras de progresso com base em dados externos ou mesmo em valores orientados para a base de dados.

Resumo

Neste guia, você aprendeu a criar e personalizar uma barra de progresso no Elementor. Pode definir títulos e progresso, escolher cores e fazer vários ajustes para integrar uma barra de progresso apelativa e eficaz.