Спасибо!

Заявка отправлена, скоро мы с вами свяжемся.

База знаний


Вернуться к списку статей
Редактирование html-письма

Дата публикации: 5 сентября 2016

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

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

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

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

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

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

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

sub-1

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

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

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

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

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

sub-2

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

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

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

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

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

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

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

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

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

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

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

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

sub-3

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

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

sub-4

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.

sub-5

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

sub-6

Послесловие

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

ЧИТАЙТЕ ТАК ЖЕ

Email-рассылка в программе ePochta Mailer

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

HTML-письма и Retina экраны

Retina дисплеи имеют свою специфику отображения картинок — обычные изображения выглядят размытыми. В статье мы рассмотрим способ решения этой проблемы в html-письмах.

НАШЕ ПОРТФОЛИО

Серия шаблонов для информационных рассылок интернет-магазина баскетбольной одежды.

Сложное дело требует особого подхода и хорошего продвигающего шаблона.

Краткое коммерческое предложение услуг тендер-менеджмента от компании «TenderDialog».

Редактируемый шаблон для информационных рассылок компании Homemove.

СВЯЖИТЕСЬ С НАМИ ПРЯМО СЕЙЧАС

Телефон:

+7 495 968-10-12

Почта:

email@goodmails.ru

Социальные сети:

Facebook Vkontakte
&

Обратная связь