Cómo utilizar el Icono de Configuración Adaptable

Una página que se ve estupenda en el escritorio no siempre se traduce a la perfección en el móvil o la tableta. Los encabezados pueden resultar demasiado grandes en la pantalla de un teléfono, un relleno que parece equilibrado en un portátil puede resultar apretado en una tableta, y los botones pueden requerir tamaños distintos según el dispositivo. Por eso GemPages le ofrece la posibilidad de personalizar ajustes específicos para cada dispositivo de forma individual mediante el Icono de Configuración Adaptable.

¿Qué es el Icono de Configuración Adaptable?

El Icono de Configuración Adaptable es un pequeño icono que aparece junto a determinadas opciones del panel de configuración de GemPages. Le permite anular el valor predeterminado de un ajuste concreto en función del dispositivo, lo que significa que puede tener un valor en escritorio, otro distinto en tableta y otro más en móvil, todo ello para el mismo elemento.

Esto le otorga un control total sobre cómo se adapta su página a los distintos tamaños de pantalla, sin necesidad de duplicar elementos ni escribir código personalizado.

Por qué es importante la configuración Adaptable

Diseñar de forma adaptable resulta esencial tanto para la experiencia del usuario como para el SEO. Estas son las razones por las que utilizar el icono de configuración Adaptable es tan importante:

• Mejor experiencia en móvil: más de la mitad de los compradores online navega desde dispositivos móviles, por lo que su página debe verse bien en pantallas pequeñas.
• Mayores tasas de conversión: un texto, unos botones y un espaciado correctamente dimensionados facilitan que los visitantes lean, pulsen y compren.
• Mejor posicionamiento SEO: Google utiliza la indexación mobile-first, lo que significa que una versión móvil bien optimizada repercute directamente en su visibilidad en las búsquedas.
• Flujo de trabajo más limpio: puede ajustar con precisión un mismo elemento para todos los dispositivos en un único sitio, sin duplicar secciones.

Cómo utilizar el Icono de Configuración Adaptable

Veamos un ejemplo real. Supongamos que tiene un Encabezado que se ve genial en escritorio pero resulta demasiado grande en móvil. A continuación se explica cómo corregirlo con el icono Adaptable:

Paso 1: Seleccionar su elemento

Haga clic en el encabezado (o en cualquier elemento) dentro del lienzo del editor. El panel de configuración de la derecha mostrará todas las opciones disponibles para dicho elemento.

Paso 2: Buscar el icono Adaptable

Desplácese por el panel de configuración y busque la opción que desee ajustar por dispositivo, por ejemplo, el Tamaño de Fuente. Verá un pequeño icono Adaptable junto a ella.

Paso 3: Cambiar a la vista del dispositivo de destino

Utilice el selector de dispositivo situado en la parte superior del editor para alternar entre las vistas de Escritorio, Tableta y Móvil . Elija primero el dispositivo que desea personalizar.

Paso 4: Hacer clic en el icono Adaptable

Haga clic en el icono Adaptable situado junto al ajuste. Esto activa la anulación para el dispositivo seleccionado en ese momento, permitiéndole introducir un valor que se aplicará únicamente a dicho dispositivo. único a ese dispositivo.

Paso 5: Introducir el nuevo valor

Introduzca el valor que desee (por ejemplo, cambie el tamaño de fuente de 48 px en escritorio a 28 px en móvil). El cambio solo afectará a la vista del dispositivo en la que se encuentra en ese momento.

Paso 6: Repetir el proceso para otros dispositivos

Cambie a la vista de otro dispositivo y repita el proceso si es necesario. Los ajustes correspondientes a cada dispositivo se guardan de forma independiente.

Paso 7: Previsualizar y publicar

Utilice el selector de dispositivo para previsualizar cómo se ve su página en todos los tamaños de pantalla y, a continuación, haga clic en Guardar o Publicar cuando esté satisfecho con el resultado.

Consejos para utilizar la configuración Adaptable de forma eficaz

Para sacar el máximo partido al icono de configuración Adaptable, siga estas buenas prácticas:

• Comience por el escritorio y, después, refine para las pantallas más pequeñas. La mayoría de los usuarios diseña primero para escritorio, pero conviene revisar siempre la tableta y el móvil para detectar problemas a tiempo.
• Pruebe en dispositivos reales siempre que sea posible. La vista previa del editor es precisa, pero verlo en un teléfono real le ofrece la mejor percepción de la experiencia de usuario.
• No anule todos los ajustes. Personalice únicamente lo que realmente necesite ajustarse; demasiadas anulaciones dificultan el mantenimiento de su diseño.
• Cuide sus áreas de pulsación. Los botones y enlaces deberían tener al menos 44 × 44 píxeles en móvil para que resulten fáciles de pulsar.
• Mantenga una tipografía legible. El texto del cuerpo debería situarse, por lo general, entre 14 px y 18 px en móvil para una lectura cómoda.