Page scroll to id – Smooth Scroll en WordPress

Categorias: 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.


Contamos con diferentes tipos de hosting. Elige el que mejor te venga para alojar tu web


Plugin «Page Scroll to id» WordPress

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!

Page Scroll to id – Cómo Añadir Enlaces Ancla

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.

menu page scroll - WordPress

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.

page scroll opciones - WordPress

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.

page scroll botones editor - WordPress

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.

page scroll boton insertar ancla - WordPress

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.

page scroll id target - WordPress

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.

page scroll shortcode - WordPress

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.

page scroll boton enlace - WordPress

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.

page scroll id link - WordPress

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.

page scroll enlaces terminado - WordPress

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!!.

Hosting WordPress SSD

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:

  • HostingWordPress 12´00 / mes
  • Hosting especializado en WordPress con discos SSDWordPress 107´99 / mes
  • Hosting especializado en WordPress con discos SSDWordPress 5011´99 / mes
  • Hosting especializado en WordPress con discos SSDWordPress 7513´99 / mes
  • HostingWordPress 12´00/mes
  • Hosting especializado en WordPress con discos SSDWordPress 107´99/mes
  • Hosting especializado en WordPress con discos SSDWordPress 5011´99/mes
  • Hosting especializado en WordPress con discos SSDWordPress 7513´99/mes
    • Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.
    • Almacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSD
    • El espacio en disco es la suma del espacio que ocupan los archivos que forman la web y el correo electrónico.
    • La transferencia de datos mensual es la cantidad total de información que se descargan los visitantes de nuestra web en cada acceso más nuestro uso a través de FTP y correo.
    • Ideado para sacar el máximo partido a tu WordPress
    • Aumenta la velocidad de tu web + Info
    • Tras evaluación de nuestro equipo de migraciones
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web
    • Elige la versión de PHP que necesites
    • Certificado SSL autofirmadoCertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUI
    • Contrata tu hosting web y consigue dominios gratisUna vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.
    • Migramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a Hostinet
    • Ideado para sacar el máximo partido a tu WordPress
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web
    • Hosting específicamente preparado para sacar el máximo rendimiento a tu Wordpress
    • Contrata tu hosting web y consigue dominios gratisUna vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.
    • Cada dominio alojado muestra un contenido único y diferente del resto
    • Aparcando un dominio secundario en el alojamiento de nuestro dominio principal conseguimos que ambos dominios resuelvan indistintamente con la misma página que tenemos colgada.
    • Cuentas de correo gestionables a través de POP, IMAP y servicio Webmail
    • Tus buzones de correo y mails limpios de virus y con un potente filtro antispam
    • Centro de datos en Madrid (España)
    • Opción de contratación de IP dedicadaPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUI
    • Opción de contratación de certificados SSL. Se requiere Ip dedicada.Puedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUI
    • Bases de datos MySQL disponibles para su uso en cada alojamiento web
    • Supeditado al espacio total del alojamientoSupeditado al espacio total del alojamientoSupeditado al espacio total del alojamientoSupeditado al espacio total del alojamientoSupeditado al espacio total del alojamiento
    • ¿Quieres realizar desarrollos con Python? En Hostinet innovamos dia a dia en tu beneficio y por ello te presentamos como última novedad en todos nuestros servidores Web la posibilidad de desplegar tus aplicaciones con Python directamente desde el Plesk de tu Hosting.
    • ¿Quieres desarrollar tus aplicaciones con Ruby? En Hostinet te presentamos como última novedad en todos nuestros servicios de Hosting Web la posibilidad de desplegar tus aplicaciones con Ruby on Rails directamente desde el panel de control Plesk.
    • El fichero .htaccess permite modificar diferentes variables en la configuración de nuestra cuenta de alojamiento en el servidor.
    • El módulo mod_rewrite permite crear direcciones URL alternativas a las dinámicas generadas por la programación de nuestros sitio web (blog, foro, portal…), de tal modo que sean más legibles y fáciles de recordar
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web. Soporte en español por personal de Hostinet.
    • Completa recopilación de tutoriales sobre Hosting, Dominios y Wordpress
    • 30 dias para probar tu servicio de Hosting y si no te convence el servicio... te devolvemos el dinero!!
    • Copia diaria incremental realizada por HostinetCopia diaria incremental realizada por HostinetCopia diaria incremental realizada por HostinetCopia diaria incremental realizada por Hostinet
    • Podrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento web
    • Precio para nuevas altas. Contratación anual.