Não sabe como adicionar um botão de voltar ao topo no WordPress? Infelizmente, a maioria dos temas do WordPress não inclui esse botão de forma nativa. Mas existem alguns métodos que você pode usar para colocar o botão em seu site.
Vale a pena o esforço. Se o seu site tem páginas longas, nas quais os usuários rolam a tela até ficarem muito longe do menu de navegação ou do botão de call to action, o botão ajuda a levá-los de volta ao foco principal da página com o mínimo de esforço.
As formas mais comuns de adicionar um botão de voltar ao topo no WordPress incluem usar um plugin, adicionar código personalizado ou incorporar um widget sem código. Plugins e widgets incorporados não exigem nenhum conhecimento de programação, por isso são os métodos preferidos se você não está familiarizado com HTML, CSS ou JavaScript. O código personalizado dá a você controle total sobre o botão, mas não é uma ótima solução para iniciantes.
Neste guia, mostramos como adicionar um botão de voltar ao topo no WordPress usando esses métodos, além das vantagens e desvantagens de cada um.
Adicione um botão de voltar ao topo com um plugin do WordPress
O WordPress oferece uma variedade de plugins para ampliar as funcionalidades do seu site. No diretório de plugins, você encontra opções de voltar ao topo para WordPress criadas por vários desenvolvedores — essa é a forma mais comum de adicionar o botão.
Opções disponíveis em um plugin de voltar ao topo para WordPress
Muitos desses plugins oferecem opções de personalização que permitem escolher a posição do botão e o design dele. Ao procurar o plugin de botão de voltar ao topo ideal para o seu site, defina quais configurações são mais importantes para você. Algumas a considerar:
- Posição do botão: determina onde o botão aparece na página. Os plugins podem oferecer opções para posicionar o botão à direita, à esquerda ou ao centro. Alguns oferecem um controle ainda mais detalhado.
- Ícone ou rótulo: os plugins podem oferecer um único ícone ou um menu de opções para você escolher. Alguns também permitem personalizar a cor do ícone.
- Visibilidade no celular ou no desktop: os botões podem aparecer de forma diferente em computadores e dispositivos móveis. Confira as opções de visibilidade do plugin para entender como eles serão exibidos.
- Rolagem suave: alguns botões oferecem opções de rolagem em vez de levar imediatamente ao topo da página. Isso é útil se você quer que os usuários tenham mais controle sobre a navegação na página.
- Deslocamento ou limite de rolagem: essa configuração determina quanto espaço é deixado entre os elementos do topo da página e a posição da rolagem. O ideal é que, ao clicar no botão de voltar ao topo, o conteúdo de menus ou cabeçalhos não fique oculto.
Alguns plugins oferecem mais personalização do que outros. Embora você possa não precisar de um botão de voltar ao topo com muitas opções de estilo, o que você escolher não deve destoar do seu site. O ideal é que ele se integre bem aos outros elementos da página.
Como adicionar um botão de voltar ao topo no WordPress
Depois de escolher um plugin que atenda às suas necessidades, instale-o seguindo estes passos:
- Faça login no painel de administração do seu site.
- Clique em Plugins.
- Localize o plugin no Diretório de Plugins do WordPress. Você pode usar a caixa de pesquisa para digitar o nome dele.
- Clique no plugin.
- Clique em Instalar e ativar. (Se você estiver instalando um plugin pago, clique em Comprar e ativar.)
Depois de instalar o programa, acesse o menu Configurações dele para definir a aparência e o comportamento de rolagem do botão de voltar ao topo.
Plugins de voltar ao topo populares para WordPress
Existem centenas de plugins que adicionam um botão de rolar até o topo no WordPress. Algumas opções incluem:
- WPFront Scroll Top: esse plugin oferece dezenas de botões de rolar até o topo pré-estilizados para você escolher. Ele também permite definir o tamanho, a posição e o comportamento de rolagem do botão.
- Smooth Scroll Page Up/Down Buttons: se as páginas do seu site incluem documentos extensos, esse plugin pode ajudar. Ele oferece um recurso de rolagem suave até o topo no WordPress, permitindo que os usuários naveguem entre textos individuais ou voltem ao início da página.
- Nicescrollr: esse plugin permite adicionar um botão de voltar ao topo e gerenciar várias configurações, incluindo o tamanho do botão e a velocidade de rolagem.
Embora os plugins sejam fáceis de instalar, eles adicionam uma nova dependência que você precisará manter. É importante ficar atento às atualizações do plugin, já que elas podem trazer correções de segurança.
Adicione um botão de voltar ao topo no WordPress com código personalizado
Um botão de voltar ao topo personalizado no WordPress dá a você controle total sobre a aparência e o comportamento dele. Você não fica limitado às opções de configuração de um plugin e pode modificar o botão para atender perfeitamente às suas necessidades. É uma ótima alternativa para quem quer um design sob medida ou prefere evitar o peso extra que os plugins podem causar nas páginas.
No entanto, criar o seu próprio botão exige conhecimento técnico. Você precisará ter segurança para editar temas do WordPress e ter experiência com HTML, CSS ou JavaScript personalizados.
Para desenvolver o seu próprio botão, adicione o código a um bloco de HTML personalizado, à área de personalização do tema ou a um fluxo de trabalho de snippets de código. Depois de implementar o botão no site, teste-o com cuidado para garantir que ele não cause bugs.
Vantagens e desvantagens de um botão personalizado
Um botão de voltar ao topo feito sob medida oferece muita flexibilidade. Você pode adaptar o ícone e a cor para que combinem naturalmente com o seu site, além de ajustar a visibilidade dele. Por exemplo, é possível projetar o botão para que ele só apareça quando o usuário chegar a determinado ponto da página. Ou, ainda, você pode adicionar um botão flutuante de voltar ao topo no WordPress, que acompanha o usuário enquanto ele rola a página.
As principais desvantagens de criar um botão personalizado são a configuração técnica e os testes. Leva tempo escrever um código que se alinhe ao seu site e não interfira no tema do WordPress.
Os testes também são essenciais no desenvolvimento de um botão personalizado. Planeje testar o desempenho do botão em vários dispositivos, incluindo computadores, tablets e smartphones. Também é uma boa ideia experimentar o botão em várias plataformas, como iOS, Windows e Android.
Método mais fácil e sem código: use o widget Voltar ao topo da Jotform
Existe uma alternativa aos plugins e aos botões personalizados: o widget Voltar ao topo da Jotform. É uma solução sem código que você pode adicionar ao seu site em poucos minutos.
Ao contrário dos plugins, o nosso widget Voltar ao topo não deixa as páginas mais pesadas e não exige atualizações regulares. Não é necessário programar absolutamente nada, e ele não afeta o funcionamento do tema do seu WordPress.
O widget Voltar ao topo da Jotform também é totalmente personalizável. Você pode ajustar o estilo do ícone, as cores, o tamanho e o raio dos cantos. Há opções para alterar a posição do botão e a visibilidade dele durante a rolagem. E ele funciona em todos os dispositivos, inclusive em telas de celular.
Como instalar o widget Voltar ao topo da Jotform
Integrar o widget ao seu site é fácil. Comece acessando a nossa página do widget Voltar ao topo e depois siga estes passos:
- Dê um nome ao seu widget editando o campo “Sem título” na barra de ferramentas.
- Defina a posição e as configurações de rolagem de sua preferência e clique em Continuar.
- Posição do botão: escolha Esquerda ou Direita.
- Mostrar rótulo: ative ou desative a opção. Digite o texto que você quer que o botão exiba.
- Mostrar após rolar: use o controle deslizante para indicar quantos pixels o usuário deve rolar antes de o botão aparecer.
- Animação de rolagem: selecione Suave ou Instantânea.
- Defina as preferências de estilo do botão e clique em Continuar.
- Tamanho do botão: use o controle deslizante para definir a largura e a altura do botão.
- Tamanho do ícone: use o controle deslizante para definir o tamanho do ícone de seta.
- Ícone: escolha um estilo de ícone de seta para o botão (Seta para cima, Divisa para cima ou Seta para cima em negrito).
- Raio dos cantos: selecione Cantos quadrados, Cantos arredondados ou Cantos circulares.
- Cores do botão: insira o código hexadecimal da cor de sua preferência para o fundo e para o texto.
- Sombra projetada: ative ou desative uma sombra suave sob o botão.
- Configure as regras de exibição e clique em Experimente no seu site gratuitamente.
- Distância da parte inferior: use o controle deslizante para definir a distância do botão em relação à borda inferior.
- Distância da lateral: use o controle deslizante para controlar a distância do botão em relação à borda lateral.
- Mostrar no desktop: ative ou desative.
- Mostrar no celular: ative ou desative.
- Copie o código de incorporação e cole-o no editor HTML do seu WordPress.
Enquanto personaliza o botão, você pode clicar no ícone de computador ou de smartphone no canto inferior direito para ver como ele vai aparecer.
Vantagens de usar as ferramentas da Jotform no seu site WordPress
Seja você um web designer experiente ou alguém que está começando a aprender como usar o WordPress, a Jotform tem várias ferramentas úteis para apoiar o seu site.
Oferecemos vários widgets para sites gratuitos que você pode personalizar para exibir as avaliações da sua organização em sites de terceiros, como Google, Facebook e Tripadvisor — perfeitos para quem tem um site e quer mostrar depoimentos, mas não quer assumir o compromisso de usar as ferramentas de plugin pagas disponíveis no WordPress.
Você também pode aproveitar o plugin de formulários personalizados da Jotform para WordPress. Ele permite coletar envios de formulários dos usuários que visitam o seu site. Oferecemos mais de 20.000 modelos de formulário personalizados para WordPress gratuitos, que abrangem casos de uso comuns, como informações de contato, informações de pagamento e envio de candidaturas. Você pode incorporar o seu formulário no WordPress com apenas alguns passos.
O melhor de tudo é que a Jotform oferece um plano gratuito que permite usar widgets ilimitados do WordPress e até cinco formulários. Ao migrar para um plano pago, você aumenta o número de formulários que pode usar, remove a marca da Jotform e conta com mais armazenamento.
Adicione um botão de voltar ao topo sem deixar o seu fluxo de trabalho no WordPress mais lento
Um botão de voltar ao topo melhora a experiência do usuário ao rolar conteúdos longos. Ele também favorece o engajamento e as conversões em páginas de e-commerce e landing pages. Mas, embora seja possível adicionar um botão usando plugins ou código personalizado, a solução sem código mais fácil é o widget da Jotform.
Para ver como o widget Voltar ao topo da Jotform adiciona ao seu site WordPress um botão de rolagem até o topo com acabamento profissional, experimente hoje mesmo.
Perguntas frequentes sobre botões de voltar ao topo no WordPress
Há vários plugins no diretório do WordPress que oferecem suporte a botões de voltar ao topo. Essas ferramentas têm opções de personalização e não exigem programação. No entanto, se você quer reduzir o peso das páginas e ter mais controle sobre o funcionamento do botão, programar o seu próprio botão de voltar pode ser uma opção melhor. E, para uma alternativa mais simples, você pode usar o widget Voltar ao topo da Jotform, que não exige experiência com programação nem manutenção contínua.
Para criar um botão de voltar ao topo no WordPress com o Elementor, abra a sua página no editor do Elementor. Adicione um ID de CSS no início da página e, em seguida, insira um widget de botão. Vincule o botão ao ID de CSS na aba Conteúdo. Você pode ajustar a aparência do botão na aba Estilo.
Este artigo é para proprietários de sites WordPress, gerentes de conteúdo, equipes de pequenas empresas, web designers e todos que querem adicionar um botão de voltar ao topo personalizável a páginas longas do WordPress sem prejudicar o desempenho do site nem o fluxo de trabalho.
Enviar Comentário: