Cómo personalizar la barra de scroll en WordPress usando Elementor

CATEGORÍA

Programación web

HERRAMIENTAS

WordPress, Elementor Pro

EJEMPLO

La personalización de un sitio web es esencial para destacar entre la multitud en línea. Una forma sencilla pero efectiva de darle un toque único a tu página es personalizar la barra de desplazamiento. En este artículo, te guiaremos a través de los pasos para personalizar la barra de scroll de tu sitio WordPress utilizando Elementor, permitiéndote agregar un toque distintivo a tu diseño.

Paso 1: Accede a "Apariencia → Personalizar"

El primer paso para personalizar la barra de scroll es acceder al personalizador de apariencia en tu panel de WordPress. Dirígete a «Apariencia» y selecciona «Personalizar».

Paso 2: Pegar el código de personalización

Dentro del personalizador, ve al área donde puedes agregar código css personalizado. Copia y pega el siguiente código:

				
					body {
  background-size: 100vh;
  overflow: overlay;
}
body::-webkit-scrollbar {
  width: 10px;
  background: transparent;
}
body::-webkit-scrollbar-thumb {
  background: #AE0909;
  border-radius: 20px;
  border-right: 5px;
}
body::-webkit-scrollbar-thumb:hover {
  background-color: #191819;
}
html {
  scrollbar-width: thin;
  scrollbar-color: #AE0909 #fff;
}

				
			

Paso 3: Personalizar los colores y las medidas

Si deseas personalizar aún más la apariencia de la barra de scroll, puedes ajustar los valores de color y medidas. Para cambiar el color de la barra, simplemente reemplaza los códigos hexadecimales #AE0909 y #fff en las líneas correspondientes con los colores de tu elección. Además, si prefieres una barra de scroll más ancha o más estrecha, puedes modificar el valor de «width» en la propiedad «::-webkit-scrollbar».

Paso 4: Prueba y ajustes

Después de aplicar los cambios, asegúrate de realizar pruebas en diferentes navegadores y dispositivos para garantizar que la personalización se vea como deseas. Algunos navegadores pueden tener limitaciones en cuanto a la compatibilidad con ciertas propiedades de estilo, por lo que es fundamental verificar la apariencia en varios entornos. 

Conclusión:

Personalizar la barra de scroll es una forma sencilla pero efectiva de darle a tu sitio web un aspecto único y atractivo. Siguiendo estos pasos, podrás personalizar la barra de scroll de tu sitio WordPress utilizando Elementor. Recuerda que la personalización es una oportunidad para expresar la identidad de tu marca, así que juega con los colores y medidas para lograr el aspecto perfecto. ¡Dale a tu sitio un toque personalizado y atrae la atención de tus visitantes de manera creativa!

Si te ha gustado este artículo y deseas aprender más sobre cómo personalizar tu sitio web con Elementor y otras herramientas, ¡no dudes en explorar nuestros otros recursos en el blog! Estamos aquí para ayudarte a llevar tu presencia en línea al siguiente nivel.