Elemento Fijo Volver Arriba

¿Qué es Fijo Volver Arriba?

El elemento Fijo Volver Arriba (Sticky Back to Top)es un botón flotante diseñado para mejorar la experiencia de navegación en su sitio web. Cuando los visitantes se desplazan hacia abajo hasta el final de la página, este botón les permite regresar a la parte superior instantáneamente con un solo clic.

Este elemento es particularmente útil para páginas largas con contenido extenso, ya que ayuda a reducir el esfuerzo del usuario y mejora la participación general.

¿Cómo Agregar el Elemento Fijo Volver Arriba?

Siga estos pasos a continuación para arrastrar y soltar un elemento fijo volver arriba en su página usando el Editor v7 de GemPages:

• Inicie sesión en su Panel de Administración de Shopify > GemPages > Páginas.
• Haga clic en la página donde desea agregar el Elemento Volver al Inicio Fijo para ingresar al editor.
• Desde la barra lateral izquierda, busque este elemento y arrástrelo y suéltelo en la posición deseada en su página.

• Localice el elemento para abrir su configuración para mayor personalización.

Configurar la pestaña Configuración

En la sección Configuración , puede configurar la visibilidad del ícono según prefiera:

Tamaño

Ancho y Altura: Defina las dimensiones del botón para asegurar que sea visible pero no intrusivo.

Relleno: Ajuste el espaciado interno dentro del botón para una mejor alineación del texto o íconos.

Por ejemplo, configuramos el Ancho = 100% (completo) y la Altura = Auto. El botón Volver al Inicio Fijo se mostrará en pantalla completa. 

Fondo

Establezca un color sólido/degradado o una imagen como fondo.

• Color: Ingrese el código de color, elija de la lista "colores recientes"/"sugeridos para usted", o use el selector de color para establecer el color de fondo.

• Imagen: Cargue una nueva imagen o elija de la biblioteca para establecerla como fondo.

Forma

Personalice la forma usando:

• Borde: Seleccione los estilos de borde (trazo línea/guión/punto) y cambie el color y el grosor del borde para alinearse con el diseño de su marca.

• Esquina: Ajuste el radio de las esquinas para mejor visibilidad.

• Sombra: Aplique efectos de sombra para dar profundidad.

Ícono

Alterne la visibilidad del ícono. Puede apagarlo para usar solo texto.

Si está Activado::

• Elegir Ícono: Seleccione un ícono de la biblioteca que coincida con el tema de su sitio o cargue un ícono personalizado (solo archivo SVG).
• Posición: Decida si el botón aparece en el lado izquierda or derecha de la pantalla.
• Espaciado: Ajuste la distancia entre el botón y los bordes de la pantalla para una colocación precisa.

Texto

Si incluye texto en el botón, puede estilizarlo para adaptarse a su marca:

• Estilos: Seleccione de los estilos de encabezado para dar prominencia.
• Fuente: Elija una familia de fuentes que coincida con la tipografía de su tienda.
• Tamaño: Ajuste el tamaño del texto para visibilidad.
• Negrita/Cursiva/Subrayado: Agregue énfasis a estos estilos de texto.
• Grosor de Fuente:Controle el grosor del texto.
• Altura de Línea Ajuste finamente el espaciado entre líneas para texto multilínea.
• Espacio entre letras: Ajuste el espacio entre caracteres individuales para legibilidad.
• Transformación:Formatee el texto a mayúsculas, minúsculas o capitalice cada palabra.

Efecto

Personalice la apariencia del botón en estados de hover:

• Color de Fondo: Elija colores distintos para cada estado para mejorar la retroalimentación visual.
• Imagen: El fondo del botón cambia a una imagen al pasar el cursor.
• Color de TextoEstablezca un color de texto legible que complemente el fondo.
• BordeDefina el ancho, estilo y color del borde para delinear el botón.
• Esquina: Ajuste la redondez de las esquinas del botón para un aspecto moderno o clásico.
• Sombra: Agregue un efecto de sombra para crear profundidad y hacer que el botón se destaque.

Enlace

Como este es un botón de regreso a la parte superior, la acción después del clic está configurada en Desplazarse a Superior de forma predeterminada. Por lo tanto, puede ignorar esta sección Enlace .

Alineación

Si el ancho del botón = Ajustado al contenido (Auto), elija cómo se alinea el botón:

• Izquierda: Alinee el botón al borde izquierdo.
• Centro: Centre el botón dentro del botón.
• Derecha: Alinee el botón al borde derecho.

Configurar la pestaña Avanzada

Para una personalización más avanzada, navegue a la pestaña Avanzada y siga las instrucciones en este artículo.