Создание оформления для письма

Создать письмо в нашем редакторе можно тремя способами:

1. Выбрать один из заготовленных шаблонов.
2. Получить бесплатно базовый шаблон в стиле вашего сайта. Для этого напишите на support@esputnik.com.
3. Подготовить новый шаблон самостоятельно.

Для создания оформления письма с нуля можно воспользоваться функцией "Оформление". 

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

Настройки стилей элементов емейла происходят в отдельной вкладке “Оформление”. Внесенные изменения применяются ко всему письму.

Раздел “Общие настройки”

В этом разделе можно установить ширину емейла, задать общие отступы, цвет фона и контента письма: 

1. Ширина письма – по умолчанию установлена 600 px. Это оптимальное значение для корректного отображения емейла.

2. Выравнивание – положение контентной части письма на экране.

3. Отступы – при работе с готовым шаблоном изменения в этой вкладке будут применены только к новым структурам, добавленным в письмо из вкладки “Контент”, или после добавления новых полос.

4. Цвет фона письма – можно задать несколькими способами: выбрать цвет фона письма, загрузить фоновую собственную картинку или выбрать из банка изображений. 

5. Шрифт – в этой вкладке можно установить размер и вид шрифта контента для всего письма. Шрифт заголовков задается в следующем разделе.

6. Интервал – должен быть таким, чтобы пользователю было комфортно читать текст и кликать по ссылкам. Минимальный интервал подходит для списков.

7. Отбивка абзаца – увеличивает/уменьшает отступ между абзацами.

8. Подчеркивание ссылок – включено по умолчанию. Чтобы его убрать, достаточно передвинуть ползунок.

9. Адаптивность – эта функция делает email адаптивным на мобильном устройстве получателя. 

10. RTL-текст – выравнивание текста по правому краю. Эта функция важна для корректного отображения текста справа налево для арабского, персидского языков, иврита.

11. Картинка в фоне – здесь можно добавить фоновую картинку для всего письма.

Значение можно задать в % или px. Если картинка маленькая, она будет дублироваться по высоте и ширине. Лучше брать бесшовные (стыкуемые) картинки, чтобы подложка выглядела цельной.

Раздел “Полосы”

В этом разделе можно оформить хедер, контент, футер, инфообласть. Доступны такие настройки: размер текста, отбивка абзаца, отступ, цвет фона контента, текста и ссылок, картинка в фоне. 

Раздел “Заголовки”

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

Раздел “Кнопка”

Для кнопок доступны такие опции: 

• цвет – основной цвет кнопки и текста, а также их цвет по наведению;

• поддержка Outlook – опция позволяет обеспечить максимально точное отображение кнопок в почтовых клиентах MS Outlook за счет вставки специального VML-кода. При активации опции размер письма может быть увеличен до килобайта за каждую добавленную кнопку;
• стиль текста – шрифт, размер, начертание;
• закругление – для точного отображения свойства в Outlook нужно активировать опцию “Поддержка Outlook”.
• граница – можно задать как общую для кнопки, так и для каждой стороны отдельно;

• внутренние отступы – можно настроить каждый из отступов.

Ссылка на кнопку и ее название добавляется на вкладке “Контент”:

Читать подробнее, как создать кнопку >

Раздел “Адаптивность”

Эти настройки будут срабатывать только в мобильной версии письма в почтовых программах, поддерживающих медиастили. В этом разделе можно задать: 

• размер текста и отступ для хедера, контента, футера, инфообласти;

размер шрифта и отступов для заголовков;

• размер кнопки и ее ширину;

• отступ вокруг письма.

Адаптивность перестраивает отображение письма с десктопной версии на мобильную. 

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

Больше о настройках адаптивности в этой статье >.

После того, как email сохранен, найти этот шаблон можно во вкладке "Сохраненные шаблоны".