---
title: "Gestionar elementos de la UI del paywall"
description: "Personaliza y gestiona los elementos de la UI del paywall para mejorar la experiencia del usuario."
---

Tras elegir una plantilla, sus elementos se mostrarán en el panel izquierdo. Usa este panel para organizar los elementos de tu paywall. Los elementos aparecerán en el paywall en el mismo orden en que figuran en el panel izquierdo.

:::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 información sobre el Paywall Builder legacy compatible con Adapty SDK v2.x o anterior, consulta [Legacy Paywall Builder](adapty-paywall-builder-legacy).

:::

## Añadir elemento \{#add-element\}

Para añadir un elemento a tu paywall por encima del layout:

1. Haz clic en el botón **Add Element** del panel izquierdo.
2. Elige el elemento que quieres añadir. El nuevo elemento aparecerá en la lista encima del **Footer**.

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

Para añadir un elemento a un elemento compuesto:

1. Haz clic en el botón **Plus** junto al elemento compuesto.
2. Selecciona el elemento que quieres añadir.

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

## Renombrar elemento del paywall \{#rename-paywall-element\}

Para renombrar un elemento:

1. Haz clic en el elemento en el panel izquierdo para abrir sus detalles.

   

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

2. Haz clic en el botón de puntos suspensivos en el panel derecho y elige la opción **Edit**.

3. Escribe el nuevo nombre del elemento y pulsa **Enter**.

## Duplicar elemento \{#duplicate-element\}

Para duplicar un elemento:

1. Haz clic en el elemento en el panel izquierdo para abrir sus detalles.

   

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

2. Haz clic en el botón de puntos suspensivos en el panel derecho y elige la opción **Duplicate**.

El elemento duplicado, con "Copy" añadido a su nombre, aparecerá en el panel izquierdo como una copia completa del original.

## Mover elemento \{#move-element\}

Para mover un elemento: arrastra y suelta el elemento a su nueva posición en el layout o dentro de un elemento compuesto.

Una línea morada indica una posición disponible para el elemento, mientras que una línea roja muestra una posición no accesible.

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

## Ocultar / mostrar elemento \{#hide--show-element\}

Aunque ya hayas creado y configurado un elemento, puedes ocultarlo temporalmente del paywall. Esto resulta útil si planeas añadirlo más adelante sin perder toda la configuración que hiciste. Al ocultar un elemento, el paywall se muestra como si el elemento nunca hubiera sido añadido; todos los alineamientos y espacios se recalculan y redesplazan.

Para ocultar un elemento:

1. Haz clic en el elemento en el panel izquierdo para abrir sus detalles.

2. Haz clic en el botón de puntos suspensivos en el panel derecho y elige la opción **Hide**.

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

El elemento oculto queda marcado tanto en el panel principal —como una nota— como en el panel izquierdo cuando lo seleccionas.

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

Para volver a mostrar el elemento, haz clic en el botón de puntos suspensivos en el panel derecho y elige la opción **Show**.

## Eliminar elemento \{#delete-element\}

Para eliminar un elemento del paywall:

1. Haz clic en el elemento en el panel izquierdo para abrir sus detalles.

   

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

2. Haz clic en el botón de puntos suspensivos en el panel derecho y elige la opción **Delete**.