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

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

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

Чтобы перейти в редактор шаблона - на странице Страница группы фидов выберите уже загруженный шаблон или нажмите кнопку “Создать новый шаблон”

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

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

• Название шаблона и выбор данных из фида для превью
• Загрузить слой статичных элементов (Подробнее в Слой статичных элементов)
• Управление слоем изображений (Подробнее в Слой изображения)
• Управление текстовым слоем (Подробнее в Текстовый слой)
• Управление условным слоем (Подробнее в Условный слой)

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

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

1. Название шаблона меняется в соотвествующем поле.

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

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

   Если в группе фидов несколько фидов - для превью всегда будет использоваться первый по счету, из настроек группы

3. Нажмите “Получить данные”, чтобы подгрузить информацию по нужному офферу в редактор

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

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

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

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

1. Выберите тег из фида, в котором лежит ссылка на изображение товара, в поле “Тег из фида”
2. Опционально - включите функцию “Удалить фон”. Подробнее см. Удаление фона
3. Для того чтобы превью в редакторе обновилось - нажмите кнопку “Обновить превью”. Все предыдущие настройки будут применены к текущему превью.
4. Добейтесь желаемого расположения товара в дизайне баннера с помощью “Параметры img_area” (изображения товара):

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

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

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

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

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

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

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

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

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

Цена от <price>

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

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

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

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

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

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

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

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

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

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

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