Cómo agregar una barra de desplazamiento personalizada a cualquier elemento en WordPress

Pequeños toques de diseño pueden marcar una gran diferencia en lo profesional que se ve tu sitio web.

Las barras de desplazamiento personalizadas son uno de esos detalles que la mayoría de los visitantes no notarán conscientemente, pero definitivamente sentirán la mejora en la consistencia visual al navegar por tu contenido.

La buena noticia es que personalizar las barras de desplazamiento en WordPress no requiere habilidades avanzadas de codificación, y los resultados realmente pueden mejorar la experiencia general del usuario de tu sitio.

Por nuestra experiencia creando sitios de WordPress, hemos descubierto que las barras de desplazamiento personalizadas ayudan a crear esa apariencia pulida e intencional que separa los sitios para principiantes de los profesionales.

Te mostraremos 2 formas sencillas de agregar barras de desplazamiento personalizadas a cualquier elemento de tu sitio de WordPress. Cada método que cubriremos ha sido probado en escenarios del mundo real, para que puedas elegir el enfoque que mejor se adapte a tu nivel de comodidad.

¿Cuándo agregar una barra de desplazamiento a elementos específicos en WordPress?

Agregar una barra de desplazamiento para elementos de WordPress puede mejorar enormemente la experiencia del usuario de tu sitio.

Pero, ¿cuándo deberías usar esta característica de diseño de WordPress?

Aquí hay algunos elementos comunes de WordPress que pueden beneficiarse de barras de desplazamiento personalizadas:

• Menús de navegación: perfectos para blogs con más de 20 categorías y subcategorías que de otra manera se extenderían por toda la página.
• Widgets de barra lateral – Ideal para barras laterales ricas en contenido donde desea mantener todos los widgets sin comprometer el espacio.
• Descripciones de productos – Mantiene los detalles extensos del producto contenidos mientras mantiene un diseño limpio.
• Secciones de comentarios – Muestra ordenadamente cientos de comentarios sin abrumar la página.
• Galerías de imágenes – Muestra múltiples imágenes en una galería manteniendo la accesibilidad.

Teniendo esto en cuenta, le mostraremos dos opciones para agregar una barra de desplazamiento personalizada a cualquier elemento de su sitio web de WordPress.

Recomendamos la opción 1 si recién está comenzando con su sitio y desea usar un constructor de páginas con funcionalidad de barra de desplazamiento personalizada. Esto se debe a que si ya ha estado usando un tema diferente, entonces necesitará cambiar su tema para este método.

Por otro lado, si le gusta su tema actual, puede optar por la opción 2 para agregar una barra de desplazamiento personalizada usando código CSS. No se preocupe, desglosaremos el proceso paso a paso para que sea fácil de seguir para cualquiera.

Puedes usar los enlaces rápidos a continuación para saltar a tu método preferido:

• Opción 1: Usar un constructor de páginas con barras de desplazamiento personalizadas específicas para elementos (sin código)
• Option 2: Use CSS Code to Add a Custom Scrollbar to a Specific Element

Opción 1: Usar un constructor de páginas con barras de desplazamiento personalizadas específicas para elementos (sin código)

Una forma de agregar una barra de desplazamiento personalizada en un elemento específico es usar un constructor de páginas con una función de barra de desplazamiento. De esta manera, puedes personalizar fácilmente la barra de desplazamiento sin tocar ningún código.

Para este método, usaremos Thrive Architect. Además de una función de barra de desplazamiento, Thrive Architect tiene más de 300 plantillas para crear rápidamente páginas de aspecto profesional y funciones de contenido dinámico para personalizar la experiencia de tu visitante.

Además, hemos descubierto que la interfaz de arrastrar y soltar es fácil de usar, lo que la hace ideal para quienes son nuevos en WordPress. Para una mirada más detallada a esta herramienta, consulta nuestra reseña de Thrive Architect.

Aunque Thrive Architect no ofrece una versión gratuita, puedes usar nuestro código especial de descuento de Thrive Themes para ahorrar hasta un 50% en tu compra inicial.

Paso 1: Configurar Thrive Architect y Thrive Themes

