Как создать шаблон в яндекс почте

Отправка html-письма через веб-интерфейс Яндекс.Почта

В качестве очередного подручного эрзац-интструмента, тем не менее, пригодного для отправки сообщений html-формата, рассмотрим интерфейс одного из самых распространённых российских почтовых сервисов — Яндекса. В нём также нет прямого пути для внедрения html-шаблона собственного письма, как, скажем, для прикрепления файла или вставки изображения, но окольная тропинка всё же имеется.

Подготовительные действия перед созданием html-письма

Ваш шаблон html-сообщения с большой вероятностью содержит картинки. Для того чтобы корректно отображаться, они должны находится на сервере, а не на локальном компьютере. И, соответственно ссылка на изображение должна указывать вовне, на тот самый сервер, а не на локальную папку вашего компьютера. И это обстоятельство стоит проверить перед всеми следующими действиями.

Ещё момент. Далее нам понадобится содержимое нашего html-письма в виде html-кода. Чтобы добраться до этого содержимого, откроем файл с нашим письмом, имеющий расширение .html, при помощи стандартного «Блокнота» из Windows. Используем правый клик и контекстное меню.

Любым способом (например, «Ctrl+A») выделяем всё, от начала до конца, содержимое файла. И копируем в буфер обмена.

Работаем с интерфейсом почтовика в браузере

Открываем в нашем браузере (в нашем примере всё делаем в Google Chrome, но подойдёт и любой альтернативный) сервис Яндекс.Почта, вводим логин и пароль почтового ящика. И создаём новое письмо.

Окно браузера переключится на форму для создания писем. В неё нам надо убедиться, что режим поддержки оформления письма активен. Об этом подскажет панель оформления, её значки должны «откликаться» на наведение на них курсора мыши. Если это не так, то этот режим следует активировать нажатием команды «Без оформления».

Теперь наша задача — буквально внедрить код нашего письма в заготовку письма от Яндекса. Для чего проделываем следующие манипуляции. Ставим курсор в поле для ввода текста, далее — правый клик мышью. В появившемся контекстном меню выбираем «Просмотреть код».

Браузер разделит окно на несколько частей и во вспомогательном блоке (у нас он внизу окна, но может быть и справа) отобразится часть кода. В этом коде будет отмечен подсветкой блок, «отвечающий» за содержание письма. Он нам и понадобится.

Стрелкой с цифрой «2» мы пометили на верхнем рисунке меню, оно под пиктограммой из трёх вертикально расположенных точек, отвечающее за вид окна браузера в режиме просмотра кода. Если ваш внешний вид отличается от изображённого здесь, с помощью этого меню можете сделать вид таким же, команды «Dock side» — «Dock to bottom».

Итак, вернёмся к коду. Кликаем правой кнопкой подсвеченный блок и выбираем в контексте «Edit as HTML», т.е. редактирование в html-режиме.

Код блока стал доступен для редактирования. Мы помним, что наша задача заменить его на свой собственный, тот, который хранится уже в буфере обмена. Потому проводим подмену в два приёма. Выделяем всё исходное содержимое через правый клик, контекстное меню, команду «Выделить все»

И, повторно вызвав контекстное меню правым щелчком мыши на выделенном, выполнить команду «Вставить».

Произойдёт вставка, и код заменится на наш. Для завершения правки и применения изменений закроем вспомогательное окно для отображения кода крестиком в его правом верхнем углу.

Последние штрихи

Наше письмо в html-формате начнёт отображаться в поле для ввода текста письма. Разумеется, если в процессе борьбы с исходным кодом мы не допустили где-нибудь фатальной оплошности. Наверняка, от вашего внимания не ускользнуло, что пока наше письмо отображается без картинок. Именно, что «пока». Потому что после отправки, адресат уже его увидит полноценно, и изображения тоже. Чтобы быть уверенным в этом, а так же для полного устранения сомнений в корректности отображения в целом, отправляем это письмо самому себе.

При удовлетворительном результате на предыдущем шаге заполняем поле «Кому» действительными получателями отправления, не забываем подправить тему письма, если нужно. И отправляем наше творение сквозь всемирную паутину, с пожеланием достигнуть и адресата, и цели, с которой оно было создано, ведь не зря же мы приложили столько хитрости и столько усилий в борьбе с не самым из дружелюбных веб-интерфейсов — с Яндекс.Почтой.

Как создать шаблон письма в конструкторе

Рассмотрим, как вы сможете создать профессиональный шаблон в блочном конструкторе самостоятельно.

Основные преимущества блочного редактора:

