Личный кабинет TIQR
Раздел Оформление

Раздел Оформление — это инструмент для настройки визуальных стилей и структуры шаблонов страниц, используемых в системе. Этот раздел позволяет пользователям создавать и редактировать стили текста, блоков, страниц и т.п., а также разрабатывать шаблоны страниц электронных билетов, приглашений и т.п.

Основные особенности:

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

• Визуальный Конструктор страниц-шаблонов позволяет легко создавать и изменять структуру шаблонов.

• Применение единых стилей и шаблонов обеспечивает согласованность дизайна для разных применений

• Возможность использования готовых шаблонов и стилей упрощают процесс работы с шаблонами

Доступ к разделу Оформление

1. Авторизуйтесь в личном кабинете TIQR.RU.

2. Перейдите в меню Справочники и выберите пункт «Оформление».

3. Вы увидите 2 вкладки: Шаблоны и Стили оформления.

Вкладка Шаблоны

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

Возможные действия с Шаблонами страниц:

• Создание и редактирование параметров шаблонов страниц

• Удаление шаблонов

• Копирование шаблонов из существующих

• Редактирование структуры шаблонов в Конструкторе - смотрите в разделе Конструктр шаблонов.

Вкладка Стили оформления

Раздел предназначен для управления списком и содержимым стилей оформления, которые в свою очередь применяются в шаблонах страниц.

Возможные действия со стилями:

• Создание и редактирование стилей страниц (шрифты, размеры, цвета, выравнивание), текста (шрифты, размеры, цвета, выравнивание), изображений (размеры, выравнивание) и блоков данных (выравнивание)

• Удаление стилей

• Копирование стилей из существующих

Типы стилей оформления

Доступные типы стилей оформления: * Стиль страницы * Стиль CSS * Стиль текста * Стиль блока * Стиль блока ссылки * Стиль изображения

1. Стиль страницы - это глобальный стиль, определяющий общие правила для всей страницы (body). Включает фоновые параметры (цвет, изображение, повтор, позиция), основные отступы, шрифт по умолчанию (если не переопределен вложенными стилями) и общую ширину/выравнивание контента.

2. Стиль текста - содержит набор параметров для форматирования символьного контента: гарнитура (веб-шрифты, системные семейства), размер, высота строки (интерлиньяж), цвет, насыщенность (жирность), начертание (курсив), регистр, подчеркивание/зачеркивание, межбуквенный интервал (кернинг), тени, отступы абзацев. Обеспечивает единообразие и читаемость текстовых элементов: заголовков, параграфов, подписей, кнопочных надписей. Используется для создания иерархии контента (H1, H2, обычный текст) и акцентного выделения (цитаты, важные сообщения).

3. Стиль блока - это стиль для оформление контейнеров (div, секция) как самостоятельной единицы. Включает: фоновый цвет/градиент/изображение, внутренние отступы (padding), внешние отступы (margin), границу (border, радиус скругления), тень (box-shadow), режим отображения (display: block, flex, grid), позиционирование (relative, absolute), выравнивание содержимого. Предназначен для структурирования страницы на независимые визуальные зоны: шапка, футер, колонки, карточки товаров/услуг. Позволяет создавать расстояния между элементами и управлять их взаимным расположением.

4. Стиль блока ссылки - специализированный стиль для интерактивных блоков, которые целиком являются ссылкой (например, карточка услуги, анонс мероприятия). Включает все свойства обычного блока + состояния ссылки (обычное, при наведении/hover, активное/active, посещенное/visited). Может задавать курсор, эффекты перехода (transition), изменение фона или тени при наведении. Сделать кликабельным целый блок (не только текст внутри него). Обеспечивает обратную связь при наведении мыши (подсветка, масштабирование) и улучшает UX (понятно, что блок интерактивен). Отличие от «Стиля текста» — здесь настраивается именно вся площадь блока-ссылки.

5. Стиль изображения - для оформления графических элементов (тег img, фоновые картинки блоков). Параметры: размеры (ширина, высота, object-fit — cover/contain), скругление углов, рамка, тень, прозрачность, эффекты при наведении, позиционирование внутри блока, отступы. Предназначен для унификации оформления внешнего вида всех иллюстраций, логотипов, иконок, фото товаров или афиш. Позволяет задать пресеты для изображений: аватар (круглое), карточка товара (прямоугольник с обрезкой по центру), баннер (на всю ширину) или логотип (фиксированный размер с отступами).

6. Стиль CSS - это стиль для определения кастомных CSS-правил, не ограниченное стандартными типами стилей. Позволяет прописывать селекторы, псевдоклассы, анимации, медиазапросы, трансформации и любые другие свойства, которые не вошли в стандартные настройки. Обеспечивает полную гибкость и доработку шаблона под нестандартные задачи (например, скрыть элементы, добавить интерактив, адаптировать верстку под конкретные разрешения, переопределить стандартные стили модуля).

Создание и редактирование стиля

1. Для создания нового стиля - нажмите кнопку Новый стиль (или нажмите кнопку Копировать напротив нужного стиля) и выберите тип нового создаваемого стиля из доступных:

2. В новом окне откроется форма со списком полей, соответствующим типу стиля.