¿Quieres guiar a tus visitantes directamente a una sección específica de tu página, como detalles del producto, preguntas frecuentes o un formulario de contacto, con un solo clic? Eso es exactamente lo que necesitas. enlaces ancla son para.
En esta guía, aprenderá a crear enlaces con desplazamiento suave en Versión 7 de GemPages, utilizando botones, imágenes o elementos de texto para desplazarse a cualquier sección de su página, sin necesidad de codificación.
¿Qué es un enlace de anclaje?
An enlace de ancla (también llamado “enlace de desplazamiento”) le permite enviar a los visitantes a una sección específica de la misma página, sin tener que recargar la página ni obligar a los usuarios a desplazarse manualmente.
GemPages hace que esta funcionalidad sea fácil de configurar al permitirle vincular cualquier elemento en el que se pueda hacer clic (como un botón o un encabezado) a un ID de sección en la página.
Antes de comenzar: Obtenga el ID de la sección
Para crear un enlace de ancla, primero necesitas el ID de Sección del destino al que desea que se desplacen los usuarios.
Cómo encontrar el ID de la sección:
- Coloque el cursor sobre la sección a la que desea vincular en el Editor.
- Haga clic derecho en la sección.
- Elija “Copiar clase” en el menú desplegable.
- Recibirás una clase como .gp0XsMH_MSPara convertirlo en una identificación, simplemente reemplace el punto (.) con hash (#).
Ejemplo: .gp0XsMH_MS → #gp0XsMH_MS
Utilizarás este ID de sección al configurar el enlace.
Cómo crear enlaces de anclaje en GemPages
En GemPages, puedes crear enlaces de anclaje de dos maneras sencillas:
- Usando un botón o imagen: Puedes convertir un botón, imagen o banner de héroe En un enlace clicable que dirige a los visitantes a una sección específica de la misma página. Esto es ideal cuando se busca una acción clara, como "Ver detalles del producto", "Ir a preguntas frecuentes" o "Contáctanos".
- Usando texto (texto de anclaje): También puedes agregar enlaces de anclaje directamente a texto dentro de encabezados o bloques de textoCuando los visitantes hacen clic en el texto, la página se desplaza a la sección de destino. Esta opción es ideal para páginas largas, diseños de índice o enlaces de navegación sutiles.
A continuación se explican los pasos para cada método:
Opción 1: Crear un enlace de ancla usando un botón o una imagen
Sigue estos pasos para crear un botón o imagen que los usuarios puedan hacer clic para desplazarse hacia una parte específica de tu página. Estas instrucciones aplican al elemento Botón, pero también pueden usarse con los elementos Banner Principal (Hero Banner) e Imagen.
Paso 1: Vaya a Administración de Shopify > Aplicaciones y seleccione GemPages para acceder al Panel de Control de GemPages. Ve a la sección Páginas y elige su plantilla preferida para acceder al Editor.
Paso 2: Arrastrar un Botón de Hero en su página.
Paso 3: Haga clic en el botón para ver la configuración en la barra lateral izquierda. Active el botón "Enlace".
Paso 4: Seleccionar acción después de hacer clic: elija una acción que se active cuando se haga clic en el enlace:
- Abrir página:Abrir otra página/URL.
- Desplazarse a:Desplácese a una sección específica en la página.
- Abrir ventana emergente:Abre una ventana emergente específica.
- Enviar correo electrónico:Envía un correo electrónico a una dirección de correo electrónico específica.
- Hacer llamada telefónica:Realizar una llamada telefónica mientras navega en un dispositivo móvil o tableta.
En este caso, elegiremos Desplazarse a.
Paso 5: Pegar el ID de Sección que copió anteriormente o seleccione un destino de la lista.
Paso 6: Golpear el azul guarde botón. A continuación, pulsa guarde y Publicar para verificar el resultado en la página en vivo.
Su botón ahora se desplaza suavemente a la sección cuando se hace clic.
Opción 2: Crear un enlace de ancla usando texto (Texto de ancla)
Si prefiere utilizar enlaces de texto en lugar de botones o imágenes, puede crear enlaces de anclaje directamente dentro de los elementos de texto.
Paso 1En el Panel de Control de GemPages, abre tu plantilla e ingresa el Editor.
Paso 2En el Editor, arrastra un elemento basado en texto a tu página, por ejemplo, un elemento de encabezado.
Paso 3: Selecciona el texto donde deseas agregar un enlace de anclaje, activando el panel de texto en línea para una mayor personalización.
Paso 4: Haz clic en el icono de la cadena para revelar una URL personalizada .
Paso 5Pegue el ID de Sección del destino en el campo y haz clic en Enlace a esta URL.
Paso 6: guarde y Publicar la página para comprobar el resultado en su página en vivo.
Preguntas Frecuentes
1. ¿Puedo crear un enlace de ancla directamente a un elemento (por ejemplo, un botón o una imagen)?
Actualmente, los enlaces de anclaje en GemPages solo funcionan con Secciones or filas, no con elementos individuales.
Si desea enlazar directamente a un elemento, debe colocarlo dentro de una fila. Luego, copie la clase de la fila (y conviértala en un ID) para usarla como destino de desplazamiento.
2. ¿Por qué mi enlace de anclaje no se desplaza al elemento correcto?
La mayoría de las veces, esto se debe a que el elemento no está dentro de una sección o fila. Asegúrate de que el elemento de destino esté dentro de una fila y usa el ID de sección de esa fila para un desplazamiento fluido.
3. ¿Puedo utilizar enlaces de anclaje para ventanas emergentes o URL externas?
No. Los enlaces de anclaje están diseñados únicamente para desplazarse dentro de la misma página. Para acciones como abrir una ventana emergente o enlazar a una página externa, debe usar las opciones correspondientes en el menú "Acción posterior al clic".
4. ¿Puedo hacer que un botón se desplace hasta la parte inferior de mi página?
gracias por tus comentarios