• нужный блок или элемент макета легко добавить в шаблон письма, просто перетащив его с помощью мыши;
• легко редактировать каждый элемент, изменяя цвет, стиль, размер и другие параметры;
• вам не нужно обладать специальными знаниями, уметь работать с HTML-кодом и т.п. чтобы создать эффективное письмо.

Содержание

Перейдите в меню Шаблоны и нажмите Добавить шаблон.

Дальше выберите нужную структуру шаблона.

В примере мы остановимся на шаблоне со структурой Новости.

Перед вами Конструктор шаблонов.

На панели слева доступны элементы, которые вы можете добавлять в письмо.

По центру — изначальный шаблон, который вы и будете править, добавляя и редактируя элементы.

На панели справа находятся варианты редактирования выбранного элемента.

Дизайн всего письма настраивается в разделе «Тело письма» — тут вы можете задать ширину контента, фон письма, фоновую картинку, фон контейнера, цвет текста и ссылок, шрифт и размер шрифта, высоту строки, а также контур.

Рекомендуем для каждого элемента шаблона (картинка, текст, видео и так далее) создать отдельный блок структуры.

Блок с элементом Текст

Добавление текстового блока

Выберите слева элемент Текст и перетащите его в шаблон.

В центре вы увидите визуальное отображение текста в блоке и параметры для оформления текста справа.

Все правки производятся в редакторе. В шаблоне вы можете в режиме реального времени видеть, как меняется текст после правок. Доступные параметры для редактирования текста: цвет текста, шрифт, высота строки, цвет фона, фоновая картинка, внутренний отступ, высота блока, контур и возможность скрыть блок на мобильном.

Обратите внимание: если вы хотите добавить текст в редактор копипастом (скопировать-вставить), то рекомендуем копировать текст из простого текстового файла (.txt). В противном случае в редактор могут подтянуться стили из вашего Word файла, что может нарушить макет. Скопируйте текст из файла Word, вставьте текст в файл .txt и снова скопируйте текст уже из текстового файла перед тем, как вставить его в редактор шаблона.

При работе с текстом вы можете выбрать стиль параграфа, шрифт, его размер, полужирный текст, курсив, выделить другим цветом отдельное слово, добавить список, отступ.

Отдельные параметры есть и для редактирования блока: цвет фона и отступ от краев (равноценный отступ текста от краев блока: сверху, снизу, слева и справа).

Нажмите по стрелочке справа от выбора переменных, чтобы открыть выпадающее меню, где спрятаны некоторые опции редактирования текстового блока:

Переменные

Добавление переменных происходит внутри текстового блока – меню Переменные с выпадающим списком предустановленных переменных.

Если вы хотите использовать переменные, которые доступны для конкретной адресной книги, то сначала создайте новую рассылку в меню Мои рассылки > Создать email кампанию.

Структура с элементом Прехедер

Прехедер – это текст, который виден подписчикам в почтовом клиенте сразу после темы.

Чтобы добавить этот элемент, перейдите в раздел Добавить новый раздел > вкладка Примеры, выберите Предзаголовок. Перетащите его в шаблон и разместите над всеми элементами сверху.

По умолчанию блок Прехедер состоит из двух элементов в двух колонках: непосредственно прехедер и веб-версия письма.

Чтобы начать редактировать элемент, нажмите по нему левой кнопкой мыши.

Структура с элементом Футер

Футер – это то, чем заканчивается письмо: блок с контактами компании (адрес, телефон, сайт) и другой полезной для подписчиков информацией.

Чтобы добавить этот элемент, перейдите в раздел Добавить новый раздел > вкладка Примеры и выберите Футер.

Вы можете выбрать внешний вид футера: будет ли он сплошным или разделенный на две колонки.

Как и в любом другом блоке, в футере вы можете изменить текст, добавить данные своей компании и задать фоновый цвет блока в целом.

В переменную > в футере подставляется название компании отправителя. Чтобы отредактировать это значение, перейдите в раздел Настройки учетной записи > вкладка Информация о компании и измените информацию в поле Компания.

Блок с элементом Ссылка отписки

По умолчанию ссылка отписки добавляется в каждое письмо автоматически, но вы можете использовать свою ссылку.

Чтобы добавить этот элемент, кликните по текстовому элементу и откройте вкладку Переменные. Выберите Нажмите здесь, чтобы покинуть список рассылки в выпадающем меню.

Вставить ссылку отписки вы можете в любой блок письма.

Подробнее о кастомизации отписки вы можете узнать из статьи Как настроить страницу отписки.