Para empezar, necesitamos instalar el plugin Thrive Architect. Puedes acceder a él iniciando sesión en tu cuenta en el sitio web de Thrive Themes.

A continuación, descarga e instala el plugin Thrive Product Manager. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar plugins de WordPress para principiantes.

Después de activar el plugin, navega a Product Manager en tu panel de WordPress.

Haz clic en ‘Iniciar sesión en mi cuenta’ para vincular tu sitio de WordPress con tu cuenta de Thrive Themes.

Ahora deberías ver una lista de los productos de Thrive Themes disponibles en tu cuenta.

Busca ‘Thrive Architect’ y marca la casilla ‘Instalar Producto’.

Desplázate hacia abajo para encontrar ‘Thrive Theme Builder‘ y selecciona la opción ‘Instalar Tema’.

Luego, haz clic en ‘Instalar productos seleccionados’. Este paso es necesario ya que Thrive Architect funciona junto con Thrive Theme Builder.

La siguiente pantalla mostrará Thrive Product Manager instalando y activando Thrive Theme Builder.

Una vez completado, selecciona ‘Ir al panel de Theme Builder’.

Ahora, es hora de seleccionar un diseño base para tu sitio utilizando la biblioteca de temas de Thrive.

Si no estás seguro de cuál elegir, usa el botón ‘Vista previa’ para ver cómo se ve cada tema. Una vez que hayas decidido, haz clic en ‘Elegir’.

Ahora entrarás en el Asistente de Theme Builder.

Este asistente te guiará a través de la carga de tu logo, la selección de los colores de marca para tu tema y la configuración de varias estructuras y plantillas de tema.

Asegúrate de completar el asistente de configuración antes de pasar al siguiente paso.

Paso 2: Agrega un elemento de cuadro de contenido a tu tema

Ahora agreguemos un elemento de cuadro de contenido a tu tema de WordPress, que tiene la función de barra de desplazamiento por defecto.

En Thrive Themes, un cuadro de contenido es un bloque que puedes usar como contenedor para agrupar varios bloques. Esto puede ser útil si necesitas que un conjunto de elementos tenga el mismo estilo o se gestione como un grupo.

Para este ejemplo, agregaremos un cuadro de contenido que contenga una larga lista de categorías de publicaciones de blog. En este escenario, queremos poder mostrar todas las categorías en la barra lateral sin que sea excesivamente larga.

Primero, visita cualquier página o publicación en tu blog de WordPress donde quieras que esté la barra de desplazamiento.

Luego, en la barra de herramientas de administración superior, haz clic en 'Editar plantilla de tema [nombre]' o 'Editar con Thrive'.

Ahora deberías llegar a la interfaz de edición de Thrive Architect. Para agregar el bloque de cuadro de contenido, haz clic en el signo '+' en el lado derecho de la página y selecciona el elemento 'Cuadro de contenido'.

Luego, arrastra y suelta donde quieras colocar el elemento con la barra de desplazamiento.

Ahora puedes agregar más elementos de contenido al cuadro de contenido. Por ejemplo, podrías hacer clic en el signo '+' nuevamente y agregarle el bloque 'Texto'. Luego, podrías escribir cualquier texto que desees.

Thrive Themes ofrece toneladas de elementos visuales, desde básicos como texto e imágenes hasta formularios y tablas de precios.

Como queremos agregar una lista de categorías a la barra lateral, también agregaremos el elemento 'Lista con estilo dinámico' al cuadro de contenido.

Este bloque básicamente extrae datos de tu sitio web para mostrar dinámicamente una lista, como categorías, etiquetas o autores. El bloque se actualizará automáticamente a medida que construyas tu sitio web.

Una vez que hayas arrastrado y soltado la lista de estilo dinámico en el cuadro de contenido, haz clic en el botón ‘Seleccionar tipo de lista’.

Luego, haz clic en ‘Lista de categorías’.

Ahora, tu lista de categorías, tu bloque de texto y cualquier otro elemento que agregues a la caja de contenido están en el mismo contenedor.

Y como puedes ver, la lista es bastante larga, y por eso queremos agregarle una barra de desplazamiento.

Paso 3: Habilitar la barra de desplazamiento en la caja de contenido

