WordPress Directo
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting
No Result
View All Result
WordPress Directo
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting
No Result
View All Result
WordPress Directo
No Result
View All Result

Cómo añadir un scroll personalizado en cualquier elemento de WordPress

Jorge López by Jorge López
8 febrero 2019
in Tutoriales
Reading Time: 3 mins read
0

Hace cosa de poco uno de nuestros lectores nos contactó por redes sociales puesto que necesitaba saber cómo añadir un scroll personalizado en cualquier elemento de WordPress. Nos indicó que no quería eliminar ninguno de sus widgets, por lo que le sugerimos que le diese una altura fija y le añadiese una barra de scroll a todos los widgets grandes para que el sidebar no le rompiese el diseño de su tema. En este artículo, te mostraremos cómo añadir un scroll personalizado en cualquier elemento de WordPress.

Añadir un scroll personalizado en cualquier elemento mediante un plugin

Lo primero que tienes que hacer es instalar y activar el plugin Custom Scrollbar. Para ello, ve a la sección Plugins del backoffice de tu WordPress y selecciona la opción de Añadir Nuevo. En la página de Añadir Nuevo Plugin, busca el plugin que queremos instalar haciendo uso del campo de búsqueda que se sitúa en la parte superior derecha de la página.

Teclea el nombre del plugin (que como te hemos indicado es «Custom Scrollbar») y presiona ENTER para iniciar la búsqueda. Si has seguido los pasos al pie de la letra, este plugin te debería aparecer como el primer resultado de la búsqueda. Instálalo y actívalo para poder utilizarlo.

Artículos relacionados

Cómo permitir que los editores solo puedan modificar páginas concretas

22 febrero 2018

¿Por qué WordPress es la mejor plataforma para escritores?

5 abril 2019

Cómo enlazar posts y páginas a una URL externa

5 julio 2017

Cómo añadir un botón para que los usuarios puedan llamarte por teléfono

29 diciembre 2017

Una vez activado, ve a Apariencia > Scrollbars para configurar el plugin.

scroll personalizado

Lo primero de todo es darle un nombre a tu barra de scroll. El plugin te permite añadir varias, por lo que un nombre descriptivo te ayudará a encontrar tu scroll personalizado cuando lo busques en el área de administración de WordPress.

Lo siguiente es hacer referencia al elemento al que queremos insertar dicha barra de scroll. Para ello, en el campo Target Element Selector tendremos que introducir la clase CSS o el ID del elemento. Ya sabes, la clase va acompañada del caracter . y el ID, del caracter #.

Puedes ver la clase o el ID de cualquier elemento haciendo clic derecho encima de él y seleccionando la opción de Inspeccionar elemento.

Tal y como puedes ver en la captura, el elemento al que queremos referenciar es el widget de Últimas entradas. O bien, podemos referenciarlo con la clase widget_recent_entries, o bien, con el ID recent-posts-2. En nuestro caso lo referenciaremos con la clase, que es más genérica, por lo que añadiremos al campo Target Elemento Selector el valor .widget_recent_entries (recuerda que si es una clase va precedida por el caracter .)

Una vez introducido el selector, tendremos que definir el alto y ancho de nuestra barra de scroll personalizada. También puedes escoger la posición y el tema que mostrará el control que nos permitirá desplazarnos por el elemento.

Cuando lo tengas todo personalizado, haz clic en el botón Guardar Cambios.

Y eso es todo, ahora puedes visitar la parte pública de tu sitio web para ver el scroll personalizado en acción. Puedes repetir el proceso de crear otra barra de scroll personalizada haciendo clic en el botón de Añadir, pero para ello tendrás que adquirir la versión Pro del plugin.

Y hasta aquí nuestro artículo sobre cómo añadir un scroll personalizado en cualquier elemento de WordPress. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. ¡Nos leemos!

Guardar

Tags: barra de desplazamientobarra de scrolldesplazamientopersonalizarscroll
ShareTweetSendSharePin
Jorge López

Jorge López

Soy programador web y me gusta mucho el diseño gráfico, la fotografía y todo lo relacionado con las nuevas tecnologías. En mis ratos libres me encanta dibujar y escuchar música. ¡No podría vivir sin ella! Aparte soy un friki de las series...las devoro

Te puede interesar...

Tutoriales

WordPress: Cambia tu URL directamente desde la base de datos

18 diciembre 2024

La gestión eficaz de un sitio web en WordPress a menudo requiere adaptaciones técnicas,...

General

Protección avanzada de tu WordPress: Cómo blindar /wp-admin sin bloquear funciones necesarias

18 diciembre 2024

En el ámbito de la gestión de sitios web basados en WordPress, la seguridad...

Tutoriales

Cómo crear una tabla de contenidos en tus publicaciones con Rank Math

11 enero 2023

En muchas ocasiones, leer un artículo demasiado largo puede provocar que te aburras de...

Tutoriales

Cómo instalar Perl en un servidor desplegado en Clouding

20 julio 2021

Un buen desarrollador necesita contar con las herramientas, servicios y tecnologías adecuadas a sus...

No Result
View All Result
Plugin Imagify, optimizar imágenes
wordpress hosting NVME
Elegant Themes WordPress
elementor editor plugin




Últimos artículos

Cómo utilizar las imágenes de Unsplash directamente en WordPress

22 julio 2020

Estrategias efectivas contra el spam en comentarios: La técnica honeypot en WordPress

18 diciembre 2024

Las mejores plantillas minimalistas de WordPress

11 enero 2016

Cómo saber el nombre del theme de WordPress de una web existente

1 febrero 2017

6 cosas que me molestan de WordPress y cómo abordarlas

20 junio 2019
WordPress Directo

WPDirecto.com es una revista especializada en WordPress y WooCommerce que ofrece una amplia gama de recursos, incluyendo tutoriales, análisis de plugins y plantillas, consejos de optimización y estrategias de SEO, para ayudar a los usuarios a mejorar y personalizar sus sitios web, manteniéndolos informados sobre las últimas novedades y tendencias en el mundo de WordPress.

Menu

  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting

Información

WPDirecto es un medio de Medios y Redes:
  • Artículos patrocinados
  • Servicio de diseño web
  • Contacto
  • Acerca de MyR
  • Política de privacidad y cookies
  • Aviso Legal

© 1995-2025 Color Vivo Internet, SLU (Medios y Redes Online).. Otros contenidos se cita fuente. Infraestructura cloud servidores dedicados de Stackscale.

No Result
View All Result
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting

© 1995-2025 Color Vivo Internet, SLU (Medios y Redes Online).. Otros contenidos se cita fuente. Infraestructura cloud servidores dedicados de Stackscale.