Если вы не создавали ссылку отписки, тогда в шаблон добавится стандартная ссылка отписки Отказаться от рассылки. В этом блоке вы можете изменить цвет (блока и текста), шрифт (стиль, размер и начертание), положение текста (выравнивание: слева, справа, по центру), отступ текста от краев блока, высоту строки, контур, а также скрыть блок на мобильном.

Блок с элементом Картинка

Добавление картинки

В левом меню выберите блок Картинка и перетащите его с помощью мыши в шаблон письма.

Изображение вы можете добавить двумя способами: загрузить с компьютера или выбрать из картинок, которые вы ранее загружали в email сервис.

Изображения, ранее загруженные в email сервис, хранятся в Менеджере изображений, который находится в меню Рассылки > Шаблоны.

После загрузки (или выбора в галерее) изображение появится в шаблоне.

Редактирование картинки

Вы можете изменить параметры каждого изображения в правой панели редактирования блока.

Бывают случаи, когда почтовый клиент не отображает картинки в вашем письме. Тогда на месте изображения и будет показана указанная вами подпись картинки (альтернативный текст).

Если подписи к картинке нет, отобразится название файла — непонятное для получателя и подозрительное для спам-фильтров.

Поэтому мы рекомендуем для каждой картинки указывать понятную подпись.

Каждое изображение, добавленное в шаблон письма, изначально имеет размер 100%.

Вы можете уменьшать его, изменять размер от 100% до 10%. Однако имейте в виду, что в мобильной версии все изображения отображаются 100% размера.

Учитывайте, что изменение ширины картинки тянет за собой связанное изменение высоты, поэтому лучше менять размеры изображения ДО того, как вставлять его в редактор шаблона.

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

Картинку вы можете выровнять по левому краю, правому краю и центру.

Используйте эту опцию, чтобы добавить в картинку гиперссылку.

Также вы можете вместо гиперссылки указать контактный номер телефона или email адрес.

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

Если выбрать вставку Email, то появится окно для автозаполнения темы письма.

Когда получатель кликнет по такому изображению, запустится его почтовое приложение и откроется окно с новым письмом с уже заполненными полями адреса получателя и с темой, указанными вами в конструкторе шаблона.

Нужно указывать полную ссылку на страницу, начиная с http://.

Блок с элементом Кнопка

Выберите элемент Кнопка в левой панели конструктора и перетащите его в шаблон.

Укажите ссылку на страницу, куда должна вести кнопка, и текст, который получатель будет видеть на кнопке.

Вы можете выбрать стиль кнопки, изменить ее ширину, высоту, цвет, выравнивание относительно краев блока, степень скругления углов кнопки, расположение текста на ней.

Яркий призыв к действию, оформленный в красивом стиле — дополнительный шанс, что получатель заметит кнопку и захочет её нажать и перейти на ваш сайт.

Поэтому обращайте внимание и на параметры текста.

Кроме того, как и с картинкой, клик получателя по кнопке может запускать вызов по указанному вами номеру телефона или отправку письма. Также вы можете указать тему такого письма для ее автозаполнения в почтовом приложении получателя.

Редактирование параметров блока заключается в выборе фонового цвета и указания отступа внутренних элементов от края блока.

Блок с элементом Разделитель

Этот элемент вы можете использовать в случае, когда нужно визуально отделить в шаблоне два блока друг от друга.

Разделить блоки вы можете отступом или линией.

Если выбрать отступ, то ему вы можете задать цвет, и тогда блоки с элементами будут разделены цветным блоком.

Вы можете также использовать разделитель-линию, стиль которой вы можете выбрать из выпадающего списка.

Блок с элементом Видео

Чтобы добавить видео, перетащите соответствующий блок в шаблон.

Укажите YouTube ссылку на ролик в формате https://youtu.be/GcaZtTDT65w.

В шаблоне автоматически отобразится скриншот превью, при клике на который пользователь попадает на страницу просмотра видео.

Вы можете менять расположение и размер предпросмотра, устанавливать фон, отступы внутри блока.

Блок с элементом Соцсети

Перетащите соответствующий блок в нужную часть шаблона и приступайте к его редактированию.

Вы можете выбрать внешний вид иконок, добавить или удалить иконки, задать ссылки и так далее.

Вы можете выбрать, как будут отображаться кнопки соцсетей: в виде иконки, иконки и текста или просто текста.

При добавлении ссылки выберите ее тип:

