Reordenar columnas y contenido en dispositivos móviles

Por qué es importante reordenar las columnas en dispositivos móviles

De forma predeterminada, las columnas en Una fila que se dispone horizontalmente en el escritorio normalmente se apilará verticalmente en el móvil.. Sin embargo, a veces el orden automático de las columnas puede no coincidir con el diseño deseado. 

Por ejemplo:

Eres el propietario de una tienda Shopify. Diseñaste un diseño de escritorio con una fila de 2 columnas:

• Columna 1 – La imagen
• Columna 2 – Opinión de expertos y botón CTA

En la versión de escritorio, este diseño funciona bien, pero en el móvil, el contenido se apila verticalmente de forma predeterminada. Este es el problema:

• La imagen aparece primero, pero los testimonios aparecen antes del botón CTA. Empujar el CTA más abajo en la página.
• Los usuarios pueden perder el interés antes de llegar al CTA, afectando las tasas de conversión.

A medida que su página pasa de la versión de escritorio al móvil, garantizar el orden correcto de las columnas ayuda a mantener el flujo y la legibilidad. 

Un diseño móvil bien organizado mejora la experiencia del usuario, lo que hace que sea más fácil para los visitantes navegar e interactuar con su contenido. 

A continuación te mostramos cómo puedes reordenar columnas en dispositivos móviles en unos sencillos pasos:

Cómo reordenar columnas en dispositivos móviles (paso a paso)

Paso 1: Comience abriendo su página en el Editor de GemPages. Navegue hasta la fila donde se encuentra el contenido que desea reordenar.

Paso 2: Seleccione la vista móvil.

Paso 3: Haga clic en la fila que contiene las columnas que desea ajustar. Esto mostrará el panel de configuración de la fila en el lado izquierdo del editor.

Paso 4: Reordenar las columnas que mejor se adapte al diseño de tu móvil. 

Esto le brinda control total sobre cómo aparece el contenido en una pila vertical.

Paso 5: Después de confirmar el nuevo orden de tus columnas, haz clic en 'Salvar' y luego en 'Publicar' sus cambios para aplicarlos en vivo en su sitio.

Recomendaciones finales

• Pruebe su diseño en múltiples tamaños de pantalla móvil para mejores resultados.
  
• Guardar CTA y mensajes clave Por encima del pliegue para una mayor visibilidad.
  
• Considerar duplicando filas para computadoras de escritorio versus dispositivos móviles si la lógica del diseño se vuelve demasiado compleja.