Инструкция Создания Email Шаблона <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"/>\n6. </head>\n7. </html>","type":"unstyled","key":"fkvoc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"<!DOCTYPE> объясняет почтовому, какие HTML-теги ожидать в дальнейшем, и какому набору правил HTML и CSS вы придерживались, создавая письмо. Несмотря на то, что некоторые почтовые клиенты (Gmail, Google Apps, Yahoo! Mail и Outlook.com) заменят ваш хедер на собственный, мы рекомендуем включить данный код в документ.","type":"unstyled","key":"8m0sb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"BOLD"},{"length":11,"offset":107,"style":"BOLD"}],"text":"<meta http-equiv=»Content-Type» /> указывает, как обрабатывать текст и специальные символы в вашем письме.\n«text/html» дает понять механизму, что рассматривать следующие строки текста нужно как html.","type":"unstyled","key":"7fp26"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"<meta name=»viewport»/> указывает устройство, на котором просматривается электронное письмо, чтобы установить видимую область сообщения в соответствии с шириной экрана.","type":"unstyled","key":"amfve"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":51,"style":"BOLD"}],"text":"Заголовок email сообщения записывается внутри тега <title>. В таком случае, если получатель выберет «Просмотр в Интернете», заголовок сообщения будет отображаться на вкладке браузера.","type":"unstyled","key":"cvkr6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Верстка тела email сообщения. Создание таблицы","type":"header-two","key":"2a7oo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":55,"style":"BOLD"}],"text":"Общая структура письма создается с использованием тега <body>.","type":"unstyled","key":"9e1ao"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Прежде всего, устанавливаем нулевое значение для отступов (теги <margin> и <padding>), чтобы избежать лишнего пустого пространства в шаблоне.","type":"unstyled","key":"3r62n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ширина главной таблицы должна быть 100% (table width=»100%»). Она выступает фактически основным каркасом, «телом» email сообщения. В отличие от тега <body>, работая с таблицей, вы можете работать со стилями: например, чтобы задать общий цвет фона для всего письма, его нужно прописать в параметрах этой главной таблицы.","type":"unstyled","key":"9q894"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Значения тегов <cellpadding> и <cellspacing> тоже должны равняться нулю, опять же, во избежание ненужного пустого пространства. Данные теги отвечают за отступы от границ ячейки таблицы.","type":"unstyled","key":"5bpbl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"},{"length":195,"offset":11,"style":"ITALIC"}],"text":"Примечание. Здесь и далее мы оставим значение для границы всех таблиц как 1: border=»1″. Так вам будет проще отследить структуру макета. В конце, значение можно убрать, используя функцию «Найти и заменить».","type":"blockquote","key":"2tn4f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. <body style=\"margin: 0; padding: 0;\">\n2. <table border=\"1\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\">\n3. <tr>\n4. <td>\n5. Привет!\n6. </td>\n7. </tr>\n8. </table>\n9. </body>","type":"unstyled","key":"mtum"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пока что наше письмо выглядит следующим образом:","type":"unstyled","key":"7m2h4"},{"data":{"image":{"id":"5f64b27fb142594c53db163d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"b35rf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"(наличие рамки – результат работы тега border=»1″)","type":"unstyled","key":"5c31r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Максимально возможная и удобная ширина для электронного сообщения, которое просматривается в почтовых клиентах на персональном компьютере – 600px. Чтобы письмо не растягивало на весь экран, нужно внутри уже созданной главной таблицы создать еще одну вложенную, строго прописав значение её ширины: width=»600″.","type":"unstyled","key":"8lfpp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":53,"offset":0,"style":"BOLD"},{"length":91,"offset":53,"style":"ITALIC"}],"text":"Золотое правило в создании HTML кода email сообщения: если нужный атрибут (тег) существует в HTML, используйте его, и не нужно обращаться к CSS.","type":"blockquote","key":"97c06"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот код вложенной таблицы следует вставить вместо слова «Привет!»","type":"unstyled","key":"fueep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. <table style=\"border-collapse: collapse;\" border=\"1\" width=\"600\" cellspacing=\"0\" cellpadding=\"0\" align=\"center\">\n2. <tbody>\n3. <tr>\n4. <td>Привет!</td>\n5. </tr>\n6. </tbody>\n7. </table>","type":"unstyled","key":"7ctqo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь письмо выглядит вот так:","type":"unstyled","key":"5tob5"},{"data":{"image":{"id":"5f64b27fc833846a1ddf129f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ahud5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":59,"style":"BOLD"}],"text":"Вы заметили, что для вложенной таблицы использован атрибут <border-collapse> со значением «collapse»? Он указывает почтовым клиентам на правильность отображения границ вокруг ячеек таблицы. Если этого не сделать, более новые версии Outlook, например, в процессе обработки письма, добавят небольшое ненужное пространство между границами двух таблиц.","type":"unstyled","key":"4nqk1"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":22,"offset":33}],"inlineStyleRanges":[],"text":"Мы уже говорили о том, что любой шаблон email сообщения состоит из трёх логических частей: хедер, тело письма с основным контентом, футер.","type":"unstyled","key":"e9ojb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь нужно отобразить это структурно в уже созданном нами шаблоне. Добавим еще две строки. Скопируем во вложенной таблице часть кода, отвечающего за строку","type":"unstyled","key":"628m3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. <tr>\n2. <td>\n3. Привет!\n4. </td>\n5. </tr>","type":"unstyled","key":"a60ic"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"и продублируем его несколько раз, заменив приветствие на порядковый номер строки.","type":"unstyled","key":"7476f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Должно получиться следующее:","type":"unstyled","key":"da1oq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. <table align=\"center\" border=\"1\" cellpadding=\"0\" cellspacing=\"0\" width=\"600\">\n2. <tr>\n3. <td>\n4. Строка 1\n5. </td>\n6. </tr>\n7. <tr>\n8. <td>\n9. Строка 2\n10. </td>\n11. </tr>\n12. <tr>\n13. <td>\n14.Строка 3\n15. </td>\n16. </tr>\n17. </table>","type":"unstyled","key":"32ci1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Визуально:","type":"unstyled","key":"1rsur"},{"data":{"image":{"id":"5f64b280b142594c53db1752"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5r15c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":16,"style":"BOLD"},{"length":9,"offset":106,"style":"BOLD"}],"text":"Давайте добавим цвет фона отдельно для каждой строки. Так как в HTML существует для этого специальный тег <bgcolor>, следует использовать его вместо CSS стилей. Обратите внимание, что выбирая цвет, нужно указывать все 6 символов кода, так как сокращенные три символа могут попросту не сработать.","type":"unstyled","key":"e9tmv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. <table align=\"center\" border=\"1\" cellpadding=\"0\" cellspacing=\"0\" width=\"600\">\n2. <tr>\n3. <td bgcolor=\"#ffa500\">\n4. Строка 1\n5. </td>\n6. </tr>\n7. <tr>\n8. <td bgcolor=\"#ffffff\">\n9. Строка 2\n10. </td>\n11. </tr>\n12. <tr>\n13. <td bgcolor=\"#1e90ff\">\n14. Строка 3\n15. </td>\n16. </tr>\n17. </table>","type":"unstyled","key":"bmjcm"},{"data":{"image":{"id":"5f64b280b142594c53db1753"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ts4a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сосредоточимся на первой строке – это будет хедер письма.","type":"unstyled","key":"cacks"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 1. Верстка хедера письма.","type":"header-three","key":"f1f5i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":104,"style":"BOLD"},{"length":15,"offset":209,"style":"BOLD"}],"text":"В планах – разместить в первой строке изображение с логотипом и названием компании. Но для начала нужно настроить отступы, которые будут со всех сторон изображения до внутренних границ ячейки. За это отвечает тег — <padding>.","type":"unstyled","key":"36t2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Работая с <padding>, важно помнить о необходимости указывать каждое значение отступа (сверху, снизу, слева, справа), иначе результаты могут оказаться непредсказуемыми.","type":"unstyled","key":"c2md8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":81,"style":"ITALIC"}],"text":"Прописывая параметры, вполне допустимо использовать краткий вариант записи, типа padding: 10px 10px 5px 5px;.","type":"unstyled","key":"2ga6v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":78,"offset":66,"style":"ITALIC"}],"text":"Если же возникают проблемы, их решит длинный вариант записи, типа padding-top: 10px; padding-right: 10px; padding-bottom: 5px; padding-left: 5px;.","type":"unstyled","key":"566nd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":112,"style":"BOLD"}],"text":"В случае, когда почтовый клиент удаляет ваш инлайновый CSS или вносит свои правки в ваше письмо, можно пойти на хитрость. Вместо того, чтобы использовать тег <padding>, добавляйте пустые ячейки в таблице, тем самым создавая нужное пространство. Такие дополнительные ячейки будут пустыми (с кодом внутри), но с четко установленной высотой или шириной.","type":"unstyled","key":"dvps3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например:","type":"unstyled","key":"mgn7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<tr><td style=\"font-size: 0; line-height: 0;\" height=\"10\"> </td></tr>","type":"unstyled","key":"f4tmk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обращаем ваше внимание, что стили правильнее будет прописывать внутри тега <td>, но не внутри <p> или <div>, последние ведут себя более непредсказуемо.","type":"unstyled","key":"57dtp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":150,"style":"BOLD"}],"text":"В случае с нашим примером письма, мы применяем внутренний CSS для настройки отступов для изображения. После вставки изображения, необходимо прописать alt текст, который будет видеть получатель на месте картинки, если картинки отключены почтовиком. И важно добавить параметр style=»display:block;», наличие которого гарантирует, что почтовый клиент не добавит лишних пробелов под картинкой. При необходимости, можно отцентровать изображение, добавив align=»center» в тег <td>.","type":"unstyled","key":"2rc2t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"},{"length":377,"offset":11,"style":"ITALIC"}],"text":"Примечание. Помните, что большинство почтовых клиентов по умолчанию блокируют изображения. Поэтому напишите в alt тексте подсказку клиенту, картинка на какую тематику должна быть вместо пустого места. К тому же, не стоит на картинках писать важную уникальную информацию, которая не дублируется в письме. Ведь тогда в случае блокировки изображений, ваше письмо будет абсолютно бесполезным.","type":"blockquote","key":"860kn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример кода Строки 1 с вставленным изображением:","type":"unstyled","key":"5bi65"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. <td align=\"center\" style=\"padding: 20px 0px 30px 0px;\" bgcolor=\"#ffa500\">\n2. <img width=\"600\" style=\"display: block;\" alt=\"СМС и Email маркетинг\" src=\"E:\\epochta\\БЛОГ\\mailer_html_img.png\">\n3. </td>","type":"unstyled","key":"cp1ta"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Визуально:","type":"unstyled","key":"dgno8"},{"data":{"image":{"id":"5f64b2804c07ce06042def3c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3np2a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 2. Работа с контентом в HTML шаблоне письма","type":"header-three","key":"9bntg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":19,"style":"BOLD"}],"text":"Для начала следует указать отступы внутри средней ячейки (второй строки), чтобы новая вложенная в неё таблица с контентом красиво смотрелась, не сливаясь с ней основными границами. Вы уже знаете, что такие отступы от сторон элемента, что будет внутри ячейки, задаются с помощью тега <padding>. Приступайте! \uD83D\uDE09","type":"unstyled","key":"8uugo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Визуально должно получиться:","type":"unstyled","key":"8onr7"},{"data":{"image":{"id":"5f64b280725dfb452426532f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5gjki"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":25,"style":"BOLD"}],"text":"Теперь нужно подготовить место для контента. Как упоминалось выше, нужно добавить еще одну вложенную таблицу. Это будет таблица с тремя строками:","type":"unstyled","key":"cu6c2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"одна – для заголовка,","type":"unordered-list-item","key":"c04is"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"вторая – для краткого описания статьи,","type":"unordered-list-item","key":"fvu63"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"третья – для строки с двумя столбцами.","type":"unordered-list-item","key":"483f4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поехали!","type":"unstyled","key":"6fme7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ширина таблицы, которая будет во второй строке должна стоять не в пикселях, а в процентах (100%). Это нужно, если хотите, чтобы письмо было респонсивным.","type":"unstyled","key":"155vs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код Строки 2 с вложенной таблицей:","type":"unstyled","key":"eqdqj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. <td bgcolor=\"#ffffff\" style=\"padding: 40px 30px 40px 30px;\">\n2. <table border=\"1\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\">\n3. <tr>\n4. <td>\n5. Строка 1\n6. </td>\n7. </tr>\n8. <tr>\n9. <td>\n10. Строка 2\n11. </td>\n12. </tr>\n13. <tr>\n14. <td>\n15. Строка 3\n16. </td>\n17. </tr>\n18. </table>\n19. </td>","type":"unstyled","key":"f3ak8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Визуально:","type":"unstyled","key":"8higp"},{"data":{"image":{"id":"5f64b283b142594c53db1dc5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8lb4j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пишем заголовок статьи и её краткое описание. В строке с описанием можно добавить отступы для красивого отображения текста. Обратите внимание, что программа ePochta Mailer позволяет добавлять и изменять текст непосредственно в визуальном редакторе, без перехода на вкладку HTML кода.","type":"unstyled","key":"1748s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вложенная таблица с текстом:","type":"unstyled","key":"e8lcu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. <table width=\"100%\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">\n2. <tbody>\n3. <tr>\n4. <td>\n5. Продвижение бренда в Вайбер: массовые рассылки в мессенджерах\n6. </td>\n7. </tr>\n8. <tr>\n9. <td style=\"padding: 20px 0px 30px 0px;\">\n10. Cейчас Viber — это не только приложение для личных переписок, но и эффективный канал коммерческого продвижения товаров и услуг.\n11. Только ленивые не говорят о том, что вайбер для бизнеса — это действительно эффективный и дешевый инструмент. Так ли это? Предлагаем проверить эти утверждения на соответствие действительности.\n12. </td>\n13. </tr>\n14. <tr>\n15. <td>\n16. Строка 3\n17. </td>\n18. </tr>\n19. </tbody>\n20. </table>","type":"unstyled","key":"fuhk0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Визуально:","type":"unstyled","key":"5tdfg"},{"data":{"image":{"id":"5f64b2834c07ce06042df665"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7uegp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для последней строки таблицы мы подготовили две колонки с картинкой и текстом.","type":"unstyled","key":"9u2qr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте по порядку.","type":"unstyled","key":"7q4rt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Во-первых, так как нам нужно расстояние между столбцами таблицы, а атрибут <margin> мы использовать не можем, то немножко схитрим и создадим таблицу с тремя столбцами. Просто средний столбец будет пустым и узким.","type":"unstyled","key":"b9i60"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основной параметр столбца – ширина. В данном случае мы будет ориентироваться на ширину картинки, которая будет размещена в нем. Её ширина 260px. И чтобы не запутаться, высчитывая, какой же процент составляют 260 пикселей из таблицы на 540px* (а это будет 48,1%), проще будет указать известную ширину.","type":"unstyled","key":"a6nnd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":110,"offset":0,"style":"ITALIC"}],"text":"*Ширина вложенной таблицы 540px – это ширина основной таблицы в 600px минус отступы, по 30px с каждой стороны.","type":"unstyled","key":"6tmhi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итого, два столбца по 260 пикселей + средний пустой столбец на 20px.","type":"unstyled","key":"pgt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Укажем также для обоих столбцов значение valign=»top», что выровняет текст по вертикали, по верхнему краю строки, независимо от количества текста в каждом столбце. По умолчанию, значение valign считается middle; не забудьте его изменить.","type":"unstyled","key":"6gmfa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. <table border=\"1\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\">\n2. <tr>\n3. <td width=\"260\" valign=\"top\">\n4. Колонка 1\n5. </td>\n6. <td style=\"font-size: 0; line-height: 0;\" width=\"20\">\n7. \n8. </td>\n9. <td width=\"260\" valign=\"top\">\n10. Колонка 3\n11. </td>\n12. </tr>\n13. </table>","type":"unstyled","key":"3qimc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Визуально:","type":"unstyled","key":"8voie"},{"data":{"image":{"id":"5f64b284c833846a1ddf1a89"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"98d9v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавляем изображения и контент.","type":"unstyled","key":"7n29k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поскольку, нам снова нужны две строки, вставляем еще одну таблицу в каждую из колонок, не забывая об отступах.","type":"unstyled","key":"4nki7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. <table width=\"100%\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">\n2. <tbody>\n3. <tr>\n4. <td width=\"260\" valign=\"top\">\n5. <table width=\"100%\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">\n6. <tbody>\n7. <tr><td> \n8. <img width=\"260\" height=\"160\" style=\"display: block;\" alt=\"Картинка для колонки 1\" src=\"E:\\epochta\\БЛОГ\\битые картинки на блоге\\iStock_000004384999XSmall.jpg\"> </td>\n9. </tr>\n10. <tr>\n11. <td style=\"padding: 25px 0px 0px 0px;\">\n12. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.\n13. </td>\n14. </tr>\n15. </tbody> </table>\n16. </td>\n17. <td width=\"20\" style=\"line-height: 0; font-size: 0px;\">\n18. \n19. </td>\n20. <td width=\"260\" valign=\"top\">\n21. <table width=\"100%\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">\n22. <tbody> <tr>\n23. <td>\n24. \n25. <img width=\"260\" height=\"160\" style=\"display: block;\" alt=\"Картинка для колонки 3\" src=\"E:\\epochta\\БЛОГ\\битые картинки на блоге\\greed.jpeg\"> </td>\n26. </tr>\n27. <tr>\n28. <td style=\"padding: 25px 0px 0px 0px;\">\n29. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.\n30. </td>\n31. </tr>\n32. </tbody> </table>\n33. </td>\n34. </tr>\n35. </tbody> </table>","type":"unstyled","key":"e6lrt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Визуально:","type":"unstyled","key":"7kgs9"},{"data":{"image":{"id":"5f64b284b142594c53db1f20"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"37g6t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 3. Создание HMTL кода футера email рассылки","type":"header-three","key":"5c9t6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основные компоненты футера – контакты компании и ссылка отписки. Как видите, это два разных элемента и нам снова нужно разделить строку на две колонки с помощью дополнительных таблиц.","type":"unstyled","key":"bj5jd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы не забыть, сначала добавим отступы, а после – таблицы.","type":"unstyled","key":"3begv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отступы:","type":"unstyled","key":"782bl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<td bgcolor=\"#1e90ff \" style=\"padding: 30px 30px 30px 30px;\">\nСтрока 3\n</td>","type":"unstyled","key":"51tt6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Визуально:","type":"unstyled","key":"m25m"},{"data":{"image":{"id":"5f64b286725dfb452426603d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5m9kg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разделяем строку на две колонки с помощью дополнительной таблицы.","type":"unstyled","key":"bs9ih"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. <table border=\"1\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\">\n2. <tr>\n3. <td>\n4. Колонка 1\n5. </td>\n6. <td>\n7. Колонка 2\n8. </td>\n9. </tr>\n10.</table>","type":"unstyled","key":"t16n"},{"data":{"image":{"id":"5f64b2874c07ce06042dfd3d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"4h2f9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В данном шаблоне первая колонка будет для контактных данных компании, вторая – для ссылки отписки. Вы можете добавлять иконки соцсетей, изменять количество колонок и расположение информации абсолютно в любом формате.","type":"unstyled","key":"bhh3v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дополнительная таблица с информацией футера:","type":"unstyled","key":"1tcpl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. <table width=\"100%\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">\n2. <tbody><tr>\n3. <td width=\"280\">\n4. <p>Компания ePochta<br>\n5. support@epochta.ru</p>\n6. </td>\n7. <td align=\"right\">\n8. Вы получили это письмо как клиент нашей компании. Чтобы отписаться от рассылки, нажмите на ссылку ниже.\n9. </td>\n10. </tr>\n11. </tbody></table>","type":"unstyled","key":"7e9k1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Визуально:","type":"unstyled","key":"9ssvp"},{"data":{"image":{"id":"5f64b288b142594c53db26f0"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"eb0p2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":17,"style":"BOLD"},{"length":24,"offset":48,"style":"BOLD"},{"length":13,"offset":106,"style":"BOLD"}],"text":"Вы заметили, что текст во второй колонке футера выровнен по правому краю? Это возможно благодаря атрибуту align=»right» для тега <td>.","type":"unstyled","key":"617ao"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаблон готов!","type":"unstyled","key":"3vq3d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Верстка дизайна шаблона email рассылки","type":"header-two","key":"dq681"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Первая часть статьи касалась структуры макета электронного сообщения. Сейчас же мы немного поговорим об оформлении и дизайне.","type":"unstyled","key":"arlns"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":49,"style":"BOLD"}],"text":"Возможностями встроенного CSS вы можете изменять параметры шрифта – использовать тег <b> или <strong> для жирного шрифта, прописывать размер и название непосредственно семейства шрифта.","type":"unstyled","key":"bmaml"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Возьмем для примера заголовок статьи «Продвижение бренда в Вайбер: массовые рассылки в мессенджерах» в уже созданном шаблоне и зададим ему следующие параметры:","type":"unstyled","key":"bgn2v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. <td style=\"color: #153643; font-family: Arial, sans-serif; font-size: 24px;\"><p align=\"center\">\n2. Продвижение бренда в Вайбер:<br>массовые рассылки в мессенджерах\n3. </p></td>","type":"unstyled","key":"1a7q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Посмотрите, как изменился текст:","type":"unstyled","key":"b7cd2"},{"data":{"image":{"id":"5f64b288b142594c53db26f1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5d8hj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь уберем границы таблиц, которые мы оставляли, чтобы было визуально легко отследить изменения в структуре. Для этого на вкладке HTML код нажмите CTRL+F или перейдите в меню Правка – Найти. В открывшемся диалоговом окне выберите функцию Заменить и задайте значение border=»1″ заменить на border=»0″. Перейдите во вкладку Сообщение – все границы пропали, перед вами чистый готовый макет email сообщения.","type":"unstyled","key":"enjus"},{"data":{"image":{"id":"5f64b289725dfb45242662f0"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1st0h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При желании, можно оставить границу для основной таблицы в 600px, сделав её мало заметной, например:","type":"unstyled","key":"bhp6a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<table width=\"600\" align=\"center\" style=\"border-collapse: collapse; border: 1px solid #cccccc;\" cellspacing=\"0\" cellpadding=\"0\">","type":"unstyled","key":"8v2p2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавим небольшой отступ в самой первой строке, чтобы фон не прилипал к самому верху страницы: 1. <table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n2. <tbody>><tr>\n3. <td style=\"padding: 20px 0px 30px;\">","type":"unstyled","key":"df1kn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А теперь – проба пера: отправляем письмо на тестовый email адрес.","type":"unstyled","key":"dfahd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы можете как создать список из десятка адресов на различных почтовых клиентах и запустить тестовую рассылку, так и отправить одно письмо с помощью меню Проба, указав один адрес получателя сообщения.","type":"unstyled","key":"1mp0g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот так созданный шаблон выглядит в Gmail","type":"unstyled","key":"59vul"},{"data":{"image":{"id":"5f64b28ac833846a1ddf2750"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ero4b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создавайте собственные брендовые email шаблоны, тестируйте и радуйте клиентов красочными рассылками. ePochta Mailer обладает мощнейшим функционалом для создания сообщений. В статье основной задачей было самостоятельно написать код шаблона, поэтому мы не затрагивали возможности программы. Детальнее о ePochta Mailer вы можете прочитать на нашем сайте.","type":"unstyled","key":"93di4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И пусть ваши клиенты с удовольствием читают ваши рассылки!","type":"unstyled","key":"6fi8g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"nMH234pEsJuVZyAJfVTP"}],"entityMap":{"0":{"data":{"href":"https://www.epochta.ru/products/mailer/","url":"https://www.epochta.ru/products/mailer/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://www.epochta.ru/blog/email-marketing/kak-sozdat-html-shablon-dlya-email-rassylki/","url":"https://www.epochta.ru/blog/email-marketing/kak-sozdat-html-shablon-dlya-email-rassylki/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://www.epochta.ru/blog/articles/20-html-email-advices/","url":"https://www.epochta.ru/blog/articles/20-html-email-advices/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}</article></body></html>

{"draftJsState":{"blocks":[{"data":{"image":{"id":"5f64b268c833846a1ddee5ff"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5atti"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Верстка HTML-письма с нуля – работа не из легких. Основная задача – создать универсальный код, который будет понятен различным почтовым клиентам и одинаково красиво будет отображаться как на телефоне, планшете, так и на компьютере.","type":"unstyled","key":"5qsh4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как правило, чем «древнее» код, тем выше вероятность, что он будет корректно работать. И хотя сегодня существуют блочные редакторы, которые упрощают верстку писем, в основе их работы заложены всё те же старые принципы разработки HTML шаблонов.","type":"unstyled","key":"5h6pr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Существуют два основных правила, о которых всегда стоит помнить, приступая к верстке письма:","type":"unstyled","key":"6c8po"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":49,"offset":0,"style":"BOLD"}],"text":"Используйте таблицы при создании дизайна шаблона. Это будут огромные таблицы с большим количеством вложенных таблиц. Но такой подход помогает сохранить нужный дизайн на любом устройстве и в любом почтовом клиенте. Представьте, что вы вернулись на 20 лет назад – и верстайте \uD83D\uDE42","type":"unordered-list-item","key":"3p9le"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"Используйте внутренние CSS стили. Некоторые почтовые клиенты будут удалять всё, что находится в тегах и , включая CSS. Поэтому, для изменения стилей различных элементов письма — цвет, фон, шрифты — рекомендуется прописывать параметры отдельно для каждого элемента в теле письма.","type":"unordered-list-item","key":"3fid6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте разбираться детальнее.","type":"unstyled","key":"b30gf"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":40,"offset":453}],"inlineStyleRanges":[],"text":"Где писать код шаблона? Не в Microsoft Word же, правда? Удобно и понятно, когда сразу видишь, как выглядит написанный код и в каком виде его получит клиент. Программа для массовых email рассылок ePochta Mailer имеет прекрасный функционал для параллельного написания кода и просмотра созданного шаблона в режиме реального времени. Поэтому здесь и далее все примеры по созданию, редактированию и отправке письма будут представлены с ее помощью. Вы можете скачать софт для массовых Емейл рассылок бесплатную демо-версию программы и читая статью, сразу тренироваться в сотворении своего email шаблона.","type":"unstyled","key":"4ubut"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Формат шаблона html-писем","type":"header-two","key":"2bp8b"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":14,"offset":50}],"inlineStyleRanges":[{"length":20,"offset":246,"style":"BOLD"}],"text":"Первым делом вам нужно определиться со структурой шаблона письма на основе таблицы. Для рассылок, лучше всего работают одно- и двухколоночные макеты, потому что они позволяют максимально четко и доступно структурировать большой объем информации. Одноколоночный макет к тому же отлично отображается в мобильной версии и на планшете.","type":"unstyled","key":"evsq1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чаще всего одноколоночный макет включает в себя:","type":"unstyled","key":"bdi10"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"Хедер (шапку), что содержит логотип и навигационные ссылки с родительского вебсайта.","type":"ordered-list-item","key":"1fu7k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":9,"style":"BOLD"}],"text":"Основное тело письма с контентом, картинками и ссылками на веб-страницы с полной информацией, обзор которой подан в письме.","type":"ordered-list-item","key":"f2egi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"Футер (подвал) письма, который, бывает, дублирует ссылки навигации, а также включает в себя инструкцию на отписку и ссылку отписки непосредственно.","type":"ordered-list-item","key":"ar8n0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":26,"style":"BOLD"}],"text":"Те же элементы содержит и двухколоночный макет, с той лишь разницей, что колонки у него две и при отображении письма на мобильном устройстве колонки могут сдвигаться одна под другую (принцип респонсивности), а могут масштабироваться согласно размеру экрана (что не всегда удобно, если шрифт получается слишком мелким).","type":"unstyled","key":"915fn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как сверстать HTML шаблон письма: Создание документа.","type":"header-two","key":"ap9u5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML код любого email сообщения состоит из двух частей:","type":"unstyled","key":"afh4h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"UNDERLINE"}],"text":"Шапка (Header). Всё, что будет обернуто в тег и , почтовый клиент будет принимать за шапку письма.","type":"ordered-list-item","key":"dlbmh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"UNDERLINE"}],"text":"Тело (Body). Код, размещенный внутри тега и будет использован для создания структуры вашего email сообщения.","type":"ordered-list-item","key":"5g2cs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Написание HTML кода электронного сообщения начинается с создания документа типа XHTML:","type":"unstyled","key":"b4r1m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. \n2. \n3. \n4. \n5. Инструкция Создания Email Шаблона <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"/>\n6. </head>\n7. </html>","type":"unstyled","key":"fkvoc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"<!DOCTYPE> объясняет почтовому, какие HTML-теги ожидать в дальнейшем, и какому набору правил HTML и CSS вы придерживались, создавая письмо. Несмотря на то, что некоторые почтовые клиенты (Gmail, Google Apps, Yahoo! Mail и Outlook.com) заменят ваш хедер на собственный, мы рекомендуем включить данный код в документ.","type":"unstyled","key":"8m0sb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"BOLD"},{"length":11,"offset":107,"style":"BOLD"}],"text":"<meta http-equiv=»Content-Type» /> указывает, как обрабатывать текст и специальные символы в вашем письме.\n«text/html» дает понять механизму, что рассматривать следующие строки текста нужно как html.","type":"unstyled","key":"7fp26"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"<meta name=»viewport»/> указывает устройство, на котором просматривается электронное письмо, чтобы установить видимую область сообщения в соответствии с шириной экрана.","type":"unstyled","key":"amfve"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":51,"style":"BOLD"}],"text":"Заголовок email сообщения записывается внутри тега <title>. В таком случае, если получатель выберет «Просмотр в Интернете», заголовок сообщения будет отображаться на вкладке браузера.","type":"unstyled","key":"cvkr6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Верстка тела email сообщения. Создание таблицы","type":"header-two","key":"2a7oo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":55,"style":"BOLD"}],"text":"Общая структура письма создается с использованием тега <body>.","type":"unstyled","key":"9e1ao"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Прежде всего, устанавливаем нулевое значение для отступов (теги <margin> и <padding>), чтобы избежать лишнего пустого пространства в шаблоне.","type":"unstyled","key":"3r62n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ширина главной таблицы должна быть 100% (table width=»100%»). Она выступает фактически основным каркасом, «телом» email сообщения. В отличие от тега <body>, работая с таблицей, вы можете работать со стилями: например, чтобы задать общий цвет фона для всего письма, его нужно прописать в параметрах этой главной таблицы.","type":"unstyled","key":"9q894"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Значения тегов <cellpadding> и <cellspacing> тоже должны равняться нулю, опять же, во избежание ненужного пустого пространства. Данные теги отвечают за отступы от границ ячейки таблицы.","type":"unstyled","key":"5bpbl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"},{"length":195,"offset":11,"style":"ITALIC"}],"text":"Примечание. Здесь и далее мы оставим значение для границы всех таблиц как 1: border=»1″. Так вам будет проще отследить структуру макета. В конце, значение можно убрать, используя функцию «Найти и заменить».","type":"blockquote","key":"2tn4f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. <body style=\"margin: 0; padding: 0;\">\n2. <table border=\"1\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\">\n3. <tr>\n4. <td>\n5. Привет!\n6. </td>\n7. </tr>\n8. </table>\n9. </body>","type":"unstyled","key":"mtum"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пока что наше письмо выглядит следующим образом:","type":"unstyled","key":"7m2h4"},{"data":{"image":{"id":"5f64b27fb142594c53db163d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"b35rf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"(наличие рамки – результат работы тега border=»1″)","type":"unstyled","key":"5c31r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Максимально возможная и удобная ширина для электронного сообщения, которое просматривается в почтовых клиентах на персональном компьютере – 600px. Чтобы письмо не растягивало на весь экран, нужно внутри уже созданной главной таблицы создать еще одну вложенную, строго прописав значение её ширины: width=»600″.","type":"unstyled","key":"8lfpp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":53,"offset":0,"style":"BOLD"},{"length":91,"offset":53,"style":"ITALIC"}],"text":"Золотое правило в создании HTML кода email сообщения: если нужный атрибут (тег) существует в HTML, используйте его, и не нужно обращаться к CSS.","type":"blockquote","key":"97c06"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот код вложенной таблицы следует вставить вместо слова «Привет!»","type":"unstyled","key":"fueep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. <table style=\"border-collapse: collapse;\" border=\"1\" width=\"600\" cellspacing=\"0\" cellpadding=\"0\" align=\"center\">\n2. <tbody>\n3. <tr>\n4. <td>Привет!</td>\n5. </tr>\n6. </tbody>\n7. </table>","type":"unstyled","key":"7ctqo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь письмо выглядит вот так:","type":"unstyled","key":"5tob5"},{"data":{"image":{"id":"5f64b27fc833846a1ddf129f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ahud5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":59,"style":"BOLD"}],"text":"Вы заметили, что для вложенной таблицы использован атрибут <border-collapse> со значением «collapse»? Он указывает почтовым клиентам на правильность отображения границ вокруг ячеек таблицы. Если этого не сделать, более новые версии Outlook, например, в процессе обработки письма, добавят небольшое ненужное пространство между границами двух таблиц.","type":"unstyled","key":"4nqk1"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":22,"offset":33}],"inlineStyleRanges":[],"text":"Мы уже говорили о том, что любой шаблон email сообщения состоит из трёх логических частей: хедер, тело письма с основным контентом, футер.","type":"unstyled","key":"e9ojb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь нужно отобразить это структурно в уже созданном нами шаблоне. Добавим еще две строки. Скопируем во вложенной таблице часть кода, отвечающего за строку","type":"unstyled","key":"628m3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. <tr>\n2. <td>\n3. Привет!\n4. </td>\n5. </tr>","type":"unstyled","key":"a60ic"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"и продублируем его несколько раз, заменив приветствие на порядковый номер строки.","type":"unstyled","key":"7476f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Должно получиться следующее:","type":"unstyled","key":"da1oq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. <table align=\"center\" border=\"1\" cellpadding=\"0\" cellspacing=\"0\" width=\"600\">\n2. <tr>\n3. <td>\n4. Строка 1\n5. </td>\n6. </tr>\n7. <tr>\n8. <td>\n9. Строка 2\n10. </td>\n11. </tr>\n12. <tr>\n13. <td>\n14.Строка 3\n15. </td>\n16. </tr>\n17. </table>","type":"unstyled","key":"32ci1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Визуально:","type":"unstyled","key":"1rsur"},{"data":{"image":{"id":"5f64b280b142594c53db1752"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5r15c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":16,"style":"BOLD"},{"length":9,"offset":106,"style":"BOLD"}],"text":"Давайте добавим цвет фона отдельно для каждой строки. Так как в HTML существует для этого специальный тег <bgcolor>, следует использовать его вместо CSS стилей. Обратите внимание, что выбирая цвет, нужно указывать все 6 символов кода, так как сокращенные три символа могут попросту не сработать.","type":"unstyled","key":"e9tmv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. <table align=\"center\" border=\"1\" cellpadding=\"0\" cellspacing=\"0\" width=\"600\">\n2. <tr>\n3. <td bgcolor=\"#ffa500\">\n4. Строка 1\n5. </td>\n6. </tr>\n7. <tr>\n8. <td bgcolor=\"#ffffff\">\n9. Строка 2\n10. </td>\n11. </tr>\n12. <tr>\n13. <td bgcolor=\"#1e90ff\">\n14. Строка 3\n15. </td>\n16. </tr>\n17. </table>","type":"unstyled","key":"bmjcm"},{"data":{"image":{"id":"5f64b280b142594c53db1753"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ts4a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сосредоточимся на первой строке – это будет хедер письма.","type":"unstyled","key":"cacks"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 1. Верстка хедера письма.","type":"header-three","key":"f1f5i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":104,"style":"BOLD"},{"length":15,"offset":209,"style":"BOLD"}],"text":"В планах – разместить в первой строке изображение с логотипом и названием компании. Но для начала нужно настроить отступы, которые будут со всех сторон изображения до внутренних границ ячейки. За это отвечает тег — <padding>.","type":"unstyled","key":"36t2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Работая с <padding>, важно помнить о необходимости указывать каждое значение отступа (сверху, снизу, слева, справа), иначе результаты могут оказаться непредсказуемыми.","type":"unstyled","key":"c2md8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":81,"style":"ITALIC"}],"text":"Прописывая параметры, вполне допустимо использовать краткий вариант записи, типа padding: 10px 10px 5px 5px;.","type":"unstyled","key":"2ga6v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":78,"offset":66,"style":"ITALIC"}],"text":"Если же возникают проблемы, их решит длинный вариант записи, типа padding-top: 10px; padding-right: 10px; padding-bottom: 5px; padding-left: 5px;.","type":"unstyled","key":"566nd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":112,"style":"BOLD"}],"text":"В случае, когда почтовый клиент удаляет ваш инлайновый CSS или вносит свои правки в ваше письмо, можно пойти на хитрость. Вместо того, чтобы использовать тег <padding>, добавляйте пустые ячейки в таблице, тем самым создавая нужное пространство. Такие дополнительные ячейки будут пустыми (с кодом внутри), но с четко установленной высотой или шириной.","type":"unstyled","key":"dvps3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например:","type":"unstyled","key":"mgn7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<tr><td style=\"font-size: 0; line-height: 0;\" height=\"10\"> </td></tr>","type":"unstyled","key":"f4tmk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обращаем ваше внимание, что стили правильнее будет прописывать внутри тега <td>, но не внутри <p> или <div>, последние ведут себя более непредсказуемо.","type":"unstyled","key":"57dtp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":150,"style":"BOLD"}],"text":"В случае с нашим примером письма, мы применяем внутренний CSS для настройки отступов для изображения. После вставки изображения, необходимо прописать alt текст, который будет видеть получатель на месте картинки, если картинки отключены почтовиком. И важно добавить параметр style=»display:block;», наличие которого гарантирует, что почтовый клиент не добавит лишних пробелов под картинкой. При необходимости, можно отцентровать изображение, добавив align=»center» в тег <td>.","type":"unstyled","key":"2rc2t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"},{"length":377,"offset":11,"style":"ITALIC"}],"text":"Примечание. Помните, что большинство почтовых клиентов по умолчанию блокируют изображения. Поэтому напишите в alt тексте подсказку клиенту, картинка на какую тематику должна быть вместо пустого места. К тому же, не стоит на картинках писать важную уникальную информацию, которая не дублируется в письме. Ведь тогда в случае блокировки изображений, ваше письмо будет абсолютно бесполезным.","type":"blockquote","key":"860kn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример кода Строки 1 с вставленным изображением:","type":"unstyled","key":"5bi65"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. <td align=\"center\" style=\"padding: 20px 0px 30px 0px;\" bgcolor=\"#ffa500\">\n2. <img width=\"600\" style=\"display: block;\" alt=\"СМС и Email маркетинг\" src=\"E:\\epochta\\БЛОГ\\mailer_html_img.png\">\n3. </td>","type":"unstyled","key":"cp1ta"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Визуально:","type":"unstyled","key":"dgno8"},{"data":{"image":{"id":"5f64b2804c07ce06042def3c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3np2a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 2. Работа с контентом в HTML шаблоне письма","type":"header-three","key":"9bntg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":19,"style":"BOLD"}],"text":"Для начала следует указать отступы внутри средней ячейки (второй строки), чтобы новая вложенная в неё таблица с контентом красиво смотрелась, не сливаясь с ней основными границами. Вы уже знаете, что такие отступы от сторон элемента, что будет внутри ячейки, задаются с помощью тега <padding>. Приступайте! \uD83D\uDE09","type":"unstyled","key":"8uugo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Визуально должно получиться:","type":"unstyled","key":"8onr7"},{"data":{"image":{"id":"5f64b280725dfb452426532f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5gjki"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":25,"style":"BOLD"}],"text":"Теперь нужно подготовить место для контента. Как упоминалось выше, нужно добавить еще одну вложенную таблицу. Это будет таблица с тремя строками:","type":"unstyled","key":"cu6c2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"одна – для заголовка,","type":"unordered-list-item","key":"c04is"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"вторая – для краткого описания статьи,","type":"unordered-list-item","key":"fvu63"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"третья – для строки с двумя столбцами.","type":"unordered-list-item","key":"483f4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поехали!","type":"unstyled","key":"6fme7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ширина таблицы, которая будет во второй строке должна стоять не в пикселях, а в процентах (100%). Это нужно, если хотите, чтобы письмо было респонсивным.","type":"unstyled","key":"155vs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код Строки 2 с вложенной таблицей:","type":"unstyled","key":"eqdqj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. <td bgcolor=\"#ffffff\" style=\"padding: 40px 30px 40px 30px;\">\n2. <table border=\"1\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\">\n3. <tr>\n4. <td>\n5. Строка 1\n6. </td>\n7. </tr>\n8. <tr>\n9. <td>\n10. Строка 2\n11. </td>\n12. </tr>\n13. <tr>\n14. <td>\n15. Строка 3\n16. </td>\n17. </tr>\n18. </table>\n19. </td>","type":"unstyled","key":"f3ak8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Визуально:","type":"unstyled","key":"8higp"},{"data":{"image":{"id":"5f64b283b142594c53db1dc5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8lb4j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пишем заголовок статьи и её краткое описание. В строке с описанием можно добавить отступы для красивого отображения текста. Обратите внимание, что программа ePochta Mailer позволяет добавлять и изменять текст непосредственно в визуальном редакторе, без перехода на вкладку HTML кода.","type":"unstyled","key":"1748s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вложенная таблица с текстом:","type":"unstyled","key":"e8lcu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. <table width=\"100%\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">\n2. <tbody>\n3. <tr>\n4. <td>\n5. Продвижение бренда в Вайбер: массовые рассылки в мессенджерах\n6. </td>\n7. </tr>\n8. <tr>\n9. <td style=\"padding: 20px 0px 30px 0px;\">\n10. Cейчас Viber — это не только приложение для личных переписок, но и эффективный канал коммерческого продвижения товаров и услуг.\n11. Только ленивые не говорят о том, что вайбер для бизнеса — это действительно эффективный и дешевый инструмент. Так ли это? Предлагаем проверить эти утверждения на соответствие действительности.\n12. </td>\n13. </tr>\n14. <tr>\n15. <td>\n16. Строка 3\n17. </td>\n18. </tr>\n19. </tbody>\n20. </table>","type":"unstyled","key":"fuhk0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Визуально:","type":"unstyled","key":"5tdfg"},{"data":{"image":{"id":"5f64b2834c07ce06042df665"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7uegp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для последней строки таблицы мы подготовили две колонки с картинкой и текстом.","type":"unstyled","key":"9u2qr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте по порядку.","type":"unstyled","key":"7q4rt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Во-первых, так как нам нужно расстояние между столбцами таблицы, а атрибут <margin> мы использовать не можем, то немножко схитрим и создадим таблицу с тремя столбцами. Просто средний столбец будет пустым и узким.","type":"unstyled","key":"b9i60"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основной параметр столбца – ширина. В данном случае мы будет ориентироваться на ширину картинки, которая будет размещена в нем. Её ширина 260px. И чтобы не запутаться, высчитывая, какой же процент составляют 260 пикселей из таблицы на 540px* (а это будет 48,1%), проще будет указать известную ширину.","type":"unstyled","key":"a6nnd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":110,"offset":0,"style":"ITALIC"}],"text":"*Ширина вложенной таблицы 540px – это ширина основной таблицы в 600px минус отступы, по 30px с каждой стороны.","type":"unstyled","key":"6tmhi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итого, два столбца по 260 пикселей + средний пустой столбец на 20px.","type":"unstyled","key":"pgt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Укажем также для обоих столбцов значение valign=»top», что выровняет текст по вертикали, по верхнему краю строки, независимо от количества текста в каждом столбце. По умолчанию, значение valign считается middle; не забудьте его изменить.","type":"unstyled","key":"6gmfa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. <table border=\"1\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\">\n2. <tr>\n3. <td width=\"260\" valign=\"top\">\n4. Колонка 1\n5. </td>\n6. <td style=\"font-size: 0; line-height: 0;\" width=\"20\">\n7. \n8. </td>\n9. <td width=\"260\" valign=\"top\">\n10. Колонка 3\n11. </td>\n12. </tr>\n13. </table>","type":"unstyled","key":"3qimc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Визуально:","type":"unstyled","key":"8voie"},{"data":{"image":{"id":"5f64b284c833846a1ddf1a89"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"98d9v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавляем изображения и контент.","type":"unstyled","key":"7n29k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поскольку, нам снова нужны две строки, вставляем еще одну таблицу в каждую из колонок, не забывая об отступах.","type":"unstyled","key":"4nki7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. <table width=\"100%\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">\n2. <tbody>\n3. <tr>\n4. <td width=\"260\" valign=\"top\">\n5. <table width=\"100%\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">\n6. <tbody>\n7. <tr><td> \n8. <img width=\"260\" height=\"160\" style=\"display: block;\" alt=\"Картинка для колонки 1\" src=\"E:\\epochta\\БЛОГ\\битые картинки на блоге\\iStock_000004384999XSmall.jpg\"> </td>\n9. </tr>\n10. <tr>\n11. <td style=\"padding: 25px 0px 0px 0px;\">\n12. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.\n13. </td>\n14. </tr>\n15. </tbody> </table>\n16. </td>\n17. <td width=\"20\" style=\"line-height: 0; font-size: 0px;\">\n18. \n19. </td>\n20. <td width=\"260\" valign=\"top\">\n21. <table width=\"100%\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">\n22. <tbody> <tr>\n23. <td>\n24. \n25. <img width=\"260\" height=\"160\" style=\"display: block;\" alt=\"Картинка для колонки 3\" src=\"E:\\epochta\\БЛОГ\\битые картинки на блоге\\greed.jpeg\"> </td>\n26. </tr>\n27. <tr>\n28. <td style=\"padding: 25px 0px 0px 0px;\">\n29. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.\n30. </td>\n31. </tr>\n32. </tbody> </table>\n33. </td>\n34. </tr>\n35. </tbody> </table>","type":"unstyled","key":"e6lrt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Визуально:","type":"unstyled","key":"7kgs9"},{"data":{"image":{"id":"5f64b284b142594c53db1f20"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"37g6t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 3. Создание HMTL кода футера email рассылки","type":"header-three","key":"5c9t6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основные компоненты футера – контакты компании и ссылка отписки. Как видите, это два разных элемента и нам снова нужно разделить строку на две колонки с помощью дополнительных таблиц.","type":"unstyled","key":"bj5jd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы не забыть, сначала добавим отступы, а после – таблицы.","type":"unstyled","key":"3begv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отступы:","type":"unstyled","key":"782bl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<td bgcolor=\"#1e90ff \" style=\"padding: 30px 30px 30px 30px;\">\nСтрока 3\n</td>","type":"unstyled","key":"51tt6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Визуально:","type":"unstyled","key":"m25m"},{"data":{"image":{"id":"5f64b286725dfb452426603d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5m9kg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разделяем строку на две колонки с помощью дополнительной таблицы.","type":"unstyled","key":"bs9ih"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. <table border=\"1\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\">\n2. <tr>\n3. <td>\n4. Колонка 1\n5. </td>\n6. <td>\n7. Колонка 2\n8. </td>\n9. </tr>\n10.</table>","type":"unstyled","key":"t16n"},{"data":{"image":{"id":"5f64b2874c07ce06042dfd3d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"4h2f9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В данном шаблоне первая колонка будет для контактных данных компании, вторая – для ссылки отписки. Вы можете добавлять иконки соцсетей, изменять количество колонок и расположение информации абсолютно в любом формате.","type":"unstyled","key":"bhh3v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дополнительная таблица с информацией футера:","type":"unstyled","key":"1tcpl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. <table width=\"100%\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">\n2. <tbody><tr>\n3. <td width=\"280\">\n4. <p>Компания ePochta<br>\n5. support@epochta.ru</p>\n6. </td>\n7. <td align=\"right\">\n8. Вы получили это письмо как клиент нашей компании. Чтобы отписаться от рассылки, нажмите на ссылку ниже.\n9. </td>\n10. </tr>\n11. </tbody></table>","type":"unstyled","key":"7e9k1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Визуально:","type":"unstyled","key":"9ssvp"},{"data":{"image":{"id":"5f64b288b142594c53db26f0"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"eb0p2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":17,"style":"BOLD"},{"length":24,"offset":48,"style":"BOLD"},{"length":13,"offset":106,"style":"BOLD"}],"text":"Вы заметили, что текст во второй колонке футера выровнен по правому краю? Это возможно благодаря атрибуту align=»right» для тега <td>.","type":"unstyled","key":"617ao"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаблон готов!","type":"unstyled","key":"3vq3d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Верстка дизайна шаблона email рассылки","type":"header-two","key":"dq681"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Первая часть статьи касалась структуры макета электронного сообщения. Сейчас же мы немного поговорим об оформлении и дизайне.","type":"unstyled","key":"arlns"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":49,"style":"BOLD"}],"text":"Возможностями встроенного CSS вы можете изменять параметры шрифта – использовать тег <b> или <strong> для жирного шрифта, прописывать размер и название непосредственно семейства шрифта.","type":"unstyled","key":"bmaml"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Возьмем для примера заголовок статьи «Продвижение бренда в Вайбер: массовые рассылки в мессенджерах» в уже созданном шаблоне и зададим ему следующие параметры:","type":"unstyled","key":"bgn2v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. <td style=\"color: #153643; font-family: Arial, sans-serif; font-size: 24px;\"><p align=\"center\">\n2. Продвижение бренда в Вайбер:<br>массовые рассылки в мессенджерах\n3. </p></td>","type":"unstyled","key":"1a7q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Посмотрите, как изменился текст:","type":"unstyled","key":"b7cd2"},{"data":{"image":{"id":"5f64b288b142594c53db26f1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5d8hj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь уберем границы таблиц, которые мы оставляли, чтобы было визуально легко отследить изменения в структуре. Для этого на вкладке HTML код нажмите CTRL+F или перейдите в меню Правка – Найти. В открывшемся диалоговом окне выберите функцию Заменить и задайте значение border=»1″ заменить на border=»0″. Перейдите во вкладку Сообщение – все границы пропали, перед вами чистый готовый макет email сообщения.","type":"unstyled","key":"enjus"},{"data":{"image":{"id":"5f64b289725dfb45242662f0"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1st0h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При желании, можно оставить границу для основной таблицы в 600px, сделав её мало заметной, например:","type":"unstyled","key":"bhp6a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<table width=\"600\" align=\"center\" style=\"border-collapse: collapse; border: 1px solid #cccccc;\" cellspacing=\"0\" cellpadding=\"0\">","type":"unstyled","key":"8v2p2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавим небольшой отступ в самой первой строке, чтобы фон не прилипал к самому верху страницы: 1. <table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n2. <tbody>><tr>\n3. <td style=\"padding: 20px 0px 30px;\">","type":"unstyled","key":"df1kn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А теперь – проба пера: отправляем письмо на тестовый email адрес.","type":"unstyled","key":"dfahd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы можете как создать список из десятка адресов на различных почтовых клиентах и запустить тестовую рассылку, так и отправить одно письмо с помощью меню Проба, указав один адрес получателя сообщения.","type":"unstyled","key":"1mp0g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот так созданный шаблон выглядит в Gmail","type":"unstyled","key":"59vul"},{"data":{"image":{"id":"5f64b28ac833846a1ddf2750"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ero4b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создавайте собственные брендовые email шаблоны, тестируйте и радуйте клиентов красочными рассылками. ePochta Mailer обладает мощнейшим функционалом для создания сообщений. В статье основной задачей было самостоятельно написать код шаблона, поэтому мы не затрагивали возможности программы. Детальнее о ePochta Mailer вы можете прочитать на нашем сайте.","type":"unstyled","key":"93di4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И пусть ваши клиенты с удовольствием читают ваши рассылки!","type":"unstyled","key":"6fi8g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"nMH234pEsJuVZyAJfVTP"}],"entityMap":{"0":{"data":{"href":"https://www.epochta.ru/products/mailer/","url":"https://www.epochta.ru/products/mailer/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://www.epochta.ru/blog/email-marketing/kak-sozdat-html-shablon-dlya-email-rassylki/","url":"https://www.epochta.ru/blog/email-marketing/kak-sozdat-html-shablon-dlya-email-rassylki/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://www.epochta.ru/blog/articles/20-html-email-advices/","url":"https://www.epochta.ru/blog/articles/20-html-email-advices/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}</article></body></html>