• Ссылка на профиль — укажите адрес страницы или ID профиля, на которые сможет подписаться получатель письма после перехода по ссылке.
• Поделиться письмом — кликнув по ссылке получатель распространит веб-версию письма.
• Поделиться ссылкой — требует указания url страницы, которую получатель письма распространит в своей ленте новостей после клика.

Блок с элементом Оплата

Элемент Оплата используют, чтобы принимать платежи в письме.

Выберите этот элемент в левой панели конструктора и нажмите по нему. В правой панели введите название товара, выберите платежную систему, минимальную или конкретную цену и введите суму.

Выберите, в какую воронку CRM будут автоматически передаваться данные и на какой этап воронки добавлять сделку, в зависимости от статуса платежа.

Настройте внешний вид кнопки.

Скрыть на мобильном

Вы также можете скрывать отдельные блоки для мобильных устройств.

Для этого выберите нужный блок и справа в настройках блока активируйте Скрыть блок на мобильном.

Опция работает не во всех почтовых сервисах. К примеру, она работает для gmail.com.

Шаблоны

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

Создать шаблон

1. Напишите письмо.
2. Укажите тему и список отправителей, если необходимо.
3. Нажмите .
4. Выберите «Сохранить как шаблон».

Все созданные вами шаблоны хранятся в подпапке «Шаблоны», которая создается автоматически.

Вы не можете создавать шаблоны в почте другого сервиса (Gmail, Яндекс, Yahoo), подключенной к Mail.ru.

Отредактировать шаблон

В папке «Шаблоны»

1. Перейдите в папку «Шаблоны».
2. Откройте письмо, которое хотите изменить.
3. Отредактируйте письмо.
4. Нажмите и выберите «Сохранить как шаблон».

1. Нажмите «Написать письмо».
2. Вставьте шаблон из меню .
3. Отредактируйте шаблон.
4. Нажмите и выберите «Сохранить как шаблон».

Удалить шаблон

1. Перейдите в папку «Шаблоны».
2. Удалите письмо с шаблоном.

Вставить шаблон в письмо и отправить

Чтобы отправить сохраненный шаблон, в окне написания письма нажмите и выберите подходящий шаблон.

Как отправить html-письмо через Яндекс почту

Есть много способов отправки html-писем через почтовые клиенты и, конечно, через сервисы рассылок. Но что делать, если нужно отправить пару писем, а никаких программ под рукой нет? Есть хитрый способ отправить html-письмо через Яндекс Почту.

Шаг 1. Подготовка письма

Важным правилом при отправке письма таким способом является то, что ссылки на изображения в коде должны быть прописаны полностью, а сами изображения должны находиться на сервере.
Если ссылки ведут на изображения с вашего компьютера, то программа их не увидит.

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

Откройте шаблон через обычный блокнот и скопируйте все содержимое письма. Потом весь этот код нам нужно будет встaвить в тело письма в Яндекс Почте.

Шаг 2. Вставка письма в Яндекс

Войдите в Яндекс Почту, и создайте новое письмо. Дальше пойдет хитрость. Нажмите кнопку “Оформить письмо”, чтобы перевести Яндекс Почту в режим, поддерживающий оформление.

У вас должна появиться вот такая панель (она выделена синим). Теперь интерфейс поддерживает различное оформление, а значит и код письма. Правда просто так его вставить не получится.

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

Для этого нажмите правой кнопкой мыши на пустую область письма и выберите “просмотреть код” (В каждом браузере этот пункт называется по-своему, но смысл сохраняется).

Все эти хитрые манипуляции мы проводили для того, чтобы появился вот этот блок, отвечающий за содержимое письма. (Панель может визуально отличаться в зависимости от вашего браузера. Мы показываем на примере Google Chrome).

Теперь нам нужно удалить этот блок, а на его место вставить код нашего письма. Для этого кликните на этот блок правой кнопкой мыши и выберите “Edit as HTML”,

теперь нам необходимо удалить текущий код…

… и на его место вставить код нашего письма. После этого закройте панель, нажав на крестик в правом верхнем углу панели.

Если вы сделали все правильно, то шаблон отобразится в теле письма.В данный момент в нем нет картинок, но не беспокойтесь по этому поводу. В отправленном письме картинки будут, при условии, что ссылки на картинки правильные (см. Шаг 1). Если переживаете за результат, то просто отправьте это письмо себе, и вы увидите, что все получилось как надо.

Шаг 3. Отправка html-письма в Яндекс Почте

Внесите нужные изменения в содержание письма, просто перепечатывая тексты и применяя различные стили. Можно пользоваться всеми инструментами из верхней панели.

После того, как письмо готово — впишите почту получателя, тему письма и отправляйте!