{"id":368383,"date":"2022-12-04T15:52:00","date_gmt":"2022-12-04T12:52:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=368383"},"modified":"2022-10-12T19:13:58","modified_gmt":"2022-10-12T16:13:58","slug":"como-fazer-um-botao-voltar-ao-topo-no-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-fazer-um-botao-voltar-ao-topo-no-wordpress\/","title":{"rendered":"Como fazer um bot\u00e3o Voltar ao topo no WordPress"},"content":{"rendered":"\n<p>Voc\u00ea tem planejado tornar seu site mais acess\u00edvel para seus visitantes? Adicionar um bot\u00e3o de voltar ao topo ao seu blog WordPress pode fazer o truque. Isso \u00e9 especialmente verdadeiro se o seu blog requer muita rolagem ao visualizar o conte\u00fado.<\/p>\n<p>Neste tutorial, mostraremos como voc\u00ea pode instalar o bot\u00e3o voltar ao topo em seu blog com dois plugins diferentes \u2013 <strong><a href=\"#WPFront\">WPFront Scroll Top<\/a><\/strong> e <strong><a href=\"#GP\">GP Back To Top<\/a><\/strong> plugin. O primeiro cont\u00e9m muitas op\u00e7\u00f5es para personaliza\u00e7\u00e3o completa do plugin, enquanto o outro \u00e9 mais simples de usar.<\/p>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/www.youtube.com\/embed\/_AKk-JG8E2Q\" frameborder=\"0\"><\/iframe><\/div>\n<h2>O que \u00e9 um bot\u00e3o Voltar ao topo?<\/h2>\n<p>Essencialmente, o bot\u00e3o voltar ao topo geralmente vem na <strong>forma de uma seta ou um texto que aparece na parte inferior<\/strong> do texto quando o usu\u00e1rio est\u00e1 rolando uma p\u00e1gina. Clicar neste bot\u00e3o <strong>traz o usu\u00e1rio de volta ao in\u00edcio da p\u00e1gina<\/strong>. Pode ser particularmente \u00fatil para aqueles que preferem navegar em sites em seus telefones celulares. Muitas pessoas usam um menu fixo para facilitar a navega\u00e7\u00e3o no site, mas um bot\u00e3o voltar ao topo pode ser um recurso adicional que ajudar\u00e1 ainda mais <strong>seus leitores quando eles navegarem pela sua p\u00e1gina<\/strong>.<\/p>\n<p>Quando se trata de estilo, este bot\u00e3o deve ser vis\u00edvel o suficiente para chamar a aten\u00e7\u00e3o do visitante. Ainda assim, tamb\u00e9m n\u00e3o deve ser muito grande ou enfatizado demais, para n\u00e3o distrair demais os usu\u00e1rios. Um bom exemplo de como esse bot\u00e3o deve ficar em um site pode ser visto no <a href=\"http:\/\/dalia.elated-themes.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">template Dalia WordPress<\/a>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e6080e5756.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e6080e5756.jpg\" alt=\"Como fazer um bot\u00e3o Voltar ao topo no WordPress\" ><\/a><\/p>\n<h2>Instalando o bot\u00e3o voltar ao topo com o plugin WPFront Scroll Top<\/h2>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e608411f33.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e608411f33.jpg\" alt=\"Como fazer um bot\u00e3o Voltar ao topo no WordPress\" ><\/a><\/p>\n<p>Depois de instal\u00e1-lo, voc\u00ea poder\u00e1 encontrar o plug-in na guia Configura\u00e7\u00f5es em seu painel sob o nome Scroll Top.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e6087886a0.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e6087886a0.jpg\" alt=\"Como fazer um bot\u00e3o Voltar ao topo no WordPress\" ><\/a><\/p>\n<p>Para ativ\u00e1-lo, certifique-se de marcar a caixa Ativar antes de fazer qualquer outra coisa. Depois, voc\u00ea pode definir <strong>Scroll Offset<\/strong>, ou seja, <strong>o<\/strong> <strong>n\u00famero de pixels antes que o bot\u00e3o apare\u00e7a.<\/strong> Voc\u00ea tamb\u00e9m pode ajustar as <strong>dimens\u00f5es que deseja que seu bot\u00e3o tenha<\/strong>.<\/p>\n<p><strong>A opacidade do bot\u00e3o<\/strong> tamb\u00e9m \u00e9 uma \u00f3tima op\u00e7\u00e3o que permite que voc\u00ea <strong>fa\u00e7a o bot\u00e3o parecer mais brilhante quando n\u00e3o est\u00e1 ativo<\/strong>. Isto d\u00e1-lhe um bom efeito de anima\u00e7\u00e3o.<\/p>\n<p>Quando voc\u00ea marca a op\u00e7\u00e3o <strong>Auto Hide<\/strong> e digita o n\u00famero de segundos na caixa <strong>Auto Hide After<\/strong>, seu <strong>bot\u00e3o desaparecer\u00e1 ap\u00f3s o tempo de inatividade que voc\u00ea especificou e reaparecer\u00e1 quando voc\u00ea mover o cursor do mouse novamente<\/strong>.<\/p>\n<p>O plugin WPFront Scroll Top tamb\u00e9m permite que os usu\u00e1rios <strong>ajustem a posi\u00e7\u00e3o do bot\u00e3o<\/strong> e ainda <strong>cont\u00e9m op\u00e7\u00f5es para dispositivos pequenos<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e608a3b5ee.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e608a3b5ee.jpg\" alt=\"Como fazer um bot\u00e3o Voltar ao topo no WordPress\" ><\/a><\/p>\n<p>Se preferir, voc\u00ea pode configurar o bot\u00e3o voltar ao topo para <strong>aparecer apenas nas p\u00e1ginas que voc\u00ea especificou<\/strong>. Para fazer isso, basta selecionar <strong>Incluir nas p\u00e1ginas seguintes<\/strong> e marcar todas as caixas de sele\u00e7\u00e3o das p\u00e1ginas nas quais voc\u00ea deseja que seu bot\u00e3o seja exibido.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e608e46ae3.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e608e46ae3.jpg\" alt=\"Como fazer um bot\u00e3o Voltar ao topo no WordPress\" ><\/a><\/p>\n<p>O plugin WPFront Scroll Top tamb\u00e9m vem com um <strong>grande n\u00famero de imagens que voc\u00ea pode escolher para ajustar o estilo do seu bot\u00e3o<\/strong> para combinar com o tema do seu site. Se nenhuma das fotos desta lista funcionar para voc\u00ea, <strong>voc\u00ea tamb\u00e9m pode escolher uma de sua prefer\u00eancia<\/strong>. Para fazer isso, voc\u00ea precisa primeiro adicionar a imagem \u00e0 Biblioteca de m\u00eddia para que ela apare\u00e7a na lista de bot\u00f5es de imagem dispon\u00edveis. Outra op\u00e7\u00e3o \u00e9 adicionar sua imagem inserindo um URL personalizado.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e60928236c.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e60928236c.jpg\" alt=\"Como fazer um bot\u00e3o Voltar ao topo no WordPress\" ><\/a><\/p>\n<p>Ao configurar todas as op\u00e7\u00f5es do plug-in e selecionar o bot\u00e3o Imagem, certifique-se de clicar em Salvar altera\u00e7\u00f5es.<\/p>\n<h2>Usando o plug-in GP Voltar ao in\u00edcio<\/h2>\n<p>Se voc\u00ea n\u00e3o \u00e9 f\u00e3 de plugins com in\u00fameras configura\u00e7\u00f5es e prefere uma <strong>abordagem mais simplista, mas direta<\/strong>, o <a href=\"https:\/\/wordpress.org\/plugins\/gp-back-to-top\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">GB Back To Top Plugin<\/a> \u00e9 para voc\u00ea.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e609662683.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e609662683.jpg\" alt=\"Como fazer um bot\u00e3o Voltar ao topo no WordPress\" ><\/a><\/p>\n<p>Ap\u00f3s a instala\u00e7\u00e3o, voc\u00ea pode acess\u00e1-lo acessando Configura\u00e7\u00f5es&gt; GP Voltar ao topo em seu painel.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e609a7c1fc.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e609a7c1fc.jpg\" alt=\"Como fazer um bot\u00e3o Voltar ao topo no WordPress\" ><\/a><\/p>\n<p>Como j\u00e1 enfatizamos, as configura\u00e7\u00f5es do GP Plugin s\u00e3o <strong>f\u00e1ceis de trabalhar<\/strong>. Mas o mais importante, o pr\u00f3prio plugin funciona muito bem. Existem apenas configura\u00e7\u00f5es que permitem <strong>ajustar op\u00e7\u00f5es como tamanho do bot\u00e3o, tamanho da fonte e cor de fundo<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e609f4aa1f.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e609f4aa1f.jpg\" alt=\"Como fazer um bot\u00e3o Voltar ao topo no WordPress\" ><\/a><\/p>\n<p>Depois de implementar o bot\u00e3o voltar ao topo em sua p\u00e1gina com este plug-in, veja como ele ficar\u00e1:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e60a3860c5.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e60a3860c5.jpg\" alt=\"Como fazer um bot\u00e3o Voltar ao topo no WordPress\" ><\/a><\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpklik.com\" class=\"external external_icon\">wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Voc\u00ea tem planejado tornar seu site mais acess\u00edvel para seus visitantes? Adicionar um bot\u00e3o de voltar ao topo ao seu blog WordPress pode fazer o truque.<\/p>\n","protected":false},"author":1,"featured_media":328617,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[573],"tags":[848],"class_list":["post-368383","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nocoes-basicas-do-wordpress","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/368383","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/comments?post=368383"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/368383\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/328617"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=368383"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=368383"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=368383"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}