---
name: prtv-element-layout
description: Размещение и управление элементами на слайде в конструкторе вывесок PRTV (prtv.pro) — положение и размер перетаскиванием, поворот, глубина (слои), сохранение пропорций, постоянные элементы на всех слайдах, контекстное меню, перспектива (вписать элемент в наклонную рамку), анимация появления (57 пресетов), кликабельные ссылки для сенсорных киосков, правила вёрстки для ТВ (безопасная зона, шрифт по дистанции, контраст, палитра 60/30/10, движение). Использовать, когда нужно переместить, изменить размер, слой, анимацию или ссылку элемента или проверить композицию меню-борда или промо-слайда в prtv.pro. Triggers (EN) element layout, layers, entrance animation, clickable link, safe zone, TV slide composition.
license: CC-BY-4.0
metadata:
  author: PRTV (prtv.pro)
  product: Конструктор цифровых вывесок PRTV (prtv.pro)
  version: "1.2"
  date: "2026-10-10"
  language: ru
  scope: интерфейс редактора + чтение состояния страницы из DOM; без вызовов внутреннего API
---

# Раскладка элементов в конструкторе PRTV

У любого элемента на слайде PRTV — текста, картинки, видео, HTML-блока, информера — поверх его содержимого есть общий набор настроек: где он стоит, какого размера, в каком слое, повторяется ли на всех слайдах, как появляется и что происходит по нажатию. Этот скилл описывает эти настройки и правила раскладки элементов на телевизионном экране. Всё, что касается интерфейса, проверено в браузере, а не взято из документации. Холст, панели и система координат описаны в prtv-editor-overview — этот скилл на него опирается.

## 1. Положение, размер, поворот

**Числовых полей X / Y / ширина / высота нет.** Положение и размер задаются только перетаскиванием на холсте. Значения живут в пространстве слайда 1920×1080 и масштабируются под любой экран.

- **Новый элемент** появляется в левом верхнем углу слайда, в точке (0, 0), с размером по умолчанию (HTML-блок, например, — 400×200).
- **Перенос** — драг за *невыделенный* элемент. Драг по *выделенному* текстовому элементу открывает правку текста, а не двигает его; сначала Escape, потом драг.
- **Размер** — маркеры рамки выделения (`.moveable-control-box`). Самый надёжный — средний правый: нижние маркеры могут оказаться ниже видимого края окна браузера.
- **Поворот** — поле в панели элемента, 0–360° с шагом.
- **Сохранять пропорции** — тумблер в панели элемента; у картинок включён по умолчанию, поэтому ресайз картинки держит соотношение сторон, пока тумблер не выключить.
- **Прозрачность, рамка, отступы, цвет и картинка фона** — там же, общие для всех типов.

### Как прочитать точную геометрию

Скриншот для позиций — неподходящий инструмент. Читайте узел элемента: значения уже в пикселях слайда.

```js
const el = document.getElementById('slide-element-<id>');
const s = getComputedStyle(el);
({ left: s.left, top: s.top, width: s.width, height: s.height, depth: s.zIndex });
```

Инвентаризация всего слайда (id, типы, позиции, глубина каждого элемента) — через локальное хранилище только для чтения, описанное в prtv-editor-overview.

### Точный драг

Координаты слайда переводятся в экранные через масштаб и смещение из prtv-editor-overview (экран = смещение + масштаб × слайд). Перенос — одно нажатие, движение, отпускание, с паузой между шагами. После отпускания перечитать геометрию из DOM и при необходимости поправить вторым драгом. Не кликать сериями «на всякий случай»: лишний клик по элементу превращается в драг и уносит его за пределы слайда.

## 2. Глубина — слои

**Глубина** — это z-index элемента: степпер в панели элемента. Чем больше глубина, тем ближе к зрителю. Фон слайда (цвет, картинка или видео из настроек слайда) рисуется на глубине 0 и сам ничего не прячет; содержимое лежит на глубине ≥ 1.

Кнопка верхней панели с иконкой картинки открывает список элементов текущего слайда по глубине — самый быстрый способ увидеть стопку слоёв, не перебирая элементы кликами.

Раскладка, которая работает на практике:

| Глубина | Слой |
|---|---|
| 0 | фоновая картинка или видео (растянутый элемент «Картинка», когда поверх фона нужны эффекты) |
| 1 | атмосфера: небо, ветер, частицы (HTML-блоки) |
| 2–10 | основной контент: тексты, фото блюд, карточки |
| 11–16 | перекрывающие слои: плашки, тонировка, экранные эффекты |
| 20 | текст, который должен остаться поверх плашки |

