[{"@context":"https:\/\/schema.org\/","@type":"BlogPosting","@id":"https:\/\/xn--adrimadiseo-beb.com\/plugins\/como-agregar-una-barra-de-desplazamiento-personalizada-en-wordpress\/#BlogPosting","mainEntityOfPage":"https:\/\/xn--adrimadiseo-beb.com\/plugins\/como-agregar-una-barra-de-desplazamiento-personalizada-en-wordpress\/","headline":"C\u00f3mo agregar una barra de desplazamiento personalizada en WordPress","name":"C\u00f3mo agregar una barra de desplazamiento personalizada en WordPress","description":"\u00bfQuieres agregar una barra de desplazamiento personalizada en WordPress? Cambiar la apariencia de la barra de desplazamiento puede ayudarlo a destacar especialmente al crear un ... Leer m\u00e1s<\/a>","datePublished":"2022-08-22","dateModified":"2022-08-22","author":{"@type":"Person","@id":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/#Person","name":"adrimadise\u00f1o","url":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/","image":{"@type":"ImageObject","@id":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","height":96,"width":96}},"publisher":{"@type":"Organization","name":"adrimadise\u00f1o.com","logo":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","width":450,"height":90}},"image":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/08\/Como-agregar-una-barra-de-desplazamiento-personalizada-en-WordPress.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/08\/Como-agregar-una-barra-de-desplazamiento-personalizada-en-WordPress.png","height":340,"width":550},"url":"https:\/\/xn--adrimadiseo-beb.com\/plugins\/como-agregar-una-barra-de-desplazamiento-personalizada-en-wordpress\/","about":["Plugins"],"wordCount":683,"articleBody":"\u00bfQuieres agregar una barra de desplazamiento personalizada en WordPress? Cambiar la apariencia de la barra de desplazamiento puede ayudarlo a destacar especialmente al crear un tema personalizado para su sitio web. En este art\u00edculo, le mostraremos c\u00f3mo agregar f\u00e1cilmente una barra de desplazamiento personalizada en WordPress. Le mostraremos dos soluciones y puede elegir la que mejor se adapte a sus necesidades. Problemas con los colores personalizados de la barra de desplazamientoDe forma predeterminada, CSS no viene con un conjunto de reglas que le permita cambiar las propiedades de la barra de desplazamiento. Hay algunas propuestas para agregar esto, pero no son compatibles con la mayor\u00eda de los navegadores en este momento. Para superar esto, los dise\u00f1adores y desarrolladores usan elementos pseduo espec\u00edficos del navegador o JavaScript para anular la apariencia predeterminada de la barra de desplazamiento. Te mostraremos ambas t\u00e9cnicas. Sin embargo, tenga en cuenta que debe probar su sitio con diferentes navegadores y dispositivos para asegurarse de que funciona correctamente en todos los navegadores. Dicho esto, echemos un vistazo a c\u00f3mo agregar colores de barra de desplazamiento personalizados en WordPress. M\u00e9todo 1. Agregue una barra de desplazamiento personalizada en WordPress con un complementoEste m\u00e9todo es m\u00e1s f\u00e1cil y recomendado para la mayor\u00eda de los usuarios. Sin embargo, no es compatible con navegadores m\u00f3viles. Primero, lo que debe hacer es instalar y activar el Barra de desplazamiento avanzada enchufar. Para obtener m\u00e1s detalles, consulte nuestra gu\u00eda paso a paso sobre c\u00f3mo instalar un complemento de WordPress.Tras la activaci\u00f3n, debe dirigirse a Configuraci\u00f3n \u00bb Configuraci\u00f3n personalizada de la barra de desplazamiento de color p\u00e1gina para configurar el complemento. Desde aqu\u00ed, puede cambiar el color de la barra de desplazamiento y los colores de fondo del riel de la barra de desplazamiento. Luego puede seleccionar el paso de desplazamiento del mouse, que es la velocidad de desplazamiento de la rueda del mouse. Tambi\u00e9n puede seleccionar si desea ocultar autom\u00e1ticamente la barra de desplazamiento o mostrarla siempre. Tiene la opci\u00f3n de elegir la opci\u00f3n ‘Solo cursor’ que mostrar\u00eda el riel de la barra de desplazamiento pero no el bot\u00f3n. Debajo de eso, encontrar\u00e1 opciones para configurar la velocidad de desplazamiento, cambiar la alineaci\u00f3n de los rieles (izquierda o derecha) y habilitar el comportamiento t\u00e1ctil. No olvide hacer clic en el bot\u00f3n Guardar cambios para almacenar su configuraci\u00f3n. Ahora puede visitar su sitio web para ver los colores de la barra de desplazamiento personalizada en acci\u00f3n. M\u00e9todo 2. Agregue colores de barra de desplazamiento personalizados en WordPress usando CSSEste m\u00e9todo usa CSS para dise\u00f1ar su barra de desplazamiento, que es m\u00e1s r\u00e1pido que usar jQuery. Sin embargo, solo funciona en navegadores de escritorio que usan el motor de renderizado WebKit como Google Chrome, Safari, Opera y m\u00e1s. No tendr\u00e1 ning\u00fan efecto en los navegadores m\u00f3viles o Firefox y Edge en las computadoras de escritorio. Deber\u00e1 agregar el siguiente CSS personalizado a su tema de WordPress. ::-webkit-scrollbar { -webkit-appearance: none;}::-webkit-scrollbar { width: 10px;}::-webkit-scrollbar-track { background: #ffb400; \tborder:1px solid #ccc;}::-webkit-scrollbar-thumb { background: #cc00ff; \tborder:1px solid #eee;\theight:100px;\tborder-radius:5px;}::-webkit-scrollbar-thumb:hover { background: blue; }Si\u00e9ntase libre de cambiar los colores y otras propiedades de CSS. Una vez que est\u00e9 satisfecho, no olvide guardar los cambios. Despu\u00e9s de eso, puede obtener una vista previa en un navegador compatible. As\u00ed es como se ve\u00eda en nuestro sitio web de demostraci\u00f3n mientras se ve\u00eda en Google Chrome en una computadora Mac. Esperamos que este art\u00edculo le haya ayudado a aprender c\u00f3mo agregar una barra de desplazamiento personalizada en WordPress. Tambi\u00e9n puede consultar nuestra gu\u00eda sobre c\u00f3mo crear f\u00e1cilmente un tema de WordPress personalizado sin escribir ning\u00fan c\u00f3digo. Si te ha gustado este art\u00edculo, suscr\u00edbete a nuestro Canal de Youtube para tutoriales en v\u00eddeo de WordPress. Tambi\u00e9n puedes encontrarnos en Gorjeo y Facebook. "},{"@context":"https:\/\/schema.org\/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Plugins","item":"https:\/\/xn--adrimadiseo-beb.com\/plugins\/#breadcrumbitem"},{"@type":"ListItem","position":2,"name":"C\u00f3mo agregar una barra de desplazamiento personalizada en WordPress","item":"https:\/\/xn--adrimadiseo-beb.com\/plugins\/como-agregar-una-barra-de-desplazamiento-personalizada-en-wordpress\/#breadcrumbitem"}]}]