Блог Bingam > Статьи > Битрикс > Вёрстка почтового шаблона для письма с сайта на 1c-битрикс. Краткая инструкция.

Июл/12

Вёрстка почтового шаблона для письма с сайта на 1c-битрикс. Краткая инструкция.

1 комментарий · Категория: Битрикс Просмотров: 5 023

Итак, дошли руки до наведения красоты в почтовых сообщениях с сайта на битрикс.

Раньше сообщение выглядело так:

 Информационное сообщение сайта #SITE_NAME#
------------------------------------------
#NAME# #LAST_NAME#,

#MESSAGE#

Ваша регистрационная информация:
 
ID пользователя: #USER_ID#
Статус бюджета: #STATUS#
Login: #LOGIN#

Вы можете изменить пароль, перейдя по следующей ссылке:
http://#SERVER_NAME#/auth/index.php?change_password=yes&amp;lang=ru&amp;USER_CHECKWORD=#CHECKWORD#
 
Сообщение сгенерировано автоматически.

А вот что получилось в итоге:

Почитав основы вёрстки для почтовых писем и рассылок можно кратко выделить следующее:

Поддержка стилей, в конструкции в head не работает — <style></style>.
Форматирование текста желательно с использованием span. В атрибуте style к нему мы указываем такие параметры, как: font-family, font-size и color — обязательно в формате #xxxxxx.
Для всех ссылок устанавливаем значение _blank атрибута target.
Я отказалась от вставки вообще любых изображений, даже лого. Хотя это не обязательно.
Вёрстка шаблона разрабатывалась посредством таблиц. Чтобы было корректное разделение текста, ячейкам прописывались атрибуты width и height.

Итак, код примера:

Исходный код

