¿Has notado cómo algunos sitios web tienen esas elegantes barras de desplazamiento personalizadas que combinan perfectamente con los colores de su marca? 🤩
Nosotros también hemos notado esta característica. Y muchos de nuestros usuarios nos han preguntado cómo crear estas llamativas barras de desplazamiento personalizadas en sus propios sitios de WordPress.
¿La buena noticia? Personalizar tu barra de desplazamiento de WordPress es mucho más fácil de lo que piensas. Ya sea que quieras que coincida con los colores de tu marca, mejorar la navegación o agregar un toque profesional a tu sitio web, te mostraremos exactamente cómo hacerlo. ¡No se requiere experiencia en codificación!
Lo que debes saber antes de agregar una barra de desplazamiento personalizada 💡
Entonces, te interesa personalizar tu barra de desplazamiento de WordPress. Pero antes de empezar, hay algunas cosas importantes que debes saber para asegurarte de que estás tomando la decisión correcta para tu sitio web de WordPress.
Primero, aunque las barras de desplazamiento personalizadas pueden verse increíbles, no todos los navegadores las muestran de la misma manera. Los navegadores modernos como Chrome las admiten bien, pero otros podrían mostrar una personalización limitada o ninguna en absoluto, especialmente en dispositivos móviles.
La clave es empezar sutilmente. Siempre recomendamos comenzar con ajustes menores que coincidan con el esquema de color de tu marca en lugar de crear diseños llamativos que puedan distraer de tu contenido. Recuerda: tu barra de desplazamiento debe mejorar la experiencia del usuario, no robarse el espectáculo.
Cuando se hace correctamente, este elemento de diseño de WordPress puede darle a tu sitio ese toque profesional adicional. Solo asegúrate de probar tus cambios en diferentes navegadores para garantizar una experiencia consistente para todos tus visitantes.
Ahora que entiendes qué esperar, veamos cómo agregar una barra de desplazamiento personalizada a tu sitio de WordPress. Simplemente usa los enlaces rápidos a continuación para saltar al método que deseas usar:
- Opción 1: Usa el plugin Advanced Scrollbar (Gratis + Fácil)
- Opción 2: Crea una barra de desplazamiento CSS (Avanzado)
- Consejo extra: Agrega un efecto de desplazamiento hacia arriba en WordPress
🔎 ¿Quieres agregar barras de desplazamiento personalizadas a elementos específicos como cuadros de contenido o barras laterales? Consulta nuestra guía sobre cómo agregar barras de desplazamiento personalizadas a cualquier elemento en WordPress.
Opción 1: Usa el plugin Advanced Scrollbar (Gratis + Fácil)
La forma más fácil de personalizar la barra de desplazamiento en WordPress es usando Advanced Scrollbar. Este plugin gratuito te permite cambiar el ancho, el color, la velocidad de desplazamiento de la barra de desplazamiento y más, sin tener que escribir una sola línea de código.
Lo primero que debes hacer es instalar y activar el plugin Advanced Scrollbar. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress para principiantes.
Después de la activación, dirígete a Ajustes » Advanced Scrollbar Settings.
Aquí, puedes cambiar el diseño de la barra de desplazamiento, como el esquema de colores y el color de fondo del riel de fondo.
En la siguiente imagen, hemos creado una barra de desplazamiento azul.
También puedes cambiar el paso de desplazamiento del ratón escribiendo un nuevo número en el campo 'Paso de desplazamiento del ratón'.
Un número menor hará que tu sitio se desplace más lentamente, y un número mayor hará que se desplace más rápidamente.
También puedes seleccionar si deseas ocultar automáticamente la barra de desplazamiento para que solo aparezca cuando el visitante se esté desplazando.
Esto puede ser útil si has creado una barra de desplazamiento más colorida y te preocupa que pueda distraer del resto de tu contenido.
Por defecto, la barra de desplazamiento aparece en el lado derecho de la ventana del navegador. Sin embargo, puedes moverla al lado izquierdo usando la configuración 'Alineación del riel' si lo prefieres.
Cuando estés satisfecho con la configuración de la barra de desplazamiento, recuerda hacer clic en 'Guardar cambios' para guardar tu configuración.
Ahora puedes visitar tu blog de WordPress para ver la barra de desplazamiento personalizada en acción.
Opción 2: Crea una barra de desplazamiento CSS (Avanzado)
Si deseas realizar cambios más avanzados en tu barra de desplazamiento, otra opción es usar CSS.
Crear una barra de desplazamiento personalizada con CSS te permite personalizar cada parte del elemento, pero solo funciona en navegadores de escritorio que usan WebKit. Esto significa que tus cambios no se mostrarán en todos los navegadores, incluidos los navegadores móviles.
Para personalizar tu barra de desplazamiento usando CSS, ve a Apariencia » Personalizar.
Nota: Si estás utilizando un tema de bloques, esta opción no estará disponible para ti. En ese caso, puedes abrir el personalizador escribiendo la URL https://example.com/wp-admin/customize.php. Ten en cuenta que debes reemplazar example.com con el nombre de dominio de tu propio sitio.
Para más información, consulta nuestra guía sobre cómo solucionar la falta del personalizador de temas en el administrador de WordPress.
En el personalizador de WordPress, haz clic en 'CSS adicional'.
Ahora puedes agregar tu código al pequeño editor que aparece.
Aquí tienes un ejemplo de código que cambia la apariencia de la barra de desplazamiento:
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #ffb400;
border:1px solid #ccc;
}
::-webkit-scrollbar-thumb {
background: #cc00ff;
border:1px solid #eee;
height:100px;
border-radius:5px;
}
::-webkit-scrollbar-thumb:hover {
background: blue;
}
Puedes agregar cualquier código que desees. Para más información sobre CSS, por favor consulta nuestra guía completa sobre cómo agregar CSS personalizado a tu tema de WordPress.
Cuando estés satisfecho con tu código, simplemente haz clic en el botón 'Publicar'. Ahora puedes visitar tu sitio de WordPress en un navegador WebKit para ver tus cambios en acción.
Consejo extra: Agrega un efecto de desplazamiento hacia arriba en WordPress
Además de crear una barra de desplazamiento personalizada, es posible que también desees agregar un efecto de desplazamiento hacia arriba en tu sitio de WordPress. Esto puede ser de gran ayuda si tienes publicaciones de blog más largas y deseas ofrecer a los usuarios una forma rápida de volver al principio.
Para agregar esta función, debes instalar y activar el plugin WPFront Scroll Top. Para obtener instrucciones detalladas, consulta nuestro tutorial sobre cómo instalar un plugin de WordPress.
Tras la activación, visita la página Ajustes » Scroll Top desde el panel de WordPress y marca la casilla ‘Habilitado’ para activar el efecto de desplazamiento hacia arriba.
Después de eso, puedes editar el desplazamiento inicial, el tamaño del botón, la opacidad, la duración del desvanecimiento, la duración del desplazamiento y más desde aquí.
Una vez que hayas terminado, no olvides hacer clic en el botón ‘Guardar Cambios’ para almacenar tu configuración.
Ahora has agregado con éxito un efecto de desplazamiento hacia arriba a tu sitio web. Para obtener instrucciones más detalladas, consulta nuestro tutorial sobre cómo agregar un efecto de desplazamiento suave hacia arriba en WordPress.
Esperamos que este artículo te haya ayudado a aprender cómo agregar una barra de desplazamiento personalizada en WordPress. También te puede interesar ver nuestras selecciones expertas de los mejores constructores de páginas de arrastrar y soltar para WordPress y nuestra guía definitiva sobre cómo editar un sitio web de WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Dennis Muthomi
Algo que me gustaría añadir es la importancia de considerar la accesibilidad al personalizar las barras de desplazamiento.
Si bien la estética es importante, debemos asegurarnos de que la barra de desplazamiento personalizada siga siendo fácilmente visible y utilizable para todos los visitantes, incluidos aquellos con discapacidades visuales.
Quizás el uso de colores de alto contraste o asegurar que el ancho de la barra de desplazamiento sea suficiente podría ayudar en este sentido.
Marcos
¡Gracias! El CSS es conectar y usar.
Soporte de WPBeginner
¡Me alegra saber que nuestra guía fue útil!
Administrador
Luqman Essam
¡Gracias! ¡Me ayudó!
Soporte de WPBeginner
Glad our guide was helpful!
Administrador
Victor
¿Existe algún plugin para WP que muestre arte secuencial como en una tira cómica donde las entregas se puedan publicar semanalmente?
Soporte de WPBeginner
Es posible que desees consultar nuestra guía sobre cómo administrar una serie de publicaciones: https://www.wpbeginner.com/plugins/how-to-effeciently-manage-post-series-in-wordpress/
Administrador
ceniza
it not working very fine on some websites, depends to the themes that the website uses, it might even hide the scroll bar and make the website loading time more than normal, i suggest using a CSS code it’s easy to use and customizable as well … i give a sample ans you guys just modify it as your own
===
::-webkit-scrollbar { width: 14px; background-color: silver; }
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: silver; }
::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); background-color: #0099cc; }
Vas
Excelente… La solución más limpia. Sería bueno publicar el código para Firefox… si existe tal opción.
Gracias por compartir.
Personal de WPBeginner
Podría haber alguna manera de anularlo a través de CSS personalizado. Por favor, contacta al soporte del plugin.
Karen
Qué plugin tan divertido. Lo acabo de instalar. ¿Hay alguna forma de controlar la opacidad – del color de la barra de desplazamiento cuando no estás sobre ella con el cursor? ¡Gracias por esta publicación!
Personal de WPBeginner
Gracias por notificarnos. Lo arreglamos.
Vernon Trent
Por favor, corrige tu enlace al plugin. Falta una S en la URL “pluginS”
Invitado
Hola, el enlace en la publicación parece roto, podría afectar el ranking de tu sitio. Por favor, coloca el enlace correcto para el plugin “Dewdrop Custom Scrollbar”.