Как сделать хтмл письмо под проект
Я покажу на примере бесплатного конструктора html писем https://beefree.io/ , вы же можете взять любой другой удобный для вас.
Переходим на сайт и жмем "Начать проектирование"
Перед вами открывается панель с готовыми шаблонами.
Вы можете начать писать шаблон с нуля , либо выбрать готовый и отредачить его.
Ставим фильтры ( снимаем ползунок с PRO ) останутся все бесплатные шаблоны для вас. Выбираем любой подходящий ( у вас должно быть воображение , как бы вы видели своё письмо , а тематика здесь не важна , т.к мы меняем под свою тему)
Для себя я выбрал музыкальный шаблон .
Справа от шаблона находится меню, где вы можете выбрать любой элемент который хотите добавить в письмо, просто перетащите элемент в любое место на шаблоне.
Как сделал я?!
Я просто удалил все элементы в шаблоне , которые мне не нужны. Оставил только те , которые буду заменять. В основном это логотип , картинки , текст. Всё остальное нам не нужно - удаляем!
В вашем первом письме не должно быть никаких ссылок , даже на соц. сети! Можете конечно тестировать и поиграться с разными письмами , но я не рекомендую , поэтому удаляем!
Работа с элементами.
Нажимаем на элемент который хотим изменить , справа появится меню css свойств ( стили ). Расписывать подробно по свойствам я не буду , экспериментируйте ( все свойства , теги в html и css обычно это перевод с английского )
Как правильно заменить картинку?
Для каждой картинки желательно использовать один хостинг с трастовым доменом , чтобы меньше уходило в спам. Я использую https://imgbb.com/
Загружаем картинку , копируем ссылку вида https://ibb.co/X4KdtPr , открываем ее в браузере , жмем пкм по картинке "открыть картинку в новой вкладке", копируем полученную ссылку вида https://i.ibb.co/4fXDpLn/bee.png . Это прямая ссылка до нашего логотипа.
В шаблоне жмем по картинке которую хотим сменить, и заменяем ссылку на нашу .
Редачим наше письмо.
Жмем "Экспорт" и качаем наше письмо ( zip архив )
Теперь вы можете открыть письмо с помощью любого браузера
Видим , что в самом низу есть элемент от конструктора
Жмем правой пкм по элементу , просмотреть код. У нас открылась консоль разработчика , ищем наш элемент. Весь тег , который нужно удалить должен быть открытым ( на скрине я стрелочкой отметил ) смотрим класс нашего тега , его нам нужно найти в коде и удалить полностью !
Для удобства качаем https://notepad-plus-plus.org/downloads/
И с помощью него открываем наш html
В поиске пишем название нашего тега , в нашем случае это "row row-22"
и полностью удаляем все от открывающегося до закрывающегося тега <table>
Так же лучше полностью удалить ссылки на css свойства.
Как выглядит готовое письмо ?
Я старался написать всё очень коротко , убрав мелочные детали, но с любыми вопросами вы можете ко мне обращаться.
Возможно я показал один из трудоемких способов , есть намного легче. Прошу не кидать в меня камнями , я использовал первый попавшийся конструктор , т.к знания в html у меня есть , не стал парится и искать что-то проще. Мануал написан на скорую руку , чуть позже дополню его!