Explicación de Scroll to id para navegar a un elemento específico en la página al hacer clic en un botón determinado

Si tienes un sitio web WordPress, proporcionar una experiencia de navegación fácil y rápida a los usuarios de tu sitio es esencial, así como implementar las mejores prácticas para aumentar la tasa de conversión en tu sitio. Una de estas acciones es la función Scroll to ID, que permite a los visitantes desplazarse a un elemento específico al hacer clic en un botón o elemento determinado en la parte superior de la página. Este es un paso útil, especialmente en páginas largas. En otras palabras, si tu página de destino contiene 8 secciones y en la primera sección pides al visitante que se registre en un formulario específico, y luego le pides que haga clic en "Ver más" para dirigirse a la segunda sección de contenido que contiene el formulario de registro, así aseguras que no se distraiga con otras partes de tu página de destino.

En este artículo explicaremos tres formas simples de agregar la función de desplazamiento de un primer elemento (botón, palabra, imagen u otro) que, cuando el visitante hace clic en él, se desplaza suavemente a un segundo elemento (título, artículo, imagen, tabla de precios u otro) dentro de la misma página, conocido como Scroll to ID. Lo explicaremos usando 3 métodos: usando el complemento (Page Scroll to ID), usando (HTML Anchor) y usando herramientas de construcción de sitios web. Exploraremos estos métodos para lograr el mismo objetivo pero con diferentes enfoques, dando un ejemplo usando un sitio web de venta de perfumes de la siguiente manera: 1.

Usando el complemento (Page Scroll to ID) El complemento Page Scroll to ID, que permite el desplazamiento suave de la página al identificador (elemento) en lugar del comportamiento de "salto" del navegador, es un complemento completamente destacado. Al hacer clic en los enlaces diseñados para ello, proporciona un movimiento de desplazamiento suave.

Proporciona todas las herramientas básicas y funcionalidades avanzadas para sitios web de una sola página, como la navegación en la página de arriba a abajo y otras características como: duración del desplazamiento personalizable y suavizado (más de 30 tipos de suavizado diferentes), resaltado de enlaces y objetivos mediante clases CSS listas para usar, desplazamiento vertical y/o horizontal, desplazamiento desde y hacia diferentes páginas (desplazamiento al ID de destino al cargar la página), ingrese botones de enlace e ID de destino en otro editor visual. Es un complemento que proporciona esta función de forma gratuita u opta por comprar el complemento para obtener características más avanzadas. Ha sido descargado más de 100,000 veces y ha recibido una calificación de

cercana a 5 estrellas

Instalar el complemento desde la barra lateral del panel de control de tu sitio, haz clic en la sección Complementos (Plugins), luego Agregar nuevo (Add New). En el cuadro de búsqueda, escribe la palabra clave (Page Scroll to ID). Una vez que aparezca el complemento, haz clic en Instalar ahora (Install Now), luego Activar (Activate). Configuración del complemento (Settings)

Hay varias opciones de configuración para este complemento, como el tiempo de transición, la velocidad y el estilo, que están bien ajustadas (es mejor dejar la configuración predeterminada). Sin embargo, solo nos aseguraremos de dos puntos: asegúrate de que el Selector esté escrito de la siguiente manera:

a[href*='#']:not([href='#']) Luego en Opciones avanzadas (Advanced Options): donde nos aseguraremos de marcar la opción "Evitar que otros scripts procesen los enlaces de este complemento", como se muestra en la imagen.

Después, haremos clic en la opción "Guardar cambios" (Save Changes). Establecer el objetivo (Creating Targeting ID) Para entender los pasos para establecer el objetivo al que queremos acceder a través del desplazamiento rápido, usaremos un ejemplo simple que es una página "Acerca de nosotros - About Us".

Primero entraremos en la opción "Páginas" (Pages) en el panel de control, luego en la página "About Us". Por supuesto, puedes elegir cualquier página a la que desees acceder y personalizar cualquier elemento de ella siguiendo los mismos pasos: En tu página Acerca de nosotros, selecciona el elemento que deseas vincular con la función de desplazamiento rápido, luego haz clic en Agregar bloque. En nuestro ejemplo en la imagen, elegimos el primer título "Misión - Mission", como se muestra en la imagen. Aparecerá una página de opciones a la izquierda de la pantalla que incluye tanto opciones de "bloques" como "Patrones". Seleccionaremos de las opciones de componentes (Blocks) la opción del complemento (Scroll to ID) como se muestra en la imagen. Después de hacer clic en el complemento, aparecerá un espacio para escribir el nombre. Elige un nombre para este elemento (si el nombre tiene más de una palabra, no dejes espacios entre las palabras, sino usa guiones "-"). De la misma manera anterior, selecciona cualquier segundo elemento dentro de la página y haz clic al lado de él, luego agrega el bloque del complemento. Después de terminar de seleccionar los elementos, haz clic en Actualizar (Update) como se muestra en la imagen.

Agregar los elementos seleccionados al menú Después de seleccionar los elementos que deseas vincular con la función de desplazamiento rápido, regresaremos al panel de control de tu sitio y desde la sección Apariencia (Appearance) haremos clic en Menús (Menu). De las pestañas que aparecerán, haremos clic en el título "Enlaces personalizados" (Custom Links) como se muestra en la imagen.

