Создание модулей

Как создавать и сохранять переиспользуемые компоненты

Что такое модули?

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

Преимущества модулей:

  • Экономия времени — не нужно создавать одинаковые элементы заново
  • Единообразие — использование одних и тех же компонентов во всех шаблонах
  • Синхронизация — при изменении модуля все шаблоны обновляются автоматически
  • Командная работа — модули доступны всем участникам workspace

Создание модуля из блока

Шаг 1: Создайте и настройте блок

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

Шаг 2: Сохраните как модуль

  1. Выделите блок, который хотите сохранить
  2. В правой панели найдите кнопку "Сохранить как модуль" или используйте контекстное меню
  3. Введите название модуля (например, "Кнопка CTA - Синяя")
  4. Добавьте описание (опционально) — поможет другим понять назначение модуля
  5. Выберите категорию или создайте новую (например, "Кнопки", "Заголовки", "Футеры")
  6. Нажмите "Сохранить"

Шаг 3: Модуль готов к использованию

После сохранения модуль появится в библиотеке модулей в левой панели редактора. Вы можете использовать его в любом шаблоне workspace.

Создание модуля из контейнера

Контейнеры с несколькими колонками и заполненным контентом также можно сохранять как модули. Это полезно для создания стандартных раскладок:

  1. Создайте контейнер с нужным макетом (например, 2 колонки)
  2. Заполните колонки контентом (изображения, текст, кнопки)
  3. Настройте стили контейнера и всех элементов
  4. Выделите контейнер (кликните на пустое место внутри него)
  5. Нажмите "Сохранить как модуль"
  6. Укажите название, описание и категорию
  7. Сохраните

Создание модуля из полосы

Целые полосы можно сохранять как модули. Это идеально для создания стандартных секций:

  • Шапки — стандартная шапка с логотипом и навигацией
  • Герой-секции — приветственные блоки с изображением и текстом
  • Футеры — подвалы с контактами и ссылками
  • Секции продуктов — стандартные блоки для описания товаров
  1. Создайте и настройте полосу со всем содержимым
  2. Выделите полосу (кликните на пустое место внутри неё)
  3. Нажмите "Сохранить как модуль"
  4. Заполните информацию о модуле и сохраните

Настройки модуля

Название

Выберите понятное и описательное название. Хорошие примеры:

  • ✅ "Кнопка CTA - Синяя"
  • ✅ "Заголовок H1 - Темный"
  • ✅ "Шапка с логотипом"
  • ❌ "Модуль 1"
  • ❌ "Блок"

Описание

Описание помогает другим участникам команды понять, когда использовать модуль. Укажите:

  • Назначение модуля
  • Когда его использовать
  • Особенности или ограничения

Категория

Категории помогают организовать библиотеку модулей. Стандартные категории:

  • Кнопки
  • Заголовки
  • Шапки
  • Футеры
  • Изображения
  • Продукты
  • Кастомные категории вашей команды

Глобальные модули

При создании модуля вы можете отметить его как "Глобальный". Глобальные модули:

  • Доступны во всех workspace вашей организации
  • Полезны для стандартных элементов бренда
  • Могут быть созданы только администраторами

Редактирование модулей

Изменение модуля

  1. Перейдите в раздел "Модули" в главном меню
  2. Найдите нужный модуль в списке
  3. Кликните на модуль, чтобы открыть его для редактирования
  4. Внесите изменения
  5. Сохраните изменения

💡 Важно: При изменении модуля все шаблоны, использующие его, обновятся автоматически (если включена синхронизация).

Лучшие практики

  • •
    Создавайте модули для часто используемых элементов — если вы используете элемент более 2-3 раз, стоит создать модуль
  • •
    Используйте понятные названия — название должно сразу давать понять, что это за модуль
  • •
    Организуйте по категориям — категории упрощают поиск нужного модуля
  • •
    Документируйте модули — добавляйте описания, чтобы команда понимала назначение
  • •
    Обновляйте модули централизованно — используйте синхронизацию для единообразия