Шаблон электронного письма с использованием HTML и CSS

Опубликовано: 6 Января, 2022

Вы когда-нибудь задумывались, как можно отправлять креативные красочные шаблоны писем? В этой статье мы создадим базовый шаблон электронного письма с использованием HTML и CSS. Эти шаблоны электронной почты обычно предназначены для маркетинговых целей и распространяются через кампании по электронной почте.
Основная цель отправки шаблона электронного письма - набрать номер призыва к действию (CTA). Креативный дизайн шаблона электронной почты привлекает клиента и может получить больше призывов к действию на требуемой целевой странице.

Создание образца шаблона
Отправка электронных писем в соответствии с желаемой схемой может быть очень сложной задачей. Это связано с тем, что разные браузеры имеют разные конфигурации и, следовательно, разные родительские свойства CSS. Например, свойство display: absolute не работает при отправке электронного письма через Gmail.
Точно так же есть несколько других мер предосторожности, которые следует предпринять при написании кода для шаблона электронной почты. Первый и самый важный шаг для начала работы с шаблонами электронной почты: необходимо использовать таблицы HTML для построения базовой структуры шаблона электронной почты.
Создание таблицы гарантирует, что отправленный контент не будет искажен при пересылке или отправке по почте с использованием различных почтовых приложений.

Пример: для начала

<!-- Create main outline within which email will be enclosed -->
< body style = "background-color:grey" >
< table align = "center" border = "0" cellpadding = "0" cellspacing = "0"
width = "550" bgcolor = "white" style = "border:2px solid black" >
< tbody >
< tr >
< td align = "center" >
< br />
< table align = "center" border = "0" cellpadding = "0"
cellspacing = "0" class = "col-550" width = "550" >
< tbody >
<!-- content goes here -->
</ tbody >
</ table >
</ td >
</ tr >
</ tbody >
</ table >
</ body >

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

Дальнейшие разделы можно сделать с помощью тегов <tr > и < td >. Теперь давайте введем дополнительную информацию.
Пример:

<!-- Complete Email template -->
< body style = "background-color:grey" >
< table align = "center" border = "0" cellpadding = "0" cellspacing = "0"
width = "550" bgcolor = "white" style = "border:2px solid black" >
< tbody >
< tr >
< td align = "center" >
< table align = "center" border = "0" cellpadding = "0"
cellspacing = "0" class = "col-550" width = "550" >
< tbody >
< tr >
< td align = "center" style="background-color: #4cb96b;
height: 50px;">
< a href = "#" style = "text-decoration: none;" >
< p style="color:white;
font-weight:bold;">
GeeksforGeeks
</ p >
</ a >
</ td >
</ tr >
</ tbody >
</ table >
</ td >
</ tr >
< tr style = "height: 300px;" >
< td align = "center" style="border: none;
border-bottom: 2px solid #4cb96b;
padding-right: 20px;padding-left:20px">
< p style="font-weight: bolder;font-size: 42px;
letter-spacing: 0.025em;
color:black;">
Hello Geeks!
< br > Check out our latest Blogs
</ p >
</ td >
</ tr >
< tr style = "display: inline-block;" >
< td style="height: 150px;
padding: 20px;
border: none;
border-bottom: 2px solid #361B0E;
background-color: white;">
< h2 style="text-align: left;
align-items: center;">
Design Patterns : A Must Skill to
have for Software Developers in 2019
</ h2 >
< p class = "data"
style="text-align: justify-all;
align-items: center;
font-size: 15px;
padding-bottom: 12px;">
Design Patterns….??? I think you have heard this name
before in programming… Yes, you might have heard
this name before in programming if you are…
</ p >
< p >
< a href =
style="text-decoration: none;
color:black;
border: 2px solid #4cb96b;
padding: 10px 30px;
font-weight: bold;">
Read More
</ a >
</ p >
</ td >
</ tr >
</ tbody >
</ table >
</ body >

Наконец, вы можете добавить нижний колонтитул, содержащий ссылки на социальные сети, название компании, контактную информацию и т. Д.
Пример:

