Formas rápidas de crear una barra de desplazamiento personalizada en WordPress

Es seguro decir que, por la razón que sea, desea que su sitio web se destaque. Tener una plataforma de este tipo garantizará que lo que está poniendo permanezca más tiempo en la mente del visitante, y eso es casi exclusivamente algo bueno. Además del contenido de tu sitio web, otra forma de llamar la atención sobre tu producto es el aspecto visual. Esto no es de ninguna manera un nuevo conocimiento. Hay una razón por la cual McDonald's es rojo y amarillo y Facebook azul. Sin embargo, aquí hablaremos de una pequeña parte de la experiencia que ofrece su sitio web. Es una parte que puede no parecer demasiado importante, pero creemos que aún tiene su valor: la barra de desplazamiento. En las siguientes líneas, aprenderá algunas formas rápidas de crear una barra de desplazamiento personalizada en WordPress.

Formas sencillas de crear una barra de desplazamiento personalizada en WordPress

Crear una barra de desplazamiento personalizada es un paso esencial para crear un tema personalizado para su sitio web. Entonces, si está interesado en hacer que su sitio web se destaque en todos los sentidos , permítanos presentarle el primer método para hacer que esa barra de desplazamiento sea única.

Agregue una barra de desplazamiento personalizada en WordPress con un complemento

Como ocurre con la mayoría de las cosas que desea hacer en WordPress, usar un complemento como medio para crear una barra de desplazamiento elegante es un buen camino a seguir. La razón por la que este método es muy recomendable para la mayoría de los usuarios es su simplicidad. Con unos simples clics, se encontrará mirando una barra de desplazamiento que coincida con su estilo. Aún así, vale la pena mencionar un pequeño defecto que viene con este método. Es decir, este complemento no es compatible con los navegadores móviles. Sin embargo, si esto no parece una gran pérdida, continúe con la lectura.

En primer lugar, deberá instalar y activar el complemento Advanced Scrollbar . Esta acción es bastante simple:

1. Visite los complementos, luego vaya a la página Agregar nuevo dentro de su área de administración de WordPress. Escriba el nombre de dicho complemento en la barra de búsqueda y presione Entrar.
2. Una vez que localice el complemento, haga clic en el botón 'Instalar ahora'. WordPress luego descargará e instalará el complemento por usted. Después de esto, podrá notar que el botón 'Instalar ahora' ha cambiado al botón 'Activar'.
3. Haga clic en el botón 'Activar' y estará listo para comenzar.

Ahora que ha instalado y activado el complemento necesario, tendrá que configurarlo. Si bien esa palabra puede parecer intimidante, el proceso es muy fácil. Simplemente vaya a Configuración> Configuración de barra de desplazamiento de color personalizado. Una vez allí, podrá cambiar el color de su barra de desplazamiento, así como los colores de fondo de su riel. Luego puede seleccionar el paso de desplazamiento del mouse, que sería la velocidad de desplazamiento de la rueda del mouse. Lo que también es genial de este complemento es que le permite seleccionar si desea ocultar automáticamente la barra de desplazamiento o mostrarla siempre.

También tiene la opción de elegir la opción 'Solo cursor', que mostraría el riel de la barra de desplazamiento sin el botón. Debajo de eso, podrá encontrar opciones para establecer la velocidad de desplazamiento, cambiar la alineación del riel (izquierda o derecha) y habilitar el comportamiento táctil.

Después de haber revisado todas las opciones, jugado con los colores y encontrado qué combinación se adapta mejor a su estilo y preferencia, no olvide hacer clic en el botón "Guardar cambios" para almacenar todo ese trabajo. Al hacerlo, puede visitar su sitio web para ver esos hermosos colores personalizados de la barra de desplazamiento en acción.

Agregue colores de barra de desplazamiento personalizados en WordPress usando CSS

Como puede deducir del subtítulo, este método usa CSS para diseñar su barra de desplazamiento. Este método ha demostrado ser más rápido que el que utiliza jQuery. Sin embargo, es importante mencionar que solo funciona en navegadores de escritorio que usan motores de renderizado WebKit como Google Chrome, Safari y Opera. Desafortunadamente, no tendrá ningún efecto en los navegadores móviles o Firefox y Edge en las computadoras de escritorio. Dicho esto, si esta es la opción por la que desea optar, esta es la forma de hacerlo.

Comience dirigiéndose a Temas> Página personalizada. Esta acción iniciará la interfaz del personalizador de temas de WordPress. Podrá ver la vista previa en vivo de su sitio con un montón de opciones en el plano izquierdo de su pantalla . Continúe haciendo clic en la pestaña CSS adicional del panel izquierdo. La pestaña se inclinará para mostrarle un cuadro simple donde podrá agregar su CSS personalizado. Tan pronto como agregue una regla CSS válida, verá que se aplica al panel de vista previa en vivo de su sitio web. En cuanto a esa regla CSS válida, esto es lo que debe agregar para que su barra de desplazamiento sea susceptible a cambios:

::-webkit-barra de desplazamiento {

-apariencia del webkit: ninguno;

}

::-webkit-barra de desplazamiento {

ancho: 10px;

}

::-webkit-barra-de-desplazamiento-pista {

fondo: #ffb400;

borger: 1px sólido #ccc;

}

::-webkit-scrollbar-pulgar {

fondo: #cc00ff ;

borger: 1px sólido #eee;

altura: 100px;

borde-radio: 5px;

}

::-webkit-scrollbar-thumb:hover {

fondo: azul;

Recuerde que cualquier CSS personalizado que agregue usando el personalizador de temas solo está disponible con ese tema en particular. Si cambia un tema pero desea mantener esa barra de desplazamiento personalizada, deberá copiar y pegar esa regla CSS en su nuevo tema utilizando el mismo método.

Aunque este es un excelente medio para hacer que su sitio web se destaque, debemos mencionar una desventaja de crear una barra de desplazamiento personalizada en WordPress. Es decir, de forma predeterminada, CSS no viene con un conjunto de reglas que le permita cambiar las propiedades de la barra de desplazamiento. Hay algunas propuestas para agregar esta opción, pero no son compatibles con la mayoría de los navegadores en este momento. Para superar este problema, los diseñadores y desarrolladores usan pseudoelementos específicos del navegador o JavaScrip para anular la apariencia predeterminada de la barra de desplazamiento. Esas son las técnicas que te hemos descrito. Aún así, debe tener en cuenta que debe probar su sitio con diferentes navegadores y dispositivos para asegurarse de que funciona como imaginó en todos los navegadores. Una vez que tenga eso cubierto, es seguro decir que sabe cómo crear una barra de desplazamiento personalizada en WordPress.