{"id":370302,"date":"2022-11-12T14:15:00","date_gmt":"2022-11-12T11:15:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=370302"},"modified":"2022-11-12T14:26:58","modified_gmt":"2022-11-12T11:26:58","slug":"como-adicionar-uma-barra-de-rolagem-personalizada-no-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-adicionar-uma-barra-de-rolagem-personalizada-no-wordpress\/","title":{"rendered":"Como adicionar uma barra de rolagem personalizada no WordPress"},"content":{"rendered":"\n

A barra de rolagem pode ser um pequeno detalhe em seu site, mas s\u00f3 porque \u00e9 pequena, n\u00e3o significa que voc\u00ea precisa manter a apar\u00eancia padr\u00e3o. Se balan\u00e7ar uma identidade visual \u00fanica \u00e9 uma das suas prioridades, aqui est\u00e1 a boa not\u00edcia \u2013 em sites WordPress, sempre h\u00e1 a possibilidade de alterar a barra de rolagem e ajust\u00e1-la ao seu tema, estilo e esquema de cores<\/strong>.<\/p>\n

\"Como<\/a><\/p>\n

H\u00e1 duas maneiras de personalizar a barra de rolagem<\/strong>. O mais f\u00e1cil \u00e9 instalar o plugin, que n\u00e3o requer nenhuma habilidade de codifica\u00e7\u00e3o. A outra maneira \u00e9 inserir CSS adicional nas configura\u00e7\u00f5es do WordPress.<\/p>\n

Usando o plug-in da barra de rolagem avan\u00e7ada<\/h2>\n

A barra de rolagem avan\u00e7ada<\/a> \u00e9 um plugin gratuito, ent\u00e3o voc\u00ea pode encontr\u00e1-lo na biblioteca de plugins do WordPress. Navegue at\u00e9 o painel de administra\u00e7\u00e3o e clique em Plugins > Adicionar novo para abrir a biblioteca. Na barra de pesquisa, digite "Barra de rolagem avan\u00e7ada" e clique no resultado.<\/p>\n

Instale o plugin e n\u00e3o se esque\u00e7a de ativ\u00e1-lo<\/strong> usando o link de ativa\u00e7\u00e3o. Os plugins n\u00e3o funcionam se n\u00e3o estiverem ativados.<\/p>\n

\"Como<\/a><\/p>\n

Depois de ativar o plug-in, voc\u00ea poder\u00e1 alterar suas configura\u00e7\u00f5es. Navegando para as Configura\u00e7\u00f5es no menu principal do painel. Clique em Configura\u00e7\u00f5es da barra de rolagem de cores personalizadas.<\/p>\n

\"Como<\/a><\/p>\n

Essas s\u00e3o as configura\u00e7\u00f5es padr\u00e3o.<\/p>\n

\"Como<\/a><\/p>\n

\u00c9 assim que a barra de rolagem se parece com as configura\u00e7\u00f5es padr\u00e3o.<\/p>\n

\"Como<\/a><\/p>\n

Se voc\u00ea deseja alterar as configura\u00e7\u00f5es b\u00e1sicas, pode ajustar a barra de rolagem e a cor de fundo do trilho.<\/p>\n

\"Como<\/a><\/p>\n

Al\u00e9m disso, voc\u00ea pode definir a velocidade de rolagem do mouse, a velocidade<\/strong> da barra de rolagem e a op\u00e7\u00e3o de ocultar a barra de rolagem automaticamente<\/strong>. Voc\u00ea tamb\u00e9m pode escolher se a barra de rolagem ter\u00e1 um alinhamento \u00e0 esquerda ou \u00e0 direita. H\u00e1 tamb\u00e9m uma op\u00e7\u00e3o para habilitar a exibi\u00e7\u00e3o da barra de rolagem em dispositivos de toque<\/strong>, como telefones celulares e tablets.<\/p>\n

\"Como<\/a><\/p>\n

As configura\u00e7\u00f5es adicionais para alterar o estilo da barra de rolagem est\u00e3o na segunda guia, Configura\u00e7\u00f5es de estilo personalizado da barra de rolagem. Aqui voc\u00ea pode alterar a largura da barra de rolagem, o CSS da borda e o raio da borda<\/strong>.<\/p>\n

\"Como<\/a><\/p>\n

Este \u00e9 o resultado final de nossas mudan\u00e7as.<\/p>\n

\"Como<\/a><\/p>\n

Usando o CSS Adicional<\/h2>\n

A segunda solu\u00e7\u00e3o para adicionar uma barra de rolagem personalizada ao seu site WordPress requer um pouco de conhecimento de codifica\u00e7\u00e3o. Se voc\u00ea n\u00e3o tem experi\u00eancia com programa\u00e7\u00e3o, mas ainda deseja adicionar uma barra de rolagem personalizada dessa forma, siga as instru\u00e7\u00f5es cuidadosamente<\/strong>.<\/p>\n

Para adicionar um CSS personalizado em todo o site, navegue at\u00e9 o menu principal no painel e clique em Apar\u00eancia > Personalizar.<\/p>\n

\"Como<\/a><\/p>\n

Clique no campo CSS Adicional.<\/p>\n

\"Como<\/a><\/p>\n

Cole o c\u00f3digo a seguir na caixa CSS adicional.<\/p>\n

::-webkit-scrollbar {\n-webkit-appearance: none;\n}\n::-webkit-scrollbar {\nwidth: 12px;\n}\n::-webkit-scrollbar-track {\nbackground: #f8c1c0; \nborder:1px solid #fff;\n} \n::-webkit-scrollbar-thumb {\nbackground: #bededa; \nborder:1px solid #fff;\nheight:300px;\nborder-radius:4px;\n}<\/code><\/pre>\n
\"Como<\/a><\/p>\n
Ao adicionar CSS, clique no bot\u00e3o Publicar e verifique o resultado. Tenha em mente que este c\u00f3digo funcionar\u00e1 em todos os navegadores da Internet, exceto no Firefox e Edge<\/strong>.<\/p>\n
Estas s\u00e3o duas maneiras simples de adicionar uma barra de rolagem personalizada no WordPress. Ambos s\u00e3o uma escolha vi\u00e1vel para usu\u00e1rios com pouca ou nenhuma experi\u00eancia em codifica\u00e7\u00e3o.<\/p>\n
Quer saber mais sobre maneiras r\u00e1pidas e f\u00e1ceis de melhorar o design e o desempenho do seu site? Confira esta lista de plugins WordPress obrigat\u00f3rios para iniciar um novo site<\/a>! <\/p>\n
Fonte de grava\u00e7\u00e3o:  wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Adicionar uma barra de rolagem personalizada no WordPress \u00e9 uma \u00f3tima maneira de alinhar at\u00e9 os menores detalhes do seu site com sua identidade visual exclusiva.<\/p>\n","protected":false},"author":1,"featured_media":363788,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[573],"tags":[848],"class_list":["post-370302","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\/370302","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=370302"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/370302\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/363788"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=370302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=370302"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=370302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}