Como exibir a barra de progresso de leitura no WordPress com Elementor

Uma barra de progresso de leitura é um indicador visual em um site que mostra aos leitores até que ponto eles rolam pela página ou postagem na tela. Isso normalmente exibe uma barra fina que se enche à medida que os leitores progridem, rolando pela página. É uma ferramenta simples, mas eficaz, para blogs e sites pesados.

Um estudo recente sobre envolvimento do usuário sugere que as dicas visuais podem aumentar o tempo gasto em uma página em até 20%, fazendo com que o conteúdo pareça mais gerenciável . Da mesma forma, a barra de progresso pode ajudar os usuários a rastrear sua jornada de leitura, o que pode aumentar a satisfação e incentivá -los a explorar mais.

Com o Elementor, é fácil adicionar uma barra de progresso de leitura ao WordPress. Portanto, neste artigo, abordaremos um guia passo a passo sobre como exibir a barra de progresso de leitura no WordPress com Elementor.

Benefícios de exibir a barra de progresso do leitor no WordPress

Adicionar uma barra de progresso de leitura a um site WordPress oferece vários benefícios. Isso não apenas aprimora a experiência do usuário, mas também o engajamento. Dê uma olhada em alguns benefícios importantes da adição da barra de progresso de leitura no WordPress abaixo.

• Melhora o envolvimento do usuário

Uma barra de progresso de leitura pode manter os leitores motivados, mostrando visualmente até que ponto eles progrediram através de um post. Isso incentiva os usuários a continuar lendo, especialmente para conteúdo de formato longo. Dê uma olhada em alguns pontos rápidos sobre como melhorar o envolvimento do usuário em seu site.

• Aumenta a clareza da navegação

Para artigos ou tutoriais longos, uma barra de progresso fornece uma indicação clara de quanto conteúdo permanece. Isso ajuda os usuários a adivinhar se têm tempo para terminar ou não.

• Reduz as taxas de salto

Ao oferecer uma sugestão visual que divide o conteúdo em uma jornada rastreável, uma barra de progresso pode fazer com que as postagens longas pareçam menos esmagadoras. Isso pode ser notavelmente menor taxas de salto. Aqui está um guia sobre como reduzir a taxa de salto no WordPress.

• Aprimora o apelo estético

Uma barra de progresso bem projetada adiciona um apelo moderno ao seu site. Você pode personalizar a aparência da barra de progresso de leitura para combinar com a marca do seu site para criar uma aparência polida.

• Suporta usabilidade móvel

Nos dispositivos móveis, onde a rolagem pode parecer infinita, uma barra de progresso fornece uma sensação de controle e contexto. Ele tranquiliza os usuários que eles estão progredindo na postagem ou na página.

Como exibir a barra de progresso de leitura no WordPress com Elementor

Neste tutorial passo a passo, o guiaremos através do processo de adição e personalização de uma barra de progresso de leitura no seu site WordPress usando o Elementor e a versão gratuita do HappyAddons. Mas você pode perguntar - por que HappyAddons e o que é isso ?

Na verdade, o HappyAddons é um complemento bem conhecido do plug-in do Elementor. Ele vem com muitos recursos e widgets engenhosos para superar as limitações do Elementor. A barra de progresso de leitura é uma das. E a boa notícia é que o recurso da barra de progresso de leitura é totalmente gratuito para usar.

Pré-requisitos para adicionar a barra de progresso de leitura

• Elementor
• Happyaddons

Verifique se os plugins estão instalados e ativados no seu site. Quando estiverem prontos no seu site, comece a seguir as etapas explicadas no tutorial abaixo.

Etapa 01: Ativar o recurso da barra de progresso de leitura

Vá para o seu painel WordPress e navegue para HappyAddons> Recursos .

Quando você chegar à página de recursos , localize a opção de barra de progresso de leitura . Ativar para ativar o recurso.

Etapa 02: Abra uma página com Elementor

Agora, para configurar o recurso da barra de progresso de leitura, abra uma página com elementor.

Etapa 03: Vá para as configurações do site do Elementor

Clique no ícone de hambúrguer no canto superior esquerdo do painel Elementor.

Vá para a opção Configurações do site clicando nela.

Ao rolar o painel Elementor, localize a barra de progresso de leitura e clique nele .

Ativar para ativar a opção da barra de progresso de leitura .

Etapa 04: Configurar a opção de barra de progresso de leitura

Depois de ativar a opção de barra de progresso de leitura, você obterá inúmeras opções para configurar o recurso.

# Selecione onde exibir a barra de progresso

Você pode optar por exibir a barra de progresso em todo o seu site, significando em todas as postagens e páginas. Ou você pode optar por exibi -lo seletivamente.

Se você deseja exibi -lo em postagens e páginas, selecione -as na caixa a seguir para exibir.

# Selecione um tipo de barra de progresso

