> ## Documentation Index
> Fetch the complete documentation index at: https://tolty.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Редактор шаблона

> Интерфейс для редактирования графических шаблонов в Tolty

Редактор шаблона в Tolty позволяет внести правки в SVG-файл из Figma.

Чтобы перейти в редактор шаблона - на странице [Страница группы фидов](/feed-page) выберите уже загруженный шаблон или нажмите кнопку "Создать новый шаблон"

<img src="https://mintcdn.com/tolty/lR1SDutsjwbOwN2B/cJQRiR66sa.png?fit=max&auto=format&n=lR1SDutsjwbOwN2B&q=85&s=b2831102bffdd042589a257a613c081d" alt="Общий вид редактора шаблонов" width="1892" height="788" data-path="cJQRiR66sa.png" />

Если вы импортируете новый шаблон - откроется окно импорта:

<img src="https://mintcdn.com/tolty/lR1SDutsjwbOwN2B/images/BdCN8vgNwp.png?fit=max&auto=format&n=lR1SDutsjwbOwN2B&q=85&s=0eb9558db42c6f03287176dbbbf7273f" alt="Bd Cn8vg Nwp Pn" width="1911" height="918" data-path="images/BdCN8vgNwp.png" />

После вы попадете на экран редактора, в котором вам доступен следующий функционал:

* Название шаблона и выбор данных из фида для превью
* Загрузить слой статичных элементов (Подробнее в [Слой статичных элементов](/static-layer))
* Управление слоем изображений (Подробнее в [Слой изображения](/pictures-layer))
* Управление текстовым слоем (Подробнее в [Текстовый слой](/text-layer))
* Управление условным слоем (Подробнее в [Условный слой](/conditional-layers))

Вы можете экспериментировать с любыми настройками, и видеть как меняется внешний вид шаблона. Это не будет влиять на текущие фиды в группе фидов. Чтобы применить настройки в редакторе - нажмите "Сохранить"

## Название и превью

<img src="https://mintcdn.com/tolty/sT9EOvtrNfRictaw/gXHjZVfWmb.png?fit=max&auto=format&n=sT9EOvtrNfRictaw&q=85&s=49bdfe5ece4daf4cba1b9be42e8420a2" alt="Панель названия шаблона и выбора данных для превью" width="1526" height="807" data-path="gXHjZVfWmb.png" />

1. Название шаблона меняется в соотвествующем поле.
2. Выберите, какой оффер из фида подтянуть в превью слева. Доступны варианты:

   * **Первый id** - в превью попадет первый оффер в фиде
   * **Конкретный id** - в превью попадет тот оффер, id которого вы укажите
   * **Подобрать самые длинные данные** - в превью попадет тот оффер, текстовые данные которого являются самыми длинными по количеству символов

   *Если в группе фидов несколько фидов - для превью всегда будет использоваться первый по счету, из настроек группы*
3. Нажмите "Получить данные", чтобы подгрузить информацию по нужному офферу в редактор

## Загрузка слоя статичных элементов

<img src="https://mintcdn.com/tolty/sT9EOvtrNfRictaw/VExHRV3TT7.png?fit=max&auto=format&n=sT9EOvtrNfRictaw&q=85&s=f9388d55f14e3dde6407d484ee7f9f8a" alt="Область загрузки слоя статичных элементов" width="1434" height="790" data-path="VExHRV3TT7.png" />

Экспортируйте статичный дизайн из Figma и загрузите его в слой статичных элементов.
Слой статичных элементов - это как правило фон, либо дизайн, который не меняется от оффера к офферу.

В примере мы добавили статичный слой синего фона

<img src="https://mintcdn.com/tolty/sT9EOvtrNfRictaw/images/E8KSWScpK3.png?fit=max&auto=format&n=sT9EOvtrNfRictaw&q=85&s=d7d62298999fa00e5ff844a202cf29ac" alt="E8KSW Scp K3 Pn" width="1522" height="798" data-path="images/E8KSWScpK3.png" />

## Слои изображений

<img src="https://mintcdn.com/tolty/sT9EOvtrNfRictaw/gLWbnvoxpc.png?fit=max&auto=format&n=sT9EOvtrNfRictaw&q=85&s=fa2c872ea51e9141948b092490bb18a4" alt="Настройки слоя изображений" width="1479" height="813" data-path="gLWbnvoxpc.png" />

1. Выберите тег из фида, в котором лежит ссылка на изображение товара, в поле "Тег из фида"
2. Опционально - включите функцию "Удалить фон". Подробнее см. [Удаление фона](/background-removal)
3. Для того чтобы превью в редакторе обновилось - нажмите кнопку "Обновить превью". Все предыдущие настройки будут применены к текущему превью.
4. Добейтесь желаемого расположения товара в дизайне баннера с помощью "Параметры img\_area" (изображения товара):

* Изменяйте размеры изображения (цифры в пикселях)

<img src="https://mintlify.s3.us-west-1.amazonaws.com/tolty/images/Pasted%20image%2020250916122046.png" alt="Настройки размера изображения" />

* Изменяйте расположение изображения по осям X и Y

