Шаблон электронного письма с использованием HTML и CSS
Вы когда-нибудь задумывались, как можно отправлять креативные красочные шаблоны писем? В этой статье мы создадим базовый шаблон электронного письма с использованием 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 = " https://www.geeksforgeeks.org/design-patterns-a-must-skill-to-have-for-software-developers-in-2019/ " 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 = " https://www.geeksforgeeks.org/design-patterns-a-must-skill-to-have-for-software-developers-in-2019/ " 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. Более того, кодировать структуру с использованием таблицы и ее строк легко и весело.