Si seleccionas ese contenedor y haces clic en la flecha azul de la izquierda, verás muchas opciones para personalizar tu caja de contenido.

La configuración para agregar una barra de desplazamiento se encuentra dentro de la pestaña ‘Diseño y posición’. Aquí es donde puedes ajustar el relleno, margen, ancho, alto, alineación, etc., de la caja.

Lo primero que hicimos fue hacer clic en la flecha blanca dentro del área de relleno azul, justo debajo de la sección ‘Márgenes y relleno’. Hicimos esto solo para asegurarnos de que la caja de contenido se alinee con el resto de los elementos en la barra lateral.

Siéntete libre de explorar otras opciones aquí para asegurarte de que tu caja se vea bien proporcionada.

A continuación, desplázate hacia abajo hasta la sección Altura. Continúa y haz clic en el botón ‘Máx.’ y cambia la altura en píxeles a un número mucho menor. En este caso, pasamos de 617px a 300px.

Esto hará que la caja de contenido sea mucho más corta, haciendo que los nombres de las categorías en la sección inferior desaparezcan.

Hecho esto, vuelve a bajar en el panel y abre la pestaña ‘Avanzado’. Luego, selecciona ‘Desplazamiento’ en la configuración de Desbordamiento y activa la opción ‘Estilo de barra de desplazamiento’.

Automáticamente se agregará una barra de desplazamiento a tu bloque de caja de contenido.

Y eso es todo para agregar una barra de desplazamiento personalizada con Thrive Architect. Puedes continuar editando tu tema de WordPress, página o publicación, o hacer clic en ‘Guardar trabajo’ en la parte inferior para publicar tus cambios.

Aquí se ve nuestra barra de desplazamiento en el sitio de demostración:

Opción 2: Usa código CSS para agregar una barra de desplazamiento personalizada a un elemento específico

Si cambiar tu tema de WordPress y usar un constructor de páginas para crear una barra de desplazamiento personalizada te parece demasiado, puedes usar código CSS en su lugar. Este método te permite personalizar la barra de desplazamiento directamente en tu página de WordPress.

No te preocupes si eres nuevo trabajando con fragmentos de código. Te guiaremos paso a paso, haciendo que sea fácil habilitar esta función en tu sitio de WordPress.

Primero, entendamos cómo funciona el CSS. CSS significa Hojas de Estilo en Cascada (Cascading Style Sheets). Es un lenguaje que le dice a los navegadores web cómo mostrar los elementos en una página web. En nuestro caso, usaremos CSS para agregar y estilizar una barra de desplazamiento personalizada.

Para usar CSS personalizado, necesitamos dos cosas:

1. Una clase CSS: Es como una etiqueta de nombre para un elemento en tu página. La agregamos al elemento que queremos cambiar.
2. Código CSS: Es el conjunto de instrucciones que le dice al navegador cómo estilizar el elemento con la clase CSS.

Entonces, para agregar una barra de desplazamiento personalizada, primero le daremos una clase CSS al elemento que queremos cambiar. Luego, agregaremos código CSS que crea la barra de desplazamiento para los elementos con esa clase. 

Agregarás la clase CSS scroll-bar a tu elemento. Te mostraremos cómo hacerlo a continuación. Y este es el fragmento de código CSS completo que agregará la barra de desplazamiento:

.scroll-bar {
  max-height: 100px;  /* Adjust the maximum height as needed */
  width:250px;  /* Adjust the width as needed */
  overflow-y: scroll; /* Enable vertical scrolling */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}


/* Customizing the vertical scrollbar for Webkit-based browsers (Chrome, Safari) */
.scroll-bar::-webkit-scrollbar {
  width: 10px; /* Width of the vertical scrollbar */
}


.scroll-bar::-webkit-scrollbar-track {
  background: #eaeaea; /* Background of the scrollbar track */
}


.scroll-bar::-webkit-scrollbar-thumb {
  background: grey; /* Color of the scrollbar thumb */
  border-radius: 15px; /* Rounded corners for the thumb */
}


/* Hover state for the scrollbar thumb */
.scroll-bar::-webkit-scrollbar-thumb:hover {
  background: black; /* Change color when hovered */
}


