Con GemPages, puedes controlar la visibilidad de elementos o secciones específicas a través de dispositivos, garantizando que sus páginas se vean geniales tanto en computadoras de escritorio como en dispositivos móviles.
Por ejemplo, el diseño y el contenido que funcionan en una computadora de escritorio pueden no ser ideales para dispositivos móviles. Al mostrar y ocultar elementos según el tamaño de la pantalla, puede garantizar una experiencia de usuario más fluida y eficaz.
Digamos que estás diseñando un botón de llamada a la acción (CTA) para tu sitio web:
- Escritorio:Quieres que el CTA sea más grande y más detallado.
- Móvil:Como el espacio en la pantalla es limitado, se opta por una versión más simplificada y sencilla.
Al utilizar la funcionalidad mostrar/ocultar de GemPages, puede crear diferentes versiones del mismo botón y personalizarlas para que se ajusten a los requisitos únicos de cada tamaño de pantalla.
¿Cómo mostrar y ocultar un elemento?
Paso 1: En el editor de GemPages, agregue un nuevo elemento o haga clic en un elemento existente que desee personalizar para diferentes dispositivos.
Para este ejemplo, supongamos que está trabajando con un Llamada a la acción (CTA) .
Paso 2: En GemPages, duplique el botón CTA para crear dos botones CTA separados: uno para escritorio y otro para dispositivos móviles.
Paso 3: Personaliza los dos botones como prefieras.
Paso 4: Establecer propiedades de visualización
- Seleccione el botón que desea mostrar solo en el escritorio. En el Avanzado . Puede , utilizar el Mostrar en configuración para garantizar que solo aparezca en las pantallas de escritorio.
- Seleccione el otro destinado para móviles, ajuste el Mostrar en configuración para ocultarlo de la vista de escritorio mientras lo mantiene visible en dispositivos móviles.
¿Cómo mostrar y ocultar una sección?
También puedes mostrar y ocultar secciones enteras según el tamaño de la pantalla. Esto resulta especialmente útil si tienes bloques de contenido grandes o funciones específicas que no se traducen bien a pantallas más pequeñas.
Paso 1: Selecciona la sección que deseas ocultar en el móvil.
Paso 2: Una vez seleccionado el elemento, las configuraciones aparecerán en el lado derecho del editor.
Haga clic en el elemento pestaña Avanzada en la parte superior del panel de configuración. Usando el Mostrar en Función para ajustar la visibilidad.
- Mostrar la sección solo en pantallas de escritorio.
- Esconder cuando se ve en dispositivos móviles.
Preguntas Frecuentes
¿Por qué la función Mostrar/Ocultar no funciona en el iPhone?
- Verifique la configuración de Pantalla encendida: Asegúrese de que el elemento o sección esté habilitado para Móvil En la pestaña "Avanzado". Si está oculto en el móvil, no aparecerá en el iPhone.
- Evite superponer elementos: Un elemento puede ser técnicamente visible, pero estar oculto por otra sección o elemento en dispositivos móviles. Revisa el espaciado, la posición (especialmente la absoluta/fija) y el índice z, si se utiliza.
- Borrar caché y actualizar: Si se realizaron cambios recientemente, borre el caché de su navegador o actualice la página en el iPhone para asegurarse de que se cargue la última versión.
gracias por tus comentarios