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

¿Tiene una barra lateral larga que rompe el diseño de WordPress en ciertas páginas? Recientemente uno de nuestros usuarios nos pidió una solución. Dado que el usuario no quería eliminar ninguno de los widgets, sugerimos agregar una altura fija y una barra de desplazamiento a todos los widgets largos que solucionaron el problema. En este artículo, le mostraremos cómo agregar una barra de desplazamiento personalizada a cualquier elemento en WordPress.

Agregue barras de desplazamiento personalizadas a cualquier elemento en WordPress

Tutorial en video

Suscríbete a WPBeginner

Si no le gusta el video o necesita más instrucciones, continúe leyendo.

Lo primero que debe hacer es instalar y activar el complemento Custom Scrollbar. Tras la activación, simplemente vaya a Apariencia »Barras de desplazamiento para configurar el complemento.

Configuración de barras de desplazamiento personalizadas

Debe comenzar proporcionando un nombre para su barra de desplazamiento. El complemento le permite agregar múltiples barras de desplazamiento, por lo que agregar un nombre lo ayudará a encontrar su barra de desplazamiento personalizada en el área de administración.

El siguiente elemento de la configuración es el selector de elementos de destino. Esta es la clase o ID del elemento web al que desea dirigirse. Puede encontrar la identificación o clase de cualquier elemento haciendo clic derecho en el elemento en su navegador Chrome y seleccionando inspeccionar elemento en el menú.

Uso de la herramienta inspeccionar elemento para encontrar el ID del elemento o la clase CSS

Como puede ver en la captura de pantalla, el elemento que queremos apuntar está a un lado con la clase CSS bwp_gallery.

Después de ingresar al selector de destino, puede elegir la altura y el ancho del área de la barra de desplazamiento personalizada. También puede elegir la posición y el tema de la barra de desplazamiento.

Una vez que haya terminado, simplemente haga clic en el botón Guardar cambios para almacenar su configuración.

Eso es todo, ahora puede visitar su sitio web para ver la barra de desplazamiento personalizada en acción. Puede repetir el proceso para crear otra barra de desplazamiento personalizada haciendo clic en el botón Agregar.

Agregar otra barra de desplazamiento personalizada

Esperamos que este artículo le haya ayudado a agregar barras de desplazamiento personalizadas a cualquier elemento de su sitio de WordPress. Es posible que también desee ver nuestra lista de los 25 widgets de WordPress más útiles para su sitio.

Si le gustó este artículo, suscríbase a nuestro canal de YouTube para tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.