Cómo añadir un botón de ScrollTop en WordPress

CÓMO AÑADIR UN BOTÓN DE SCROLLTOP EN WORDPRESS - PLUGIN

¡Saludos cibernauta! hoy en conocesobreinformatica.com te presentamos el siguiente artículo titulado: “Cómo añadir un botón de ScrollTop en WordPress - Plugin”.

Si queremos una web con navegación amigable e intuitiva, un botón de ScrollTop no puede faltar.

Veamos como añadir este botón a nuestra web de WordPress a través de un plugin de fácil configuración.

Empecemos...

¿QUÉ ES UN BOTÓN DE SCROLLTOP?

Cuando hablamos de un botón de scrolltop nos referimos a un botón sobrepuesto en nuestro sitio web, el cual nos permita subir de manera instantánea a la parte superior de nuestra web.

Se suele configurar para que aparezca (puesto que es invisible) al bajar hasta cierta parte de la página web.

Esto lo puedes notar inclusive ahora mismo, puesto que tenemos habilitado este botón en esta página a la cual le estás dando lectura.

Si te fijas bien, desde la cabecera de nuestra web no aparece ningún botón, sin embargo al bajar a nuestro título; este comenzará a ser visible y podrás darle uso.

Es un botón muy útil, el cuál agrega amigabilidad y agilidad a tu web. Dándole más razones a tus usuarios de disfrutar de una buena experiencia mientras navegan.

AÑADIR BOTÓN SCROLLTOP EN WORDPRESS - PASO A PASO

Lo primero que vamos a hacer es dirigirnos a nuestro escritorio de WordPress, posterior a ello ubicaremos el puntero de nuestro ratón sobre la opción >Plugin de nuestro menú y daremos clic a la opción >Añadir nuevo.
En la barra de buscar escribiremos:

Tp Scroll Top

Procederemos a descargar, instalar y luego a activar este plugin el cual se llama: Scroll Top. Tal como puedes visualizar en la Imagen #01.

Una vez activado nuestro plugin, notaremos que en nuestro menú aparece una nueva opción llamada: Tp Scroll Top, como se muestra en la Imagen #02.
Daremos clic en esta opción para empezar la configuración de este plugin.

CONFIGURACIÓN DEL PLUGIN: TP SCROLLTOP

Desde aquí tenemos muchas opciones de configuración; vamos a explicarlas una a una y orden en base a lo que puedes visualizar en la Imagen#03.

Enabled:

Tenemos dos opciones: show y hide. Show hará que se active el botón, mostrándose en nuestra página y Hide lo contrario, que sería desactivarlo y no mostrarlo.

Visibility Trigger:

Nos permite indicar que tanto debe bajar el visitante para poder ver y usar el botón. Podemos escoger 0, 100 ó 400 píxeles partiendo desde la cabecera de la página hasta el pie de página.

Visibility Fade Speed:

Podemos indicar el tiempo que utiliza el efecto con el que se visualiza el botón. El efecto que utiliza se llama: "Fade". La cantidad de tiempo es dada el milisegundos.

Scroll Speed:

Podemos configurar con que velocidad (en tiempo, milisegundos) posterior al clic debe moverse y llevarnos a la parte superior de la página.

Bg Color:

Aquí configuraremos el color que tendrá el botón de fondo.

Hover Bg Color:

Aquí podrás indicar el color de fondo que deseas que tenga el botón cuando el usuario ubique el cursor encima de este.

Border Radious:

Aquí podrás modificar en porcentajes el valor que deseas que tengan los bordes.
Para que la figura sea un círculo el valor de todos los bordes debe ser de 50%. La cuál es la cantidad por defecto de la configuración. Si deseas que el botón sea un cuadrado puedes ubicar: 0%.

Position:

En esta opción podremos decidir en donde queremos que este ubicado nuestro botón.

Una vez realizada todas las configuraciones en base a nuestras necesidades, deseas y entre otros aspectos de diseño, procederemos a dar clic en el botón azul que dice: "Guardar cambios".

Posterior a ello nos dirigiremos a nuestro sitio web y disfrutaremos de la nueva característica que hemos agregado.

Hemos llegamos al final de este artículo, como equipo de CSI esperamos realmente toda la información recopilada y analizada te resulte de utilidad en tus estudios o vida laboral.

Te recordamos que hoy por hoy conocesobreinformatica cuenta con las siguientes redes para mantener al tanto de toda la información nueva:

- Suscripciones de correo electrónico, se el primero en enterarte de lo que publicamos: