Diseño y posicionamiento
El Flow & Paywall Builder crea layouts responsivos. No arrastras los elementos a coordenadas exactas; en cambio, los anidas dentro de contenedores que organizan automáticamente sus elementos hijos.
El contenedor define la dirección (vertical u horizontal), la alineación y el espaciado de los elementos. Los elementos individuales pueden ajustar su tamaño y márgenes, o bien —cuando sea necesario— salir del flujo con posicionamiento absoluto o fijo.
Para propiedades visuales como rellenos, bordes y efectos, consulta Estilos y apariencia.
Pídele al editor de IA una insignia de “Más popular”, un pie de página fijo o toda una nueva sección de prueba social — él crea los contenedores por ti.
Diseño
El diseño es la herramienta principal para organizar los elementos en pantalla. Cada contenedor distribuye automáticamente sus elementos secundarios según un conjunto de reglas: dirección, alineación y espaciado. Los elementos de diseño disponibles en el builder son:
- Contenedor vertical: Organiza los elementos hijo de arriba a abajo
- Contenedor horizontal: Organiza los elementos hijo de izquierda a derecha
- Divisor: Un separador visual entre elementos
- Carrusel: Un conjunto de diapositivas con desplazamiento horizontal
- Bottom Sheet: Un panel deslizante que muestra contenido adicional cuando el usuario pulsa un botón
Los contenedores son los bloques principales de una pantalla. Puedes anidarlos entre sí para construir layouts complejos. Cada contenedor tiene una sección Layout en el panel derecho que controla cómo se distribuyen sus elementos hijos.
Para agrupar elementos en un nuevo contenedor, usa la acción de capa Wrap layer action. Para eliminar un contenedor y ascender sus hijos, usa Unwrap.
Para más detalles sobre la jerarquía de pantallas y capas, consulta Pantallas y capas.
Dirección
- Free: Sin diseño automático. Los elementos secundarios se superponen entre sí en lugar de alinearse. Al seleccionar Free, cada elemento secundario se convierte en posición Absolute, y su orden de apilamiento determina qué cubre qué
- Vertical: Los elementos secundarios se apilan de arriba a abajo, como filas en una columna
- Horizontal: Los elementos secundarios se organizan de izquierda a derecha, como elementos en una fila
Orden de los elementos
Los elementos secundarios se renderizan en el orden en que aparecen en el panel Layers. En un contenedor vertical, el elemento superior de la lista aparece en la parte superior de la pantalla. En un contenedor horizontal, el elemento superior aparece a la izquierda. Arrastra los elementos en el panel Layers para reordenarlos, o utiliza las acciones de capa Move up y Move down en acciones de capa.
Alineación
La cuadrícula de alineación controla dónde se colocan los elementos hijos a lo largo del eje transversal del contenedor. En un contenedor vertical, la alineación controla la posición horizontal de los hijos (izquierda, centro o derecha). En un contenedor horizontal, controla su posición vertical (arriba, al medio o abajo).
Distribución
La distribución determina cómo se divide el espacio entre los elementos hijos a lo largo del eje principal:
- Gap (predeterminado): Un valor fijo en píxeles entre elementos hijos adyacentes
- Space Between: Los hijos se extienden hasta los bordes; aparecen espacios iguales entre ellos
- Space Around: Un espacio igual rodea a cada hijo, con espacios de la mitad de tamaño en los bordes
- Space Evenly: Espacio igual antes, entre y después de todos los hijos
Recortar contenido
Recorta visualmente el contenido que sobresale más allá de los límites del contenedor. Desactívalo para permitir el desbordamiento (por ejemplo, una insignia que intencionalmente sobresale del borde de la tarjeta).
Posición
Por defecto, la posición de cada elemento la determina automáticamente el layout de su contenedor. El toggle Position te permite sacarlo del flujo normal y posicionarlo manualmente.
Relativo (predeterminado)
El elemento permanece en el flujo normal del diseño. Su posición la determina automáticamente el contenedor padre según sus reglas de maquetación: no se puede arrastrar libremente. Usa Margin para ajustar el espacio alrededor de un elemento relativo.
Usa el posicionamiento relativo para la gran mayoría del contenido: bloques de texto, imágenes, tarjetas, botones y elementos de lista.
Absoluta
El elemento se extrae del flujo normal y se superpone sobre el resto del contenido. Ya no afecta al diseño de los elementos vecinos.
Al seleccionar Absolute, aparecen controles adicionales:
- Campos de desplazamiento (T, L, R, B): Establece la distancia en píxeles desde el elemento hasta cada borde de su contenedor padre
- Cuadrícula de anclaje: Haz clic en un punto de la cuadrícula 3×3 para elegir a qué esquina, borde o centro del padre se ancla el elemento
- Anclaje horizontal (Left / Center / Right) y Anclaje vertical (Top / Center / Bottom): Menús desplegables que controlan el mismo punto de anclaje que la cuadrícula
- Z-index: Campo numérico que define el orden de apilamiento del elemento respecto al resto de elementos posicionados
Usa posicionamiento absoluto para superposiciones decorativas, insignias, botones de cierre e iconos colocados sobre imágenes.
Para que un elemento absoluto ocupe todo el ancho de su elemento padre, establece el anclaje horizontal en Left, luego añade un desplazamiento Right de 0. El elemento se fija a ambos bordes y su ancho cambia a Auto.
Fijo
El elemento ignora completamente su contenedor padre y se ancla a la pantalla. Permanece visible mientras el usuario hace scroll: el contenido de la página se mueve por debajo de él.
El posicionamiento fijo usa los mismos controles que el posicionamiento absoluto (desplazamientos, cuadrícula de anclaje, índice Z). Todos los desplazamientos son relativos al área segura de la pantalla en lugar del elemento padre. Por ejemplo, un desplazamiento de 0 desde la parte inferior mantiene el elemento por encima del indicador de inicio. Para medir los desplazamientos desde los bordes físicos de la pantalla, activa Ignorar área segura.
Usa el posicionamiento fijo para los elementos que deben flotar sobre el contenido al hacer scroll en lugar de reservar espacio: botones de cierre o restauración flotantes, banners superiores persistentes, controles para volver al inicio y barras de navegación. Para un área de acción dedicada en la parte inferior, usa un Footer. Para superponer contenido sobre una imagen hero, usa una Sliding sheet.
Posición en un contenedor Free
Un contenedor Free no ordena sus elementos secundarios. Por eso, debes establecer manualmente la posición de cada uno. La posición Relative no está disponible. Los elementos secundarios siguen las siguientes reglas:
- Si el elemento secundario también es un contenedor Free, solo puede tener una posición absoluta. Adapty oculta su selector Position. Para que vuelva a aparecer, establece la Direction de ese elemento secundario en Vertical o Horizontal.
- El resto de elementos secundarios pueden tener la posición absoluta o fija.
Ignorar el área segura
El área segura es la parte de la pantalla que queda libre del notch, la barra de estado y el indicador de inicio. Por defecto, los elementos posicionados se mantienen dentro de ella.
Marca la casilla Ignore safe area que aparece debajo del selector de tipo de posición para medir los desplazamientos del elemento desde los bordes físicos de la pantalla. De este modo, el elemento puede extenderse detrás del notch y del indicador de inicio.
Usa esto para medios a sangre completa: posiciona una imagen o vídeo como Fixed, establece los cuatro offsets a 0 y selecciona Ignore safe area. El contenido ocupa toda la pantalla de borde a borde.
La casilla solo funciona con posicionamiento absoluto y fijo. Para elementos relativos está deshabilitada, y si vuelves un elemento a Relative, la configuración se borra.
Tamaño
Cada elemento tiene controles de Width y Height. Haz clic en el desplegable de cualquiera de los dos para seleccionar el modo de tamaño.
| Modo | Tamaño del elemento | Disponible |
|---|---|---|
| Fill | Se expande para ocupar el espacio disponible en su contenedor padre. El valor mostrado se calcula automáticamente | Solo elementos relativos |
| Hug | Se contrae para ajustarse a su contenido. El valor mostrado se calcula automáticamente | En todos los contextos excepto un elemento Free dentro de un contenedor Free |
| Fixed | Coincide con el valor en píxeles que escribes, independientemente del tamaño del padre o del contenido | En todos los contextos |
| Auto | Expande el contenido entre dos desplazamientos | Solo elementos absolutos o fijos, una vez que se han definido tanto Left como Right, o tanto Top como Bottom. Adapty lo aplica automáticamente — no puedes seleccionarlo |
Aplicar la dirección Free al elemento padre convierte el tamaño Fill de ese elemento en Fixed. Si el elemento también usa la dirección Free, su tamaño Hug pasa a ser Fixed igualmente.
Las imágenes tienen sus propias proporciones, por lo que la altura que les asignes determina si se recortan. Consulta Tamaño de imagen.
Espaciado
Establece los valores de espaciado de forma independiente para cada lado del elemento.
| Control | Qué hace | Disponible |
|---|---|---|
| Margin | Añade espacio entre el elemento y sus vecinos. Un valor grande nunca empuja el elemento fuera de su contenedor | Cualquier elemento con posicionamiento relativo. Las pantallas no tienen margen |
| Padding | Añade espacio entre el borde del elemento y su contenido. Un ancho o alto Hug crece para incluirlo | Contenedores, pantallas y otros elementos con contenido hijo. Excepciones: hijos directos de contenedores Free y las propias pantallas Free. |
Seleccionar la dirección Free dirección borra el relleno que tuviera el contenedor.
Orden de apilamiento
Los elementos relativos nunca se superponen entre sí: cada contenedor distribuye sus hijos en secuencia. La superposición solo ocurre cuando un elemento rompe el flujo normal con posicionamiento Absolute o Fixed.
Un elemento Absolute o Fixed se renderiza por encima de sus hermanos relativos, independientemente del orden de capas. Los elementos relativos no tienen campo Z-index, porque nunca se superponen.
Cuando más de un elemento Absolute o Fixed ocupa el mismo espacio, su orden de apilamiento se determina por dos factores, en orden de importancia:
- Z-index. Valor predeterminado: 0. El elemento con el valor más alto aparece encima, independientemente del orden de capas.
- Orden de capas. Si dos elementos comparten el mismo z-index, el elemento que aparece más abajo en la lista de capas se muestra encima.