<!DOCTYPE html>
<table style="width: 480.55pt; border-collapse: collapse; border: #cccccc 1px solid; margin-left: 5.75pt; margin-right: 6.75pt; padding-right: 6.75pt;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 480pt;" valign="top">
<table style="border-collapse: collapse; margin-left: 5.75pt; margin-right: 6.75pt;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 467pt; height: 10pt;" valign="top"></td>
</tr>
<tr>
<td style="width: 467pt; border-collapse: collapse; background: none repeat scroll 0% 0% #ff5601;" valign="top">
<table style="width: 467pt; margin-left: 5.75pt; margin-right: 6.75pt;" border="0">
<tbody>
<tr>
<td style="width: 65%; height: 10pt;" valign="top"></td>
<td style="width: 35%; height: 10pt;" valign="top"></td>
</tr>
<tr>
<td><em><span style="font-size: 11pt; font-family: Verdana,sans-serif;">Информационное сообщение</span></em></td>
<td align="right"><strong><span style="font-size: 14pt; font-family: Verdana, sans-serif; color: white;">Лого</span></strong></td>
</tr>
<tr>
<td><em><span style="font-size: 11pt; font-family: Verdana,sans-serif;">сайта #SITE_NAME#</span></em></td>
<td align="right"><span style="font-size: 8pt; font-family: Verdana, sans-serif; color: white;">слоган</span></td>
</tr>
<tr>
<td style="height: 10pt;" valign="top"></td>
<td style="height: 10pt;" valign="top"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="width: 467pt;" valign="top">
<table style="border-collapse: collapse; margin-left: 5.75pt; margin-right: 6.75pt;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 467pt; height: 10pt;" valign="top"></td>
</tr>
<tr>
<td><span style="font-size: 10pt; font-family: Verdana,sans-serif;">Здравствуйте,</span></td>
</tr>
<tr>
<td><span style="font-size: 10pt; font-family: Verdana,sans-serif;">#NAME# #LAST_NAME#,</span></td>
</tr>
<tr>
<td style="height: 10pt;"></td>
</tr>
<tr>
<td><span style="font-size: 10pt; font-family: Verdana,sans-serif;">#MESSAGE#</span></td>
</tr>
<tr>
<td style="width: 467pt; height: 20pt;" valign="top"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="width: 467pt; border-color: #f2f2f2; background: none repeat scroll 0% 0% #f2f2f2; border: 1;" valign="top">
<table style="margin-left: 5.75pt; background: none repeat scroll 0% 0% #f2f2f2; margin-right: 6.75pt;" border="0" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td style="height: 10pt; border: 0;" valign="top"></td>
</tr>
<tr>
<td style="margin-left: 5.75pt; margin-right: 6.75pt;"><span style="color: #0072bc;"><strong><span style="font-size: 10pt; font-family: Verdana,sans-serif;">Ваша регистрационная информация:</span></strong></span></td>
</tr>
<tr>
<td style="height: 20pt; margin-left: 5.75pt; margin-right: 6.75pt; border: 0;" valign="top"></td>
</tr>
<tr>
<td style="margin-left: 5.75pt; margin-right: 6.75pt;" valign="top"><span style="color: #0072bc;"><span style="font-size: 10pt; font-family: Verdana,sans-serif;">ID пользователя: #USER_ID#</span></span></td>
</tr>
<tr>
<td style="margin-left: 5.75pt; margin-right: 6.75pt;" valign="top"><span style="color: #0072bc;"><span style="font-size: 10pt; font-family: Verdana,sans-serif;">Статус бюджета: #STATUS#</span></span></td>
</tr>
<tr>
<td style="margin-left: 5.75pt; margin-right: 6.75pt;" valign="top"><span style="color: #0072bc;"><span style="font-size: 10pt; font-family: Verdana,sans-serif;">Login: #LOGIN#</span></span></td>
</tr>
<tr>
<td style="height: 20pt; border: 0;" valign="top"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="width: 467pt; height: 10pt;">
<table style="margin-left: 5.75pt; margin-right: 6.75pt;" border="0" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td style="width: 467pt; height: 10pt;" valign="top"></td>
</tr>
<tr>
<td style="width: 467pt; margin-left: 5.75pt; margin-right: 6.75pt;" valign="top"><span style="align: center; font-size: 10pt; font-family: Verdana,sans-serif;">Письмо сгенерировано автоматически.</span></td>
</tr>
<tr>
<td style="width: 467pt; height: 10pt;" valign="top"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="width: 467pt; background: none repeat scroll 0% 0% #c6d9f1; margin-left: 5.75pt; margin-right: 6.75pt;" valign="top">
<table style="margin-left: 5.75pt; margin-right: 6.75pt;" border="0" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td style="width: 155.95pt; height: 10pt;" valign="top"></td>
<td style="width: 134.65pt; height: 10pt;" valign="top"></td>
<td style="width: 177.2pt; height: 10pt;" valign="top"></td>
</tr>
<tr>
<td style="width: 155.95pt;" valign="top"><span style="font-size: 8pt; font-family: Verdana,sans-serif; color: #376092;">2003 ©</span></td>
<td style="width: 134.65pt;" valign="top"></td>
<td style="width: 177.2pt;" valign="top"></td>
</tr>
<tr>
<td style="width: 155.95pt;" valign="top"><span style="font-size: 8pt; font-family: Verdana,sans-serif; color: #376092;">Cайт:</span></td>
<td style="width: 134.65pt;" valign="top"><strong><span style="font-size: 8pt; font-family: Verdana,sans-serif; color: #376092; font-weight: normal;">Телефоны/факс:</span></strong></td>
<td style="width: 177.2pt;" valign="top"><span style="width: 155.95pt;"><span style="font-size: 8pt; font-family: Verdana,sans-serif; color: #376092;">Email: </span></span></td>
</tr>
<tr>
<td style="width: 155.95pt; height: 10pt;" valign="top"></td>
<td style="width: 134.65pt; height: 10pt;" valign="top"></td>
<td style="width: 177.2pt; height: 10pt;" valign="top"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="width: 467pt; height: 10pt;" valign="top"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>