<!-- Complete Email template -->
< body style = "background-color:grey" >
< table align = "center" border = "0" cellpadding = "0" cellspacing = "0"
width = "550" bgcolor = "white" style = "border:2px solid black" >
< tbody >
< tr >
< td align = "center" >
< table align = "center" border = "0" cellpadding = "0"
cellspacing = "0" class = "col-550" width = "550" >
< tbody >
< tr >
< td align = "center" style="background-color: #4cb96b;
height: 50px;">
< a href = "#" style = "text-decoration: none;" >
< p style="color:white;
font-weight:bold;">
GeeksforGeeks
</ p >
</ a >
</ td >
</ tr >
</ tbody >
</ table >
</ td >
</ tr >
< tr style = "height: 300px;" >
< td align = "center" style="border: none;
border-bottom: 2px solid #4cb96b;
padding-right: 20px;padding-left:20px">
< p style="font-weight: bolder;font-size: 42px;
letter-spacing: 0.025em;
color:black;">
Hello Geeks!
< br > Check out our latest Blogs
</ p >
</ td >
</ tr >
< tr style = "display: inline-block;" >
< td style="height: 150px;
padding: 20px;
border: none;
border-bottom: 2px solid #361B0E;
background-color: white;">
< h2 style="text-align: left;
align-items: center;">
Design Patterns : A Must Skill to
have for Software Developers in 2019
</ h2 >
< p class = "data"
style="text-align: justify-all;
align-items: center;
font-size: 15px;
padding-bottom: 12px;">
Design Patterns….??? I think you have heard this name
before in programming… Yes, you might have heard
this name before in programming if you are…
</ p >
< p >
< a href =
style="text-decoration: none;
color:black;
border: 2px solid #4cb96b;
padding: 10px 30px;
font-weight: bold;">
Read More
</ a >
</ p >
</ td >
</ tr >
< tr style="border: none;
background-color: #4cb96b;
height: 40px;
color:white;
padding-bottom: 20px;
text-align: center;">
< td height = "40px" align = "center" >
< p style="color:white;
line-height: 1.5em;">
GeeksforGeeks
</ p >
< a href = "#"
style="border:none;
text-decoration: none;
padding: 5px;">
< img height = "30"
src =
width = "30" />
</ a >
< a href = "#"
style="border:none;
text-decoration: none;
padding: 5px;">
< img height = "30"
src =
width = "30" />
</ a >
< a href = "#"
style="border:none;
text-decoration: none;
padding: 5px;">
< img height = "20"
src =
width = "24"
style="position: relative;
padding-bottom: 5px;" />
</ a >
</ td >
</ tr >
< tr >
< td style="font-family:'Open Sans', Arial, sans-serif;
font-size:11px; line-height:18px;
color:#999999;"
valign = "top"
align = "center" >
< a href = "#"
target = "_blank"
style="color:#999999;
text-decoration:underline;">PRIVACY STATEMENT</ a >
| < a href = "#" target = "_blank"
style = "color:#999999; text-decoration:underline;" >TERMS OF SERVICE</ a >
| < a href = "#"
target = "_blank"
style = "color:#999999; text-decoration:underline;" >RETURNS</ a >< br >
2012 GeeksforGeeks. All Rights Reserved.< br >
If you do not wish to receive any further
emails from us, please
< a href = "#"
target = "_blank"
style="text-decoration:none;
color:#999999;">unsubscribe</ a >
</ td >
</ tr >
</ tbody ></ table ></ td >
</ tr >
< tr >
< td class = "em_hide"
style="line-height:1px;
min-width:700px;
background-color:#ffffff;">
< img alt = ""
src = "images/spacer.gif"
style="max-height:1px;
min-height:1px;
display:block;
width:700px;
min-width:700px;"
width = "700"
border = "0"
height = "1" >
</ td >
</ tr >
</ tbody >
</ table >
</ body >

Выход:

Таким образом можно создать множество красивых шаблонов. Хотя кодирование электронной почты с помощью div делает его намного проще и быстрее, есть много проблем, если вы кодируете с помощью div. Более того, кодировать структуру с использованием таблицы и ее строк легко и весело.