Как создать шаблон письма для Outlook с помощью Word

Зачем в 2020 году отправлять Outlook-рассылки? Некоторые компании не могут использовать для рассылок ESP — из-за корпоративной культуры, особенностей коммуникаций или по какой-то другой причине. В таком случае они делают рассылку в Outlook. Подобным методом классическую рассылку заменить нельзя, но это имеет смысл, если получатели — сотрудники компании. Большие организации рассылают через Outlook внутренние письма с новостями, инструкциями, опросами.

Если рассылка простая, то её можно создать прямо в редакторе письма Outlook. Но если письмо состоит из сложных блоков, имеет картинки, текст, ссылки, то подобную рассылку уже нельзя собрать в редакторе почтовой программы. Как правило, привлекают специалиста, который сделает .oft шаблон (Outlook File Template) для отправки подобных писем. В идеальном варианте пользователь потом может самостоятельно редактировать этот шаблон, менять текст и картинки без знаний кода.

Рассмотрим способы создания .oft шаблона и пошагово покажем, как создавать блоки для такого письма.

Читайте также

HTML вёрстка писем — полная инструкция

Сборка письма в Word

Один из способов сделать .oft шаблон — собрать его в word. Сама по себе рассылка в HTML верстается таблицами. Здесь нужно сделать примерно то же самое: вручную создать таблицы, наполнить их контентом. Этот способ хорош тем, что Microsoft Word и Outlook используют один движок для рендеринга писем.

Изначально всё равно нужен дизайн письма, который будет собран в Photoshop или Figma. Конечно, можно начать проектировать дизайн в вордовском документе. Но, как показывает практика, гораздо проще сначала сделать дизайн и лишь потом собирать его под .oft шаблон для Outlook. Это упростит как сборку тела письма, так и небольших деталей, вроде футера и информации о заказе.

Для примера возьмём наше письмо для misstomrsbox.com. Попробуем собрать его, чтобы отправить через Outlook.

дизайн-макет письма

Это большой мастер-шаблон. Мы будем брать из него разные блоки

Читайте также

Дизайн email-рассылок: полная инструкция

Собираем письмо

Начнём с хедера. В нашем примере он состоит из двух логотипов, выровненных по центру, и небольшой черты снизу. Делаем таблицу, в которой будет одна строка и одна ячейка. Помещаем туда наши логотипы.

баннер из макета в таблице

Стоит отметить, как мы работаем с цветами границы таблицы — оставляем только нижнюю границу. Выделяем таблицу, в левом верхнем углу будет значок, нажав на который, мы увидим нужные настройки:

табличная вёрстка для outlook 3

Оставляем только нижнюю границу. Потом нажимаем «Границы и заливка» и выбираем «Другие цвета»:

письмо outlook цвета

Часто нам нужен конкретный цвет, как в макете, и мы не можем просто выбрать из палитры. Особенность в том, что Word позволяет выбирать цвета в RGB и в HSL. Но часто у вас совсем другой код цвета, который имеет вид: #FFDAC5 . Чтобы узнать RGB код, можно воспользоваться сайтом encycolorpedia.ru, где в строку поиска вводите цвет и получаете его характеристики. Различные цветовые кодировки может показывать и поисковик:

rgb_google

rgb_yandex

Выбирайте способ, который удобен вам.

В итоге получаем такой хедер:

шаблон outlook хедер

Осталось сделать отступ между логотипом и нижней границей таблицы. После этого нужно будет оставить только нижнюю границу и покрасить её в нужный цвет.

Читайте также

Как мы делаем красивую GIF-анимацию в письмах

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

шаблон outlook картинка ссылкой

Блок с отзывами

Состоит из заголовка, отзывов, каждый из которых разбит на две ячейки, и кнопки.

шаблон outlook отзывы

С заголовком всё просто: это обычный текст, выровненный по центру с теми свойствами, которые есть в макете. Один отзыв состоит из двух ячеек. В правой ячейке только текст, а в левой — текст и пять картинок в ряд. У таблицы есть только нижняя граница, как и у хедера.

Создаём таблицу с двумя ячейками. В левую помещаем текст и под него картинку. Изначально картинка будет большой, её размеры нужно подогнать, не забыв изменить соотношение сторон. Левая и правая ячейка занимают по 50% всей таблицы, но в макете мы видим, что левая часть должна занимать гораздо меньше места. Изменить это можно с помощью ползунка в центре таблицы.

табличная вёрстка для outlook 2

табличная вёрстка для outlook 1

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

шаблон outlook исправленный

Кнопка подписки

Кнопку в шаблоне для Outlook можно сделать двумя способами, как и в обычной вёрстке. Это может быть просто картинка-ссылка, и здесь всё, как и с обычным баннером: перетаскиваем картинку и ставим на неё ссылку.

