¿Cómo Hacer Que Un Elemento Sea Fijo?

¿Por qué hacer que un elemento sea fijo?

Los elementos fijos pueden mejorar la experiencia del usuario al mantener visible el contenido importante mientras los usuarios se desplazan por la página. 

Por ejemplo, al diseñar un advertorial, puede querer que un cuadro de CTA o un mensaje clave permanezca visible mientras el usuario se desplaza, garantizando que siempre esté accesible.

Observe el diseño del cuadro fijo de CTA en el lado derecho de la página, que permanece fijo mientras el contenido principal se desplaza a la izquierda:

Este enfoque garantiza que los lectores puedan interactuar con los CTAs importantes sin interrupciones, mejorando las tasas de conversión y la interacción general del usuario.

En GemPages, añadir un elemento sticky es sencillo y no requiere conocimientos de codificación.

Cómo hacer que un elemento sea fijo en GemPages

Paso 1: Seleccione su elemento

Elija el elemento que desea mantener visible durante el desplazamiento. Puede ser un botón, banner, etc.

Paso 2: Acceda a la configuración avanzada de posición

• En la barra lateral izquierda del Editor de GemPages, haga clic en Configuración.
• Navegue a la pestaña Avanzado .

Paso 3: Establezca la posición en Fija

• Encuentre el elemento Posición en Configuración Avanzada
• Cambie la posición de predeterminada a Fija. Este cambio hace que el elemento "se adhiera" a su posición relativa al viewport a medida que el usuario se desplaza más allá de él.

Casos de uso comunes de elementos fijos

El posicionamiento fijo se puede aplicar a diferentes elementos según el diseño de la página y los objetivos de conversión. A continuación, se muestran algunas maneras comunes en que los comerciantes utilizan elementos fijos en GemPages para mantener el contenido importante visible mientras los visitantes se desplazan.

Cómo crear un botón CTA fijo

Si desea que su botón de llamada a la acción permanezca visible mientras los usuarios se desplazan, puede hacer que el elemento del botón sea fijo usando el Posición ajuste.

Siga estos pasos:

Paso 1: Seleccione la Forma para Elemento de botón quieres hacerlo pegajoso.

Paso 2: Vaya a la Avanzado pestaña en la barra lateral izquierda.

Paso 3: Desplácese hacia abajo hasta la sección Posición .

Paso 4: Configure Posición opción de Fija.

Una vez habilitado, el botón CTA permanecerá visible a medida que los visitantes se desplazan por la página, lo que les permitirá realizar acciones con mayor facilidad en cualquier momento.

Cómo agregar una llamada a la acción fija solo en dispositivos móviles

En GemPages, cuando configuras un botón para Fija En la versión de escritorio, permanecerá fija también en la versión móvil. Esto sucede porque GemPages utiliza diseño adaptativo, lo que significa que la configuración de posición se aplica a todos los dispositivos de forma predeterminada.

Sin embargo, si quieres que el botón CTA sea fijo solo en móvilesPuedes crear una versión móvil independiente del botón y aplicar posicionamiento fijo solo a esa versión.

Siga estos pasos:

Paso 1: Duplica el botón que quieras que permanezca fijo solo en dispositivos móviles.

Paso 2: Seleccione la Forma para botón original, luego actualiza su Ajustes de la pantalla para mostrar en Solo escritorio y esconderlo en Móvil.

Paso 3: Seleccione la Forma para botón duplicado, luego actualiza su Ajustes de la pantalla para mostrar en Móvil (y ocultarlo en el escritorio si es necesario).

Paso 4: Con el botón duplicado seleccionado, vaya a la Avanzado pestaña. Desplácese hasta la Posición sección. Selecciona el Posición opción de Fija.

Una vez completado, el comportamiento de permanencia se aplicará únicamente a la versión móvil del botón, mientras que la versión de escritorio permanecerá sin cambios.

Cómo crear una descripción de producto atractiva

Las descripciones de productos fijas se utilizan comúnmente en las páginas de productos para mantener visible información importante (como detalles del producto, precio o botones para agregar al carrito) mientras los clientes se desplazan por las imágenes del producto o descripciones largas.

Siga estos pasos:

Paso 1: Seleccione la Forma para elementos de descripción del producto.

Paso 2: Vaya a la Avanzado pestaña en la barra lateral izquierda.

Paso 3: Desplácese hacia abajo hasta la sección Posición .

Paso 4: Configure Posición opción de Fija.