Cómo Agregar una Barra de Desplazamiento Personalizada en WordPress

¿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 sumergirte, hay algunas cosas importantes que debes saber para asegurarte de que estás tomando la decisión correcta para tu sitio web de WordPress.

Consideraciones clave para barras de desplazamiento personalizadas:

• Compatibilidad con navegadores: Mientras que los navegadores modernos como Chrome, Safari y Edge (navegadores basados en WebKit para CSS) admiten bien las barras de desplazamiento personalizadas, otros podrían ofrecer personalización limitada o ninguna. Siempre prueba tus cambios en diferentes navegadores para asegurar una experiencia consistente.
• Limitaciones en dispositivos móviles: En dispositivos móviles, las barras de desplazamiento tradicionales a menudo son reemplazadas por gestos táctiles intuitivos (deslizamientos). Esto significa que las barras de desplazamiento personalizadas típicamente no se mostrarán en teléfonos inteligentes o tabletas.
• Experiencia de usuario y accesibilidad: Tu barra de desplazamiento debe mejorar, no distraer de, tu contenido. Diseños demasiado llamativos o difíciles de ver pueden afectar negativamente la navegación del usuario. Busca ajustes sutiles que coincidan con los colores de tu marca y mejoren el flujo general de tu sitio.
• Impacto en el rendimiento: Aunque generalmente es mínimo, agregar plugins o CSS extensos puede afectar ligeramente la velocidad de carga del sitio web. Elige soluciones optimizadas y mantén tu código limpio para mantener un buen rendimiento.
• Pruebas son Cruciales: Independientemente del método que elijas, prueba a fondo tu barra de desplazamiento personalizada en varios navegadores, dispositivos y tamaños de pantalla para asegurar que funcione eficazmente.

Cuando se hace correctamente, este elemento de diseño de WordPress puede darle a tu sitio ese toque profesional adicional mientras mantiene una excelente usabilidad.

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)

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.

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.

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 utilizando los pseudo-elementos ::-webkit-scrollbar (como en el ejemplo a continuación) te permite personalizar muchas partes del elemento.

Sin embargo, estas reglas CSS específicas funcionan principalmente en navegadores de escritorio basados en WebKit como Chrome, Safari y el nuevo Microsoft Edge.

Esto significa que tu barra de desplazamiento personalizada podría no aparecer o se verá diferente en otros navegadores (como Firefox) o en la mayoría de los dispositivos móviles.

Para personalizar tu barra de desplazamiento usando CSS, ve a Apariencia » Personalizar.

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, también puedes querer agregar un efecto de "scroll to top" (desplazarse hacia arriba) en tu sitio de WordPress. Esto puede ser muy útil si tienes publicaciones de blog más largas y quieres 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 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 "scroll to top" a tu sitio web. Para instrucciones más detalladas, consulta nuestro tutorial sobre cómo agregar un efecto de desplazamiento suave hacia arriba en WordPress.

Preguntas Frecuentes Sobre Cómo Añadir una Barra de Desplazamiento Personalizada en WordPress

Aquí tienes algunas preguntas que nuestros lectores han hecho frecuentemente sobre cómo añadir una barra de desplazamiento personalizada en WordPress:

¿Cómo añado una barra de desplazamiento en WordPress?

Puedes añadir una barra de desplazamiento utilizando CSS personalizado o un plugin como Advanced Scrollbar que permite áreas de contenido con desplazamiento dentro de publicaciones, páginas o widgets en WordPress.

¿Cómo inserto un slider en WordPress?

Puedes insertar un slider usando un plugin de sliders como Soliloquy, creando tu slider y luego agregándolo a una página usando un bloque. Para más información, consulta nuestro tutorial sobre cómo crear un slider responsivo en WordPress.

¿Cuál es el mejor plugin de slider para WordPress?

Soliloquy es el mejor plugin de slider para WordPress porque es fácil de usar para principiantes, flexible y funciona bien con la mayoría de los temas y constructores de páginas.

¿Cómo creo un banner personalizado?

Puedes usar OptinMonster para crear un banner personalizado con sus plantillas prediseñadas. El plugin también te permite personalizar completamente el contenido, agregar una llamada a la acción (CTA) y usar diferentes colores según tu preferencia. Para obtener instrucciones detalladas, consulta nuestro tutorial sobre cómo crear un banner 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 ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.