Happyaddons permite que você escolha entre três tipos de barras de progresso - horizontal, vertical e círculo . Portanto, escolha qualquer um deles, clique na opção suspensa ao lado de digitar .

Você verá as opções. Escolha um tipo que você deseja. Para o tutorial, iremos com o tipo horizontal.

# Selecione uma posição para a barra de progresso

Você pode exibir a barra de progresso na parte superior ou na parte inferior. Portanto, escolha onde deseja exibi -lo na opção de posição ao lado.

À medida que rolamos a página, você pode ver uma barra de progresso aparece em cima da página.

# Estilizar a barra de progresso

No mesmo painel Elementor, você pode personalizar a altura, a cor da barra de progresso, a cor de fundo e a dica de ferramenta percentual do recurso da barra de progresso.

Espero que você possa fazer isso você mesmo.

Etapa 05: Visualizar a barra de progresso

Depois de terminar, vá para o front -end do seu site. Verifique se a barra de progresso funciona bem ou não rolando sua tela.

Assim, você pode adicionar facilmente a barra de progresso de leitura ao WordPress usando os plugins Elementor e Happyaddons.

Como a barra de progresso vertical parece

Acima, mostramos o processo de criação de uma barra de progresso horizontal. Da mesma forma, você pode ativar e exibir a barra de progresso vertical em seu site. Depois de habilitá -lo, a barra de progresso se parecerá com a mostrada no vídeo anexado abaixo.

Como a barra de progresso do círculo parece

Aqui, novamente, seguindo o mesmo processo, você pode exibir a barra de progresso do círculo no seu site WordPress, configurando sua estilização e configurações. Você pode assistir como fica no front -end do vídeo anexado abaixo. A barra de progresso do Circle aparece no canto superior direito.

O que mais você pode fazer com HappyAddons?

Depois de ter HappyAddons, você não apenas pode superar as deficiências do Elementor, mas também desfrutar de muitos recursos e widgets mais interessantes. Dê uma olhada no que mais você pode fazer com o plug -in do HappyAddons.

um. Use um construtor de temas

O construtor de temas da HappyAddons permite personalizar todos os aspectos das peças de modelo do seu site WordPress, incluindo cabeçalhos, rodapés, páginas únicas, postagens únicas e páginas de arquivo. A ótima notícia é que o recurso de construtor de temas é totalmente gratuito, que é um recurso premium no Elementor. Verifique como acessar o HappyAddons Theme Builder.

b. Aprimore os sites de WooCommerce

O HappyAddons Pro oferece um poderoso conjunto de widgets WooCommerce para aprimorar o design e a funcionalidade da sua loja de comércio eletrônico. WooCommerce Widgets que a HappyAddons oferece são grade de produto, carrossel de produtos, grade de categoria de produto, carrossel de categoria de produto, produto único, mini carrinho, carrinho, checkout e barra de remessa.

c. Crie conteúdo criativo

O Happyaddons fornece mais de 130 widgets e duas dúzias de recursos interessantes para tornar um site altamente emocionante. Usando -os, você pode destacar informações valiosas em seu site de uma maneira extremamente criativa, que parece boa e atraente para os usuários.

d. Crie postagens/páginas infográficas

Happyaddons permite a criação de postagens e páginas visualmente atraentes no estilo infográfico usando widgets como gráfico de barras, barra de habilidades, gráficos interativos e grade de postagem. Como resultado, você pode exibir comparações como vendas ou resultados de pesquisa com cores e etiquetas personalizáveis. Aprenda a criar uma página da web infográfica com Elementor.

e. Pasta de cópia de domínio cruzado

O recurso de pasta de cópia de domínio cruzado no Happyaddons Pro permite copiar widgets, seções ou páginas inteiras de um domínio e colá-las para outro, mantendo todos os estilos e configurações. Este é um tempo para desenvolvedores ou agências que gerenciam vários sites.

Além de tudo isso, você terá uma biblioteca de modelos engenhosos, bate -papo ao vivo, documentação abrangente e uma lista de reprodução do YouTube Tutorial para tornar sua jornada de web design com Happyaddons extremamente agradável.

Pensamentos finais!

Espero que você tenha gostado deste tutorial. Escrevemos constantemente mais e mais postagens de blog baseadas em tutoriais em nosso site para tornar sua jornada de design sem código mais útil e eficiente. Como você leu a postagem inteira, obviamente tem uma idéia do que mais pode fazer com o plug -in do HappyAddons.

Se você possui o Elementor e o HappyAddons em seu site, pode fazer uma mágica real. Você pode verificar as críticas sobre o HappyAddons no WordPress.org e outros sites de revisão para explorar o quanto nossos usuários estão satisfeitos. Depois de tudo isso, se você tiver alguma dúvida em mente, poderá deixar um comentário abaixo ou dar uma batida em nossa caixa de bate -papo de suporte.