Адаптивные шаблоны email писем. HTML и обычные шаблоны email-писем для рассылок
Подходит к концу 2018 год, а email-маркетинг по-прежнему может похвастаться одними из самых высоких показателей среди любых других маркетинговых приемов. А все благодаря предельно узкому таргетингу, который позволяет выстроить персонализированную коммуникацию с каждым отдельно взятым человеком. Однако возможен он только при наличии тщательно проработанной и сегментированной стратегии.
Если вам удастся все сделать правильно, то вы без труда превратите email-подписчиков в клиентов, сможете регулярно стимулировать их совершение повторных покупок, а постоянных покупателей сделать преданными поклонниками бренда, которые будут расценивать отказ от ваших услуг как предательство.
Разумеется, достижение подобного успеха в первую очередь зависит от того, насколько верным содержанием вы будете наполнять ваши письма. В этой статье мы подготовили для вас шаблоны e-mail рассылки, с которых вы можете начать свою кампанию по выращиванию лидов.
Несмотря на все передовые методы дизайна электронных писем и массу людей, заявляющих, что они отдают свое предпочтение html-шаблонам писем для email-рассылки, письма, в которых нет ничего, кроме текста, отлично работают. Более того, по данным HubSpot, по мере увеличения количества изображений в письме, показатель CTR снижается. Разумеется, эта корреляция проявляется не всегда, но для многих предприятий она более чем характерна, особенно в B2B-секторе. Так что в процессе разработки своей email-маркетинговой кампании, не стоит брезговать и письмами, которые довольно не броски в оформлении и не содержат ничего, кроме текста: для многих получателей они могут стать полной неожиданностью.
Как было сказано выше, во многих email-кампаниях место для обычных текстовых писем обязательно найдется, но еще важнее знать, в которых из них использовать изображения все же стоит.
Этот шаблон от мебельного гиганта IKEA, использованный для продвижения новинок декора и конкурса по оформлению интерьера, просто не сработал бы без визуального сопровождения. Трудно представить, как можно говорить о дизайне без использования изображений. Хотя исследования, отмеченные выше, и подтверждают тот факт, что обычные текстовые письма конвертируют лучше, все же этот подход применим ко всем ситуациям.
Пример от Boxberry демонстрирует то, каких прекрасных результатов вы можете достичь в области дизайна электронных писем, почти не прибегая к помощи изображений. Благодаря смелой, фирменной типографике и четким призывам к действию у получателя письма не остается никаких сомнений в отношении того, каким должен быть его следующих шаг.
Компания не пытается завлечь пользователей красочными изображениями, но при этом большое количество пустого пространства и яркие цвета помогают воспринимать это письмо каким угодно, но только не скучным. Прекрасный образец минималистичного дизайна.
В письме присутствует только одна фотография: девушка, которая что-то делает на планшете. Это изображение созвучно теме письма и помогает понять его посыл — приглашение пройти тест.
Все в сумме делает данный шаблон весьма удачным образцом лид-нуртуринговых писем, которые вам в обязательном порядке нужно рассылать покупателям, которым вы хотите напомнить о себе.
Еще один шаблон, дизайн которого подсказывает нам, что использовать в своих целях как можно больше национальных праздников и торговых событий, как, например, «Черная Пятница» или Новый год, — не такая уж и плохая идея. Трудно противиться специальным предложениям и акциям, когда вы уже задумали что-то купить в качестве подарка себе или своим родным. Вы можете сделать еще больше и лучше, а именно — персонализировать эти письма и содержащиеся в них предложения на основе истории покупок получателя и других взаимодействий с вашим брендом.
Не делайте ошибку, думая, что праздничные дни и прочие шопинг-события не имеют отношения к тем, кто действует на B2B-рынке: если они интересны вашей целевой аудитории, они также подойдут и вам. В этом письме сервис Square призывает своих потенциальных клиентов воспользоваться сопутствующим празднику всех влюбленных ажиотажем, разослав своим покупателям письма с рекламными акциями, и дополняет это предложение довольно убедительной статистикой, в силу которой отказать желанию кликнуть по кнопке «Get Started» и запустить кампанию становится очень трудно.
Если вам посчастливилось оказаться в одной из тех отраслей, которая привлекает внимание людей, максимально используйте этот фактор. Пожалуй, больше остальных в этом преуспели сервисы по продаже авиабилетов, и не только потому, что каждый хочет путешествовать.
Посещение других стран — не единственное, чего жаждут люди. Успех, богатство, красота, популярность и всевозможные человеческие желания — самые мощные маркетинговые стимулы. Подберите себе тот, который подходит вашей компании, отразите его в письме, и его дизайн образуется сам собой.
Этот конкретный пример демонстрирует, каким необычным может быть дизайн email-письма:
Ваше письмо может содержать текст, фотографии и авторские иллюстрации, CTA, видео, аудио, иконки социальных медиа, но главное — суметь скомпоновать все это в доступный дизайн, который интересно изучать.
В этом примере Freelancer пытается через сделанный со вкусом дизайн, напоминающий лендинг , предельно лаконично рассказать посетителям свою историю. Для платформы, которая, прежде всего, используется дизайнерами и людьми, подыскивающими себе сотрудников на «удаленку», этот хитрый набор визуальных эффектов особенно удачен, поскольку он доказывает, что Freelancer точно знает, чего хочет их целевая аудитория.
При разработке дизайна для этого письма перед дизайнерами стояла задача в одном письме одновременно прорекламировать новые проекты и статьи. Это не похоже на email от интернет-магазина, где вы можете при помощи изображений продуктов разбить контент на несколько частей. Houzz, использовав подходящие изображения и «шахматную» верстку, удалось найти верный баланс и поделить весь материал на удобочитаемые отрезки.
Для доказательства того, что перегруженные визуальные проекты тоже могут работать, взгляните на этот пример от MOO: чтобы раскрыть индивидуальность бренда через дизайн электронного письма, компания умело сочетает забавный текст с захватывающими визуальными эффектами. Такой подход может показаться сложным, но если вы располагаете талантливым дизайнером и остановили выбор на подходящем шаблоне, у вас все получится. Главное — убедитесь заранее, что посыл письма — правильный, и он будет сочетаться с таким не самым простым стилем.
Если вы продаете предметы роскоши, то вы точно не захотите, чтобы изображения забавных хомячков в очках задавали тон вашим email-кампаниям. Если же ваша целевая аудитория — профессиональные фотографы и фотолюбители, то ваше письмо должно содержать соответствующие иллюстрации. Какой бы подход вы ни применяли при разработке своих писем, оставаться верным имиджу бренда и продуктам / услугам, которые вы продаете, жизненно важно.
Люди из вашей email-базы уже не раз пересекались с вашим брендом и раньше? В ваших интересах — отразить в своих email-маркетинговых письмах тот образ, с которым они имели опыт работать, чтобы никого не смущать и не вызывать путаницы.
Оба примера выше разработаны одним брендом для разных маркетинговых кампаний. Конечно, если у вас есть широкий спектр продуктов для продвижения, то очевидно, что для каждой категории вам нужно разработать разный дизайн писем и направить их соответствующим сегментам вашей целевой аудитории, но конкретно в данном случае FOTOпроект следует одному стилю — понятному фотографам — в своей рассылке.
Новостные письма с интересным контентом попадаются крайне редко , но Ярмарке Мастеров удается выделиться на общем фоне благодаря персонализированному подходу. Обращение к покупателю по имени захватывает внимание, а предложения, ради которых человек и оформил подписку, делает его постоянным читателем вашей рассылки. И когда все это дополняется качественным дизайном с бросающимися в глаза CTA и сильными заголовками, вы получаете на выходе отличный материал.
Довольно трудно отправлять людям письма с напоминаниями о чем-либо и при этом не начать их раздражать, но образовательная платформа в примере выше справляется с этим на ура, потому что затрагивает важную для своих подписчиков тему — постоянное обучение и самосовершенствование. При этом письмо не утомляет длинным текстом, а просто предлагает ознакомиться с новыми курсами.Таким образом у читателей не остается никаких сомнений в том, что они должны принять предложение и кликнуть по CTA:
Заключение
Как вы можете видеть, хорошими результатами email-маркетинга вас может обеспечить не только дорогой и «напичканный» передовыми технологиями дизайн. Знание того, на какие сообщения будет реагировать ваша целевая аудитория, и обращение к ним на персональном уровне с учетом той информации, которой вы о них располагаете, имеет важнейшую ценность для успеха ваших кампаний.
Неважно, разрабатываете ли вы свой оригинальный дизайн с нуля или используете принятые в вашей сфере шаблоны, в первую очередь задайтесь вопросом, а почему вообще люди оформляют подписку на вашу рассылку, и используйте это понимание, чтобы еще больше приблизить человека к своему бизнесу. Даже если это означает отправить ему всего две строки текста.
Высоких вам конверсий!
По материалам: ventureharbour.com
Многие считают, что электронная почта устарела, а спам дискредитировал ее как маркетинговый инструмент. В продвижении продуктов и услуг некоторые компании делают ставку на SEO и SMM. Но на практике рассылки по-прежнему остаются самым простым и эффективным способом взаимодействия с клиентами.
Успешный email-маркетинг невозможен без правильно и красиво оформленных писем. Вы наверняка сталкивались с ситуацией, когда готовое письмо отлично выглядит в почтовом ящике google или яндекс, но корректно не отображается в Outlook. Весь секрет в адаптивности шаблона.
Гибкие или адаптивные шаблоны одинаково хорошо выглядят во всех почтовых службах и на мобильных устройствах.
В этой подборке собраны бесплатные адаптивные шаблоны для любых целей и различных сфер бизнеса.
27 шаблонов Litmus
Сервис предоставляет простые в использовании современные шаблоны писем для различных целей: запуска продукта, электронной коммерции и пр.
https://litmus.com
70 шаблонов Free Email Templates
- темные шаблоны;
- шаблоны с левой боковой панелью;
- светлые шаблоны;
- шаблоны с одной колонкой;
- шаблоны с правой боковой панелью.
http://freemailtemplates.com
45+ шаблонов Template
На этом сайте в свободном доступе не только шаблоны писем, но и сертификатов, баннеров, каталогов, этикеток и прочих материалов.
https://www.template.net/
200+ шаблонов Chamaileon
На сайте представлено более двухсот адаптивных шаблонов для регулярной и транзакционной рассылки
39 шаблонов Cakemail
- бизнес;
- ресторан;
- сезонные;
- специальные события;
- транзакционные;
- образование.
42 шаблона PixsHub
PixsHub — отличный сайт для дизайнеров. Тут вы найдете бесплатные PSD шаблоны для создания веб-сайта, мобильного приложения, иконок, наборов пользовательских интерфейсов, веб-приложений, шаблонов HTML, макетов, тем WordPress и 42 шаблона писем для рассылки
20 шаблонов MJML
MJML — это язык разметки, предназначенный для упрощения кодирования адаптивных шаблонов. На сайте представлено 8 категорий писем:
- транзакционные;
- маркетинговые;
- приветственные;
- новостные;
- квитанции;
- электронная коммерция;
- мероприятие;
- путешествие.
mjml.io
16 шаблонов ZUBR
Zurb, консалтинговая компания по дизайну, которая верит в проектирование с учетом потребностей клиента. На сайте в свободном доступе представлено 16 адаптивных шаблонов писем от приветственных до маркетинговых.
zurb.com20 шаблонов Themezy
Еще один отличный и бесплатный ресурс — Themezy. На сайте представлено 20 бесплатных адаптивных шаблонов писем для рассылки.
14 шаблонов Sendwithus
Представленные адаптивные шаблоны в виде HTML-файлов могут быть загружены и использованы с любым программным обеспечением электронной почты
3 шаблона FreshMail
FreshMail предлагает 3 бесплатных адаптивных шаблона писем для рассылки. Они представлены в двух форматах. Пакет содержит как файлы HTML, так и PSD, поэтому вы можете вносить любые изменения в графику или код.
92 шаблона Bee Free
Bee Free — это простой и бесплатный редактор писем для email-рассылки. Для редактирования представлено 92 шаблона в девяти различных категориях
На чистом HTML. Как не странно, за два года в бесплатном доступе появилось не так уж и много бесплатных решений, но то, что удалось найти, значительно превосходит по качеству любой из старой статьи.
E-mail рассылки
, несомненно, мощнейший инструмент маркетолога, но пользоваться им нужно очень осторожно. Наш народ никогда не был в восторге от рекламных писем в почтовом ящике, но если вы хороший маркетолог, то сумеете войти в контакт с получателем письма. Данная подборка не решит всех проблем, связанных с рассылками и даже не поможет их обойти, ведь обратит внимание получатель на ваше письмо, удалит или отправит его в спам, зависит не от того, какой красивый в будет дизайн, а от содержимого. Все, что я хотел сказать этой фразой - не шлите спам или каких-либо шаблонных предложений. Используйте эти html шаблоны
с умом и без вреда окружающим.
Еще раз повторю, не рассылайте спам, лучше применить эти шаблоны для рассылки различных поздравлений для ваших клиентов с праздниками. Если у вас есть интернет-магазин и имеется база пользователей, которые действительно хотят получать от вас письма, можете на остове любого html шаблона сделать рассылку с оповещением о какой-либо акции или скидке.
Итак. К вашему вниманию 20 бесплатных E-mail шаблонов для рассылок
. Пользуйтесь с умом.
Бесплатный HTML + PSD E-mail шаблон: PHStock Template
Современный HTML шаблон для E-mail рассылок с большой фоновой картинкой . Выполнен по подобию одностраничных сайтов / . В нем есть маленькая галерея изображений , исходя из этого можно предположить, что данный шаблон будет полезен фотографам или дизайнерам.Приятным дополнением является наличие PSD исходника. Он вам понадобится, если вы решите существенно изменить внешний вид.
Фоновую фотографию можно с легкостью заменить. Не используйте ворованные фото, лучше найти что-то подходящее на бесплатных фотостоках, о которых я недавно писал в топике "Бесплатные фотостоки с легальными фото ".
Адаптивный E-mail шаблон для интернет-магазина
Данный шаблон является полностью адаптивным и отлично подойдет для рассылки различных акционных предложений из вашего интернет-магазина.Помимо этого, после скачивания, в архиве вы найдете несколько цветовых вариантов оформления. Также есть отдельная папка с вариантом верстки для популярного сервиса E-mail рассылок MailChimp .
Бесплатный E-mail шаблон для мероприятия
Очень простой HTML шаблон для E-mail рассылок с крупной фоновой картинкой. Изначально заточен под рассылку с предложением посетить мероприятие, или напоминание о грядущем событии. В архиве есть PSD. Не могу сказать, что я от этого шаблона в восторге, но на безрыбье и рак рыба.
Green Village - хипстерский E-mail шаблон для блогера
E-mail шаблон Green Village выглядит немного по-хипстерски. Отлично подойдет для рассылки еженедельного дайджеста новостей или записей с вашего блога. В архиве вы найдете сам шаблон и его исходник в формате PSD.
Photon - E-mail шаблон для фотоблога
Хороший, современный шаблон для осуществления различных рассылок. Подходит для любых целей, но изначально позиционируется как E-mail шаблон для фотосайта .
KATAUSTRIA - адаптивный Email шаблон
Модный, бесплатный адаптивный шаблон с большим фоновым изображением, который послужит хорошим инструментом для вашей маркетинговой кампании.
Boxi - бесплатный E-mail шаблон в стиле Meto / Flat
Интересный шаблон, который совмещает два стиля: Meto и Flat . Состоит из блоков в виде сетки, которые выполняют разные задачи - блоки с тестом, блоки с социальными кнопками , блок с изображением и пр.
Miks Blogger Newsletter - универсальный E-mail шаблон для блогера
Чистый шаблон с откликами ушедшего в прошлое Retro стиля. Хотя дизайн мне очень нравится. Есть PSD.
Новостной HTML + PSD Email шаблон
Чистый шаблон для почтовых рассылок в светлых тонах, предназначен для рассылок новостей с новостного сайта или блога.Автор шаблона заявляет, что его творение хорошо работает на:
Apple Mail 4, 5, 6
iPhone 5, 4S, 4, 3gs, iPad
AOL Mail Firefox, Explorer, Chrome
Hotmail Firefox, Explorer, Chrome
Gmail Firefox, Explorer, Chrome
Yahoo! Mail Firefox, Explorer, Chrome
Thunderbird текущая версия, Thunderbird 3.0
Outlook.com (Firefox), Outlook.com (Explorer), Outlook.com (Chrome)
Outlook 2011, 2010, 2007, 2003, 2002/XP, 2000
Lotus Notes 8.5, Lotus Notes 8, Lotus Notes 7
Бесплатный E-mail шаблон в зеленых тонах
Шаблон с довольно древним дизайном. Я бы его и не включал в данную подборку, но в нем есть несколько преимуществ, которые редко встретишь в бесплатных аналогах - это наличие версии для сервиса рассылок MailChimp .
Готовые шаблоны – скачайте предложение в html виде
Рассылка – мощный маркетинговый инструмент. использует его для привлечения новых клиентов. Мы подготовили html шаблоны писем для рассылки и для вас, чтобы облегчить ваш труд. Теперь не нужно корпеть над темой, заголовком, дизайном и наполнением письма.
H tml-письмо шаблоны для E-mail рассылок – как это действует?
так выглядит шаблон html письма
HTML шаблон электронного письма можем редактировать мы. С вашей стороны необходима подробная информация, что должно быть в письме и небольшое поощрение в сумме 46$. Буквально через два дня вы получите шаблон с вашими данными и уникальным торговым предложением.
Мы подберем и поменяем картинки, поменяем текст на ваше коммерческое предложение и проставим необходимые ссылки.
Готовые шаблоны html писем – мы всё сделали за вас!
Какие бесплатные шаблоны вы можете получить от команды «VozniNet»?
- Акционное . Стимулируем продажи! Мы разработали и протестировали большое количество макетов писем и предоставляем наиболее эффективные варианты.
- Товарные . Доступно рассказываем об услуге/товаре! Приятное глазу расположение блоков и продающий текст заинтригуют человека.
- Новостные . Донесём клиенту самое важное! Рассказать новость – это искусство. Желаете узнать несколько советов, как сделать это лучше всего? Ждём вас в чате на .
- Опросы . Соберём информацию! Мы составляем варианты ответов, доступные вопросы и формулируем специальное предложение, которое получит человек.
- Приветственные . Приветствуем человека, представляем событие! Подписчик будет рад увидеть письмо от знакомой ему компании.
- Сегментационные . Делаем тёплой! Нет, не нужно лично переписываться с клиентом. Укажите его имя – ему будет приятно. Раскройте его интересы – и он к вам потянется.
- Реанимационные . Мотивируем подписчиков к действиям! Каждый человек очень важен. Мы встряхнем «засыпающую» аудиторию. Вернём клиентов, которые забыли о вас. Возвратим клиентов, о которых забыли вы.
HTML письма – несколько важных деталей
- Вам предоставляется полное письмо, в которое входит:
коммерческое предложение + дизайн + вёрстка. - Письмо кроссбраузерное и адаптивное, то есть открывается во всех почтах, браузерах и на всех устройствах.
Шаблоны html писем скачать бесплатно
С помощью мышки и клавиатуры мы можете редактировать шаблон: менять цветовую гамму и картинки, вставлять иконки социальных сетей и ссылки на группы, изменять логотип компании и текст письма.
Дополнительно мы организовываем создание html писем и , которые могут рассказать о вас многим людям.
Ниже представлены еще некоторые шаблоны html писем
Этот вариант очень пригодится для оповещения акционными продуктами или когда в компании добавилась услуга. Также вы можете использовать этот вариант коммерческого предложения в html виде, когда на сайте добавился новый раздел.
Это html письмо будет отлично смотреться, когда вы замените картинки на корпоративные достижения компании. Дополнив текст уникальным торговым предложением вы завоюете не один десяток клиентов.
Попробуйте разместить коммерческое предложение строительной компании в этот шаблон email письма. Замените иллюстрации, напишите текст и ярко выделите свои услуги
Этот шаблон пригодится тем, кто разработал уникальное торговое предложение для учебных учреждений. Вам нужно предложить своим клиентам школьные принадлежности, а может вы предлагаете услуги для студентов? Почему не выразить их в html формате рассылки.
Приятный шаблон для клиентов гипермаркетов или интернет магазинов. Продукция, товары, продукты — в этом письме можно вместить все что угодно.
Почему бы не продать брендовые товары таким необычным образом. Лучше email письмо, нежели несколько чёрных строк, попадающих на почту ваших клиентов.
Если у вас возникли вопросы или вы не знаете, какой шаблон email рассылки будет лучше для ваших посетителей, вы можете смело Подберём шаблон, сверстаем его под нишу вашего бизнеса, вкусно преподнесём продающим текстом и мощно призовём к покупкам!
Команда Без Возни
Здравствуйте, уважаемые друзья и гости блога! Очень рад Вас видеть у себя на страницах. Сегодня хочу вам рассказать как сделать самостоятельно простой шаблон html письма для своей электронной рассылки. А если кому-то покажется это сложным или он просто не захочет заморачиваться и создавать самостоятельно шаблон html письма , то такие люди смогут скачать себе на компьютер совершенно бесплатно этот шаблон html письма и редактировать его под свои нужды, как им будет угодно.
Так как этот бесплатный шаблон html письма очень прост в использовании и любой новичок сможет его отредактировать как ему это будет угодно.
К тому же шаблон html письма , который я вам предлагаю является адаптивным. То есть он будет одинаково хорошо отображаться на всех устройствах, включая мобильные.
Так, что давайте начнем …
Как создать адаптивный и простой шаблон html письма самому?
Если Вас это интересует, то Вы попали по адресу! И мы с вами сейчас создадим очень простой, адаптивный и красивый шаблон html письма .
Здесь Вы сразу можете посмотреть как будет выглядеть примерно ваш уже созданный мной заранее :
Вот здесь Вы можете скачать уже готовый бесплатный шаблон html письма :
Теперь начинаем создавать адаптивный шаблон html письма самостоятельно.
Для начала создадим простой пустой шаблон:
|
Что мы с вами сейчас сделали? Все просто это шаблон html письма, где мы с вами написали заголовок нашего письма «Адаптивный шаблон HTML письма» и контент со словами «Приветствую Вас!». Которые Вы в последствии будете заменять на свои собственные.
Но пока наш шаблон не является адаптивным и готовым к его использованию. Нам еще нужно с вами проделать некоторые манипуляции с ним для того, чтобы он был полностью адаптивным ко всем мобильным устройствам и мы могли его спокойно использовать в своих электронных рассылках.
Давайте теперь проделаем некоторые манипуляции, которые нам помогут избежать неправильного отображения нашего письма в разных почтовых клиентах.
Например, чтобы почта Yahoo правильно отображало наше письмо мы должны в наш шаблон добавить следующий код:
И кроме этого еще нужно назначить особые стили нашему тэгу, используя селектор атрибутов:
Body .class {}
Теперь нам надо, чтобы наше письмо правильно отображалось в Outlook и Lotus Notes 8/8.5, нам нужно сделать вот так:
|
А чтобы наше письмо правильно отображалось в Apple Mail, нам нужно сделать вот это:
Чтобы заголовок в письме правильно и красиво отображался нужно сделать вот так:
И также задаем свои стили для заголовка:
Header {padding: 40px 30px 20px 30px;}
Теперь давайте сделаем наш шаблон html письма адаптивным для всех устройств в том числе и мобильных добавлением вот этих вот нескольких блоков кода:
Это левая колонка:
|
Это правая колонка:
|
|
Добавим класс в медиа-запрос, созданный для Apple Mail:
Col425 {width: 425px!important;}
Теперь внутри ячейки добавим наш заголовок:
| ЗАГОЛОВОК |
| Адаптивный шаблон HTML письма |
И давайте еще добавим несколько классов, которые также будут использоваться как для заголовка так и для текста письма:
Subhead {font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px;} .h1 {font-size: 33px; line-height: 38px; font-weight: bold;} .h1, .h2, .bodycopy {color: #153643; font-family: sans-serif;}
Все, теперь наш заголовок закончен и выглядит симпатично. Пример смотрите вот здесь:
| Приветствую Вас! Или что-то в этом роде... |
И давайте добавим еще стили для текста:
Innerpadding {padding: 30px 30px 30px 30px;} .borderbottom {border-bottom: 1px solid #f2eeed;} .h2 {padding: 0 0 15px 0; font-size: 24px; line-height: 28px; font-weight: bold;} .bodycopy {font-size: 16px; line-height: 22px;}
И стили для кнопки:
Button {text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;} .button a {color: #ffffff; text-decoration: none;}
Еще установим ширину для нового класса ‘col380’, и добавим наши размеры в стили, чтобы позаботиться о Apple Mail. И теперь стили выглядят так:
@media only screen and (min-device-width: 601px) { .content {width: 600px !important;} .col425 {width: 425px!important;} .col380 {width: 380px!important;} }
Создадим одну колонку для изображения нашего шаблона HTML письма:
Для наших стилей CSS:
Img {height: auto;}
И теперь мы добавим строку текста без рамки внизу:
Теперь давайте создадим подвал нашего письма.Для его создания, добавим новую строку с таблицей внутри. Одна из строк будет содержать другую таблицу для наших иконок социальных сетей:
|
® Someone, somewhere 2013 Unsubscribe from this newsletter instantly |
||
|
Еще нужно добавить требуемые стили для подвала в CSS:
Footer {padding: 20px 30px 15px 30px;} .footercopy {font-family: sans-serif; font-size: 14px; color: #ffffff;} .footercopy a {color: #ffffff; text-decoration: underline;}
Ну вот в принципе и все, что я хотел вам сегодня рассказать про то, как создать адаптивный шаблон html письма для своей электронной рассылки.
Если вам понравился материал пожалуйста сделайте следующее…
- Поставьте «лайк».
- Сделайте ретвит.
- Поделитесь этим постом с друзьями в социальных сетях.
Спасибо за внимание!