/* For Firefox */
.scroll-bar {
  scrollbar-width: thin; /* Define scrollbar width */
  scrollbar-color: #888 #f1f1f1; /* Scrollbar thumb and track color */
}

Paso 1: Agrega la clase CSS a tu elemento

Hay varias formas de agregar una clase CSS a un elemento en tu sitio de WordPress.

Si estás en el editor de bloques o en el editor de sitio completo, entonces puedes hacer clic en cualquier bloque de tu página, publicación o plantilla de tema de bloques. Luego, en la barra lateral de configuración del bloque, abre la pestaña 'Avanzado' e inserta tu clase CSS en el campo 'Clase(s) CSS adicional(es)'.

Una vez hecho, solo haz clic en Actualizar, Publicar o Guardar.

Si usas un tema clásico, este proceso también funciona con el editor de widgets basado en bloques. Ve a Apariencia » Widgets y haz clic en cualquier bloque al que quieras agregar la clase CSS.

Después de eso, verás la misma pestaña Avanzado en la barra lateral de configuración del bloque. Simplemente ingresa la clase CSS en el campo 'Clases CSS adicionales' como antes.

Paso 2: Agrega el código CSS a tu tema

Ahora, vamos a agregar nuestro código CSS personalizado. Te mostraremos 3 formas de hacerlo: usando el personalizador de temas, el editor de sitio completo y WPCode.

La primera opción es para usuarios de temas clásicos. Además, es una función integrada, por lo que no necesitas un plugin para insertar el código ni siquiera abrir los archivos de tu tema.

Para hacer esto, puedes abrir el personalizador de temas de WordPress yendo a Apariencia » Personalizar.

Nota: Si no ves esta configuración en tu WordPress, probablemente estés usando un tema de bloques y puedas usar el siguiente método. Para más información, consulta nuestra guía sobre cómo solucionar la falta del personalizador de temas en WordPress.

Método 1: Agregar CSS a temas clásicos

Dentro del personalizador, busca y haz clic en 'CSS adicional'.

Aquí, simplemente pega el código que te mostramos antes.

Verás automáticamente los cambios en tu tema una vez que hayas agregado el código.

Como puedes ver, el elemento al que le agregaste la clase CSS ahora tiene una barra de desplazamiento. Luego, simplemente puedes hacer clic en 'Publicar'.

Método 2: Agregar CSS usando el editor de sitio completo

Si tienes un tema de bloques, necesitarás agregar código CSS usando el editor de sitio completo, luego simplemente ve a Apariencia » Editor.

Encontrarás algunas opciones de menú para personalizar tu tema de bloques.

Aquí, haz clic en ‘Estilos’.

En esta página, debería haber algunos diseños de temas de bloques para que elijas.

Simplemente ignoraremos eso y haremos clic en el botón ‘Editar’. Tiene forma de lápiz.

Ahora estás dentro de la interfaz de edición.

En el panel lateral derecho, haz clic en el menú de tres puntos junto al icono de revisiones y selecciona ‘CSS adicional’.

Ahora, simplemente pega el fragmento de código de antes. Deberías ver tus cambios automáticamente.

Una vez hecho, haz clic en ‘Guardar’.

Una desventaja de usar el personalizador de temas y el editor de sitio completo para insertar tu CSS es que si decides actualizar o cambiar tu tema, puedes arriesgarte a perder tu personalización CSS.

Es por eso que recomendamos usar WPCode para editar el CSS de tu sitio, especialmente si estás usando el editor de sitio completo y un tema basado en bloques. Puedes seguir ese método a continuación, y también funcionará con temas clásicos.

Método 3: Agregar CSS usando WPCode

Si te da miedo personalizar tu sitio usando código, entonces WPCode es la solución perfecta para ti. Este plugin de fragmentos de código hace que sea seguro insertar código personalizado, ya que no necesitarás interactuar directamente con los archivos de tu tema.

Si ocurre un error, WPCode detectará y desactivará automáticamente el código que causa el problema. De esta manera, hay una mínima posibilidad de que rompas tu sitio.

Primero, instala el plugin WPCode en tu sitio web. Puedes leer nuestra guía para principiantes sobre cómo instalar un plugin de WordPress para más información.