En el cuadro "Enlace" (Link) escribiremos el símbolo (#) más la misma identificación o título que elegiste para el elemento. En nuestro ejemplo (mission#). En el cuadro Texto del enlace (Link Text) escribiremos el nombre que deseas que aparezca en el menú. Después, elige mostrar en el Menú principal (Primary Menu) y finalmente haz clic en el icono "Agregar al menú" (Add to Menu) como se muestra en las siguientes imágenes.

Después de agregar los elementos al menú, ordena su ubicación (haz clic, arrastra, suelta) y luego haz clic en Guardar menú (Save Menu). Después de completar todas las configuraciones anteriores, nos aseguraremos de que la función de desplazamiento rápido funcione correctamente. Abriremos la página About Us, a la cual agregamos la función en nuestro ejemplo, usando cualquier navegador. Notarás que aparecen iconos en la parte superior de la página para los elementos o títulos a los que agregamos la función de desplazamiento rápido, como se muestra en la imagen. Haremos clic en los títulos "Misión" y "Visión" para asegurarnos de que la función de desplazamiento rápido dentro de la página funciona de manera efectiva. También debes asegurar que el proceso de desplazamiento desde la parte superior del menú hasta el elemento seleccionado sea con la velocidad y forma requeridas.

2. Uso de HTML Anchor para desplazarse a un elemento específico Si tienes un blog y publicas artículos largos, aprovechar la función de desplazamiento rápido para los títulos principales del artículo será un paso y una adición excelente para tu sitio web, para que el lector pueda acceder directamente a las secciones que desea del artículo después de hacer clic en el título en la parte superior de la página.

Ahora hablaremos sobre algunas configuraciones preestablecidas dentro del editor de artículos de WordPress, que se configuran para personalizar la función de desplazamiento rápido en las páginas de sitios web y blogs dedicados a publicar artículos, especialmente artículos largos y con mucho contenido. Hay dos formas básicas de agregar la función de desplazamiento rápido a través del editor de artículos de WordPress: Agregar la identificación (Id). En este método, nos dirigiremos a "Sección de artículos - posts", luego a "Todos los artículos - all posts" y haremos clic en la opción "Editar artículo - Edit" como se muestra en la imagen.

Ahora seleccionaremos, por ejemplo, uno de los títulos principales en el artículo, como se muestra en la imagen, y luego haremos clic en el icono de enlaces (agregar enlace). Aparecerá una ventana que solicita agregar un enlace a ese título. Lo que debemos hacer ahora es escribir el "identificador" del título, que es el título mismo precedido por el símbolo (#), el mismo título pero sin espacios entre las palabras, sino con (-) entre ellas, como se muestra en la imagen. Luego presionaremos (Enter). También debemos asegurarnos de que la opción "abrir en nueva pestaña - open in new tab" no esté habilitada, porque esto resultaría en abrir una nueva pestaña en el navegador del visitante al hacer clic en uno de los títulos del artículo, y esto por supuesto no es apropiado para los visitantes. 2.

HTML anchor. El segundo método para agregar la función de desplazamiento a otro elemento se basa en el editor de bloques. Esto se hace yendo al editor de artículos como en el complemento anterior. Ahora seleccionaremos el título principal dirigido por la función de desplazamiento rápido, y aquí, en lugar de seleccionar el símbolo de "enlaces", iremos a "Opciones avanzadas - Advanced Options" que encontrarás en el lado derecho del editor de artículos. Escribiremos en el cuadro "HTML anchor" el nombre del título principal sin separadores con (-), pero sin el símbolo (#). Luego haremos clic en (Update) como se muestra en la imagen.

3. Verificar la efectividad de la función Después de configurar la función de desplazamiento rápido a través del editor de artículos de WordPress usando uno de los dos métodos anteriores, iremos a ver el artículo (Preview), donde se mostrará una vista previa de la apariencia final del artículo.

Ahora debemos asegurarnos de que el enlace en el título principal en el que trabajamos nos llevará al párrafo de ese título. 3.

Usando herramientas de construcción de sitios (Visual Builders)

Este método es muy adecuado para propietarios de sitios web que ya usan complementos de construcción de sitios web en sus sitios, para que puedas crear la función de desplazamiento rápido a través de ellos fácilmente.

En esta explicación, agregaremos la función de desplazamiento rápido al elemento (Essential Collection) del menú principal en la parte superior del sitio web (Main Menu). Después de pasar a la página de edición usando el constructor, selecciona la sección a la que deseas agregar la función de desplazamiento rápido. Haz clic en la sección de edición (representada por un grupo de puntos).

Elige la configuración avanzada en la sección de pestaña. Escribe una identificación (Css ID) para esta sección de la página (por ejemplo: essential-collection. No pongas espacios entre las palabras y puedes usar – o _). Haz clic en (Update). Agregar un nuevo menú: Ahora regresaremos al panel de control de tu sitio y desde la sección Apariencia (Appearance) seleccionaremos "Menús" (Menu). De los elementos del menú, seleccionaremos Enlaces personalizados (Custom Links).

En el cuadro de Enlace (Link) escribe el símbolo (#) con la misma identificación que elegiste en (Css ID), por ejemplo: (essential-collection#). En el cuadro "Texto del enlace" (Link Text) escribe el nombre que deseas que aparezca en el menú. Ahora todo lo que tienes que hacer es elegir "Mostrar" en el Menú principal (Primary Menu), y luego haz clic en "Agregar menú" (Add to Menu) como se muestra en la siguiente imagen.

Después de agregar el nuevo menú, ordena su ubicación y luego haz clic en Guardar menús (Save Menu). Después de completar todas las configuraciones, accede a la página de inicio del sitio web, que se mostrará al cliente, y haz clic en los menús que agregaste para verificar que la función de desplazamiento rápido está activada dentro de la página. Y eso es todo. Con esto, hemos detallado tres de los métodos más destacados y simples utilizados para activar la función de desplazamiento rápido a un elemento específico (Scroll to ID) en pasos simples. Todos los métodos conducen al mismo resultado y puedes elegir el método que mejor se adapte a ti sin encontrar ningún problema.