# Контент веб-попапа

**Контент веб-попапа** — это визуальный макет, который посетители видят, когда на вашем сайте появляется веб-попап. Создайте его в разделе **«Контент»**, а затем прикрепите к [кампании веб-попапов](/ru/product/messaging-channels/web-popups/create-web-popups-campaigns/).

## Создание контента веб-попапа

1. Перейдите в **Контент** → **Контент веб-попапа**.
2. Нажмите **«Создать контент веб-попапа»**.
3. Выберите стартовый шаблон из галереи.

<img src="/content-web-popups-content-1.webp" alt="Галерея шаблонов веб-попапов, показывающая стартовые шаблоны модального окна, изображения, нижней панели и многостраничного тура по продукту"/>
4. После выбора шаблона настройте попап в редакторе.

### Название попапа

Нажмите на название попапа в верхней панели, чтобы его отредактировать. Это название идентифицирует данный контент в Pushwoosh, в списке контента и в мастере кампаний. Посетители сайта его не видят.

### Редактирование настроек попапа

Настройте внешний вид и положение попапа в панели настроек слева от холста:

<Aside type="note">
Эти настройки управляют только дизайном попапа. Аудитория, таргетинг на страницы, задержка, частота и настройки запуска настраиваются в [кампании веб-попапов](/ru/product/messaging-channels/web-popups/create-web-popups-campaigns/#start-a-new-campaign).
</Aside>

#### Изображения

Если макет содержит одно или несколько изображений, каждое из них получает свой собственный блок в верхней части панели с предпросмотром и элементами управления.

Нажмите **«Изменить изображение»**, чтобы выбрать файл из [хранилища медиафайлов](/ru/product/content/media-store/) вашего проекта.

<img src="/content-web-popups-content-2.webp" alt="Раздел настроек попапа с пустым предпросмотром изображения и кнопкой «Изменить изображение» в редакторе веб-попапов"/>

Под предпросмотром:

- **Как вписать:** как изображение заполняет свой фрейм: **Естественный**, **Покрытие** или **Вместить**. Не отображается для фонового изображения, которое всегда покрывает свою область.
- **Размытие:** смягчение изображения, от 0 до 20 пикселей.
- **Затемнение:** только для фоновых изображений. Добавляет темное затемнение поверх фотографии, чтобы текст, размещенный на ней, оставался читаемым, от 0 до 100%.

Некоторые макеты также добавляют раздел **Макет** с настройками размещения изображения:

- **Ширина изображения:** доля ширины попапа в процентах.
- **Позиция изображения:** **Слева** или **Справа**, для макетов с изображением рядом с текстом.

Раздел **Макет** появляется только тогда, когда текущий макет имеет подобные настройки. В макете с нижней панелью он предлагает **Ширину кнопок** вместо элементов управления изображением.

#### Размер и стиль попапа

В разделе **Попап**:

- **Ширина, Высота (пусто = авто):** оставьте оба поля пустыми, чтобы попап подстраивался под свой контент, или установите фиксированный размер в пикселях. В попапе с несколькими страницами каждая страница имеет свой собственный размер.
- **Радиус скругления, Тень:** скругление углов и тень попапа.
- **Анимация:** как появляется попап: **Нет**, **Появление** или **Выдвижение**.

<img src="/content-web-popups-content-3.webp" alt="Раздел «Попап» в панели настроек с элементами управления шириной, высотой, радиусом скругления, тенью и анимацией"/>

#### Цвета

Нажмите **Цвета**, чтобы развернуть цветовую палитру попапа:

- **Фон, Акцент (кнопки):** фон попапа и акцентный цвет, применяемый к кнопкам.
- **Текст, Второстепенный текст:** цвет основного текста и второстепенного текста, такого как подписи и надзаголовки.
- **Текст поверх изображения:** отображается только для макетов с текстом поверх фонового изображения. Устанавливает цвет, используемый для этого текста.

<img src="/content-web-popups-content-11.webp" alt="Развернутый раздел «Цвета», показывающий палитры для фона, акцента, текста, второстепенного текста и текста поверх изображения"/>

#### Размещение и наложение

В разделе **РАЗМЕЩЕНИЕ**:

- **Позиция:** выберите, где попап будет закреплен на странице, используя сетку 3×3.
- **Отступ от края:** установите расстояние в пикселях от выбранного края.

В разделе **НАЛОЖЕНИЕ**:

- **Затемнить страницу позади:** включите, чтобы затемнить остальную часть страницы во время отображения попапа.
- **Цвет, Непрозрачность:** установите цвет и непрозрачность наложения от 0 до 1.

<img src="/content-web-popups-content-4.webp" alt="Панель настроек веб-попапа с разделами POPUP, PLACEMENT и OVERLAY, включая сетку размещения и элементы управления наложением"/>

### Редактирование текста

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

- Примените **полужирный**, *курсивный* или подчеркнутый формат.
- Добавьте или удалите ссылку.
- Установите выравнивание по левому краю, по центру или по правому краю.
- Выберите стиль текста: **Иконка**, **Надзаголовок**, **Заголовок 1–3**, **Основной текст** или **Подпись**.

<img src="/content-web-popups-content-5.webp" alt="Выделенный текст на холсте веб-попапа с панелью инструментов для редактирования, показывающей элементы управления форматированием, выравниванием, ссылками и стилем"/>

### Редактирование кнопок

Нажмите на кнопку, чтобы открыть ее панель инструментов:

- Выберите стиль кнопки: **Основная** или **Второстепенная**.
- Выберите действие кнопки:
  - **Открыть ссылку:** введите целевой URL.
  - **Закрыть попап**.
  - **Перейти на страницу:** выберите другую страницу попапа для перехода. Эта опция появляется, когда у попапа больше одной страницы. См. [Работа с несколькими страницами](#work-with-multiple-pages).

<img src="/content-web-popups-content-8.webp" alt="Выделенная кнопка на холсте веб-попапа с открытой панелью инструментов для редактирования кнопки"/>

<Aside type="tip">
Когда текстовый блок или кнопка выбраны, используйте **+T** или **+B** на панели инструментов, чтобы добавить текстовый блок или кнопку под ним, стрелки вверх и вниз, чтобы перемещать его по странице, и значок удаления, чтобы удалить его. Последний оставшийся элемент на странице удалить нельзя.

Нажмите **+ Добавить** под попапом, чтобы добавить текстовый блок или кнопку в конец страницы.
</Aside>

## Работа с несколькими страницами

Веб-попап может иметь несколько страниц, например, чтобы провести посетителей через короткое многошаговое предложение.

### Добавление страницы

Нажмите **+ Добавить страницу**, чтобы открыть меню добавления страницы:

- **Дублировать текущую страницу:** копирует активную страницу, включая все внесенные вами изменения, как новую страницу.
- Выберите один из одностраничных макетов, чтобы добавить новую страницу с демонстрационным контентом этого макета. Новая страница независима от других, поэтому она может использовать другой макет.

<img src="/content-web-popups-content-6.webp" alt="Вкладки страниц редактора веб-попапов с несколькими страницами, маркером начальной страницы и кнопкой «Добавить страницу»"/>

<Aside type="note">
Примеры многостраничных макетов, такие как **Тур по продукту (многостраничный)**, всегда поставляются полным набором страниц, поэтому они доступны только из стартовой галереи, а не из этого меню.
</Aside>


Каждая вкладка — это одна страница. Нажмите на вкладку, чтобы переключиться на нее.

### Установка стартовой страницы

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

<img src="/content-web-popups-content-7.webp" alt="Вкладки страниц, показывающие маркер начальной страницы (звездочку) на одной вкладке и элемент управления удалением на активной вкладке"/>

### Удаление страницы

На активной вкладке нажмите **✕**. Откроется диалоговое окно подтверждения. Нажмите **Удалить**, чтобы удалить страницу. Это действие нельзя отменить.

<Aside type="note">
Кнопки с действием **Перейти на страницу**, указывающие на удаленную страницу, будут перенаправлять на **стартовую страницу**.
</Aside>

## Сохранение контента

Проверьте контент, изображения и действия кнопок. Когда закончите, нажмите **Сохранить** в верхней панели.

<Aside type="note">
Сохранение контента не отображает веб-попап на вашем сайте. Контент появится на сайте только после того, как вы выберете его в кампании веб-попапов и запустите кампанию.
</Aside>

## Использование контента в кампании

После сохранения контент появится в разделе **Контент** → **Контент веб-попапа**. Откройте его из списка, чтобы продолжить редактирование.

Чтобы показать его на сайте, перейдите в **Кампании** → **Веб-попапы**, создайте или отредактируйте кампанию и выберите этот контент на шаге **«Контент»**.

Затем настройте аудиторию, параметры отображения, частоту и опции запуска. Полный процесс описан в разделе [Создание кампаний веб-попапов](/ru/product/messaging-channels/web-popups/create-web-popups-campaigns/).