Portada Wordpress Page scroll to id – Smooth Scroll en WordPress
El otro día vimos cómo podíamos hacer un «scroll top» en WordPress. Esto es poder volver al principio de la página haciendo click en un botón, sin tener que hacer scroll hacia arriba para llegar.
Hoy vamos a hablar de algo relacionado, pero en lugar de volver al top de la página, nos podremos desplazar a cualquier elemento en la misma página.
A esto, generalmente se le llama «enlace ancla» y ya hablamos sobre cómo utilizarlos en WordPress 5.x.
Además, el desplazamiento será realiza con el efecto Smooth Scroll, que suaviza el desplazamiento entre el enlace y el punto de ancla designado, dándole un aspecto muy profesional.
En este enlace puedes ver una demo de lo que estamos hablando.
Usar enlaces ancla en un mismo documento es algo que puede ser muy útil.
Por ejemplo, en un artículo muy extenso, puedes crear un menú al principio con enlaces hacia determinados temas del post, de esta manera el usuario puede llegar a la información que quiera desde el inicio del artículo y con un solo click.
También puedes usarlo para llevar a los usuarios a un punto determinado de la web, para que realicen una acción; un registro, un click, ver un vídeo que está abajo del todo, etc…
Todo esto se puede hacer sin usar ningún plugin, si se tienen ciertos conocimientos y puedes encontrar un montón de tutoriales si buscas en Google.
Pero si quieres hacerlo de forma sencilla, para eso estamos en WordPress, podemos hacerlo utilizando un plugin llamado Page scroll to id.
El plugin Page Scroll to id nos facilita la tarea de crear los enlaces ancla en nuestra página y además el desplazamiento es suave y profesional.
Lo puedes encontrar en la sección de plugins de WordPress para instalarlo y en principio no hemos ninguna opción de pago, así que es completamente gratuito.
También puedes descargarlos desde aquí si quieres hacer una instalación manual.
En las características del plugin indican que se puede adaptar a los builders más populares de WordPress, como lo son Elementor, Divi Builder, etc…
El plugin está preparado para hacer desplazamientos verticales y horizontales con más de 30 tipos de aceleración distintos.
¡Veamos cómo funciona!
El plugin Page Scroll to id tiene una mecánica básica muy sencilla y en cuento tengas algo de práctica con él, te será muy fácil añadir los enlaces con scroll suavizado en tu WordPress.
Si quieres indagar más en las opciones del plugin, puedes encontrarlas en Ajustes > Page scroll to id, aunque está todo en inglés.
Eso si, en la parte superior tenemos unos enlaces de ayuda que nos llevarán a unos mini tutoriales que pueden venirte bien para profundizar más en las opciones del plugin, aunque también están en inglés.
Si lo que quieres es poner un enlace ancla con el plugin para ver como funciona, necesitas abrir un post o página que ya tenga contenido con el editor de WordPress.
Si usas el editor clásico de WordPress, encontrarás dos botones nuevos, que serán los que utilicemos para añadir el enlace objetivo y el enlace del scroll.
Lo primero que tienes que hacer es añadir seleccionar el objetivo.
Para esto pon el cursor de texto donde quieras que se dirija el enlace y después pulsa el botón Inster Page Scroll to id target.
Esto nos mostrará un popup en el que tendremos que definir cuál será la id de esta «ancla».
Puedes poner lo que quieras, sólo tienes que acordarte cuál es porque luego tendrás que usarlo.
Como podrás comprobar esta acción añadirá un shortcode en el punto donde hayas dejado el cursos de texto, pero tranquilo, no se verá cuando publiques o guardes los cambios.
Ya tenemos la primera parte, ahora tenemos que crear el enlace.
Para esto ponemos el cursor de texto donde queramos poner el enlace y pulsamos el otro botón, Insert/Edit Page Scroll to id.
Este botón nos abrirá otro popup y desde aquí tenemos que indicar el destino del enlace que vamos a crear y el texto que lo acompañará.
Es importante que pongas el símbolo de la almuhadilla (#), antes del texto ancla, si no, no funcionará.
También puedes marcar la casilla Insert as shrotcode, así se creará un código, al igual que hicimos anteriormente.
Después de guardar los cambios, sólo quedará ver cómo queda el enlace ancla y el efecto que produce al hacer click en él.
El resultado en las pruebas que hemos hecho es óptimo y el scroll muy suave sin modificar las opciones del plugin.
Sólo tienes que elegir dónde quieres que apunte el enlace y crearlo con el texto ancla que le hayas asignado, ¡¡Es muy sencillo!!.
En Hostinet dispones de planes de hosting específicamente pensados para WordPress.
Estos planes vienen con todo lo que necesitas para poder empezar a utilizar tu WordPress a lo pocos minutos de sus contratación.
Puedes elegir en contratar el hosting WordPress sin nada instalado o si lo prefieres lo podemos instalar por ti.
Ya sea una instalación limpia, con la última versión estable de WordPress o con algunos plugins y themes básicos incluidos en la instalación para no empezar de cero.
Además, contarás con un servicio de soporte técnico especializado para ayudarte si surge algún tipo de problema en tu instalación de WordPress.
También contarás con el panel de control cPanel y podrás emitir certificados de seguridad SSL gratuitos en dominios y subdominios alojados en el hosting.
Por supuesto, todos los hosting WordPress cuentan con discos SSD para que la lentitud al cargar las páginas sean cosa del pasado.
Aquí tienes algunas de las opciones de alojamiento web para WordPress que podemos ofrecerte en Hostinet: