Редактирование исходного файла html-письма

Нас очень часто спрашивают о возможностях редактирования html-писем. Как правило, проблем с этим не возникает, так как сервисы рассылок оснащены различными редакторами писем.

Но что делать, если вам нужно отправлять письма всего нескольким адресатам и каждое из них должно быть индивидуальным? Платить деньги только за возможность воспользоваться редактором сервиса?

Необязательно. Сегодня мы расскажем вам как заменить контент письма в исходном коде на примере текстового редактора Sublime Text.

Знакомство с редактором

Sublime Text — текстовый редактор, распознающий html-код и его форматирование. Это значит, что для наших целей, по функционалу он не отличается от Блокнота, если бы не одно но — Sublime удобно подсвечивает текст кода. Скачать Sublime Text можно здесь — https://www.sublimetext.com/3

При этом, для того что бы увидеть само письмо и отслеживать изменения в нем, необходимо просто открыть html-файл письма в окне браузера. После сохранения изменений (Ctrl+S) в тексте кода, достаточно просто обновить страницу, и вы увидите внесенные изменения.

Как вы видите, Sublime цветами выделяет различные форматы данных, в нашей версии: розовый — теги html, зеленый — параметры, желтый, фиолетовый и синий — значение различных параметров и белый — текст.

Замена текста письма

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

Стоит отметить что Sublime, равно как и Блокнот, автоматически обнуляет форматирования текста. Так что, вы смело можете копировать любой текст и вставлять в нужное место, отображаться в письме он будет по заданным в коде параметрам.

И еще один маленький совет, для того что бы найти нужный текст во всем массиве кода, нажмите Ctrl+F — после этого, внизу редактора появится поле поиска текста.

При необходимости можно поменять стиль шрифта.

Советуем пользоваться одним из следующих шрифтов — Arial, Arial Black, Tahoma, Trebuchet MS, Verdana, Courier, Courier New, Georgia, Times, Times New Roman.Это стандартные шрифты, которые распознают любые системы. В противном случае ваш текст на другом компьютере может превратится в абракадабру.

Размер — подставить нужное значение в параметре “font-size: 14px;”. Давайте увеличим размер шрифта с 14 пикселей до 16.

Цвет — значение цвета задается в HEX параметром “color: #323232;”.

Подобрать значение цвета вы можете водном из онлайн-сервисов, например здесь — get-color.ru.

Мы сделаем текст серым — #4F4F4F.

Межстрочный интервал — по аналогии с размером шрифта, задается параметром “line-height: 18px;”

Формат шрифта — задается тегами <b>текст</b> — жирный, <i>текст</i> — курсив и <u>текст</u> — подчеркивание.

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

Выделим наш текст курсивом.

Перенос строки — задается тегом <br>. Просто вставьте этот тег перед нужным участком текста.

Заменяем текст, сохраняем, обновляем и все готово.

Вставка ссылки в текст

Тег для вставки ссылки — <a href=”www.goodmails.ru” target=”_blank” style=”text-decoration: underline; color:#234322;”>текст, который вы делаете ссылку</a>

href — сюда вписываем ссылку.

target=”_blank” — эта команда для открытия ссылки в новой вкладке. Если вы хотите, что бы ссылка открывалась в текущей вкладке, просто не пишите ее.

text-decoration: underline; — команда браузеру подчеркнуть ссылку. Если подчеркивание не требуется — нужно прописать text-decoration: none;

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

color:#234322; — цвет ссылки. Цвета, как и в случае с текстом, задаются в HEX.

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

Внимание! Некоторые почтовые клиенты умнее, чем кажутся и если они видят в тексте ссылку, например, “Вы можете перейти на сайт goodmails.ru для дальнейшего изучения…”, то они могут выделить ее самостоятельно и по-своему.

Вставка/замена ссылки в картинку

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

<a href=”www.example.com” target=”_blank” style=”text-decoration: underline; ”><img src=”ссылка на картинку” alt=”описание картинки на случай, если она не отобразится” border=”0” /></a>

Есть разница в паре команд для обычной ссылки и картинки:

color:#234322; — команда установки цвета не актуальна для картинки.

border=”0” — команда обрамление картинки. Значение 0 убирает белую рамку вокруг картинки, значения больше задуют ее соответствующей толщины в пикселях.

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

Найти участок кода с картинкой будет проще в браузере. Для этого кликните правой кнопкой мыши на необходимой картинке и выберете “Посмотреть код” (это названия данной опции в Google Chrome, название и путь к ней в других браузерах может отличаться). Браузер автоматически выделит для вас нужную часть, скопируйте код и вставьте в поиск Sublime.

При замене картинки будьте внимательны — если ее размер новой картинки отличается от размеров прежней, нужно поменять все параметры width и height на актуальные.

Послесловие

Мы рассказали вам о наиболее “безболезненных” возможностях редактирования кода письма. Если вам необходимо внести более значительные изменения, настоятельно рекомендуем доверить такую задачу специалисту по верстке, или как минимум создать копию кода до редактирования.