--- title: "Crea una pantalla hero con una hoja deslizante" description: "Superpón tu contenido sobre una imagen o vídeo a pantalla completa." --- > **AI agents**: to search Adapty docs faster and with fewer tokens, install the Adapty skills: `npx adapty skills install --yes` Una pantalla hero muestra una imagen o vídeo a pantalla completa en la parte superior, con el contenido en un panel debajo. Para crearla, coloca todo el contenido en un **Sliding sheet**, con el hero detrás. La hoja cubre la parte inferior de la pantalla y se desliza hacia arriba sobre el hero mientras el usuario hace scroll. ## Coloca tu contenido sobre una imagen o vídeo de fondo \{#lay-your-content-over-a-hero-image-or-video\} 1. Añade el hero como fondo de pantalla: en los [ajustes de pantalla](builder-ui#screen-settings-and-layout), establece **Fill** en una [imagen o vídeo](paywall-head-picture). La hoja cubre la parte inferior del fondo, así que elige una imagen o vídeo que muestre el sujeto cerca de la parte superior. 2. Abre el panel **Add element** y selecciona **Sliding sheet**. 3. Coloca el contenido de la pantalla en el sliding sheet: arrástralo en el panel **Layers**. 4. Para mantener el botón de compra visible, agrégalo a un [footer](#keep-the-purchase-button-in-view). El botón permanecerá en la parte inferior de la pantalla mientras el contenido se desplaza. 5. Ajusta la **Start position** del sheet para mostrar más del hero o más de tu contenido cuando la pantalla se abre por primera vez. 6. Para ver cómo el sheet se mueve sobre el hero, desplázate por la pantalla en el [área de vista previa](builder-ui#preview-area-center). 7. Selecciona otros modelos en la [lista de dispositivos](builder-ui#view-controls-bottom-toolbar) y revisa el área por encima del sheet. **Start position** es un porcentaje de la altura de la pantalla, por lo que esa área es más pequeña en teléfonos con pantalla corta. ## Cómo se desplaza la hoja sobre el hero \{#how-the-sheet-scrolls-over-the-hero\} La **posición inicial** es la posición de la hoja cuando se abre la pantalla. Con el valor predeterminado del 55%, la hoja cubre el 55% inferior de la pantalla y los usuarios ven el hero en el 45% superior. Si todo el contenido es visible al abrir la pantalla, la hoja permanece en su posición inicial. De lo contrario, los usuarios desplazan toda la hoja hacia arriba sobre el hero. Si el contenido es más alto que la pantalla, la parte superior de la hoja queda fuera de la vista. Para que el contenido extenso sea desplazable, en los [ajustes de pantalla](paywall-layout-and-products#scroll), deja activado el botón **Vertical scroll**. Si lo desactivas, la hoja se queda en su posición inicial y recorta cualquier contenido que no quepa. Mientras la hoja se mueve, los usuarios ven lo siguiente: - La hoja se desliza hacia arriba sobre los elementos que quedan fuera de ella, como un logotipo o un titular en la parte superior de la pantalla. Esos elementos también se mueven hacia arriba, pero más despacio, lo que da profundidad a la pantalla (paralaje). En Android, el paralaje está disponible en apps nativas de Android y React Native con Adapty SDK v4.3.0 o posterior. En otras apps de Android —o versiones anteriores del SDK— el efecto no es visible. - En iOS, cuando el usuario arrastra la hoja por debajo de su posición inicial, los elementos que quedan fuera de la hoja se estiran. - El fondo de la pantalla no se mueve. ### Añadir paralaje al héroe \{#add-parallax-to-the-hero\} Para aplicar el efecto de paralaje al héroe, añádelo como elemento de imagen o vídeo fuera del sheet, en lugar de como fondo de pantalla. Por defecto, el elemento no llega a los bordes de la pantalla. El padding de pantalla lo inserta en todos los lados y, con **Safe area** activado, comienza debajo de la barra de estado. 1. Abre el panel **Add element** y arrastra un elemento **Image** o **Video** al área que está sobre el sheet. 2. Para que el elemento llegue hasta el sheet, establece su **Width** y **Height** en **Fill**. Mantén **Content mode** (**Aspect** en un vídeo) en **Fill**. 3. Para que el elemento llegue hasta los bordes izquierdo y derecho de la pantalla, abre los [ajustes de pantalla](builder-ui#screen-settings-and-layout). En **Spacing**, establece el padding izquierdo y derecho en 0. Si el sheet tiene las esquinas superiores rectas, establece también el padding inferior en 0 para que el elemento llegue hasta el sheet. 4. Para que el elemento llegue hasta el borde superior de la pantalla, bajo la barra de estado, mantenlo como el primer elemento fuera del sheet. Luego haz clic en el elemento y, en la sección **Position**, marca la casilla **Ignore safe area**. ## Colocar elementos sobre el hero Para colocar un logotipo o un titular sobre un hero de fondo, arrastra el elemento al área que hay encima del sheet. Los elementos que están fuera del sheet se apilan desde la parte superior de la pantalla, y lo que no cabe en esa área queda recortado. Para colocarlos sobre un [elemento de imagen o vídeo](#add-parallax-to-the-hero), establece su **Position** en **Absolute**. Para mantener un botón de cierre visible mientras los usuarios hacen scroll, añádelo directamente a la pantalla y establece su **Position** en **Fixed**. No puedes seleccionar **Fixed** para un elemento que esté dentro del sheet. :::important En Android, los elementos fuera del sheet con posición **Relative** o **Absolute** solo responden a toques en las siguientes apps: - Apps nativas de Android con Adapty SDK v4.2.1 o posterior - Apps de React Native con Adapty SDK v4.2.2 o posterior En otras apps de Android, mantén los botones y otros elementos interactivos dentro del sheet. ::: ## Mantén el botón de compra visible \{#keep-the-purchase-button-in-view\} Para que el botón de compra y los enlaces legales estén siempre visibles mientras el usuario desplaza el contenido, colócalos en un [footer](builder-containers#footer). El footer va dentro del sheet. El footer permanece anclado en la parte inferior de la pantalla, sobre el sheet. Los usuarios pueden desplazarse por todo el contenido del sheet y verlo por encima del footer. Un footer en la raíz de la pantalla tiene el mismo aspecto que uno dentro del sheet. ## Dar estilo al sheet \{#style-the-sheet\} Puedes darle estilo al sheet como a cualquier otro contenedor. El relleno y las esquinas funcionan de forma diferente: - **Relleno de pantalla**: El relleno de pantalla solo se aplica a los elementos que están fuera del sheet, por lo que el sheet ocupa la pantalla de borde a borde. - **Relleno de elemento**: El **Padding** del sheet mantiene su contenido separado de los bordes de la pantalla. - **Esquinas**: Las esquinas superiores redondeadas elevan el sheet por encima de su posición inicial en la medida del radio de esquina, de modo que el hero queda visible en ellas. Un sheet con relleno de vídeo no se eleva, por lo que sus esquinas muestran el fondo de pantalla. Un sheet semitransparente solo se eleva sobre un fondo de pantalla de un único color sólido. ## Sliding sheet vs. Bottom Sheet \{#sliding-sheet-vs-bottom-sheet\} Ambos paneles ocupan la parte inferior de la pantalla. Elige el que se ajuste a lo que necesitas: - **Usa un Sliding sheet** para mostrar el contenido principal de la pantalla sobre un hero. El sheet es visible al abrir la pantalla y solo se mueve cuando el usuario hace scroll. - **Usa un [Bottom Sheet](builder-containers#bottom-sheet)** para contenido que aparece bajo demanda, como una lista de planes detrás de un enlace **Show all plans**. Se muestra con una acción **Show**.