Два следствия:

- Чтобы объект «выезжал из-под» детали фона, эту деталь надо перекрыть непрозрачной плашкой с глубиной выше движущегося элемента. Сам фон ничего перекрыть не может.
- Полупрозрачная тонировка всего кадра — это элемент с полупрозрачной заливкой, растянутый на 1920×1080, с глубиной между фоном и контентом.

Групп и блокировки в редакторе нет; слои настраиваются поэлементно.

## 3. Постоянные элементы и действия с элементом

**Постоянный элемент** (Нет / Да) в панели элемента показывает элемент на каждом слайде слайд-шоу — инструмент для логотипа, часов или бегущей строки, которые не должны уходить с экрана. Это ближайший аналог «закрепления»; отдельной блокировки нет. В том же блоке «Общие настройки» есть тумблер «На всех слайдах», который делает то же для ротации, и селект «Позиция» («Под всеми» = нижний слой) рядом с числовой «Глубиной»; их состояние читать из панели, а не предполагать. Постоянный элемент появляется на новых слайдах сам, а дублирование слайда копирует и постоянные элементы — см. prtv-agent-rules.

Действия внизу панели элемента: снять выделение (✕), **дублировать**, **удалить** (корзина). Мини-панель рядом с выделенным элементом на холсте повторяет корзину и для картинок добавляет **кадрирование**.

Дублирования, удаления и глубины в контекстном меню *нет* — искать их в панели.

## 4. Контекстное меню элемента (правый клик)

Семь пунктов, одинаковых для всех типов элементов:

| # | Пункт | Что происходит |
|---|---|---|
| 1 | Сделать кликабельным | Открывает окно ввода ссылки (§6). Если ссылка уже есть, пункт называется **Удалить ссылку** и снимает её сразу. |
| 2 | Настройки стиля элемента | Открывает панель элемента. |
| 3 | Настройки анимации элемента | Открывает окно анимации (§5). |
| 4 | Включить сбор статистики | Тумблер: аналитика по элементу. |
| 5 | Сделать рекламным элементом | Часто приглушён; условия, при которых пункт доступен, здесь не описаны. |
| 6 | Включить режим работы с перспективой | Тумблер: углы элемента можно тянуть по отдельности — элемент вписывается в любой четырёхугольник (§4.1). |
| 7 | Включить режим масштабирования | Тумблер. |

Пункты 4, 5 и 7 включают режимы, видимый эффект которых для этого скилла не разбирался; не трогать их, если задача этого не требует.

### 4.1. Перспектива

Штатный способ положить картинку или информер в наклонную рамку — рекламный щит, экран на стене, фасад на фоновом фото:

1. Поставить элемент примерно поверх рамки и растянуть по её размеру; пропорция элемента ≈ пропорции рамки «в лоб».
2. Правый клик по элементу → **«Включить режим работы с перспективой»**.
3. Тянуть углы элемента по одному к углам рамки; холст перед этим увеличить.
4. Проверить в предпросмотре: углы совпадают, текст читается. Перспектива действует на всё содержимое, включая iframe информера; на браузерах ТВ проверять отдельно.

CSS-трансформации в коде HTML-блока для этого не нужны. Готовые мокапы (щит, ТВ в интерьере, экраны на фасадах) — prtv-design-mockups.

Правый клик по *пустому* месту холста открывает настройки слайд-шоу по умолчанию (стили новых слайдов и элементов), а не меню элемента.

## 5. Анимация появления

Открывается из контекстного меню (пункт 3) или из блока «Анимация» в панели элемента — это одна и та же настройка.

| Поле | По умолчанию |
|---|---|
| Тип | выпадающий список, 57 пресетов |
| Задержка, мс | 0 |
| Скрыть до начала | выкл. |
| Длительность, мс | 500 |
| Количество повторов | 1; **0 = бесконечный повтор** |

Настройка у элемента одна, раздельных «вход» и «выход» нет — характер задаёт сам тип. При количестве повторов 1 пресет — **эффект появления**, отыгрывает один раз при показе слайда; при **0 он повторяется всё время показа слайда** — так делается пульсирующий бейдж цены или мигающий акцент без единой строки кода. Циклы ограничены формами пресетов; для своего непрерывного движения (блик по тексту, парение, транспарант за самолётом) используйте HTML-блок — см. prtv-html-block-animation.

