Создание первого шаблона

Пошаговое руководство по созданию простого, но профессионального email-шаблона

Цель урока

В этом руководстве мы создадим простое приветственное письмо с шапкой, основным контентом и подвалом. Вы научитесь:

  • Добавлять и настраивать полосы (stripes)
  • Работать с контейнерами и колонками
  • Добавлять и редактировать блоки контента
  • Применять стили и настраивать внешний вид

Шаг 1: Создание шаблона

  1. Откройте редактор и создайте новый шаблон с названием "Приветственное письмо"
  2. Выберите workspace для сохранения шаблона
  3. После создания вы увидите пустой холст

Шаг 2: Создание шапки

2.1. Добавление полосы

На пустом холсте нажмите кнопку "Добавить полосу" или перетащите контейнер из палитры. Это создаст первую полосу для шапки.

2.2. Добавление логотипа

  1. В левой панели найдите блок "Изображение"
  2. Перетащите его в контейнер первой полосы
  3. Кликните на изображение, чтобы выделить его
  4. В правой панели нажмите "Загрузить изображение" и выберите логотип
  5. Установите ширину, например, 200px
  6. Добавьте альтернативный текст: "Логотип компании"

2.3. Настройка фона полосы

  1. Кликните на полосу (не на блок), чтобы выделить её
  2. В правой панели найдите раздел "Фон"
  3. Выберите цвет фона, например, #6366F1 (основной цвет Emailist)
  4. Установите внутренние отступы: 20px сверху и снизу, 0px слева и справа

Шаг 3: Основной контент

3.1. Добавление новой полосы

Добавьте вторую полосу под шапкой. Это будет основная секция с приветственным текстом.

3.2. Заголовок

  1. Добавьте текстовый блок в новую полосу
  2. Введите текст: "Добро пожаловать!"
  3. Выделите текст и в панели свойств установите:
    • Размер шрифта: 32px
    • Жирность: Bold
    • Цвет: #0F172A (темный)
    • Выравнивание: По центру

3.3. Основной текст

  1. Добавьте ещё один текстовый блок под заголовком
  2. Введите приветственный текст, например:
    "Спасибо, что присоединились к нам! Мы рады видеть вас в нашем сообществе."
  3. Настройте стили:
    • Размер шрифта: 16px
    • Цвет: #475569 (серый)
    • Выравнивание: По центру
    • Межстрочный интервал: 1.5

3.4. Кнопка призыва к действию

  1. Добавьте блок "Кнопка"
  2. Введите текст кнопки: "Начать работу"
  3. Укажите ссылку: https://example.com/start
  4. Настройте стили кнопки:
    • Фон: #6366F1 (основной цвет)
    • Цвет текста: #FFFFFF (белый)
    • Скругление углов: 8px
    • Внутренние отступы: 12px 24px
    • Выравнивание: По центру

Шаг 4: Подвал

4.1. Разделитель

  1. Добавьте новую полосу для подвала
  2. Добавьте блок "Разделитель"
  3. Настройте:
    • Цвет: #E2E8F0 (светло-серый)
    • Толщина: 1px
    • Отступы: 20px сверху и снизу

4.2. Текст подвала

  1. Добавьте текстовый блок с информацией о компании
  2. Введите текст, например:
    "© 2026 Emailist. Все права защищены."
  3. Настройте:
    • Размер шрифта: 14px
    • Цвет: #94A3B8 (светло-серый)
    • Выравнивание: По центру

Шаг 5: Финальная настройка

Настройка документа

  1. Кликните на пустое место холста, чтобы выделить документ
  2. В правой панели настройте:
    • Ширина контента: 600px (стандарт для email)
    • Фоновый цвет: #F8FAFC (светло-серый)
    • Шрифт по умолчанию: Arial, sans-serif

Шаг 6: Предпросмотр и экспорт

6.1. Предпросмотр

  1. Нажмите кнопку "Предпросмотр" в верхней панели
  2. Проверьте отображение на Desktop и Mobile
  3. Убедитесь, что все элементы корректно отображаются

6.2. Экспорт HTML

  1. Нажмите кнопку "Экспорт" → "HTML"
  2. Скопируйте сгенерированный HTML код
  3. Используйте его в вашей email-платформе (Mailchimp, SendGrid и т.д.)

Готово! 🎉

Поздравляем! Вы создали свой первый email-шаблон. Теперь вы знаете основы работы с редактором.

Следующие шаги: