Você já tentou criar um rastreador de progresso vertical em vez de uma barra de rolagem tradicional? Se não, então navegue este artigo até o final para descobrir como criá-lo com Elementor Pro.
Mas antes de abordar o tema principal, vamos primeiro relembrar o que é um rastreador de progresso.
Um rastreador de progresso é um indicador de progresso que informa ao usuário o andamento de um processo em andamento, como instalação de um aplicativo, atualização, leitura de um artigo etc. E existem dois tipos:
- le rastreador de progresso linear
- le rastreador de progresso circular
Você também pode ler: Elementor: Como criar um cartão de efeito a partir de um portfólio
Neste tutorial, mostraremos como inserir um indicador de progresso vertical passo a passo em uma seção contendo os arquivos de postagem.
Crie um rastreador de progresso
Na aba Elementos no painel de ferramentasElementor, digite na barra de pesquisa Rastreador de progresso. Em seguida, arraste o widget para uma seção.
Aparece então um indicador de progresso. Por padrão, ele é orientado horizontalmente. Mas não se preocupe, você verá mais tarde como organizá-lo verticalmente.
O indicador de progresso sendo criado, vamos fazer as modificações necessárias para obter o resultado desejado.
Veja também: Elementor: Como criar um cartão de efeito a partir de um portfólio
Editar o conteúdo do rastreador de progresso
Aqui você escolherá o tipo de rastreador e o que está relacionado.
As principais configurações são:
- rastreador típico: aqui o valor padrão é Horizontal. No entanto, ao rolar a lista, o tipo circulaire também é oferecido a você. Mantenha o padrão.
- Progresso em relação a: nesta segunda configuração, escolha o valor seletor. Esta escolha trará uma configuração adicional: Seletor.
- Seletor: Este campo destina-se a receber o identificador do objeto ao qual o rastreador será anexado.
Vamos selecionar o arquivo de publicações, pois é o elemento ao qual nosso rastreador está anexado.
Em seu painel de configurações, vá para a guia Avançado e preencha um valor no campo Código CSS.
Em seguida, retorne ao painel do rastreador e preencha o campo Seletor no menu conteúdo.
Por fim, defina a orientação do indicador de progresso para a direita.
Alterar o estilo do rastreador de progresso
Nesta etapa, configuraremos os parâmetros do indicador de progresso, bem como o plano de fundo do último.
Comece definindo o indicador de progresso.
Leia também: Elementor: como criar uma galeria de imagens
- Ajustamento cor do progresso permite que você escolha entre uma progressão clássica e uma progressão gradiente. Em nosso exemplo, escolha a primeira opção. No entanto, qualquer que seja a escolha, aparece a configuração couleur.
- Conjunto ltem cor usando a paleta de cores global ou o seletor de cores.
- O tipo de fronteira: você tem aqui seis propostas (nenhum, cheio, duplo, pontilhado, pontilhado, sulco). Opte por uma borda completa.
- largura: Isso é para dar espessura à borda do seu indicador de progresso.
- O raio da fronteira: Por padrão, o indicador de progresso se parece com um retângulo. Ao modificar seu raio, suas extremidades ficam arredondadas.
Por fim, defina o piste configurações de fundo. Você percebe que são quase as mesmas configurações que voltam. Limite o seu, portanto, aos mencionados anteriormente.
Alterar as opções avançadas do rastreador de progresso
Para concluir nosso trabalho, definiremos as seguintes guias: efeitos de movimento, Transform e CSS personalizado.
Vamos começar com a guia primeiro CSS personalizado. Selecione-o e insira o código a seguir no campo apropriado. Permite definir a largura do rastreador. Então, ele define a largura como 50% da altura da janela.
Em seguida, gire o rastreador na direção vertical. Para isso, selecione o submenu transformador, habilite a rotação e digite 90 no campo em branco. Isso irá girar nosso widget em 90 graus, dando a você a posição vertical desejada.
Para alinhar nosso widget no mesmo nível dos primeiros posts, aplique um deslocamento de 145.
Neste nível, se rolarmos nossa página, você verá que nosso indicador de progresso desaparece enquanto rolamos nosso conteúdo.
Para superar esse problema, você abrirá a guia Efeitos de movimento, em seguida, solte o comando Alfinete e selecione en bas.
Desta vez, rolando para baixo, podemos ver nosso rastreador de progresso preenchendo gradualmente à medida que avançamos em nosso arquivo de postagens.
Obtenha o Elementor Pro agora!
Conclusão
Então ! É isso para este artigo que mostra como criar um rastreador de progresso vertical.
Adicionando elementos interativos como o indicador de progresso vertical ao criar seu site pode realmente levá-lo para o próximo nível, tornando-o mais intuitivo. Além disso, pode ser vinculado a uma página inteira ou ao conteúdo de uma publicação e até mesmo para qualquer outro elemento específico de uma página. Saber utilizá-lo seria, portanto, uma vantagem adicional.
No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.
Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.
...
