---
title: "Imagen principal del paywall"
description: "Personaliza tu paywall con una imagen principal para mejorar las tasas de conversión en Adapty."
---

La imagen principal es el elemento estrella de tu paywall: define el tono, establece el tema y capta la atención del usuario desde el primer momento. Esta imagen juega un papel fundamental en el aspecto y la sensación de tu paywall tanto en iOS como en Android.

:::warning

Esta sección describe el nuevo Paywall Builder, que funciona con los SDKs de iOS, Android y React Native en la versión 3.0 o superior, y con los SDKs de Flutter y Unity en la versión 3.3.0 o superior. Para obtener información sobre el Paywall Builder anterior, compatible con Adapty SDK v2.x o versiones anteriores, consulta [Imagen principal del Paywall Builder heredado](paywall-layout-and-products-legacy#main-image-and-sizing).

:::

## Formato y tamaño de la imagen principal \{#hero-image-format-and-size\}

La imagen principal es el elemento central del diseño de tu paywall, esencial para captar la atención de los usuarios y animarles a actuar. Sigue estas pautas para asegurarte de que tu imagen sea efectiva y visualmente atractiva:

- **Formatos**: JPG y PNG.
- **Tamaño recomendado**: Archivos de hasta 2 MB para una carga más rápida.
- **Composición de la imagen**: Las fotos con el objeto principal centrado y rodeado de espacio suficiente suelen transmitir el mensaje de forma efectiva.
- **Imágenes de impacto**: Las fotos emotivas o con colores vibrantes funcionan muy bien.
- **Uso de gráficos**: Ideal para añadir atractivo visual, con espacios separados reservados para el texto.

  <img src="/assets/shared/img/70000ff-PB_hero_image.gif"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

Tienes control total sobre el tamaño de la imagen principal: ajusta sus proporciones para conseguir el equilibrio visual que desees en tu paywall. Especifica el tamaño de la imagen como un porcentaje del área total de la pantalla para una alineación perfecta.

## Opciones de diseño de la imagen principal \{#hero-picture-layout-options\}

La **imagen principal superpuesta** añade profundidad y dinamismo a tu paywall. Al estar posicionada como fondo fijo en la parte inferior, crea un efecto impresionante mientras el resto de los elementos se desplazan sobre ella. Esto hace que la imagen principal parezca estática, ofreciendo una experiencia visualmente atractiva mientras los usuarios hacen scroll por el contenido.

  <img src="/assets/shared/img/01c702a-overlay_head_picture.gif"
  style={{
    border: 'none', /* border width and color */
    width: '200px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

El **diseño transparente** ofrece una imagen principal a pantalla completa y muy llamativa que capta la atención de inmediato. Este diseño es perfecto para mostrar una selección limitada de productos o contenido, ocupando toda la pantalla y generando un impacto poderoso y directo sin necesidad de hacer scroll.

  <img src="/assets/shared/img/0401532-transparent_hero_picture.webp"
  style={{
    border: 'none', /* border width and color */
    width: '200px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

:::note
Usa el diseño transparente para mostrar contenido mínimo, ya que no implica scroll, lo que hace que tu mensaje sea claro e impactante.
:::

El **diseño plano** imita una landing page fluida, presentando todos los elementos en una capa continua y desplazable. Los usuarios disfrutan de una narrativa suave y cohesionada mientras hacen scroll por el contenido, perfecta para integrar tus productos o historias de forma efectiva en un flujo unificado.

  <img src="/assets/shared/img/7c13a16-flat_hero_picture.gif"
  style={{
    border: 'none', /* border width and color */
    width: '200px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

:::note
Ideal para contar historias o presentar una serie de ofertas, el diseño plano te permite crear una secuencia atractiva que cautiva a los usuarios.
:::

## Máscara de la imagen principal \{#hero-image-mask\}

El **tipo de máscara** define la forma de la imagen principal, permitiéndote aplicar efectos creativos que mejoran la presentación visual. Para los diseños de imagen plana o superpuesta, elige entre distintos tipos de máscara para adaptar el diseño a tus necesidades.

  <img src="/assets/shared/img/b484e36-Image_mask.gif"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

Ajusta el redondeo de la máscara de la imagen usando valores numéricos para conseguir el aspecto perfecto para tu imagen principal.

## Cómo eliminar una imagen principal \{#how-to-remove-a-hero-image\}

Para eliminar una imagen principal de un paywall:

1. Abre el elemento **Hero image**.

   

  <img src="/assets/shared/img/67f57af-PB_remove_hero_image.gif"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

2. Cambia su altura a cero.