Luego, ve a Fragmentos de código » + Agregar fragmento en tu panel de WordPress. Elige ‘Agregar tu código personalizado (Nuevo fragmento)’ y haz clic en ‘+ Agregar fragmento personalizado’.

Ahora, dale un nombre a tu nuevo fragmento de código personalizado. Puede ser algo simple como ‘Scrollbar CSS’.

Después de eso, cambia el Tipo de código a ‘Fragmento CSS’.

En el cuadro Vista previa del código, pega el fragmento que te mostramos anteriormente.

Una vez hecho esto, desplázate hacia abajo en la página hasta la sección ‘Inserción’. Allí, asegúrate de que el Método de inserción sea ‘Inserción automática’ y la Ubicación sea ‘Encabezado de todo el sitio’.

Con eso hecho, simplemente activa el botón en la esquina superior derecha para que diga ‘Activo’ y haz clic en ‘Guardar fragmento’.

Ahora deberías ver una barra de desplazamiento en el elemento al que le has agregado la clase CSS.

Aquí tienes un ejemplo de cómo agregamos una barra de desplazamiento a una lista de publicaciones recientes:

Cómo agregar una barra de desplazamiento personalizada a un elemento de menú con varios submenús

Una de las cosas que más curiosidad tienen los lectores es cómo agregar la barra de desplazamiento a tu elemento de menú de navegación que tiene una larga lista de submenús.

El proceso es en realidad bastante similar al que acabamos de mostrarte. Pero hay algunos pequeños ajustes aquí y allá dependiendo del tema que estés usando.

Si usas un tema clásico, entonces solo debes agregar la clase scroll-bar a tu elemento de menú principal. No necesitas agregarla a tus elementos de submenú.

Para agregar una clase CSS a tu menú, puedes abrir el personalizador del tema.

Luego, haz clic en el botón ‘Menús’.

A continuación, haz clic en el ícono de engranaje ‘Configuración’ y luego selecciona ‘Clases CSS’.

Esto te permite agregar una clase CSS a cada elemento del menú.

Ahora, baja por el panel lateral.

Luego, abre tu menú principal.

En esta etapa, puedes seleccionar el elemento del menú al que deseas agregar la clase CSS y hacer clic para expandirlo.

Debería haber un campo llamado ‘Clases CSS’, y puedes agregar la clase allí.

Aparte de eso, querrás asegurarte de agregar la clase sub-menu después de cada mención de la clase scroll-bar en tu código CSS, así:

.scroll-bar .sub-menu {
  max-height: 100px;  /* Adjust the maximum height as needed */
  overflow-y: scroll; /* Enable vertical scrolling */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}
/* Do the same to the rest of the code */

Así es como debería verse el menú de navegación:

El mismo principio se aplica a los temas de bloques.

Solo necesitas agregar la clase scroll-bar a tu elemento de menú principal, no a los submenús.

Ahora, aquí es donde las cosas difieren. Tienes que visitar tu sitio web de WordPress y abrir la herramienta de inspección de tu navegador.

Para los usuarios de Chrome, simplemente haz clic derecho en tu elemento de menú con submenús y selecciona 'Inspeccionar'.

En tu teclado, presiona CTRL/Comando + F para activar la función Buscar. Luego, localiza el código HTML <ul></ul> que contiene la clase scroll-bar.

El código exacto será diferente de un tema a otro, pero así es como se ve el nuestro:

<ul data-wp-on-async--focus="actions.openMenuOnFocus" class="wp-block-navigation__submenu-container scroll-bar wp-block-navigation-submenu">...</ul>

Sabrás que estás seleccionando la línea de código correcta si todos los elementos del submenú están resaltados.

Ahora, querrás copiar todas estas clases CSS entre class=" y ">.

En el código CSS, reemplaza la clase scroll-bar con todas esas clases y un punto (.) antes de ellas para indicar que es una clase. También es bueno agregar !important en cada línea que personaliza la barra de desplazamiento para asegurarte de que el tema no anule estas configuraciones.

Aquí tienes un ejemplo:

