Cómo agrandar imágenes en dispositivos móviles sin afectar el escritorio

El siguiente método crea esencialmente Elementos de imagen separados para vistas de escritorio y móviles, lo que le permite personalizar cada uno de forma independiente. Para obtener más información, consulte este artículo.

Paso 1: Duplicar la sección de la imagen

• En el editor de GemPages, busque la imagen que desea modificar.
• Haga clic en la imagen para seleccionarla.
• Utilice el Duplique Función para crear una copia de esta imagen. Este duplicado se utilizará para la versión móvil.

Paso 2: Configurar los ajustes de visibilidad

Para la sección original (de escritorio)

• Seleccione la imagen original y navegue hasta la Avanzado pestaña en la barra lateral izquierda. 
• En la sección Mostrar en sección, inhabilitar las Tableta y Móvil vistas.

Esta configuración hará que la sección visible solo en dispositivos de escritorio.

Para la sección Duplicados (Móvil)

• Seleccione la imagen duplicada y navegue hasta la Avanzado pestaña en la barra lateral izquierda. 
• En la sección Mostrar en sección, inhabilitar las Escritorio y Tableta vistas.

Esta configuración asegura la sección aparece exclusivamente en dispositivos móviles.

• Una vez hecho esto, la imagen quedará oculta para el editor porque actualmente estás en el Escritorio Vista. En la esquina izquierda de la barra superior, cambie la vista a Móvil.

Paso 3: Ajuste el tamaño de la imagen para dispositivos móviles

• Una vez que cambie al editor de vista móvil, haga clic en la imagen para acceder a su configuración y desplácese hacia abajo hasta la Tamaño .

• Puede seleccionar la Marco y aumentar el Ancho / Alto Valores de su imagen en la vista móvil a las dimensiones deseadas.

Para obtener más detalles sobre cómo cambiar el tamaño de la imagen, consulte este artículo.

Paso 4: Vista previa y prueba

• Utilice los íconos de vista previa del dispositivo en la parte superior del editor de GemPages para cambiar entre las vistas de escritorio y móvil.

• Asegúrese de que la imagen se muestre correctamente en ambas versiones: el tamaño original en el escritorio y el tamaño ampliado en el dispositivo móvil.
• Realice los ajustes necesarios relleno, márgenesu otras configuraciones de estilo para lograr la apariencia deseada en cada dispositivo.

Para más información sobre diseño web adaptable y la configuración de visibilidad en GemPages, consulte este artículo.