Плюсы такого подхода:

  • легко реализовать;
  • кликабельна вся кнопка.

Минусы:

  • картинка тяжелее, чем текст: дольше будет грузиться у пользователя;
  • если у пользователя отключены картинки, то он ничего не увидит.

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

шаблон outlook выравнивание таблицы

Пишем в ней текст, делаем его белым и нужного размера. Теперь заливаем всю таблицу нужным цветом. Цвет выбирается по тому же принципу, по которому мы выбирали цвет границы таблицы.

цвет кнопки

Небольшие проблемы могут возникнуть с позиционированием надписи. Нижнюю границу можно отодвигать мышкой с помощью ползунка, а вот верхнюю границу можно отодвигать с помощью кнопки enter. И высота каждого отступа зависит от того, какой размер шрифта у вас выбран. Так можно корректировать и подбирать высоту верхнего отступа, чтобы создавалось ощущение, что надпись у нас в центре кнопки.

Выделяем текст, нажимаем правой кнопкой мыши и выбираем пункт «Гиперссылка», вставляем нужный адрес.

Плюс такого подхода:

  • это не картинка, а значит у пользователя кнопка прогрузится быстрее;
  • если у пользователя отключены картинки, то он всё увидит.

Минусы:

  • делать такую кнопку чуть дольше;
  • кликабелен только текст в кнопке.

Красиво сверстаем ваши письма

Дизайн и вёрстка email-рассылок

Важно учесть

Все таблицы, которые вы создаёте, должны быть отцентрованы. Перед вставкой шаблона в Outlook проверьте, что выравнивание таблицы стоит по центру.

табличная вёрстка для outlook 4

Это важно проверить, потому что внешне всё может выглядеть корректно, а в Outlook вёрстка поедет. Ниже покажу, как это будет выглядеть.

При этом текст в таблице может быть выровнен по левому краю.

Вставляем собранное письмо в Outlook

Создаём в Outlook новое письмо и открываем наш шаблон в Word. Из вордовского файла просто копируем всё в буфер обмена, вставляем в письмо и смотрим, как оно будет выглядеть.

шаблон outlook превью письма

Отображение нужно тщательно проверить, потому что бывают баги. Например, возникнет большой пробел там, где его изначально не было. Или появятся границы у таблиц. Эти баги легко исправить уже в самом Outlook.

Если какая-то таблица в документе выровнена по левому краю, то в Outlook вы будете наблюдать вот такое:

шаблон outlook некорректное вырвнивание

Поэтому не забудьте отцентровать таблицы перед заливкой письма в Outlook.

Чтобы сохранить шаблон, нажимаем «Сохранить шаблон» и выбираем тип файла «Шаблон Outlook».

Читайте также

132 инструмента CRM-маркетолога

Как вставить подпись

Чтобы добавить подпись, которая будет подставляться в конце каждого письма, собираем её по тому же принципу, что и письмо. Можем добавить туда иконки и/или ссылки на соцсети, любой текст и корпоративный баннер. На выходе получаем такой же word-файл, только с шаблоном подписи.

Теоретически её можно открывать каждый раз, как и шаблон, что мы сделали выше. Подпись подставится в письмо, а над ней можно будет писать текст. Но это неудобно — и можно настроить автоматическую подпись в Outlook.

Создаём новое письмо и выбираем «Подпись»:

шаблон outlook подпись 1

Переходим во вкладку «Электронная подпись», нажимаем «Создать» и задаём имя подписи:

шаблон outlook создаём подпись

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

шаблон outlook подпись

После этого нужно просто сохранить шаблон в Outlook — теперь его можно использовать в любом письме. Для этого при создании письма нужно нажать на кнопку «Подпись» и выбрать нужную. Она автоматически подставится в письмо.

шаблон outlook вставляем подпись в письмо

Выбранная подпись будет автоматически появляться при создании нового письма.


Обсудить любой материал и задать вопросы можно в нашем Чате Солдат. И, конечно, подписывайтесь на наш Телеграм-канал Маркетинг за три минуты, где регулярно выходят полезные материалы в виде постов-трёхминуток.

Узнавайте об обновлениях блога Email Soldiers первым

Спасибо!

Осталось подтвердить подписку — кликнуть по кнопке в письме, которое мы вам отправили.

Похожие статьи

Как мы делаем красивую GIF-анимацию в письмах

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

Тёмные темы
Гайд по тёмным темам для email-маркетолога

Что делать, чтобы дизайн email-рассылок не ломался в тёмных темах оформления почтовых клиентов.

Для чего нужен мастер-шаблон
Что включить в дизайн рассылок банков, недвижимости, ecommerce

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