.wp-block-navigation__submenu-container.scroll-bar.wp-block-navigation-submenu {
 max-height: 100px !important; /* Adjust the maximum height as needed */
 overflow-y: auto !important; /* Enable vertical scrolling */
 overflow-x: hidden !important; /* Hide horizontal scrollbar */
}
/* Do the same to the rest of the code */

Una vez que hayas agregado este código, tu menú de navegación debería verse así:

Cómo personalizar el diseño de la barra de desplazamiento personalizada

Ahora que has agregado una barra de desplazamiento personalizada, es posible que desees que coincida con el diseño de tu sitio web. Puedes cambiar fácilmente la apariencia de la barra de desplazamiento usando CSS. Veamos cómo personalizar su tamaño, color y forma.

Supongamos que deseas cambiar la altura máxima del elemento al que le estás agregando una barra de desplazamiento. En este caso, puedes cambiar el número en max-height: en la parte superior por el número que desees, siempre que esté en píxeles.

También puedes ajustar el número en width: para hacer que el ancho del elemento con la barra de desplazamiento sea más ancho o más estrecho.

Para ajustar el tamaño de la barra de desplazamiento, busca la línea width: 10px; debajo del selector .scroll-bar::-webkit-scrollbar.

Aumenta este número para hacer la barra de desplazamiento más ancha, o disminúyelo para hacerla más estrecha. Por ejemplo, width: 15px; creará una barra de desplazamiento más ancha, mientras que width: 5px; la hará más delgada.

Para cambiar el color de la barra de desplazamiento, busca la línea que dice background: grey; debajo del selector .scroll-bar::-webkit-scrollbar-thumb.

Reemplaza 'grey' con cualquier color que te guste, como 'blue' o cualquier color usando el código de color hexadecimal (por ejemplo, #0000FF).

Si deseas hacer la barra de desplazamiento más redondeada, busca la propiedad border-radius.

Cuanto mayor sea el número, más redondeadas serán las esquinas. Intenta cambiar border-radius: 15px; a border-radius: 20px; para un aspecto más redondeado, o border-radius: 0px; para esquinas afiladas.

Ten en cuenta que los cambios anteriores solo afectarán a los navegadores basados en Webkit como Chrome y Safari.

Para Firefox, necesitarás ajustar la propiedad scrollbar-color. El primer color es para el pulgar (la parte que arrastras) y el segundo es para la pista (el fondo). Por ejemplo, scrollbar-color: blue #eaeaea creará una barra de desplazamiento azul sobre una pista gris claro en Firefox.

Después de realizar estos cambios, guarda tu CSS y actualiza tu página de WordPress para ver la nueva barra de desplazamiento personalizada en acción. Siéntete libre de experimentar con diferentes colores y tamaños hasta que encuentres el aspecto perfecto para tu sitio web.

Aprende más formas de mejorar el diseño de tu web en WordPress

Ahora que has aprendido a agregar barras de desplazamiento personalizadas a tu sitio de WordPress, ¿por qué no explorar otras formas de mejorar el diseño y la funcionalidad de tu sitio web? Aquí tienes algunas guías útiles para llevar tus habilidades de WordPress al siguiente nivel:

• Si buscas mostrar tus páginas de una manera visualmente atractiva, consulta nuestro tutorial sobre cómo mostrar fácilmente una lista de páginas con miniaturas en WordPress.
• Para blogs con mucho contenido, el scroll infinito puede mejorar enormemente la experiencia del usuario. Aprende cómo agregar esta función paso a paso.
• Para agregar un toque visual, prueba agregando un efecto parallax a tu tema de WordPress. Es más fácil de lo que crees.
• Para mejorar la accesibilidad, considera agregar un redimensionador de fuentes a tu sitio. Tenemos una guía sencilla para ayudarte a hacerlo.
• Si no estás contento con la posición actual de tu barra lateral, te mostraremos cómo cambiar el lado de la barra lateral en WordPress.

Esperamos que este artículo te haya ayudado a aprender cómo agregar una barra de desplazamiento personalizada a cualquier elemento en tu sitio de WordPress. También es posible que desees consultar nuestras selecciones expertas de los mejores constructores de temas de WordPress y nuestra guía sobre cómo agregar una barra de progreso de lectura en 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.