{"id":370288,"date":"2022-11-12T14:04:00","date_gmt":"2022-11-12T11:04:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=370288"},"modified":"2022-11-12T14:04:02","modified_gmt":"2022-11-12T11:04:02","slug":"como-agregar-una-barra-de-desplazamiento-personalizada-en-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/como-agregar-una-barra-de-desplazamiento-personalizada-en-wordpress\/","title":{"rendered":"C\u00f3mo agregar una barra de desplazamiento personalizada en WordPress"},"content":{"rendered":"\n

La barra de desplazamiento puede ser un peque\u00f1o detalle en su sitio web, pero el hecho de que sea peque\u00f1a no significa que deba ce\u00f1irse a su aspecto predeterminado. Si tener una identidad visual \u00fanica es una de sus prioridades, esta es la buena noticia: en los sitios web de WordPress, siempre existe la posibilidad de cambiar la barra de desplazamiento y ajustarla a su tema, estilo y combinaci\u00f3n de colores<\/strong>.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Hay dos formas de personalizar la barra de desplazamiento<\/strong>. El m\u00e1s f\u00e1cil es instalar el complemento, que no requiere ninguna habilidad de codificaci\u00f3n. La otra forma es insertar CSS adicional en la configuraci\u00f3n de WordPress.<\/p>\n

Uso del complemento de la barra de desplazamiento avanzada<\/h2>\n

La barra de desplazamiento avanzada<\/a> es un complemento gratuito, por lo que puede encontrarlo en la biblioteca de complementos de WordPress. Navegue hasta el panel de administraci\u00f3n y haga clic en Complementos > Agregar nuevo para abrir la biblioteca. En la barra de b\u00fasqueda, escriba "Barra de desplazamiento avanzada" y haga clic en el resultado.<\/p>\n

Instale el complemento y no olvide activarlo<\/strong> usando el enlace de activaci\u00f3n. Los complementos no funcionan si no est\u00e1n activados.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Despu\u00e9s de activar el complemento, podr\u00e1 cambiar su configuraci\u00f3n. Navegando a la Configuraci\u00f3n en el men\u00fa principal en el tablero. Haga clic en Configuraci\u00f3n de barra de desplazamiento de color personalizada.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Estas son configuraciones predeterminadas.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

As\u00ed es como se ve la barra de desplazamiento con la configuraci\u00f3n predeterminada.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Si desea cambiar la configuraci\u00f3n b\u00e1sica, puede ajustar la barra de desplazamiento y el color de fondo del riel.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Adem\u00e1s, puede configurar la velocidad de desplazamiento del mouse, la velocidad de<\/strong> la barra de desplazamiento y la opci\u00f3n de ocultar la barra de desplazamiento autom\u00e1ticamente<\/strong>. Tambi\u00e9n puede elegir si la barra de desplazamiento tendr\u00e1 una alineaci\u00f3n hacia la izquierda o hacia la derecha. Tambi\u00e9n hay una opci\u00f3n para habilitar la visualizaci\u00f3n de la barra de desplazamiento en dispositivos t\u00e1ctiles<\/strong> como tel\u00e9fonos m\u00f3viles y tabletas.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

La configuraci\u00f3n adicional para cambiar el estilo de la barra de desplazamiento se encuentra en la segunda pesta\u00f1a, Configuraci\u00f3n de estilo personalizado de la barra de desplazamiento. Aqu\u00ed puede cambiar el ancho de la barra de desplazamiento, el CSS del borde y el radio del borde<\/strong>.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Este es el resultado final de nuestros cambios.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Usando el CSS Adicional<\/h2>\n

La segunda soluci\u00f3n para agregar una barra de desplazamiento personalizada a su sitio de WordPress requiere un poco de conocimiento de codificaci\u00f3n. Si no tiene experiencia con la programaci\u00f3n y a\u00fan desea agregar una barra de desplazamiento personalizada de esta manera, siga las instrucciones cuidadosamente<\/strong>.<\/p>\n

Para agregar un CSS personalizado en todo el sitio, vaya al men\u00fa principal en el tablero y haga clic en Apariencia > Personalizar.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Haga clic en el campo CSS adicional.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Pegue el siguiente c\u00f3digo en el cuadro 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
\"C\u00f3mo<\/a><\/p>\n
Cuando agregue CSS, haga clic en el bot\u00f3n Publicar y verifique el resultado. Tenga en cuenta que este c\u00f3digo funcionar\u00e1 en todos los navegadores de Internet, excepto en Firefox y Edge<\/strong>.<\/p>\n
Estas son dos formas simples de agregar una barra de desplazamiento personalizada en WordPress. Ambos son una opci\u00f3n viable para usuarios con poca o ninguna experiencia en codificaci\u00f3n.<\/p>\n
\u00bfQuiere obtener m\u00e1s informaci\u00f3n sobre formas r\u00e1pidas y sencillas de mejorar el dise\u00f1o y el rendimiento de su sitio web? \u00a1 Mira esta lista de complementos de WordPress imprescindibles para comenzar un nuevo sitio web<\/a>! <\/p>\n
Fuente de grabaci\u00f3n:  wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Agregar una barra de desplazamiento personalizada en WordPress es una excelente manera de alinear incluso los detalles m\u00e1s peque\u00f1os en su sitio web con su identidad visual \u00fanica.<\/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":[566],"tags":[849],"class_list":["post-370288","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-conceptos-basicos-de-wordpress","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/370288","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/comments?post=370288"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/370288\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media\/363788"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media?parent=370288"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/categories?post=370288"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/tags?post=370288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}