Un botón scrolltop le hace la vida más fácil a nuestros visitantes, especialmente si acostumbramos a escribir artículos muy largos o si nuestro sitio web tiene mucha información en cada página. Los botones scrolltop se encuentran incluidos en la mayoría de plantillas para WordPress pero si por alguna razón el diseño que te encuentras utilizando en tu web no tiene esta característica, en este video tutorial te mostramos como añadirlo fácilmente en tu sitio web creado en WordPress.
https://vimeo.com/157084819
El plugin que utilizamos en este video tutorial es Tp Scroll Top
Recuerda que puedes alojar o migrar tu sitio web a nuestro servicio de hosting especializado en WordPress en el que contarás con un equipo de soporte para WordPress completamente en español, visita nuestros planes de hosting para WordPress y recuerda utilizar el código de descuento Video10 para obtener un 10% en tu factura.
[x_accordion_item title=»Transcripción del video»]
Buen día, bienvenido a este nuevo video de josel63.sg-host.com, mi nombre es José Liévano y en este video descubriremos cómo añadir un botón que nos permite ir a la parte superior de la página automáticamente.
Posiblemente no he descrito muy bien esta característica, pero a lo que me refiero es al botón que puedes ver en josel63.sg-host.com por ejemplo, cuando bajamos puedes ver aquí la opción de ir a la parte superior de la web.
Esta característica la traen muchos diseños por defecto, pero si en tu caso, la plantilla que te encuentras utilizando no tiene esta opción, entonces podrás añadirla con el plugin llamado Tp Scroll Top.
Vamos a entrar en nuestra área de administración y entramos en añadir nuevo plugin. Ahora vamos a buscar el plugin TP Scroll Top, lo tenemos aquí, debemos instalar el plugin y activarlo.
Una vez el plugin se encuentra activado, podremos ver sus opciones desde aquí, como puedes ver tenemos un nuevo elemento en nuestro menú principal llamado Tp Scroll Top, así que damos clic en él para empezar a configurar el plugin.
Desde aquí tenemos muchas opciones, en primer lugar podemos indicar si deseamos activar o desactivar el botón, en este caso lo dejaremos en show para mostrar el botón el el área publica de nuestra web.
La opción de Visibility Trigger nos permite indicar que tanto debe bajar el visitante para poder ver el botón. Como puedes ver en josel63.sg-host.com, al inicio no se muestra, únicamente se muestra cuando bajamos un 50% del sitio web, entonces es que el botón aparece.
En el caso de este plugin tenemos la opción de mostrarlo cuando el visitante baje 100px o 400px, en mi caso lo dejaré en 400px.
En la opción Visibility Fade Speed podemos indicar el tiempo que utiliza el efecto con el que aparece el botón, el efecto que utiliza se llama fade, y es un efecto de aparición, yo te recomendaría dejarlo en 400 milisegundos.
En Scroll Speed podemos indicar qué tan rápido debe moverse hacia la parte superior, igualmente 400 milisegundos pueden ser una buena opción. Puedes ir jugando con estos valores hasta lograr el efecto o la forma que deseas que funcione el botón.
En BG color puedes indicar el color que deseas que tenga el botón y en Hover BG color puedes indicar el color que deseas que tenga cuándo el visitante coloque el cursor sobre el botón.
En border radius puedes modificar en porcentajes el valor que deseas que tengan los bordes, si tienes conocimientos en CSS, es muy posible que sepas que para crear un círculo todos los bordes deben tener un radio del 50%, y ese es el porcentaje que se encuentra aplicado por defecto.
Pero si tu lo deseas puedes modificarlo a un valor inferior al 50% y el botón ya no sería redondo, podrías formar un cuadro o un cuadrado con bordes redondeados, en mi caso estoy bien con la forma circular para el botón de modo que lo dejaré como se encuentra.
Y finalmente podemos indicar la posición en la que deseamos mostrarlo, tenemos las opciones de Arriba a la izquierda, en el centro o a la derecha, y también abajo a la izquierda en el centro o a la derecha.
En este caso dejaré el botón abajo a la derecha de la pantalla.
Muy bien, una vez tenemos todo configurado como lo deseamos damos clic aquí para guardar los cambios.
Una vez se guardan los cambios vamos a visitar el sitio web y al hacer scroll hacia abajo, podremos ver el botón que nos permite ir hacia arriba automáticamente.
Esta es una muy buena característica que deberías tomar en cuenta para tu sitio web si aún no la tienes o si la plantilla que te encuentras utilizando no tiene esta opción. Le hace más fácil la vida a nuestros visitantes, especialmente si escribimos artículos muy largos o si nuestra web en general es muy extensa.
Espero que este video te sea de ayuda, no olvides que puedes alojar tu sitio web WordPress con nosotros en josel63.sg-host.com, tendrás siempre un equipo de soporte en español especializados en WordPress a tu disposición.
Puedes utilizar el código de descuento Video10 y obtendrás un 10% de descuento en la compra de tu plan de hosting.
Mi nombre es José Liévano y nos veremos en otro video tutorial de josel63.sg-host.com
[/x_accordion_item]