A veces, un diseño que se ve bien en dispositivos móviles puede no funcionar igual en computadoras de escritorio. Por ejemplo, podrías querer aplicar un Fondo degradado en dispositivos móviles para crear un impacto visual más fuerte, manteniendo al mismo tiempo un Fondo simple en computadoras de escritorio y tabletas.
En GemPages, puedes lograr esto duplicando una sección o elemento y controlando configuración de visibilidad del dispositivoEsta guía explica cómo aplicar una Fondo degradado solo en dispositivos móviles en GemPages manteniendo el diseño original para pantallas más grandes.
¿Qué es un fondo degradado?
A fondo degradado Es un estilo de fondo donde dos o más colores se fusionan suavemente. En lugar de un solo color sólido, los degradados crean un efecto de transición entre colores.
Los fondos degradados se utilizan comúnmente para:
- Crea secciones visualmente más atractivas
- Resalte contenido importante como banners de héroe o promociones.
- Mejorar el contraste visual en pantallas más pequeñas
Cuándo usar un fondo degradado exclusivo para dispositivos móviles:
Hay muchos escenarios de diseño en los que aplicar un degradado solo en dispositivos móviles puede mejorar la experiencia del usuario.
Por ejemplo:
- Realizar Secciones de héroes móviles más atractivas visualmente
- Mejorar legibilidad del texto en pantallas pequeñas
- Creamos Secciones promocionales orientadas a dispositivos móviles
- Emparejar Diseños de campañas optimizados para usuarios móviles
Debido a que las pantallas de los dispositivos móviles son más pequeñas, los degradados pueden ayudar a atraer la atención y mejorar la jerarquía visual sin sobrecargar el diseño.
Cómo aplicar un fondo degradado solo en dispositivos móviles
Siga los pasos a continuación para mostrar un fondo degradado solo en dispositivos móviles manteniendo el fondo original en el escritorio y la tableta.
Paso 1: Duplicar la sección o elemento
Primero, ubique el sección o elemento donde desea aplicar el fondo degradado.
Luego duplica esa sección o elemento.
Después de duplicar, ahora tendrás dos versiones:
- La Versión original (para escritorio y tableta)
- La versión duplicada (para móviles)
Ambas versiones inicialmente parecen idénticas.
Paso 2: Agrega el fondo degradado
A continuación, configure la versión duplicada para utilizar un fondo degradado.
- Seleccione la Forma para sección o elemento duplicado.
- Abra la Configuración .
- Navegue a Fondo.
- Seleccione Color → Degradado.
- Ajuste los colores y la dirección del degradado según sus preferencias de diseño.
Para obtener una guía más detallada sobre cómo usar el fondo degradado, consulte este artículo: Añadir un fondo degradado.
En esta etapa, ahora tienes:
- Una versión con el fondo original
- Una versión con una fondo degradado
Paso 3: Configurar la visibilidad del dispositivo
Ahora necesitas controlar ¿Qué versión aparece en cada dispositivo?.
Sección Original (Escritorio + Tableta)
Seleccione la Forma para sección original, luego configure su configuración de la pantalla por lo que sólo aparece en pantallas más grandes.
Habilitar visibilidad para:
- Escritorio
- Tableta
Deshabilitar visibilidad para:
- Móvil
Sección duplicada (solo móvil)
Luego, selecciona el sección duplicada con el fondo degradado.
Establezca la configuración de pantalla en:
Habilitar visibilidad para:
- Móvil
Deshabilitar visibilidad para:
- Escritorio
- Tableta
Esto garantiza que la versión degradada solo aparezca en dispositivos móviles.
Paso 4: Guardar y publicar la página
Después de finalizar la configuración:
- Haga clic en Guardar.
- Publica o actualiza tu página.
Su página ahora mostrará:
- La fondo original en computadoras de escritorio y tabletas
- La fondo degradado solo en móviles
Otras personalizaciones de diseño que puedes aplicar con este método
Este método de duplicación específico del dispositivo también puede ser útil para otros ajustes de diseño, como:
- Usando diferentes imágenes de fondo para móviles
- Ajuste de espaciado y estructuras de diseño
- Mostrando secciones móviles simplificadas
- Creación de diseños de campañas específicos para dispositivos móviles
Nota importante
Este enfoque funciona mediante duplicación de secciones o elementos, lo que aumenta el número de elementos en la página. Por esta razón, recomendamos utilizar este método. Solo cuando sea necesarioLa duplicación excesiva puede hacer que las páginas sean más difíciles de mantener y administrar. Siempre que sea posible, intente utilizar configuración adaptable Primero antes de crear secciones duplicadas.
gracias por tus comentarios