<img src="https://mintlify.s3.us-west-1.amazonaws.com/tolty/images/Pasted%20image%2020250916122158.png" alt="Настройки положения изображения по осям X и Y" />

* Примените выравнивание по горизонтали или вертикали если необходимо:

<img src="https://mintlify.s3.us-west-1.amazonaws.com/tolty/images/Pasted%20image%2020250916122309.png" alt="Опции выравнивания изображения" />

## Текстовые слои

Нажмите тот текстовый слой, который необходимо отредактировать (предварительно можно включить показ названий слоев в превью)

<img src="https://mintlify.s3.us-west-1.amazonaws.com/tolty/images/Pasted%20image%2020250916122723.png" alt="Текстовые слои на превью шаблона" />

Откроется окно с настройками текстового слоя:

<img src="https://mintcdn.com/tolty/vtatqhJD8wd2Mn78/kYOfLGQ1Oo.png?fit=max&auto=format&n=vtatqhJD8wd2Mn78&q=85&s=2cb4c9551e8dc7b0dd93b8a39087353a" alt="Окно настроек текстового слоя" width="1502" height="787" data-path="kYOfLGQ1Oo.png" />

1. В поле "Содержимое" вы можете:

* Ввести свой текст
* Указать тег из фида, из которого будут подставляться значения. (в примере выбран тег \<custom\_label\_2>)

<img src="https://mintlify.s3.us-west-1.amazonaws.com/tolty/images/Pasted%20image%2020250916123852.png" alt="Поле выбора тега из фида" />

* Указать свой текст + динамическое значение из тега. Например:

```
Цена от <price>
```

<img src="https://mintlify.s3.us-west-1.amazonaws.com/tolty/images/Pasted%20image%2020250916124013.png" alt="Пример комбинированного текста с динамическим значением" />

2. Настройки для управления шрифтом:
   * Поменять шрифт
   * Изменить толщину
   * Размер шрифта

<img src="https://mintlify.s3.us-west-1.amazonaws.com/tolty/images/Pasted%20image%2020250916124319.png" alt="Настройки шрифта и его характеристик" />

3. Управление областью текста:
   * Изменить количество строк
   * Максимальная ширина строк
   * Максимальное число символов

<img src="https://mintlify.s3.us-west-1.amazonaws.com/tolty/images/Pasted%20image%2020250916124533.png" alt="Настройки области текста" />

4. Управление форматированием текста
   * Высота строки в %
   * Межбуквенный интервал
   * Выравнивание
   * Позиция текстовой области на баннере
   * Прозрачность в %
   * Цвет текста

<img src="https://mintlify.s3.us-west-1.amazonaws.com/tolty/images/Pasted%20image%2020250916124805.png" alt="Настройки форматирования текста" />

## Условия показа

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

В фиде custom\_label\_3 имеет значение True - если круиз с возвращением в город отплытия, и False если без возвращения.

<img src="https://mintcdn.com/tolty/kqNxgaaqMH2ZZLSS/images/image.png?fit=max&auto=format&n=kqNxgaaqMH2ZZLSS&q=85&s=df7c5aa55be2be2f88a45a59d99f0a6e" alt="image.png" width="786" height="168" data-path="images/image.png" />

В дизайне мы заложили два варианта - для 1 города и для 2 городов:

<img src="https://mintcdn.com/tolty/rMswTokTGtWWim9c/z4bQOmB7cc.png?fit=max&auto=format&n=rMswTokTGtWWim9c&q=85&s=a156cdd1320e09e788dddaa275bfa81b" alt="R P3s14q1vh Pn" width="1086" height="551" data-path="z4bQOmB7cc.png" />

Для того чтобы настроить правильно отображение в зависимости от значений - перейдите к блоку условия показа:

<img src="https://mintcdn.com/tolty/rMswTokTGtWWim9c/vGUY9ofIaO.png?fit=max&auto=format&n=rMswTokTGtWWim9c&q=85&s=54ab54958469751bd59f8880f3f3ba74" alt="K Ps Mj Nly AR Pn" width="1458" height="772" data-path="vGUY9ofIaO.png" />

Например, слой для круизов с возвращением - 1\_city будет показываться при условии что в теге custom\_label\_3 в фиде будет значение True (когда два города одинаковые)

<img src="https://mintcdn.com/tolty/t0v0AuZzFU7Nh0oU/VSie0nUigV.png?fit=max&auto=format&n=t0v0AuZzFU7Nh0oU&q=85&s=b01cc672335ce0de19c8c56370083b57" alt="Gyg BY Hi5pe Pn" width="1480" height="787" data-path="VSie0nUigV.png" />

А слой для двух городов круиза 2\_citites будет показываться если custom\_label\_3 равен False (два города разные)

В превью используется первый оффер, у которого следующие теги:

<img src="https://mintcdn.com/tolty/t0v0AuZzFU7Nh0oU/images/0QfeqgR3Y8.png?fit=max&auto=format&n=t0v0AuZzFU7Nh0oU&q=85&s=5f5c66eb7afbd78e1e2938b3eeb70c21" alt="0qfeqg R3Y8 Pn" width="879" height="197" data-path="images/0QfeqgR3Y8.png" />