Как сделать емайл кликабельным
MailTo — что это и как в Html создать ссылку для отправки Емейла
Переводчик ругнется, что это дескать «почта на», но понимать сие следует как «написать кому-то» или «отправить почтовое сообщение для кого-то». И именно этой цели служит Html тег MAILTO (точнее не тег, а атрибут, но это не суть важно).
Он позволяет создавать ссылки (читайте что такое), при переходе по которым будет открываться почтовый клиент, выбранный в вашей операционной системе принятым по умолчанию (точнее страница создания нового письма). Там уже могут быть заполнены чуть ли не все поля (адрес, тема, введен текст сообщения) и пользователю останется только нажать на кнопку «отправить».
Очень удобно бывает использовать такую мульку, но вот принципы создания правильного тега MAILTO не очевидны. Поэтому я и решил написать этот небольшой пост, чтобы вы в дальнейшем могли использовать его в качестве мануала при необходимости создать ссылку для полуавтоматической отправки сообщения на нужный вам Емайл адрес. Больно не будет, разве что чуток щекотно.
MAILTO в Html — что и как можно реализовать
Итак, прелесть MAILTO в том, что это мулька позволяет пользователю (например, посетителю вашего сайта) быстро отправить сообщение (письмо — читайте что такое электронная почта). При этом ему не потребуется ни почтовый клиент открывать, ни Емайл адрес с сайта копировать — при клике по такой ссылке все произойдет на автомате. Попробуйте сами кликнуть по этой тестовой ссылке: Отправить письмо админу KtoNaNovenkogo.ru
Можно будет и тему сообщения в эту ссылку зашить, и даже его содержание (текст). Последнее может быть удобно, например, при отправке сообщений об обнаружении какой-то определенной ошибки на сайте или при заказе какого-нибудь бесплатного курса, где текст может быть стандартным, а пользователю только по кнопке «Оправить» останется жмакнуть для отправки вам сообщения.
Например, при клике по приведенной чуть выше ссылке ваш почтовый клиент сам заполнит аж целых три поля:
Конечно же, на сайте для этой же цели может быть уместно установить форму обратной связи, но и MAILTO имеет право на жизнь, а по части автоматической подстановки текста этот вариант может дать фору многим формам. К тому же, такую ссылку можно будет отправить в Html письме или разместить на форуме, где это позволяется. В общем, штука полезная и вполне может пригодиться. Хотя бы будете знать где искать, если добавите этот пост в закладки.
Синтаксис ссылок с MAILTO для отправки Емайл сообщений
Синтаксис до безобразия прост, хотя итоговая конструкция и может показаться через чур перегруженной. Знаете какой будет самый простой вид ссылки использующей MAILTO? Скорее всего догадываетесь — это когда в открывшемся почтовом клиенте введется только лишь Емайл-адрес того, кому это письмо будет отправлено, а все остальные поля (тему и текст сообщения) пользователь должен будет заполнять самостоятельно. Выглядеть это дело будет примерно так: Отправить письмо админу KtoNaNovenkogo.ru
Т.е. всего лишь заменяете в теге ссылки А (она же и гиперссылка А) атрибут HREF на MAILTO, а сразу после него без пробела, но через двоеточие пишите тот Емайл адрес, который вставится в поле «Кому» при создании нового сообщения в открывшемся почтовом клиенте на компьютере пользователя.
Проще некуда. Но вот полная запись MAILTO может выглядеть намного сложнее, и схематично ее можно представить так (квадратные скобки писать не нужно — они приведены только для визуального отделения отдельных частей записи друг от друга, чтобы вам это было проще разложить в мозгу по полочкам:
Т.е. в предыдущем (простейшем) примере мы использовали только:
Но, как видите, можно после этого дела поставить знак вопроса (?) и дописать много чего интересного, а именно такие вот параметры :
Ничего необычного в записи не заметили? Я же ведь сказал через запятую, а сам какую-то лабуду из набора символов использовал. Что это? А это спецсимволы, которые лучше использовать вместо запятых, а также пробелов, амперсандов и других специфических знаков. Так оно надежнее будет, ибо не все почтовые программы их правильно воспримут.
Давайте я просто приведу тут набор спецсимволов (взятых из юникода), чтоб вам было понятнее:
Думаю, что после этого вам становится понятнее тот код ссылки, который я привел в самом начале этого поста.
Внимательность вам в помощь.
Главное не забыть закрыть двойные кавычки после ввода значения последнего параметра, да и вообще быть внимательнее. Давайте для примера введем что-то простое, не требующее использования спецсимволов (разве что только & вместо & все же придется использовать), которые сильно снижают визуализацию синтаксиса записи MAILTO: Текст Емайл-ссылки
Да, ребят, если в адресе вашего Емайл тоже присутствуют какие-либо заковыристые символы, то их лучше будет заменить на спецсимволы юникода. Например, знак вопроса в Емайла лучше будет заменить на %3F (взять код можно из этой таблицы — просто найдите знак, кликните по нему и скопируйте код, добавив в записи MAILTO перед кодом знак процентов).
Как сделать кликабельный номер телефона на сайте
Я не буду лить воду про выгоды кликабельного номера на сайте. Надеюсь, вы в курсе. Суть: посетитель жмакает на номер, автоматом идет звонок. Естественно, это относится к мобильным устройствам.
Рассмотрим несколько вариантов, смотря на чем у вас сайт.
HTML-код
Обычный номер телефона, который пока является простым текстом, в коде может выглядеть так:
+7(999)888-77-66
Или так (если присвоен класс):
Или так (если к этому тексту применены стили: цвет, шрифт, форматирование):
За гипертекст (возможность текста в коде HTML включать в себя гиперссылку) отвечает тег . . Атрибут href=”” отвечает за то, куда будет направлен клиент — внутри кавычек указывается адрес страницы или действие.
За автоматический набор номера по клику отвечает параметр tel:ХХХ, где XXX — номер телефона без пробелов и тире.
Таким образом, для первого примера код будет следующим:
К тексту добавили действие – вызов на конкретный номер.
Сделаем и второй номер кликабельным:
Третий пример тоже без особых усилий становится гипертекстом. При этом сохраняются его изначальные стили:
По этому же принципу вы можете сделать кликабельный email.
Чтобы email стал кликабельным, поставьте атрибут .
Сайт на WordPress
Для Вордпресса есть специальный плагин CallPhone’r. Этот модуль выводит на каждой странице сайта иконку, при нажатии на которую мобильное устройство переходит в режим вызова.
Там же есть возможность настройки по времени отображения иконки. Это позволит не получать звонки от клиентов в нерабочее время.
Сайт на LPmotor
Этот конструктор дает несколько вариантов.
1) Телефон в виде текста.
В этом случае выделите текст телефона в блоке и нажмите кнопку добавления ссылки в панели редактирования:
2) Переход к набору номера с кнопки. В панели редактирования блока «Кнопка» необходимо выставить «Переход по ссылке» и указать ваш номер телефона в формате «tel:88005555555».
3) Переход к набору номера с иконки/картинки. Здесь в выпадающем меню «Действие» нужно выбрать «Переход по ссылке» и вставить номер в формате «tel:+74957873422».
4) Также можно вставить кликабельный телефон на сайт в виде html блока.
Тогда в поле «Редактирование HTML-кода» нужно вставить
Сайт на Wix
1) Чтобы создать кликабельный номер телефона:
— Нажмите «Редактировать текст».
— Введите номер телефона. Не вводите другой текст в том же окне.
2) Чтобы связать текст ссылкой с номером телефона:
— Нажмите «Редактировать текст».
— Введите текст, например, «Позвонить сейчас».
— Нажмите на иконку «Ссылка».
— Выберите Номер телефона.
— Введите номер телефона в поле «Номер телефона».
3) Чтобы связать кнопку ссылкой с номером телефона:
— Нажмите на иконку Ссылка.
— Выберите Номер телефона.
— Введите номер телефона в поле «Номер телефона».
Сайт на Tilda
Чтобы при клике на номер телефона начинался звонок или при клике на e-mail открывался почтовый клиент, нужно навесить на них ссылки.
1) Ссылка, которую нужно задать тексту с номером телефона: tel:+71234567890 (все без пробела). Будет работать при просмотре сайта на телефоне.
Например, выбираете блок меню ME301, во вкладке Контент в поле Дополнительно указываете номер телефона, затем выделяете его и с помощью выпадающей панели инструментов для текста добавляете ссылку вида tel:+7123456789.
Как создать базовое письмо в новом редакторе: краткий гид по фишкам и блокам редактора
В одной из недавних публикаций мы рассказали про новый редактор DashaMail. Это профессиональный инструмент, с помощью которого каждый может создавать красивые продающие письма без дизайнера и верстальщика. И это здорово!
Разберем пошагово, кaк сoздать базовое письмо. DashaMail предлагает 3 способа создания шаблонов: загрузить свой HTML-макет, воспользоваться готовым шаблоном от дизайнера или создать шаблон с нуля в онлайн-редакторе.
Краткий обзор предлагаемых вариантов
Работа с готовым HTML-макетом
Этот способ подходит опытным email-маркетологам, которые обладают навыками верстки. Здесь придется повозиться с HTML-кодом. Если вы не профи, то достаточно времязатратный способ и требует знаний секретов верстки. Ведь верстать лендинги и письма, которые открывают в разных почтовых программах и сервисах, это далеко не одно и то же.
Применение готовых шаблонов
Самый простой и удобный способ создания шаблона, поскольку предлагает готовые решения для быстрой адаптации под задачи текущей рассылки. Шаблоны разбиты по тематикам для быстроты поиска. Каждый шаблон проработан командой дизайнеров, в нем подобрана цветовая палитра и шрифты. В общем пользуйтесь без заморочек, если нужно создавать несколько писем в день.
Кстати, в DashaMail есть обучающий шаблон, чтобы вы могли быстро освоиться с новым редактором. Вы можете найти его в готовых шаблонах под названием “Обучающий шаблон”.
Создать с нуля в онлайн-редакторе
Это означает, что вы самостоятельно создаете шаблон из полос и структур с контейнерами и заполняете их блоками контента или модулями. Это кропотливая работа, но результат стоит того, ведь вы можете создать свое собственное классное письмо, не ограничиваясь предложенным готовым решением.
Как это выглядит на старте:
Если в двух словах, то очень минималистично, чтобы не ограничивать полет вашей фантазии. 🙂
Чтобы помочь вам разобраться в новом редакторе, разберем его возможности и настройки. Начнем с оформления шаблона, а далее перейдем к контенту.
Оформление
В настройках оформления вы увидите общие настройки, а также настройки заголовков, хедера, футера, кнопок, информационной области и aдaптивности. Все вместе это определяет отображение всех элементов письма в едином стиле.
Настроек много, но достаточно пройтись по ним один раз, потрогать и пощупать, чтобы в дальнейшем быстро ориентироваться.
Отметим несколько моментов.
Базовая структура письма и контентные блоки
Письма включает прехедер, хедер, основное содержимое письма и футер. Вы можете добавлять в него нужные вам полосы и удалять лишние. Для наполнения каждой составляющей используйте структуры, включающие в себя контейнеры с блоками.
Из базовых блоков доступны следующие:
Модули — это созданные вами и сохраненные структуры, которые вы можете многократно использовать при сборке любого шаблона. Актуально при подготовке большого числа однотипных шаблонов.
Хедер
Хедер — это шапка вашего письма. Примерно то же самое, что на сайте — логотип и меню (опционально).
Например, чтобы создать хедер, используйте структуру с одной колонкой. Далее воспользуйтесь блоком “Картинка” и загрузите ваш логотип.
Совет. Логотип лучше сделать кликабельным, поскольку подписчики часто кликают на логотип, чтобы быстро перейти на ваш сайт.
Чтобы добавить меню, нужно также добавить структуру с одной колонкой и далее использовать блок “Меню”.
Главный баннер письма
Баннер — основное изображение, “цепляющее” внимание подписчика. Определяет то, как подписчик воспримет письмо. Используется опционально. Обычно применяется в маркетинговых рассылках.
В новом редакторе при создании баннера можно использовать декоративные шрифты, которые как элемент изображения не меняются на стандартные в email-клиенте получателя.
Чтобы добавить баннер, воспользуйтесь структурой с одной полосой и используйте блок “Баннер”.
Основное содержимое письма
Здесь вы можете использовать любые базовые блоки и созданные ранее модули.
Текст
При работе с текстом по умолчанию используются настройки, заданные в меню “Оформление”. Но в процессе создания письма вы можете их менять с помощью горизонтального меню, появляющегося в верхней части редактора. Если в тексте есть длинные слова, то для них можно включить функцию переноса строк, что поможет избежать горизонтальную прокрутку на мобильных устройствах.
Используйте персонализацию. Персонализация также доступна в верхней горизонтальной панели настроек.
Изображения
При работе с изображениями используйте структуры с разным количеством колонок и блок “Картинка”.
В новом редакторе есть удобный встроенный редактор изображений. Поэтому вы можете отредактировать изображение, не выходя в стороннюю программу — обрезайте, изменяйте масштаб, добавляйте текст, рамку, накладывайте фильтры — в общем все, что угодно, чтобы сделать письмо красивым и захватить внимание подписчика.
Не забывайте указывать ALT-текст для улучшения проходимости спам-фильтров.
В новом редакторе изображения можно сделать динамичными с помощью эффекта ролловера при наведении мыши. Это отличный маркетинговый прием, вовлекающий подписчиков.
Видео
При работе с видео можно использовать 2 способа: вставить ссылку на видео или встроить видео в письмо.
Первый вариант — идеальный, поскольку работает везде. Для вставки ссылки на видео используйте структуру с одной колонкой и блок “Видео”.
Второй вариант работает только в Apple Mail, нативной почте iOS, Thunderbird и Outlook для Mac. Используйте структуру с одной колонкой и блок HTML, где нужно будет добавить код встраивания.
Кнопки
При работе с кнопками используйте базовый блок “Кнопка”. В редакторе к кнопке можно применить ховер-эффект, в результате чего она будет менять цвет при наведении.
Карточки товаров
В редакторе есть возможность создавать карточки товаров. Карточка товара, по сути, контейнер из 3-4 блоков: картинка, текст + цена и кнопка. Обычно приходится тратить уйму времени на заполнение таких элементов в письме, особенно когда нужно подготовить товарную рассылку с десятком карточек. Редактор решает эту проблему — вы можете создавать smart-объекты. С помощью smart-объектов процесс обновления автоматизируется: вы просто указываете ссылку на страницу с товаром, а редактор сам подтягивает оттуда всю необходимую информацию в макет письма.
Таймер обратного отсчета
Для срочных маркетинговых акций вставьте в письмо таймер обратного отсчета. Для этого используйте структуру с одной колонкой и блок “Таймер”.
Разделитель
Как декоративный элемент, улучшающий восприятие информации в письме, используйте разделитель. Для этого добавьте структуру с одной колонкой и блок “Разделитель”.
Соцсети
Вы также можете использовать блок “Соцсети” для добавления иконок нужных вам соцсетей.
Футер письма
Это то, что подписчик видит, дочитав письмо до конца. Обычно в футере представлена контактная информация, причина отправки рассылки, возможность отписаться, иконки соцсетей.
Для добавления футера можно использовать многоколоночные структуры, куда вы сможете вставить текст, иконки соцсетей и другое.
Адaптивность каждого письма
Новый редактор поможет создавать полностью aдaптивные письма, которые удобно читать на мобильных экранах.
Вы сможете задать размер шрифта для мобильных гаджетов, указать, отображать ли определенные элементы и блоки при просмотре на мобильном, делать ли картинку aдaптивной или нет, задать порядок отображения изображений (если в десктопной версии изображения идут в шахматном порядке) и многое другое.
aдaптивность задается в разделе Оформление/Aдaптивность, а также при настройке блоков в разделе Контент.
Заключение
Мы рассказали про структуру письма и базовые блоки, с помощью которых вы сможете собрать классное письмо. Но это лишь малая доля возможностей этого мощного инструмента.
Новый редактор заточен под создание красивых aдaптивных продающих писем. Красота и привлекательность писем обеспечиваются гибкими настройками практически каждого блока. aдaптивность учитывается на уровне оформления письма, а также в каждом конкретном блоке. А сделать письмо продающим помогут такие возможности, как таймер обратного отсчета, ховер-эффект и ролловер-эффект, грамотная встройка видео и многое другое. Будем постепенно рассказывать про маркетинговые фишки, чтобы помочь вам освоиться с новым инструментом.
Для перехода на новый редактор напишите в службу поддержки DashaMail. Пользователям, зарегистрировавшимся после 1 августа, автоматически подключен новый редактор.
Как создать базовое письмо в новом редакторе: краткий гид по фишкам и блокам редактора
В одной из недавних публикаций мы рассказали про новый редактор DashaMail. Это профессиональный инструмент, с помощью которого каждый может создавать красивые продающие письма без дизайнера и верстальщика. И это здорово!
Разберем пошагово, кaк сoздать базовое письмо. DashaMail предлагает 3 способа создания шаблонов: загрузить свой HTML-макет, воспользоваться готовым шаблоном от дизайнера или создать шаблон с нуля в онлайн-редакторе.
Краткий обзор предлагаемых вариантов
Работа с готовым HTML-макетом
Этот способ подходит опытным email-маркетологам, которые обладают навыками верстки. Здесь придется повозиться с HTML-кодом. Если вы не профи, то достаточно времязатратный способ и требует знаний секретов верстки. Ведь верстать лендинги и письма, которые открывают в разных почтовых программах и сервисах, это далеко не одно и то же.
Применение готовых шаблонов
Самый простой и удобный способ создания шаблона, поскольку предлагает готовые решения для быстрой адаптации под задачи текущей рассылки. Шаблоны разбиты по тематикам для быстроты поиска. Каждый шаблон проработан командой дизайнеров, в нем подобрана цветовая палитра и шрифты. В общем пользуйтесь без заморочек, если нужно создавать несколько писем в день.
Кстати, в DashaMail есть обучающий шаблон, чтобы вы могли быстро освоиться с новым редактором. Вы можете найти его в готовых шаблонах под названием “Обучающий шаблон”.
Создать с нуля в онлайн-редакторе
Это означает, что вы самостоятельно создаете шаблон из полос и структур с контейнерами и заполняете их блоками контента или модулями. Это кропотливая работа, но результат стоит того, ведь вы можете создать свое собственное классное письмо, не ограничиваясь предложенным готовым решением.
Как это выглядит на старте:
Если в двух словах, то очень минималистично, чтобы не ограничивать полет вашей фантазии. 🙂
Чтобы помочь вам разобраться в новом редакторе, разберем его возможности и настройки. Начнем с оформления шаблона, а далее перейдем к контенту.
Оформление
В настройках оформления вы увидите общие настройки, а также настройки заголовков, хедера, футера, кнопок, информационной области и aдaптивности. Все вместе это определяет отображение всех элементов письма в едином стиле.
Настроек много, но достаточно пройтись по ним один раз, потрогать и пощупать, чтобы в дальнейшем быстро ориентироваться.
Отметим несколько моментов.
Базовая структура письма и контентные блоки
Письма включает прехедер, хедер, основное содержимое письма и футер. Вы можете добавлять в него нужные вам полосы и удалять лишние. Для наполнения каждой составляющей используйте структуры, включающие в себя контейнеры с блоками.
Из базовых блоков доступны следующие:
Модули — это созданные вами и сохраненные структуры, которые вы можете многократно использовать при сборке любого шаблона. Актуально при подготовке большого числа однотипных шаблонов.
Хедер
Хедер — это шапка вашего письма. Примерно то же самое, что на сайте — логотип и меню (опционально).
Например, чтобы создать хедер, используйте структуру с одной колонкой. Далее воспользуйтесь блоком “Картинка” и загрузите ваш логотип.
Совет. Логотип лучше сделать кликабельным, поскольку подписчики часто кликают на логотип, чтобы быстро перейти на ваш сайт.
Чтобы добавить меню, нужно также добавить структуру с одной колонкой и далее использовать блок “Меню”.
Главный баннер письма
Баннер — основное изображение, “цепляющее” внимание подписчика. Определяет то, как подписчик воспримет письмо. Используется опционально. Обычно применяется в маркетинговых рассылках.
В новом редакторе при создании баннера можно использовать декоративные шрифты, которые как элемент изображения не меняются на стандартные в email-клиенте получателя.
Чтобы добавить баннер, воспользуйтесь структурой с одной полосой и используйте блок “Баннер”.
Основное содержимое письма
Здесь вы можете использовать любые базовые блоки и созданные ранее модули.
Текст
При работе с текстом по умолчанию используются настройки, заданные в меню “Оформление”. Но в процессе создания письма вы можете их менять с помощью горизонтального меню, появляющегося в верхней части редактора. Если в тексте есть длинные слова, то для них можно включить функцию переноса строк, что поможет избежать горизонтальную прокрутку на мобильных устройствах.
Используйте персонализацию. Персонализация также доступна в верхней горизонтальной панели настроек.
Изображения
При работе с изображениями используйте структуры с разным количеством колонок и блок “Картинка”.
В новом редакторе есть удобный встроенный редактор изображений. Поэтому вы можете отредактировать изображение, не выходя в стороннюю программу — обрезайте, изменяйте масштаб, добавляйте текст, рамку, накладывайте фильтры — в общем все, что угодно, чтобы сделать письмо красивым и захватить внимание подписчика.
Не забывайте указывать ALT-текст для улучшения проходимости спам-фильтров.
В новом редакторе изображения можно сделать динамичными с помощью эффекта ролловера при наведении мыши. Это отличный маркетинговый прием, вовлекающий подписчиков.
Видео
При работе с видео можно использовать 2 способа: вставить ссылку на видео или встроить видео в письмо.
Первый вариант — идеальный, поскольку работает везде. Для вставки ссылки на видео используйте структуру с одной колонкой и блок “Видео”.
Второй вариант работает только в Apple Mail, нативной почте iOS, Thunderbird и Outlook для Mac. Используйте структуру с одной колонкой и блок HTML, где нужно будет добавить код встраивания.
Кнопки
При работе с кнопками используйте базовый блок “Кнопка”. В редакторе к кнопке можно применить ховер-эффект, в результате чего она будет менять цвет при наведении.
Карточки товаров
В редакторе есть возможность создавать карточки товаров. Карточка товара, по сути, контейнер из 3-4 блоков: картинка, текст + цена и кнопка. Обычно приходится тратить уйму времени на заполнение таких элементов в письме, особенно когда нужно подготовить товарную рассылку с десятком карточек. Редактор решает эту проблему — вы можете создавать smart-объекты. С помощью smart-объектов процесс обновления автоматизируется: вы просто указываете ссылку на страницу с товаром, а редактор сам подтягивает оттуда всю необходимую информацию в макет письма.
Таймер обратного отсчета
Для срочных маркетинговых акций вставьте в письмо таймер обратного отсчета. Для этого используйте структуру с одной колонкой и блок “Таймер”.
Разделитель
Как декоративный элемент, улучшающий восприятие информации в письме, используйте разделитель. Для этого добавьте структуру с одной колонкой и блок “Разделитель”.
Соцсети
Вы также можете использовать блок “Соцсети” для добавления иконок нужных вам соцсетей.
Футер письма
Это то, что подписчик видит, дочитав письмо до конца. Обычно в футере представлена контактная информация, причина отправки рассылки, возможность отписаться, иконки соцсетей.
Для добавления футера можно использовать многоколоночные структуры, куда вы сможете вставить текст, иконки соцсетей и другое.
Адaптивность каждого письма
Новый редактор поможет создавать полностью aдaптивные письма, которые удобно читать на мобильных экранах.
Вы сможете задать размер шрифта для мобильных гаджетов, указать, отображать ли определенные элементы и блоки при просмотре на мобильном, делать ли картинку aдaптивной или нет, задать порядок отображения изображений (если в десктопной версии изображения идут в шахматном порядке) и многое другое.
aдaптивность задается в разделе Оформление/Aдaптивность, а также при настройке блоков в разделе Контент.
Заключение
Мы рассказали про структуру письма и базовые блоки, с помощью которых вы сможете собрать классное письмо. Но это лишь малая доля возможностей этого мощного инструмента.
Новый редактор заточен под создание красивых aдaптивных продающих писем. Красота и привлекательность писем обеспечиваются гибкими настройками практически каждого блока. aдaптивность учитывается на уровне оформления письма, а также в каждом конкретном блоке. А сделать письмо продающим помогут такие возможности, как таймер обратного отсчета, ховер-эффект и ролловер-эффект, грамотная встройка видео и многое другое. Будем постепенно рассказывать про маркетинговые фишки, чтобы помочь вам освоиться с новым инструментом.
Для перехода на новый редактор напишите в службу поддержки DashaMail. Пользователям, зарегистрировавшимся после 1 августа, автоматически подключен новый редактор.