### 57 пресетов, как они подписаны в редакторе

- **Без эффекта.**
- **Появление** слева / справа / сверху / снизу.
- **Затухание** влево / вправо / вверх / вниз.
- **Выезд** слева / справа / сверху / снизу.
- **Сдвиг** влево / вправо / вверх / вниз.
- **Разворот** — две группы: откуда (слева / справа / сверху / снизу) и куда (влево / вправо / вверх / вниз).
- **Качели** — те же две группы по четыре.
- **Вылет** слева / справа / сверху / снизу.
- **Улет** влево / вправо / вверх / вниз.
- **Пояление-2** слева / справа — второй вариант появления (подпись именно в таком написании).
- **Исчезновение** влево / вправо.
- **Выпадание**, **Падение**.
- **Увеличение**, **Уменьшение**.
- **Приближение**, **Отдаление**.
- **Вспышка**.
- **Тряска** горизонтальная / вертикальная, **Встряска**.
- **Пульс**.
- **Сплющивание**.
- **Подсветка**.

### Проверка анимации

Скриншот не передаёт движение. Откройте предпросмотр (кнопка «глаз» в верхней панели) и дождитесь хотя бы одной полной длительности слайда; публичная страница ТВ — вторичная проверка. Для покадрового разбора CSS-анимации её ставят на паузу и перематывают `currentTime` через `getAnimations()` — фрагмент есть в prtv-html-block-animation.

### Правила движения

- Появление ≤ 2–4 с, потом неподвижная пауза для чтения ≥ 5 с.
- Не больше **одного** движущегося элемента в кадре одновременно. Несколько движений сразу конкурируют за внимание и в итоге игнорируются.
- Анимация — функция: она подводит взгляд к новой позиции или акции. Если убрать её и слайд ничего не потерял, она не нужна.

## 6. Кликабельные элементы — ссылки для сенсорных киосков

Правый клик → **Сделать кликабельным** открывает небольшое окно: заголовок PRTV, подпись «Введите ссылку для открытия по клику», **одно текстовое поле**, Отменить / Ок. Ссылку можно повесить на элемент любого типа (проверено на картинке и тексте). Выбора типа действия нет — что произойдёт, определяется тем, что вписано.

Подтверждено:

- **Внешний URL** (`https://…`) — открывается по нажатию в плеере / на экране киоска. Базовый сценарий: сайт заведения, страница меню, форма, промо-лендинг.
- **Публичный адрес другого слайд-шоу PRTV** — нажатие переключает экран на это слайд-шоу. Так строится «меню витрин»: экран-лендинг → нажатие → другое шоу.

Не подтверждено: переход на конкретный слайд *внутри того же слайд-шоу*. Такой опции в окне нет, а понимает ли плеер номер слайда, вписанный в поле, не проверялось. Пока это так, «страницы» киоска собираются как **отдельные слайд-шоу**, связанные ссылками на публичные адреса друг друга — этот путь работает.

Снять ссылку: правый клик → **Удалить ссылку**.

## 7. Правила раскладки для экрана 1920×1080

Правила собраны на реальных меню-бордах и из вещательной практики. Они сформулированы как проверки, а не пожелания.

**Безопасная зона — жёсткое условие, не вкус.** Многие телевизоры по умолчанию обрезают край кадра (overscan). Всё смысловое — текст, цену, логотип, QR-код — держать не ближе **96 px** к левому и правому краю и **60 px** к верхнему и нижнему (вещательная title-safe зона — 90 % кадра; здесь чуть строже). Декор может доходить до края.

**Сетка.** Внутри безопасной зоны — логическая сетка на 12 колонок; элементы выравниваются по ней, а не по случайным пиксельным координатам. Одинаковые промежутки между карточками и одинаковая высота строк внутри секции — разный интервал первым выдаёт сырую сборку.

**Кегли** (в пространстве 1920, для зрителя примерно в 3 м): заголовки ≥ 110–120 px, основной текст ≥ 44 px, подписи ≥ 40 px. Касса или прилавок (1,5–2 м): основной текст можно опустить до 36–40 px, не ниже. Зал или фудкорт (4–5 м): верхняя граница диапазона или больше — примерно от 70 px на 5 м.

