---
title: "Управление элементами интерфейса пейвола"
description: "Настраивайте элементы интерфейса пейвола и управляйте ими для улучшения пользовательского опыта."
---

После выбора шаблона его элементы отображаются на левой панели. Используйте эту панель для организации элементов пейвола. Элементы будут отображаться на пейволе в том же порядке, что и на левой панели.

:::warning

Этот раздел описывает новый Paywall Builder, который работает с iOS, Android и React Native SDK версии 3.0 и выше, а также Flutter и Unity SDK версии 3.3.0 и выше. Информацию о предыдущей версии Paywall Builder, совместимой с Adapty SDK v2.x и более ранними версиями, см. в разделе [Legacy Paywall Builder](adapty-paywall-builder-legacy).

:::

## Добавление элемента \{#add-element\}

Чтобы добавить элемент на пейвол выше макета:

1. Нажмите кнопку **Add Element** на левой панели.
2. Выберите нужный элемент. Новый элемент появится в списке выше **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 */
  }}
/>

Чтобы добавить элемент в составной элемент:

1. Нажмите кнопку **Plus** рядом с составным элементом.
2. Выберите элемент, который хотите добавить.

  <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 */
  }}
/>

## Переименование элемента пейвола \{#rename-paywall-element\}

Чтобы переименовать элемент:

1. Нажмите на элемент на левой панели, чтобы открыть его настройки.

  <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. Нажмите кнопку с многоточием на правой панели и выберите опцию **Edit**.

3. Введите новое имя элемента и нажмите **Enter**.

## Дублирование элемента \{#duplicate-element\}

Чтобы дублировать элемент:

1. Нажмите на элемент на левой панели, чтобы открыть его настройки.

  <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. Нажмите кнопку с многоточием на правой панели и выберите опцию **Duplicate**.

Дублированный элемент с добавлением «Copy» к его названию появится на левой панели как точная копия оригинала.

## Перемещение элемента \{#move-element\}

Чтобы переместить элемент, перетащите его на новое место в макете или внутри составного элемента.

Фиолетовая линия указывает на доступную позицию для элемента, красная — на недоступную.

  <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 */
  }}
/>

## Скрытие и отображение элемента \{#hide--show-element\}

Созданный и настроенный элемент можно временно скрыть с пейвола. Это удобно, если вы планируете добавить его позже, не теряя настроек. После скрытия элемента пейвол выглядит так, будто его никогда не было: все выравнивания и отступы пересчитываются и перерисовываются.

Чтобы скрыть элемент:

1. Нажмите на элемент на левой панели, чтобы открыть его настройки.

2. Нажмите кнопку с многоточием на правой панели и выберите опцию **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 */
  }}
/>

Скрытый элемент отмечен как в основной панели — в виде заметки, так и на левой панели при его выборе.

  <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 */
  }}
/>

Чтобы снова показать элемент, нажмите кнопку с многоточием на правой панели и выберите опцию **Show**.

## Удаление элемента \{#delete-element\}

Чтобы удалить элемент с пейвола:

1. Нажмите на элемент на левой панели, чтобы открыть его настройки.

  <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. Нажмите кнопку с многоточием на правой панели и выберите опцию **Delete**.