**Текстовым боксам нужен запас.** Надёжной формулы «кегль × число символов = ширина» для родного текста редактора нет: типографские оценки получаются заниженными, и текст переносится или обрезается. Закладывайте бокс на 30–40 % шире наивного расчёта; чуть меньший кегль лучше, чем перенос или обрезанная строка. Однострочный заголовок внутри HTML-блока дополнительно можно застраховать через `white-space: nowrap`.

**Иерархия** держится минимум на двух параметрах сразу (размер + вес, размер + цвет, размер + позиция), никогда на одном размере. Тест трёх секунд: закрыть слайд через три секунды — главное сообщение (позиция и цена или акция) должно вспомниться без остального.

**Цвет.** Одна палитра на всё слайд-шоу, примерно 60 % доминирующего / 30 % вторичного / 10 % акцентного. Акцент — самый яркий цвет, и появляется он только в точке принятия решения: цена, призыв к действию, бейдж «новинка». Размазанный по пяти элементам акцент перестаёт быть акцентом. Контраст текста с фоном: около 4,5:1 для основного текста, 3:1 для крупных заголовков.

**Тексту поверх фото нужен scrim.** Либо тёмная полупрозрачная плашка под текстом, либо затемнение всего кадра на 20–30 %; без этого ни один цвет шрифта не даёт читаемого контраста. В PRTV это делается RGBA-фоном текстового элемента (тёмный цвет с непрозрачностью около 70 % сработал на живой сборке) или полупрозрачным элементом, растянутым на кадр (§2). Текст на фото к тому же должен быть жирнее текста на ровном фоне — лёгкие начертания тонут в фактуре.

**Карточки.** Скруглённые углы плюс мягкая тень или тонкая обводка — иначе это залитый прямоугольник, а не карточка. Одна карточка заметно выделена (топ-позиция или акция), остальные — единый ряд, но не монотонный. Не больше одной-двух выделенных позиций на слайд: выделение работает только на спокойном фоне. У каждого смыслового блока — фото или иконка; текстовый блок без визуального якоря — недособранный слайд. Плашка заголовка сцеплена с сеткой контента (нулевой или минимальный зазор, общая рамка), а не висит над ним.

**Воздух.** Пустая зона — либо композиционный приём, либо ошибка; третьего не бывает.

**Один визуальный якорь на слайд** — hero-фото или топ-позиция, а не равномерно размазанное по сетке внимание.

**Проверять глазами.** Раскладка не готова, когда правка «прошла»; она готова, когда её показал предпросмотр. Переносы, обрезки и пропавший фон находятся взглядом, а не отсутствием ошибок. Пользовательские шрифты проверять в предпросмотре или на телевизоре, а не только в редакторе — рендер там разный.

### Короткий чек-лист перед сдачей слайда

- [ ] На слайде не осталось плейсхолдеров и текста «TODO».
- [ ] Всё смысловое внутри безопасной зоны (96 / 60 px).
- [ ] Кегли соответствуют дистанции точки установки.
- [ ] Иерархия на двух параметрах; тест трёх секунд пройден.
- [ ] Одна палитра, примерно 60/30/10; акцент только в точках решения.
- [ ] Ни один текст не переносится и не обрезается — проверено в предпросмотре.
- [ ] У текста поверх фото есть scrim.
- [ ] Карточки: единый ритм, скругление + тень, одна выделена.
- [ ] Не больше одного движущегося элемента одновременно; появление ≤ 4 с, пауза ≥ 5 с.
- [ ] Палитра и стиль карточек одинаковы на всех слайдах цикла.

## Чего не делать

- Не искать поля координат — их нет — и не снимать координаты со скриншота.
- Не тянуть выделенный текстовый элемент в расчёте на перенос: откроется правка текста.
- Не искать в контекстном меню дублирование, удаление и глубину — они в панели элемента.
- Не собирать своё непрерывное движение из пресетов — повтор 0 зацикливает пресет как есть; всё своё живёт в HTML-блоке.
- Не запускать несколько анимированных элементов одновременно.
- Не оставлять текст, цены и логотипы ближе 96 / 60 px к краям.
- Не обещать навигацию по слайдам внутри одного шоу на киоске; связывать отдельные слайд-шоу.
- Не оставлять случайно включёнными тумблеры статистики / рекламы / масштабирования; перспективу включать только для вписывания в рамку.
- Не считать правку через DOM сохранённой — перезагрузить и перечитать.

## Связанные скиллы

prtv-editor-overview · prtv-slide-settings · prtv-text-element · prtv-html-block-animation · prtv-video · prtv-widgets · prtv-design-mockups · prtv-agent-rules