Конструктор писем html: Конструктор писем. Удобный редактор для красивых рассылок

Конструкторы HTML писем

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

Конструкторы HTML-писем

Подавляющее большинство существующих на сегодняшний день средств для конструирования HTML-писем являются платными, но у них есть пробный период. Это следует учитывать заранее, так как использование подобных сервисов и программ будет нецелесообразным для отправки нескольких писем — по большей части, они ориентированы на массовую работу.

Читайте также: Программы для рассылки писем

Mosaico

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

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

После создания шаблона письма получить его можно в виде файла формата HTML. Дальнейшее его использование будет зависеть от ваших целей.

Перейти к сервису Mosaico

Tilda

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

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

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

Перейти к сервису Tilda

CogaSystem

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

Перейти к сервису CogaSystem

GetResponse

Последним онлайн-сервисом в рамках настоящей статьи является GetResponse. Данный ресурс по большей части ориентирован на почтовые рассылки, а имеющийся в нем HTML-редактор является, скорее, дополнительным функционалом. Им можно воспользоваться как на бесплатной основе с целью проверки, так и путем приобретения подписки.

Перейти к сервису GetResponse

ePochta

Практически любая программа для почтовой рассылки на ПК обладает встроенным редактором HTML-писем по аналогии с рассмотренными онлайн-сервисами. Наиболее актуальным софтом является ePochta Mailer, содержащий большую часть функций почтовых сервисов и удобный редактор исходного кода.

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

Скачать ePochta Mailer

Outlook

Outlook наверняка знаком большинству пользователей ОС Windows, так как входит в стандартный пакет офисных приложений от Microsoft. Это почтовый клиент, в котором имеется свой редактор HTML-сообщений, которые после создания можно будет отправить потенциальным адресатам.

Программа является платной, без каких-либо ограничений все ее функции могут быть использованы только после приобретения и установки пакета Microsoft Office.

Скачать Microsoft Outlook

Заключение

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

Помогла ли вам эта статья?

Использование конструктора (Dynamics 365 Marketing)

• 12/14/2020
• Чтение занимает 9 мин

В этой статье

Dynamics 365 Marketing предоставляет современный конструктор цифрового содержимого для создания, оформления и предварительного просмотра цифрового содержимого различных типов, которое можно подготавливать и контролировать с помощью системы, в том числе:

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

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

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

Начните с выбора шаблона

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

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

Выбранный шаблон задает в вашем дизайне следующие элементы:

• Макет столбца и исходное содержимое: устанавливает базовый макет (например, один столбец или два столбца) и включает в себя исходное содержимое (например, изображения, необходимые ссылки, стандартный текст и многое другое).
• Тип страницы или формы: если создается маркетинговая страница или форма, этот параметр определяет, является ли страница центром подписок, страницей пересылки другу или целевой страницей, а также задает базовые возможности страницы или формы.
• Образец дизайна и содержимого: некоторые шаблоны уже содержат базовые элементы дизайна, такие как эмблемы, типографские параметры, цветовая палитра, образец содержимого и т. п. Другие шаблоны предоставляют пустую страницу, которая включает только тип страницы и макет столбцов. При редактировании и разработке страницы можно свободно изменять образец дизайна и содержимого.

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

Задание базового макета

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

Добавление элементов раздела для макета дизайна

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

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

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

Примечание

Если выбрать шаблон, который реализует макеты с использованием пользовательского кода HTML вместо элементов раздела, то элементы раздела будут недоступны. Вместо этого вы сможете перетаскивать элементы дизайна в любой контейнер, определенный шаблоном. Это может также относиться к другим пользовательским шаблонам, которые используют пользовательский код HTML для создания макетов. Это обычно относится только к шаблонам, созданным с помощью старой версии Dynamics 365 Marketing.

Изменение и настройка элемента раздела

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

Чтобы изменить или настроить элемент раздела:

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

2. Откроется панель Свойства с параметрами выбранного раздела.

   

3. Задайте параметры в следующих разделах:

   • Макет раздела: нажмите эту кнопку, чтобы изменить макет колонки на тот, который указан на рисунке на каждой кнопке. При удалении колонки все ее содержимое будет перемещено в одну из оставшихся колонок. При добавлении колонки новая колонка сначала будет пустой.
   • Стили границы раздела: используйте эти параметры для установки стиля (нет, сплошная, пунктирная, штриховая или двойная), ширины линии, цвета линии и радиуса углов для границы, которая проходит вокруг всего раздела (но не между столбцов).
   • Отступ раздела: укажите расстояние отступа (в пикселях) между колонками и цветной границей. Можно ввести отдельные значения для верхнего, нижнего, левого и правого отступа.
   • Поле раздела: Укажите величину поля (в пикселях) между цветной границей и внешним краем элемента раздела. Можно ввести отдельные значения для верхнего, нижнего, левого и правого отступа.

Примечание

Клиенты Microsoft Windows Outlook не поддерживают все настройки стиля границы и радиуса границы.

Добавление, настройка и изменение элементов дизайна для создания содержимого для макета

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

• Чтобы добавить элемент дизайна, перетащите необходимый элемент из панели инструментов на соответствующую колонку элемента раздела. При перетаскивании большинства типов элементов откроется панель Свойства, а для текстовых элементов — панель инструментов форматирования, и вы сможете начать ввод текста.
• Чтобы настроить свойства существующего элемента или начать ввод текста в текстовый элемент, сначала выберите соответствующий элемент раздела, чтобы активировать его, а затем выберите целевой элемент, чтобы начать редактировать его. Для нетекстовых элементов при этом открывается панель Свойства для выбранного элемента. Для текстовых элементов при этом открывается плавающую панель инструментов форматирования текста.
• Чтобы удалить элемент дизайна, выберите его, затем нажмите кнопку «Удалить»  в правом верхнем углу элемента.
• Чтобы переместить элемент дизайна, выберите его, затем нажмите кнопку «Переместить»  в правом верхнем углу элемента и перетащите элемент на новое место.

Работа с конструктором

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

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

Использование графического конструктора

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

Графический конструктор обеспечивает редактируемый предварительный просмотр (холст), где можно выбирать, изменять или удалять содержимое, а также набор вкладок для добавления элементов дизайна и работы с дизайном:

• Панель инструментов: Чтобы добавить новый элемент дизайна, перетащите его отсюда в соответствующее место на холсте; или выберите элемент здесь (без перетаскивания), чтобы выделить каждое положение на холсте, где можно разместить этот элемент, а затем выберите нужное выделенное положение. Каждый элемент дизайна представляет определенный тип содержимого, например текстовый элемент, изображение или форму ввода. Параметры и функции каждого элемента дизайна зависят от его типа.
• Свойства: для работы большинства элементов дизайна их требуются настроить. Например, изображение должно указывать на файл изображения, форма должна указывать на запись маркетинговой формы, а для кнопки требуется текст и место назначения. При добавлении нового элемента дизайна он автоматически выбирается, и открывается вкладка Свойства, чтобы его можно было настроить. Чтобы настроить (или перенастроить) любой элемент, уже имеющийся в дизайне, сначала выберите его, затем откройте вкладку Свойства.
• Стили: используйте эти параметры для применения цвета, интервала и других графических параметров к общему дизайну.

Подробнее: Справка по элементам дизайна

Работа непосредственно в HTML

Если вы предпочитаете работать напрямую с HTML-кодом, откройте вкладку HTML конструктора. Это может потребоваться для изменения некоторых свойств, недоступных в графическом редакторе, или для вставки HTML-кода, созданного с помощью другой программы. Можно также добавить сложные скрипты или стили для предоставления новой функциональной возможности. Например, при создании маркетинговой страницы можно добавить скрипты для реализации следующих возможностей:

• Изменение свойств одного поля (или формы) на основе значений другого поля, например:
  • Поле № клиента отображается только в том случае, если параметр Существующий клиент имеет значение TRUE (истина).
  • Поле № клиента обязательно, если параметр Существующий клиент имеет значение TRUE (истина).
  • Очищать поле адреса Область при изменении поля Страна.
  • Изменять значения в списке Область в зависимости от выбранной страны.
  • Изменять стили полей, чтобы делать из видимыми, обязательными и т. п.
• Добавление проверок значений настраиваемых полей (при отправке формы или при изменении значения поля), например требовать, чтобы поле № клиента содержало только шесть цифр.
• Выполнение действий при загрузке или отправке формы, например:
  • Скрывать определенные поля по умолчанию.
  • Отключать кнопку отправки до тех пор, пока не будут заполнены все обязательные поля.
  • Задавать значения полей на основе значений, переданных в вызывающем URL-адресе.

Однако при работе здесь следует быть внимательным, так как графический редактор ожидает определенные типы разметки для реализации перетаскиваемых элементов. Без такой разметки дальнейшее изменение элементов дизайна будет невозможно, и они могут даже перестать работать. Подробнее: Использование настраиваемых атрибутов для включения функций конструктора в сообщениях электронной почты, на страницах и в формах

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

Важно!

При вставке HTML-кода убедитесь, что у вас нет вложенных разделов. Вложенные разделы не поддерживаются в конструкторе электронной почты. Например, не следует вставлять элементы, содержащие атрибуты «data-section» или «data-container», в элементы, уже содержащие эти атрибуты. Это приведет к проблемам с визуализацией макета.

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

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

Используйте кнопки в левом столбце вкладки Предварительный просмотр для просмотра вида дизайна на экранах разного размера и ориентации, например на компьютере, на планшете в альбомной ориентации или на мобильном телефоне в книжной ориентации. При предварительном просмотре также отображаются гибкие элементы дизайна, встроенные во многие шаблоны. Однако при предварительном просмотре не выполняются никакие настраиваемые скрипты, которые вы могли добавить в дизайн (например, проверка входных данных формы).

Примечание

Разработка маркетинговых сообщений электронной почты может быть сложнее, чем разработка веб-страниц, поскольку сообщения обычно содержат динамическое содержимое, а почтовые клиенты обрабатывают HTML-код весьма разными способами. Поэтому в Dynamics 365 Marketing предусмотрены несколько дополнительных функций для просмотра сообщений электронной почты, которые недоступны для маркетинговых страниц или форм. Сюда входят примеры записей контактов, выбор параметров содержимого и расширенный предварительный просмотр в ящике «Входящие». Подробнее: Проверка результата с помощью предварительного просмотра и тестовых отправок

См. также

Специальные возможности и сочетания клавиш
Справка по элементам дизайна
Обзор маркетинга по электронной почте
Работа с шаблонами сообщений электронной почты, страниц и форм
Создание и развертывание маркетинговых страниц
Специальные возможности и сочетания клавиш
Ввод в действие доступных для публикации сущностей и отслеживание их состояния

10 сервисов, которые облегчат жизнь Email-маркетолога

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

Есть те, кто умудряется делать всё в одиночку; если вы хотите этому научиться — читайте статью, осваивайте сервисы и ускоряйте взаимодействие с клиентами.

Для тех, кто любит по-быстрому

Что это: модульный конструктор писем, интерфейс реализован как в Trello — всё можно перетаскивать.

Чем хорош: интуитивно-понятным интерфейсом. Можно экспортировать неограниченное количество шаблонов, поддерживает Google Fonts, экраны Retina.

Сколько стоит: демоверсия с ограниченным количеством модулей — бесплатно. Год постоянного использования одним брендом — $149, для агентств — $299.

Для тех, кто привык к Canva

Что это: редактор писем с акцентом на кроссбраузерность.

Чем хорош: это настоящая Canva для создания шаблонов рассылок, интерфейс — просто копия.

Сколько стоит: бесплатно, расширенная PRO-версия — от 5$ в месяц.

Для тех, кто хочет всё и сразу

Что это: набор инструментов для создания писем и отслеживания результатов кампании.

Чем хорош: есть сегментирование и персонализация групп подписчиков, советы по улучшению маркетинговой стратегии, синхронизация с популярными веб-платформами.

Сколько стоит: версия с ограниченным количеством рекламных кампаний — 9$ в месяц, безлимит и приоритетная поддержка — $29, расширенная информация о переходах по ссылкам и управление шаблонами — $149.

Для тех, кто привык работать по колонкам в Фотошопе

Что это: сервис для создания собственных шаблонов по колонкам.

Чем хорош: никакого лишнего функционала — только регулирование по колонкам. Наверное, кому-то это нравится.

Сколько стоит: бесплатно.

Для тех, кто дружит с HTML

Что это: сервис для вёрстки рассылок с помощью кода (и больше ничего).

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

Сколько стоит: бесплатно; по факту это просто гайд.

Для тех, кто не хочет платить

Что это: фримиум драг-н-дроп (бесплатный, с перетаскиванием) сервис создания писем по шаблонам.

Чем хорош: не требует регистрации, дружит с популярными сервисами для рассылки.

Сколько стоит: бесплатно, но есть расширенная PRO-версия (динамические шаблоны, командная работа и управление кампаниями): $15 в месяц для фрилансеров, $25 для команд, $45 для агентств.

Для тех, кто обращает внимание на мелочи

Что это: многофункциональная система для создания рассылок с акцентом на персонализацию для каждого из получателей.

Чем хорош: есть чеклист с проверкой частых ошибок, спам-тесты, превью в сотне приложений.

Сколько стоит: $99 в месяц за пользователя, $199 за 5 пользователей и поддержку редакторов кода, ESP, проверки на спам, $499 за 10 пользователей и контроль процессов со стороны Litmus.

Для тех, кто работает вместе

Что это: система управления контентом и создания рассылок для команд.

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

Сколько стоит: есть бесплатная, а есть премиум версия — 20$ в месяц за пользователя с поддержкой кастомных шаблонов и безлимитным хранилищем.

Для тех, кому просто потестить

Что это: генератор писем по критериям.

Чем хорош: быстро и просто, иногда даже полезно.

Сколько стоит: бесплатно.

Бесплатное расширение для Chrome от SendPulse позволяет сохранить понравившееся письмо из почты Gmail в формате PDF, PNG или HTML. Можно сохранять полноразмерные скриншоты рассылок (сохраняется все письмо целиком) или email шаблоны в формате HTML. Также можно сохранить письмо как шаблон прямиком в сервис SendPulse с возможностью редактировать его и затем использовать в ваших рассылках.

Для тех, кто просто хочет

Что это: сервис для создания отзывчивых шаблонов.

Чем хорош: много полезного — от отправки уведомлений до создания дайджестов.

Сколько стоит: $29 за шаблон с дайджестами/уведомлениями или $49 в месяц за всё.

Бонус

Конец?

Вряд ли. E-mail-маркетинг не перестает развиваться, а вы наверняка знаете ещё несколько крутых сервисов — делитесь любимыми помощниками в комментариях!

Инструменты для автоматизации email-вёрстки — Mailfit

Наш верстальщик Максим Шабанский рассказал, какие инструменты использует для вёрстки рассылок. Оказалось, почти те же, что и для вёрстки сайтов: медиазапросы, компрессоры, сборщики, фреймворки. Даже CSS можно писать в отдельном файле, а потом добавлять в HTML с помощью инлайнеров.

Для тех, кому нужен email-маркетинг, но не нужен код, мы добавили в статью раздел про конструкторы писем. С них и начнём.

Конструкторы

Конструктор — это инструмент почти любого рассыльщика писем: от Мейлчимпа (Mailchimp), Гетреспонса (Getresponse), Юнисендера (UniSender) или даже Битрикса. Они отличаются возможностями, интерфейсом и дизайном. Если вы планируете собирать письма в конструкторе, учитывайте его удобство при выборе сервиса для рассылок.

Нам нравится Мейлчимп и Stripo Email. Последний — это как Мейлчимп, только лучше. В обоих конструкторах при редактировании шаблонов можно менять блоки, скрывать элементы, форматировать текст, вставлять изображения. Можно создать письмо самому, без дизайнера и верстальщика.

В Мейлчимпе есть готовые шаблоны для новостей, продуктовых писем, контента. Можно загружать свои HTML-шаблоны, но их не отредактируешь без знания кода — в визуальном режиме нельзя удалять и переставлять местами блоки. Кроме того, шаблон может показываться не полностью и будет видно лишь первый экран. Письма из Stripo Email экспортируются в Мейлчимп или HTML.
Почитайте инструкцию по созданию кампании в Мейлчимпе с нашим редактируемым шаблоном, посмотрите видео и скачайте шаблон в PSD, чтобы быстро собирать письма в Мейлчимпе.

Медиазапросы

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

Медиазапросы — это стандартная функция в CSS3 для адаптивной вёрстки, которая раньше не применялась в рассылках. Такие мобильные клиенты, как Gmail и Аутлук, их не поддерживали, поэтому приходилось искать обходные пути. Сейчас, по статистике Campaign Monitor, только небольшое число почтовых клиентов не поддерживает медиазапросы:

Если подписчики не пользуются клиентами из списка, медиазапросы будут работать. С их помощью вы задаёте характеристики устройства: ширину и ориентацию экрана, тип освещения. Можно комбинировать медиазапросы между собой. Выглядят они примерно так:

@media (min-width: 760px) and (orientation: landscape) { ... }
 Если минимальная ширина экрана 760 пикселей и ориентация — горизонтальная, то применяем стили…

Наши верстальщики всё равно стараются пользоваться медиазапросами как можно реже.

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

Инлайнеры

Почтовые клиенты не поддерживают внешние стили, а стили внутри тегов — инлайновые — неудобны при разработке. Инлайнер — это небольшой скрипт, который сравнивает названия классов в HTML и CSS и подставляет стили в теги. Наши верстальщики используют его при сборке писем.

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

Инлайнер может быть страничкой с двумя полями для копирования HTML и CSS — например, как у Zurb. У Campaign Monitor есть поле только для HTML-файла, поэтому все стили нужно располагать в <HEAD> между тегами <style>. Ещё инлайнеры могут быть плагинами для сборщика, о котором мы расскажем чуть ниже.

Компрессоры

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

Если после сжатия HTML занимает около 100 килобайт, не забывайте, что сервис рассылок добавляет пиксели для отслеживания открытий письма, количества кликов и других метрик. Так вы можете превысить лимит в 102 килобайта.

Компрессор лучше запускать на самом последнем этапе — перед сборкой. Плагины с ним есть в каждом сборщике, но вы можете взять его отдельно. Например, наш разработчик Сергей Баев интегрировал плагин с Гитхаба для Мейлфита.

Сборщики

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

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

Как правило, таск-менеджеры работают на языке программирования node.js, поэтому он должен быть установлен у вас на компьютере. Одним из первых был grunt, его использует наш верстальщик Максим Шабанский.

Четыре года назад часть команды Fractal выступила с критикой grunt, они предложили оставить всё хорошее и переработать плохое. Систему назвали gulp.

Мы сравним grunt и gulp по лёгкости изучения, количеству плагинов, производительности и коду. Вы можете посмотреть рекомендации на английском на сайте Slant и выбрать другой сборщик, такой как webpack, yarn или brunch.

Лёгкость изучения

Для grunt вы можете найти примеры конфигураций и всю документацию прямо на сайте. Каждый шаг чётко прописан, всё понятно и доступно — то, что нужно для начинающих.

Gulp тоже прост для изучения, но документация лежит на Гитхабе, и там описано только, как его запустить. Дальше разбирайся сам, из пояснений — только комментарии в готовых примерах. Если вы работали со сборщиками раньше, проблем не будет, в противном случае придётся потратить время.

Количество плагинов

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

У grunt достаточно много плагинов — более четырёх тысяч, но есть проблема с их назначением. Например, плагин uglify сжимает код и переименовывает файлы. Через некоторое время тяжело разобраться, что делает каждый из них.

У gulp доступно 3 600 плагинов, и каждый из них выполняет конкретную задачу. Никакой путаницы не возникает.

Производительность

Если кратко: grunt сильно проигрывает gulp, потому что выполняет все инструкции последовательно, а не параллельно. Кроме того, grunt делает много лишних действий и создаёт промежуточные файлы. В gulp вы загружаете список файлов и получаете готовый результат.

Код

Как пишут на Хабре, файл с настройками grunt легко писать, но тяжело читать. Все инструкции выполняются последовательно в один поток — это плохо сказывается на производительности и читаемости кода. Например, вы сначала запускаете плагин с инлайнером, а потом — компрессор кода. Через несколько месяцев вы освоили препроцессор SASS и добавляете плагин для конвертации в CSS в конец инструкции. Но он должен быть самым первым, потому что иначе инлайнер не найдёт CSS-файл, и всё поломается. Теперь представьте, что у вас двадцать плагинов и у каждого есть зависимости.

У gulp код чётко структурирован и читается так же легко, как и пишется. Он следует спецификации CommonJS, которая написана для node.js. Со знанием node.js будет проще. Впрочем, вы сможете разобраться с gulp и без этого — по готовым примерам. Gulp выполняет все инструкции параллельно, поэтому вы вручную задаёте порядок выполнения инструкций одной строкой. Если вы хотите изменить очерёдность, вам просто нужно поменять названия местами в этой строке.

Код для grunt и gulp подробно сравнивают в этой статье.

Фреймворки

Фреймворки объединяют все инструменты для автоматизации вёрстки, которые мы перечислили. В них есть HTML- и СSS-шаблоны, инлайнер, компрессор изображений и кода, сборщик, среда для тестирования. Главное, чем фреймворк полезен — вам не нужно возиться с мобильной вёрсткой, сеткой и типовыми элементами вроде кнопок.

Фреймворки помогают ускорить разработку. Как правило, они протестированы в почтовых клиентах, поэтому можно верстать, не вдаваясь в детали их работы. Например, в Аутлуке не поддерживаются какие-то стили, из-за которых может поехать вёрстка. Во фреймворке уже заданы нужные стили. Он диктует свои правила написания кода, с которыми сложно ошибиться.

У фреймворков есть и тёмная сторона. Всё дело — в заданных стилях. По словам нашего верстальщика Максима Шабанского, фреймворк скорее ограничивает, чем помогает. Например, у вас есть шаблон с тремя колонками, а нужен с четырьмя. Где-то, вообще, сетка с колонками не нужна. А во фреймворке всё завязано на колонки — без них нельзя. Проще написать все с нуля, чем переписывать фреймворк.

Никто из наших верстальщиков не пользуется фреймворками, но в обсуждении на Quora посоветовали Zurb. В него встроен инлайнер, компрессор изображений и кода, а в качестве сборщика используется gulp. Есть готовые шаблоны, с которыми вы можете автоматизировать сборку писем. Контент адаптируется под смартфоны и занимает 95% от размера экрана. C помощью встроенного InkyHTML не надо вручную прописывать таблицы, а препроцессор SaaS облегчает работу с CSS.

Если Zurb слишком громоздкий для вас, можете попробовать Material Design CSS Framework — лёгкий CSS-фреймворк. Его можно использовать как для вёрстки сайтов, так и для рассылок. Правда, из-за своей универсальности он не предназначен только для email-вёрстки, поэтому, например, медиазапросы придётся писать самому. Поддерживает Material Design и вёрстку под мобильные.

***

В email-вёрстке полно инструментов для удобной работы. Таблицы остались, но добавились дивы и медиазапросы. Если вы не хотите код, но хотите письма, используйте конструкторы. Начинающим будет проще с фреймворками, а сборщики избавят от рутины продвинутых верстальщиков. Инлайнеры подойдут всем.

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

Задавайте вопросы и делитесь кейсами!

Готовим шаблон письма для рассылки в Sendpulse

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

В Сендпульс есть 4 способа создания шаблона письма:

1. Редактирование готовых шаблонов.
2. Создание нового шаблона в упрощенном HTML редакторе.
3. Создание нового шаблона с помощью блочного конструктора писем.
4. Загрузить свой шаблон (из архива, по ссылке, вставка html-кода).

Приступим. В разделе Рассылки, в меню слева выбираем Шаблоны сообщений. Здесь можно выбрать готовый шаблон, они распределены по тематике:

Готовые шаблоны Сендпульс

Шаблон можно отредактировать и сохранить на будущее или сразу перейти к созданию рассылки, отредактировав шаблон на следующем этапе:

Действия с шаблонами

Если в разделе Шаблоны сообщений нажать Добавить шаблон, появляется выбор способа:

Способы создания нового шаблона

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

Структура письма

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

Конструктор шаблонов

Работать в конструкторе довольно легко и удобно. Для редактирования какого-либо элемента в письме, нажимаем на него, справа есть меню для редактирования:

Редактируем элементы шаблона

Абсолютно все элементы настраиваются — цвет, размер, фон, высота и т. п.

Коллекции картинок в Сендпульс нет, этот вопрос придётся решать самостоятельно.

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

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

Предварительный просмотр

Тестовое письмо пришло мне мгновенно, в нём все корректно отображалось. Если у вас что-то пошло не так, вы можете внести правки, перепроверить и сохранить шаблон, нажав Сохранить. Теперь он будет отображаться у вас в разделе Шаблоны сообщений >> Личное. Здесь же можно управлять им:

Управление личными шаблонами

Об отправке писем поговорим в следующей статье цикла о Сендпульс.

Как создать html-шаблон для email-писем в сервисе Stripo

Привет! В этой статье пойдет речь об html-шаблонах для email-писем в рассылку. А точнее, я покажу один интересный сервис, где можно создать себе такой шаблон на основе готовых дизайнов. Сервис называется Stripo. В нем есть бесплатный тариф с ограничениями, но в них вполне можно вписаться.

Тарифы мы видим на скриншоте:

На бесплатном тарифе «Free» все упирается в количество созданных шаблонов – только 2, и в возможность экспорта (4 раза в месяц).

Также, если планируете использовать таймер в письмах, то учтите, что доступно 1000 просмотров в месяц. Для владельцев небольших баз вплоть до 1000-2000 подписчиков, если в месяц отправлять несколько писем с таймером, вполне можно вписываться. Считаются именно открытия писем и просмотры таймера, а не общее количество отправленных писем.

Как в эти ограничения вписаться, если вам нужно больше вариантов шаблонов, чем 2?

Вначале создать 2 шаблона с универсальным оформлением, в которых вам нужно будет менять только текст и ссылку для конкретного письма. Например, 1 повседневный для регулярных рассылок, второй праздничный – в моем примере я делала новогодний шаблон.

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

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

Я тестировала использование созданного в Stripo шаблона на нескольких сервисах рассылок – Джастклик, Massdelivery и Spoonpay. Поэтому в уроке покажу пример добавления шаблона на каждом из этих сервисов – там есть нюансы.

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

Или продолжить читать статью.

Для начала работы понадобится зарегистрироваться на сервисе Stripo по ссылке.

Кстати, есть возможность потестировать сервис и без регистрации, тут имеется такая вкладка «Демо-редактор».

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

Но чтобы сохранить и экспортировать шаблон, понадобится зарегистрироваться.

В момент регистрации создается проект. Я назвала его по названию своего блога – «О заработке онлайн. Блог Виктории Карповой». И указала на него ссылку.

После регистрации, сбоку слева вы увидите два раздела «Шаблоны» и «Письма».

Создать html-шаблон для своего письма можно и там, и там. Кстати, это вариант обойти ограничения в 2 шаблона.

Если в разделе «Шаблоны» на бесплатном тарифе не дает добавить больше 2 шаблонов, то можно зайти в раздел «Письма» и там создать новое письмо на основе другого шаблона из библиотеки – тем самым расширить количество шаблонов.

Чтобы показать, как пользоваться конструктором, я зайду в раздел «Шаблоны» и создам там новый шаблон письма.

Можно с нуля, добавляя нужные вам блоки.

А можно использовать заготовки – редактировать их, удалять/добавлять блоки.

Рассмотрим вариант создания шаблона на основе готового дизайна со своими правками. Для этого я кликаю по вкладке «Подготовленные шаблоны».

Есть еще раздел с базовыми шаблонами – там представлены несколько типовых макетов из блоков, которые мы просто наполняем своим контентом.

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

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

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

А чтобы открыть шаблон в редакторе, просто кликните на него левой кнопкой мыши.

Редактор выглядит следующим образом – по центру наш шаблон, слева набор инструментов для редактирования.

В разделе «Контент» доступны следующие элементы:

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

В «Блоках» вы найдете те или иные элементы, которые хотите добавить в свое письмо – картинку, кнопку, текст, видео, соцсети и т.д.

В «Модулях» представлены заготовки блоков – хедер, подвал, контентные блоки, блоки с контактами и т.д. В зависимости от выбранного шаблона, там могут быть свои варианты.

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

А также настройки для блоков – хедера, контентной части, кнопки, футера… Есть отдельный раздел с настройками «Адаптивность» – но лично я тут ничего не меняла, оставив все настройки по умолчанию.

Чтобы отредактировать тот или иной элемент шаблона, выделяем его мышью.

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

Другие настройки – как-то замена картинки, настройка отступов, фона, цветов и т.д. делаются слева при выделенном элементе или блоке.

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

Аналогично удаляются модули целиком – выделяем модуль и жмем по корзине. Рядом с иконкой удаления есть иконка копирования и перемещения блоков.

Чтобы добавить свою структуру или блок – выбираем его в меню слева.

Например, я удалила два верхних модуля в шаблоне над картинкой. Хочу добавить туда свою структуру из двух секций – в одну поместить логотип своего блога. А во вторую брендирующее название.

Выбираю нужную мне структуру в одноименном разделе слева и перетаскиваю мышкой в самое начало html-шаблона. Появляется подсказка на черном фоне – “бросьте сюда”.

В одну секцию этой структуры добавляю блок с картинкой – там будет логотип.

Во вторую – просто текст.

Выделяю блок картинки и загружаю свой логотип. Добавляю в него ссылку.

В соседний блок вписываю и форматирую свой текст. Меняю шрифт, размер текста. И верхний отступ:

А также фон – его можно поменять в разделе «Оформление», предварительно выделив целиком структуру с блоками.

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

Далее применяю форматирование, пользуясь панелью инструментов сверху.

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

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

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

Для редактирования выделяю блок кнопки и использую инструменты слева – вставка ссылки, замена надписи и цвета, скругление углов и т.д.

После кнопки добавлю блок с иконками соцстей.

Вначале добавляю структуру, а уже в нее перетаскиваю блок с соцсетями.

И редактирую иконки с помощью инструментов на панели слева.

Во-первых, можно поменять стили иконок.

Во-вторых, добавить иконки нужных соцсетей/удалить ненужных.

И в каждую встроить ссылку на свой профиль в этой соцсети.

Над блоком с соц. иконками я добавлю текстовое поле с предложением дружить в соцсетях.

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

А вот самый последний модуль с логотипом Stripo удаляю.

Блок про отписку я не добавляю, так как он подставляется по умолчанию в сервисе рассылок.

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

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

Скачивание созданного html-шаблона

Здесь есть вариант – просто скопировать код шаблона, который вы создали в редакторе Stripo, и добавить его в режиме редактирования кода письма в сервисе рассылок.

Я пробовала этот вариант, но столкнулась с проблемой, что искажаются стили шаблона в рассыльщике – шрифты, кнопки. Вот пример с Джасткликом:

Поэтому посоветую использовать второй вариант – экспорт в html.

Тут присутствует возможность экспорта и на многие сервисы рассылок, например, в Sendpulse, Mailchimp.

Если же нужного рассыльщика в списке нет, экспортируем в html.

В настройках при экспорте я ставила обе галочки, как на скриншоте.

Html-файл по умолчанию скачивается в папку «Загрузки», оттуда его можно перетащить левой кнопкой мыши на рабочий стол. Файл имеет значок браузера, который у вас установлен по умолчанию. Чтобы открыть его для просмотра в браузере – просто кликните на него двойным кликом левой кнопкой мыши. Или нажмите правой кнопкой мыши по файлу и в списке выберете – «Открыть с помощью» и желаемый браузер, если у вас их несколько.

Рассмотрим процесс добавления html-шаблона на примере 3 сервисов рассылок – Джастклик, Spoonpay, Massdelivery.

В Джастклик заходим в «Рассылки» → «Мгновенная» → «По группам» – переходим к созданию письма – удаляем текстовую заготовку, которая там есть. Затем на панели инструментов редактора либо переключается в режим «Источник», либо жмем «HTML». Сюда надо добавить код нашего скачанного шаблона.

Для этого открываем его на компьютере с помощью блокнота Notepad++ (это бесплатная программка, можно скачать в интернете). Вот так выглядит значок программы:

После установки блокнота кликните по html-шаблону правой кнопкой мыши и выберите «Открыть с помощью Notepad++» или «Edit with Notepad++».

У вас откроется код. Далее полностью скопируйте его.

Для удобства используйте сочетания клавиш:

Ctrl+A – полностью выделить содержимое.

Ctrl+C – скопировать.

Идете в Джастклик и вставляете скопированный код, переключившись на «Источник» или через вставку html.

Используйте сочетание клавиш Ctrl+V – вставить.

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

Если в визуальном режиме что-то не получается (например, съедут стили кнопки, когда поменяете надпись на ней), то отмените действие и отредактируйте надпись на кнопке в режиме кода. Или предварительно откройте код шаблона в блокноте Notepad++, отредактируйте там и потом вставляйте шаблон в сервис рассылки.

Тестируйте письмо себе перед отправкой.

Затем отправляйте по базе.

Добавление шаблона в Spoonpay

Здесь точно так же понадобится скопировать html-код шаблона, открыв его в блокноте Notepad++.

Далее в Spoonpay зайти в «Инструменты маркетинга» → «Письма» и добавить новое письмо.

На панели инструментов редактирования письма переключиться в режим кода, нажав на соответствующую иконку. Удалите там содержимое.

Затем сочетанием клавиш Ctrl+V добавьте скопированный код. Снова нажмите по иконке кода и тем самым переключитесь на визуальный режим.

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

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

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

Сохраните добавленное html-письмо. Затем используйте его для отправки по группам подписчиков в разделе «Рассылки».

Как добавить шаблон в Massdelivery?

Перейдите в раздел «Рассылки» → «Отправить письмо».

Выберите группы подписчиков для рассылки, укажите отправителя письма, нажмите «Следующий шаг».

На открывшейся странице, где идет выбор редактора и шаблонов, оставьте вариант «Упрощенный html-редактор» и нажмите «Следующий шаг».

Откроется редактор письма. Здесь вам нужно нажать на «Импорт шаблона» и подгрузить файл с компьютера.

Шаблон подгружается в редактор письма. Опционально вы можете его отредактировать (изменить текст, ссылки) и отправить это html-письмо по базе.

В Stripo созданные шаблоны сохраняются в одноименно разделе «Шаблоны» или «Письма» (зависит от того, где вы изначально добавляли шаблон письма). Нажав на троеточие внизу шаблона – можно его удалить, переместить, скопировать, просмотреть. А чтобы снова открыть в редакторе – просто кликните по шаблону левой кнопкой мыши.

P.S. Кстати, я познакомилась с данным сервисом html-шаблонов в ходе марафона по интернет-рассылкам Владимира Фирсова. Рекомендую поучаствовать, если вы желаете прокачать навык ведения рассылок, взять интересные приемы и лайфхаки на внедрение. Записаться на марафон можно здесь.

Также вам можете быть интересна моя статья про отправку мгновенных рассылок подписчикам.

Благодарю вас за внимание!

Виктория

снижаем стоимость разработки регулярного письма — Блог EMAILMATRIX

У компании EMAILMATRIX большой опыт работы с некоммерческими организациями. Совместно с «Гринпис» мы реализовали предновогоднюю емейл-кампанию с благотворительной эстафетой и спецпроект по раздельному сбору мусора в Москве и МО. Но всё равно было волнительно приступать к проекту для Всемирного фонда природы (WWF). Это одна из крупнейших международных природоохранных организаций, главная цель которой — сохранение биологического разнообразия Земли. Коллеги из фонда обратились к нам с большим пулом задач — о решении самой интересной, а именно о внедрении конструктора писем для рассылки, я расскажу в этой статье.

Начало работ

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

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

Для их решения мы сформировали план работ:

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

Разработка конструктора писем для регулярных рассылок

Одной из основных задач была переработка писем регулярной коммуникации, т. к. при аудите рассылок этого типа мы выявили следующие недочёты:

1. текст сплошной, не расставлены основные акценты;
2. дизайн устаревший;
3. вёрстка неадаптивная.

Письма выглядели так:

Емейлы до внедрения конструктора писем для рассылок

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

Конструктор писем для рассылок реализовали на базе существующих функций GetResponse, т. к. клиент уже работал в этой платформе.

Реализация конструктора писем для рассылок

1. Подготовительный этап

Что нужно предусмотреть перед разработкой конструктора писем для рассылок, чтобы избежать трудностей реализации на последующих этапах:

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

2. Этап разработки подстановочных блоков конструктора писем для рассылок

На первом этапе работы над welcome-письмами мы уже разработали новый дизайн, так что собирать шаблон было намного проще, поскольку:

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

Пример емейла из приветственной цепочки WWF, который послужил основой для дизайна конструктора писем для рассылок

Важно

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

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

Шаблон емейла со всеми блоками конструктора писем для рассылки

3. Вёрстка и настройка блоков в платформе

Сложности, с которыми мы столкнулись, начав верстать блоки и добавлять их в конструктор писем для рассылок:

• HTML-сниппеты
  Getresponse их не поддерживает. Выбрали реализацию через стандартные блоки платформы.
• Адаптация
  Невозможно повлиять на адаптацию блоков в мобильной версии.
• Редактирование
  Чтобы блок был редактируемым, сделали добавление картинки в блок фоном, чтобы тексты можно было править в шаблоне.

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

Выглядело это таким образом:

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

Вот пример выдержки из инструкции:

Выводы

Несмотря на все сложности разработки, конструктор писем для рассылок — эффективный вариант для тех, кто ограничен во времени и ресурсах. За короткое время любой заинтересованный специалист, даже если он не владеет навыками вёрстки, может создать письмо.

Спойлер: в следующей статье я расскажу о тактике реактивации, следите за обновлениями блога.

документов ТОПОЛ | Встраиваемый редактор электронной почты для приложений SaaS

Введение

Topol — это редактор электронной почты с возможностью перетаскивания, который вы можете встроить на свой сайт. Шаблоны электронной почты управляются на вашей стороне (самостоятельно). После сохранения редактора мы предоставляем вам HTML и JSON шаблона электронной почты. Редактор может загружать только шаблоны в формате JSON, созданные специально в нашем редакторе. Обратите внимание, что невозможно загрузить HTML в редактор.

Интеграция займет у вас всего несколько минут.

1. Интегрируйте плагин Topol за 2 простых шага
2. Сохраните и загрузите свои шаблоны
3. Расширенная конфигурация плагина
4. Пользовательское хранилище — AWS или GCS
5. Пользовательский файловый менеджер
6. Пользовательские конечные точки API

Интеграция плагинов

Шаг 1. Создайте токен API

В вашем аккаунте Topol перейдите в Настройки -> Плагин и создайте токен API.

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

  topol.io
www.topol.io
* .topol.io
локальный: 563295
  

Ключ API всегда связан с заданными доменами и не будет работать в другом домене.

Шаг 2. Добавьте необходимый код

Как только вы получите ключ API, сначала вставьте этот HTML-код в свое приложение:

Здесь будет отображаться плагин.(Важно указать явную высоту и ширину для элемента, иначе высота и ширина div могут быть слишком малы для построителя TOPOL.io.)

apiKey — как получить токен API
userId — UserId — это идентификатор вашего пользователя (вы не найдете его в нашем приложении, просто используйте любой идентификатор, который хотите). UserID — это буквенно-цифровая строка (она может содержать буквы, цифры, _ или -), которая идентифицирует уникального пользователя вашего приложения и позволяет плагину загружать ресурсы для этого пользователя (например,грамм. изображений). Он будет считаться уникальным пользователем при ежемесячном выставлении счетов.

Затем вставьте это в свой файл с реализацией плагина:

   <сценарий>
const TOPOL_OPTIONS = {
    id: "#app",
    авторизовать: {
        apiKey: "ВАШ_API_KEY",
        userId: "UserID",
    },
    обратные вызовы: {
        onSave: function (json, html) {
           
        }
    }
};

TopolPlugin.init (TOPOL_OPTIONS);

fetch ('https://tlapi.github.io/topol-editor/templates/1.json')
    .then (ответ => ответ.текст ())
    .then (template => {
        
        TopolPlugin.load (шаблон)
    }
);

  

Руководство по обновлению

Обновление редактора 2 до редактора 3 (расчетное время обновления составляет 5 минут)

Пожалуйста, обратите внимание, что нет никаких серьезных критических изменений в функциональности плагинов или структурах шаблонов и т. Д. Если у вас возникнут какие-либо проблемы с новой версией, вы можете вернуться к версии Editor 2.

Из:

Кому:

Коды языков теперь соответствуют стандарту ISO 639-1.

Измененные коды языков:

При использовании таких фреймворков, как Vue, React или Angular, каждый раз, скрывая редактор, следует использовать TopolPlugin.destroy () для завершения работы редактора:

Не забудьте загрузить редактор после того, как ваш компонент смонтирован.

При повторном открытии инициализируйте редактор с помощью TopolPlugin.init (TOPOL_OPTIONS) .

Конфигурация плагина

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

Вот список всех возможных вариантов:

  var TOPOL_OPTIONS = {
    id: "#app",
    авторизовать: {
        apiKey: "Ваш ключ API",
        userId: "Идентификатор пользователя",
    },
    title: "Мой конструктор шаблонов",
    язык: "en",
    removeTopBar: ложь,
    topBarOptions: [
        "отменить повторить",
        "changePreview",
        "previewSize",
        "previewTestMail",
        "сохранить и закрыть",
        "спасти"
    ],
    mainMenuAlign: "влево",
    hideSettingsTab: false,
    disableAlerts: ложь,
    свет: ложь,
    customFileManager: ложь,
    contentBlocks: {
        text: {
            отключено: правда,
            disabledText: 'Текст во всплывающей подсказке',
            скрыто: правда
        },
    },
    mergeTags: [
        {
            name: 'Объединить теги',
            Предметы: [
                {
                    значение: "* | FIRST_NAME | *",
                    текст: "Имя",
                    label: "Имя клиента"
                },
                {
                    значение: "* | LAST_NAME | *",
                    текст: "Фамилия",
                    label: «Фамилия клиента»
                },
                
                
                {
                    name: 'Объединить вложенные теги',
                    Предметы: [
                        {
                            значение: "* | FIRST_NAME_NESTED | *",
                            текст: "Имя 2",
                            label: "Имя клиента 2"
                        },
                        {
                            значение: "* | LAST_NAME_NESTED | *",
                            текст: "Фамилия 2",
                            label: "Фамилия клиента 2"
                        }
                    ]
                }
            ]
        }, {
            name: 'Специальные ссылки',
            Предметы: [
                {
                    значение: " Отказаться от подписки ",
                    текст: "Отписаться",
                    label: "Ссылка для отказа от подписки"
                },
                {
                    значение: " Веб-версия ",
                    текст: "Веб-версия",
                    label: "Ссылка на веб-версию"
                }
            ]
        }, {
            name: 'Особое содержание',
            Предметы: [
                {
                    value: "Для получения дополнительной информации посетите наш  интернет-магазин !",
                    текст: "Посетите наш сайт",
                    label: "Призыв к действию"
                }
            ]
        }
    ],
    googleFonts: [
        "Робото",
        "K2D",
        'Мали'
    ],
    шрифты: [
        {
            'label': 'Робото',
            'style': 'Робото, Тахома, без засечек'
        },
        {
            'label': 'K2D',
            'style': 'K2D'
        },
        {
            'label': 'Мали',
            'style': 'Мали'
        }
    ],
    
    
    
    fontSizes: [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 24, 26,...],

    tinyConfig: {
      
      
      
    },

    saveBlocks: [
        {
            id: 1,
            name: 'Мой сохраненный блок 001',
            img: 'src to my img',
            определение: [{"tagName": "mj-section", "attributes": {"full-width": false, "padding": "9px 0px 9px 0px", "background-color": "# 000000"}, "type": null, "children": [{"tagName": "mj-column", "attributes": {"width": "33.333333%", "vertical-align": "top"}, "children" » : [{"tagName": "mj-social", "attributes": {"padding": "10px 10px 10px 10px", "text-mode": "false", "icon-size": "35px", " align ":" center "," containerWidth ": 198}," children ": [{" tagName ":" mj-social-element "," attributes ": {" src ":" https: \ / \ / s3- ес-запад-1.amazonaws.com \ / ecomail-assets \ / editor \ / social-icos \ / simplewhite \ /facebook.png "," name ":" facebook-noshare "," alt ":" facebook "," href ":" https : \ / \ / www.facebook.com \ / PROFILE "," background-color ":" transparent "}}, {" tagName ":" mj-social-element "," attributes ": {" src ":" https: \ / \ / s3-eu-west-1.amazonaws.com \ / ecomail-assets \ / editor \ / social-icos \ / simplewhite \ /twitter.png "," name ":" twitter-noshare ", "alt": "twitter", "href": "https: \ / \ / www.twitter.com \ / PROFILE", "background-color": "transparent"}}, {"tagName": "mj-social -element "," attributes ": {" src ":" https: \ / \ / s3-eu-west-1.amazonaws.com \ / ecomail-assets \ / editor \ / social-icos \ / simplewhite \ /instagram.png "," alt ":" instagram "," name ":" instagram "," href ":" https: \ /\/www.instagram.com\/PROFILE","background-color":"transparent"}}*************************************************************************************************************************** "}, {" tagName ":" mj-column "," attributes ": {" width ":" 33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-image "," attributes ": {" src ":" https: \ / \ / storage.googleapis.com \ / jan50 \ /blackberrylogo.png "," padding ":" 19px 10px 10px 10px "," alt " : "", "href": "", "containerWidth": 200, "width": 100, "widthPercent": 50}, "uid": "MFT0c-tu6X"}], "uid": "r1e280m4xQ"} , {"tagName": "mj-column", "attributes": {"width": "33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-spacer "," attributes ": {" height ":" 50px "," containerWidth ": 200} , "uid": "0nV_PAUDZ2"}], "uid": "B1W380QVxX"}], "layout": 1, "backgroundColor": "", "backgroundImage": "", "paddingTop": 0, "paddingBottom" : 0, «paddingLeft»: 0, «paddingRight»: 0, «uid»: «GD8ksoWQzG»}]
        }
    ],
    premadeBlocks: {
        'заголовки': [
            {
                'img': 'url',
                'определение': [{"tagName": «mj-section», «attributes»: {«full-width»: false, «padding»: «9px 0px 9px 0px», «background-color»: «# 000000») }, "тип": null, "дети": [{"tagName": "mj-столбец", "атрибуты": {"ширина": "33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-social "," attributes ": {" display ":" facebook: url twitter: url google: url) "," padding ":" 10px 10px 10px 30px "," text-mode ":" false "," icon-size ":" 25px "," base-url ":" https: // s3-eu-west- 1.amazonaws.com/ecomail-assets/editor/social-icos/simplewhite/ "," facebook-href ":" https://www.facebook.com/PROFILE "," facebook-icon-color ":" нет "," facebook-alt ":" Sdílet "," twitter-href ":" https://www.twitter.com/PROFILE "," twitter-icon-color ":" none "," twitter-alt ": "", "google-href": "https: // plus.google.com/PROFILE "," google-icon-color ":" none "," google-alt ":" "," instagram-icon-color ":" none "," linkedin-icon-color ":" none "," align ":" left "," youtube-icon-color ":" none "," youtube-alt ":" "," youtube-icon ":" https: // s3-eu-west-1. amazonaws.com/ecomail-assets/editor/social-icos/simplewhite/youtube.png "," youtube-href ":" https://www.youtube.com "," containerWidth ": 200}," uid ": "h2lqIiX4lm"}], "uid": "SJ3I0XVx7"}, {"tagName": "mj-column", "attributes": {"width": "33.333333%", "vertical-align": "top"} , "children": [{"tagName": "mj-image", "attributes": {"src": "https: // хранилище.googleapis.com/jan50/blackberrylogo.png "," padding ":" 19px 10px 10px 10px "," alt ":" "," href ":" "," containerWidth ": 200," width ": 100," widthPercent " ": 50}," uid ":" rkEyL-HeQ "}]," uid ":" r1e280m4xQ "}, {" tagName ":" mj-column "," attributes ": {" width ":" 33.333333% " , "vertical-align": "top"}, "children": [{"tagName": "mj-spacer", "attributes": {"height": 15, "containerWidth": 200}, "uid": "rJfqLiXEgm"}], "uid": "B1W380QVxX"}], "layout": 1, "backgroundColor": "", "backgroundImage": "", "paddingTop": 0, "paddingBottom": 0, "paddingLeft ": 0," paddingRight ": 0," uid ":" rkqIjQNe7 "}
                ]
            }]
    },
    
    обратные вызовы: {
        onSaveAndClose: function (json, html) {
            
            консоль.журнал (HTML);
            
            console.log (json);
            
            
        },
        onSave: function (json, html) {
            
            console.log (HTML);
            
            console.log (json);
        },
        onTestSend: function (email, json, html) {
            
            console.log (HTML);
            
            console.log (json);
            
            console.log (электронная почта);
            
        },
        onOpenFileManager: function () {
            
        },
        onBlockSave (json) {
            var name = window.подсказка ('Введите имя блока:')
            if (имя! == null) {
                console.log ('блок сохранения', json)
            }
        },
        onBlockRemove (id) {
            if (window.confirm ('Вы уверены?')) {
                console.log ('удаление блока', id)
            }
        },
        onBlockEdit (id) {
            var name = window.prompt ('Имя блока:', 'Мой блок 001')
            if (имя! == null) {
                console.log ('сохранение отредактированного блока', id)
            }
        },
        onPreview (html) {
          
        },
        onInit () {
          
        }
    },
    apiAuthorizationHeader: 'Токен на предъявителя',
    api: {
        
        IMAGE_UPLOAD: "/ изображения / загрузка",
        
        ПАПКИ: "/ images / folder-contents",
        
        IMAGE_EDITOR_UPLOAD: "/ images / image-editor-upload",
        
        АВТОСОХРАНИТЬ: "/ автосохранение",
        
        АВТОСОХРАНИТЬ: "/ автосохранение",
        
        GET_AUTOSAVE: "/ автосохранение /",
        
        КОРМЫ: "/ feeds",
        
        ПРОДУКТЫ: "/ products
    }
};
  

Вот список всех функций плагина:

  TopolPlugin.init (TOPOL_OPTIONS);


TopolPlugin.load ('json-template');


TopolPlugin.save ();


TopolPlugin.togglePreview ();


TopolPlugin.chooseFile ('http://url.to/picture.png');


TopolPlugin.setSavedBlocks ([
  {
    'id': 11,
    'name': 'Мой сохраненный блок - от setSavedBlocks',
    'определение': [{"tagName": "mj-section", "attributes": {"full-width": false, "padding": "9px 0px 9px 0px", "background-color»: "# 000000" }, "type": null, "children": [{"tagName": "mj-column", "attributes": {"width": "33.333333%", "vertical-align": "top"}, " children ": [{" tagName ":" mj-social "," attributes ": {" padding ":" 10px 10px 10px 10px "," text-mode ":" false "," icon-size ":" 35px " , "align": "center", "containerWidth": 198}, "children": [{"tagName": "mj-social-element", "attributes": {"src": "https: \ / \ / s3-eu-west-1.amazonaws.com \ / ecomail-assets \ / editor \ / social-icos \ / simplewhite \ /facebook.png "," name ":" facebook-noshare "," alt ":" facebook "," href ":" https : \ / \ / www.facebook.com \ / PROFILE "," background-color ":" transparent "}}, {" tagName ":" mj-social-element "," attributes ": {" src ":" https: \ / \ / s3-eu-west-1.amazonaws.com \ / ecomail-assets \ / editor \ / social-icos \ / simplewhite \ /twitter.png "," name ":" twitter-noshare ", "alt": "twitter", "href": "https: \ / \ / www.twitter.com \ / PROFILE", "background-color": "transparent"}}, {"tagName": "mj-social -element "," attributes ": {" src ":" https: \ / \ / s3-eu-west-1.amazonaws.com \ / ecomail-assets \ / editor \ / social-icos \ / simplewhite \ /instagram.png "," alt ":" instagram "," name ":" instagram "," href ":" https: \ /\/www.instagram.com\/PROFILE","background-color":"transparent"}}*************************************************************************************************************************** "}, {" tagName ":" mj-column "," attributes ": {" width ":" 33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-image "," attributes ": {" src ":" https: \ / \ / storage.googleapis.com \ / jan50 \ /blackberrylogo.png "," padding ":" 19px 10px 10px 10px "," alt " : "", "href": "", "containerWidth": 200, "width": 100, "widthPercent": 50}, "uid": "MFT0c-tu6X"}], "uid": "r1e280m4xQ"} , {"tagName": "mj-column", "attributes": {"width": "33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-spacer "," attributes ": {" height ":" 50px "," containerWidth ": 200} , "uid": "0nV_PAUDZ2"}], "uid": "B1W380QVxX"}], "layout": 1, "backgroundColor": "", "backgroundImage": "", "paddingTop": 0, "paddingBottom" : 0, «paddingLeft»: 0, «paddingRight»: 0, «uid»: «GD8ksoWQzG»}]
  },
  {
    'id': 12,
    'img': 'https://d5aoblv5p04cg.cloudfront.net/editor/blocks/menu1.jpg',
    'определение': [{"tagName": «mj-section», «attributes»: {«full-width»: false, «padding»: «9px 0px 9px 0px», «background-color»: «# 000000») }, "type": null, "children": [{"tagName": "mj-column", "attributes": {"width": "33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-social "," attributes ": {" padding ":" 10px 10px 10px 10px "," text- mode ":" false "," icon-size ":" 35px "," align ":" center "," containerWidth ": 198}," children ": [{" tagName ":" mj-social-element ", "attributes": {"src": "https: \ / \ / s3-eu-west-1.amazonaws.com \ / ecomail-assets \ / editor \ / social-icos \ / simplewhite \ /facebook.png", "name": "facebook-noshare", "alt": "facebook", "href": "https: \ / \ / www.facebook.com \ / PROFILE", "background-color": "transparent"}} , {"tagName": "mj-social-element", "attributes": {"src": "https: \ / \ / s3-eu-west-1.amazonaws.com \ / ecomail-assets \ / editor \ / social-icos \ / simplewhite \ /twitter.png "," name ":" twitter-noshare "," alt ":" twitter "," href ":" https : \ / \ / www.twitter.com \ / PROFILE "," background-color ":" transparent "}}, {" tagName ":" mj-social-element "," attributes ": {" src ":" https: \ / \ / s3-eu-west-1.amazonaws.com \ / ecomail-assets \ / editor \ / social-icos \ / simplewhite \ /instagram.png "," alt ":" instagram "," name ":" instagram "," href ":" https: \ / \ / www.instagram.com \ / PROFILE "," background-color ":" transparent "}}]," uid ":" dAoF8AoOO "," style ":" simplewhite "}]," uid ":" SJ3I0XVx7 "}, {" tagName ":" mj-column "," attributes ": {" width ":" 33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-image "," attributes ": {" src ":" https: \ / \ / storage.googleapis .com \ / jan50 \ /blackberrylogo.png "," padding ":" 19px 10px 10px 10px "," alt ":" "," href ":" "," containerWidth ": 200," width ": 100," widthPercent ": 50}," uid ":" MFT0c-tu6X "}]," uid ":" r1e280m4xQ "}, {" tagName ":" mj-column "," attributes ": {" width ":" 33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-spacer "," attributes ": {" height ":" 50px "," containerWidth ": 200}," uid ":" 0nV_PAUDZ2 "}]," uid ":" B1W380QVxX "}]," layout ": 1," backgroundColor ":" "," backgroundImage ":" "," paddingTop ": 0," paddingBottom ": 0 , "paddingLeft": 0, "paddingRight": 0, "uid": "GD8ksoWQzG"}]
      }
])


TopolPlugin.createNotification ({
  title: 'Заголовок уведомления',
  text: 'Важное сообщение, которое вы хотите отобразить',
  тип: 'информация'
})
  

Интернационализация

Список всех поддерживаемых в настоящее время языков:

Языки используют стандарт ISO 639-1.

Добавить еще один язык легко. Не стесняйтесь обращаться к нам ([email protected]).

Объединить теги Специальные ссылки Специальное содержание

Теги слияния, специальные ссылки или специальный контент обеспечивают простой способ вставки текстовых фрагментов из текстового редактора.

Мы используем следующую структуру для тегов слияния:

Вы найдете его на панели инструментов текстовой функции:

У вас есть возможность использовать вложенные теги слияния.

Пример кода:

  mergeTags: [
        {
            name: 'Объединить теги',
            Предметы: [
                {
                    значение: "* | FIRST_NAME | *",
                    текст: "Имя",
                    label: "Имя клиента"
                },
                {
                    значение: "* | LAST_NAME | *",
                    текст: "Фамилия",
                    label: «Фамилия клиента»
                },
                {
                    name: 'Объединить вложенные теги',
                    Предметы: [
                        {
                            значение: "* | FIRST_NAME_NESTED | *",
                            текст: "Имя 2",
                            label: "Имя клиента 2"
                        },
                        {
                            значение: "* | LAST_NAME_NESTED | *",
                            текст: "Фамилия 2",
                            label: "Фамилия клиента 2"
                        }
                    ]
                }
            ]
        }, {
            name: 'Специальные ссылки',
            Предметы: [
                {
                    значение: " Отказаться от подписки ",
                    текст: "Отписаться",
                    label: "Ссылка для отказа от подписки"
                },
                {
                    значение: " Веб-версия ",
                    текст: "Веб-версия",
                    label: "Ссылка на веб-версию"
                }
            ]
        }, {
            name: 'Особое содержание',
            Предметы: [
                {
                    value: "Для получения дополнительной информации посетите наш  интернет-магазин !",
                    текст: "Посетите наш сайт",
                    label: "Призыв к действию"
                }
            ]
        }
    ],
  

Пользовательские шрифты Google

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

  googleFonts: [
  "Робото",
  "K2D",
  'Мали'
],
шрифты: [
  {
     'label': 'Робото',
     'style': 'Робото, Тахома, без засечек'
  },
  {
     'label': 'K2D',
     'style': 'K2D'
  },
  {
     'label': 'Мали',
     'style': 'Мали'
  }
],
  

При определении варианта шрифта style , имейте в виду, что имена шрифтов с пробелом (два или более слов) должны быть заключены в двойные скобки, например. '"Verdana Pro", без засечек' .

Готовые блоки

готовых блоков используются для того, чтобы пользователи могли использовать подготовленные части электронного письма. Например, верхние или нижние колонтитулы. Вы можете определить свои собственные готовые блоки с помощью опции premadeBlocks в объекте TOPOL_OPTIONS. Вы можете скрыть готовые блоки и кнопку готового блока, используя premadeBlocks: false .

  premadeBlocks: {
  'заголовки': [
    {
      'img': 'url',
      'name': 'Готовый заголовок 1',
      
      'определение': [{"tagName": «mj-section», «attributes»: {«full-width»: false, «padding»: «9px 0px 9px 0px», «background-color»: «# 000000») }, "type": null, "children": [{"tagName": "mj-column", "attributes": {"width": "33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-social "," attributes ": {" display ":" facebook: url twitter: url google: url) "," padding ":" 10px 10px 10px 30px "," text-mode ":" false "," icon-size ":" 25px "," base-url ":" https: // s3-eu-west- 1.amazonaws.com/ecomail-assets/editor/social-icos/simplewhite/","facebook-href":"https://www.facebook.com/PROFILE","facebook-icon-color":"none "," facebook-alt ":" Sdílet "," twitter-href ":" https://www.twitter.com/PROFILE "," twitter-icon-color ":" none "," twitter-alt ": "", "google-href": "https: // plus.google.com/PROFILE","google-icon-color":"none","google-alt":"","instagram-icon-color":"none","linkedin-icon-color":"none "," align ":" left "," youtube-icon-color ":" none "," youtube-alt ":" "," youtube-icon ":" https: // s3-eu-west-1. amazonaws.com/ecomail-assets/editor/social-icos/simplewhite/youtube.png","youtube-href":"https://www.youtube.com","containerWidth":200},"uid ": "h2lqIiX4lm"}], "uid": "SJ3I0XVx7"}, {"tagName": "mj-column", "attributes": {"width": "33.333333%", "vertical-align": "top"} , "children": [{"tagName": "mj-image", "attributes": {"src": "https: // хранилище.googleapis.com/jan50/blackberrylogo.png","padding":"19px 10px 10px 10px "," alt ":" "," href ":" "," containerWidth ": 200," width ": 100," widthPercent ": 50}," uid ":" rkEyL-HeQ "}]," uid ":" r1e280m4xQ "}, {" tagName ":" mj-column "," attributes ": {" width ":" 33.333333% " , "vertical-align": "top"}, "children": [{"tagName": "mj-spacer", "attributes": {"height": 15, "containerWidth": 200}, "uid": "rJfqLiXEgm"}], "uid": "B1W380QVxX"}], "layout": 1, "backgroundColor": "", "backgroundImage": "", "paddingTop": 0, "paddingBottom": 0, "paddingLeft ": 0," paddingRight ": 0," uid ":" rkqIjQNe7 "}]
    }
  ]
}
  

Список доступных категорий

• заголовки
• содержание
• ecomm // блоки электронной коммерции
• нижние колонтитулы

Сохраненные блоки

Пользователи могут сохранять свои разделы, нажимая кнопку «Сохранить» при наведении указателя мыши на раздел.Чтобы включить эту функцию, установите savedBlocks с по [] , чтобы отключить ее, не устанавливайте значение вообще или устанавливайте его на null Вы можете скрыть сохраненные блоки и кнопку готового блока, используя premadeBlocks: false a savedBlocks: false .

Каждый блок имеет следующую структуру:

  {
  id: 1,
  name: 'Мой сохраненный блок 001',
  img: 'http: // ...',
  определение: 'json',
}
  

Для работы сохраненных блоков необходимо выполнить три действия: onBlockSave , onBlockEdit и onBlockRemove .Все их нужно реализовать на объекте callbacks .

Пример:

  onBlockSave (json) {
  var name = window.prompt ('Введите имя блока:')
  if (имя! == null) {
    console.log ('блок сохранения', json)
  }
},
onBlockRemove (id) {
  if (window.confirm ('Вы уверены?')) {
    console.log ('удаление блока', id)
  }
},
onBlockEdit (id) {
  var name = window.prompt ('Имя блока:', 'Мой блок 001')
  if (имя! == null) {
    console.log ('сохранение отредактированного блока', id)
  }
}
  

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

  TopolPlugin.setSavedBlocks ([{
  id: 1,
  name: 'Мой сохраненный блок 001',
  img: 'http: // ...',
  определение: 'json',
}]);
  

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

Светлая тема

Установив опцию light: true , вы переключите дизайн редактора на светлую тему.

Главное меню выровнять

Установив опцию mainMenuAlign: "right" , вы попадете в главное меню в правой части конструктора.

Удалить верхнюю планку

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

Опции верхней панели

Если вы хотите скрыть только некоторые элементы на верхней панели, вы можете сделать это с помощью опции topBarOptions: [] . Вы можете добавить эти элементы, чтобы отобразить их:

• «undoRedo» Показывает кнопку отмены / повтора

• "changePreview" Показывает кнопку предварительного просмотра «Изменить»

• "previewSize" Показывает кнопку предварительного просмотра для мобильных / настольных ПК

• "previewTestMail" Показывает кнопку отправки тестового сообщения электронной почты

• «сохранить» Показывает кнопку сохранения

• "saveAndClose" Показывает кнопку «Сохранить и закрыть»

Значение по умолчанию — [] .

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

Тестовая отправка

Когда пользователь нажимает Отправить тест (значок). Шаблон отображается, а затем вызывается обратный вызов. Тестовый ввод можно скрыть, выполнив команду previewTestMail в параметрах верхней панели.

  onTestSend: function (email, json, html) {
    console.log (HTML);
    console.log (json);
    
    console.log (электронная почта);
},
  

Режим предварительного просмотра на настольных компьютерах и мобильных устройствах

Когда верхняя панель удалена, Вы можете получить доступ к режиму предварительного просмотра, используя функцию:

  TopolPlugin.togglePreview ();
  

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

Это полезно, если вы хотите использовать встроенные уведомления в редакторе. Вы можете создать уведомление со следующей функцией:

  TopolPlugin.createNotification ({
  title: 'Заголовок уведомления',
  text: 'Важное сообщение, которое вы хотите отобразить',
  тип: 'информация'
});
  

Тип уведомления по умолчанию — информация.

Вернуть и отменить

Вы можете применить функцию повтора и отмены к объекту TopolPlugin.

  TopolPlugin.undo ();
TopolPlugin.redo ();
  

При инициализации

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

Параметры блоков содержимого

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

У вас есть возможность изменить следующие блоки содержимого:

текст, изображение, gif, кнопка, разделитель, разделитель, социальные сети, видео, HTML, товар

  contentBlocks: {
    text: {
        отключено: правда,
        disabledText: 'Текст во всплывающей подсказке',
        скрыто: правда
    },
}
  

Опции сохранения и загрузки

Собственные шаблоны

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

  TopolPlugin.load ("{\" tagName \ ": ...");
  

Пример загрузки API:

  fetch ('https://tlapi.github.io/topol-editor/templates/1.json')
    .then (ответ => ответ.текст ())
    .then (template => {
        
        TopolPlugin.load (шаблон)
    }
);
  

Пример встроенной загрузки:

  TopolPlugin.load (JSON.stringify ({
    "tagName": "mj-global-style",
    "attributes": {
        "h2: color": "# 000",
        "h2: font-family": "Helvetica, без засечек",
        "h3: color": "# 000",
        "h3: font-family": "Ubuntu, Helvetica, Arial, sans-serif",
        "h4: color": "# 000",
        "h4: font-family": "Ubuntu, Helvetica, Arial, sans-serif",
        ": color": "# 000",
        ": font-family": "Ubuntu, Helvetica, Arial, sans-serif",
        ": высота строки": "1.5 ",
        "a: color": "# 24bfbc",
        "button: background-color": "# e85034",
        "containerWidth": 600,
        "шрифты": "Helvetica, sans-serif, Ubuntu, Arial",
        "mj-text": {
            "высота строки": 1,5,
            "font-size": 15
        },
        "mj-button": []
    },
    "дети": [
        {
            "tagName": "mj-контейнер",
            "attributes": {
                "цвет фона": "#FFFFFF",
                "containerWidth": 600
            },
            "дети": [
                {
                    "tagName": "mj-section",
                    "attributes": {
                        "полная ширина": ложь,
                        "padding": "9px 0px 9px 0px"
                    },
                    "дети": [
                        {
                            "tagName": "mj-столбец",
                            "attributes": {
                                "ширина": "100%"
                            },
                            "дети": [],
                            "uid": "HJQ8ytZzW"
                        }
                    ],
                    «макет»: 1,
                    "backgroundColor": null,
                    "backgroundImage": null,
                    "paddingTop": 0,
                    "paddingBottom": 0,
                    "paddingLeft": 0,
                    "paddingRight": 0,
                    "uid": "Byggju-zb"
                }
            ]
        }
    ],
    "стиль": {
        "h2": {
            "font-family": "\" Кабина \ ", без засечек"
        }
    },
    "шрифты": [
        "\" Кабина \ ", без засечек"
    ]
}));
  

onSave и onSaveAndClose

Когда пользователь нажимает кнопку Save или Save & Close , вызывается конечная точка SAVE API, а затем вызывается onSave / onSaveAndClose.

Вы можете вставить обратный вызов, который вызывается сразу после вызова конечной точки SAVE API. Обратный вызов имеет атрибут data , который содержит данные ответа.

  onSave: function (json, html) {
    console.log (HTML);
    console.log (json);
},
onSaveAndClose: function (json, jtml) {
    console.log (HTML);
    console.log (json);
}
  

Пользовательский файловый менеджер

customFileManager

Если вы хотите отключить наш встроенный файловый менеджер, просто определите customFileManager: true в объекте параметров.Тогда редактор будет использовать следующие функции.

onOpenFileManager

Когда пользователь нажимает на Выберите файл (например, как свойство изображения). Этот обратный вызов называется. Например, вы можете разработать свой собственный диалог файлового менеджера.

  onOpenFileManager: function () {
    
},
  

выбрать файл

Когда пользователь выбирает файл, вам необходимо вызвать функцию chooseFile в экземпляре TopolPlugin. с URL-адресом файла.

  TopolPlugin.selectFile ('http://url.to/picture.png');
  

Специальное хранилище

Мы предоставляем встроенное решение для хранения с AWS S3 и Google Cloud Storage . Однако вы можете использовать в качестве собственного хранилища , как описано ниже.

— Как интегрировать пользовательское AWS
Учебное пособие — Как интегрировать пользовательское облачное хранилище Google
Варианты самостоятельного размещения

Пользовательские конечные точки API

Использование конечной точки CUSTOM API может быть полезно в различных сценариях.

Когда необходимо использовать пользовательские конечные точки API.

• Пользовательское собственное хранилище файлов
• Использование автосохранения
• Работа с кормами и продуктами

Безопасность

Мы предлагаем возможность добавить заголовок авторизации к пользовательским конечным точкам API. Вы можете вставить токен, используя следующую опцию в TOPOL_OPTIONS. Этот токен авторизации будет добавлен ко всем текущим запросам к вашему серверу.

  apiAuthorizationHeader: 'Bearer token',
  

Проблемы CORS

При работе с настраиваемыми конечными точками не забудьте разрешить нашему серверу d5aoblv5p04cg.cloudfront.net как известный источник. В противном случае вы столкнетесь с проблемами CORS.

Самостоятельное хранилище

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

ПАПКИ

Получить изображения

Метод: GET

Вызывается при открытии диспетчера файлов.Этот вызов используется для получения файлов и папок. с этими параметрами GET путь , userId , uuid

Ответ:

  [{
    "имя": "имя файла",
    "дата": дата последнего изменения,
    «размер»: 500,
    "путь": "/ путь /",
    "тип": "файл" ИЛИ "папка",
    "extension": ".jpg",
    "url": "https://url-to-image.com/image.jpeg"
}]
  

Добавить изображения

Метод: POST

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

Кузов:

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

Ответ:

  [{
  "url": "url_of_uploaded_image"
}]
  

Удалить изображения

Метод: POST

Мы добавляем / удаляем к api.FOLDER URL.

Тело: массив каталогов, подлежащих удалению

Ожидаемый ответ — это код состояния 200 или 204.

ЗАГРУЗКА ИЗОБРАЖЕНИЯ

Метод: POST

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

Ответ:

  Content-Type: приложение / json

{
  "успех": правда,
  "url": "http://191n.mj.am/img/191n/1t/hs.png"
}
  

IMAGE_EDITOR_UPLOAD

Метод: POST

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

Запрос:

  Content-Type: приложение / json

{
  "content": "изображение в формате base64",
  "filename": "Имя файла"
}
  

Ожидаемый ответ:

  {
  "url": "https: // url-to-image.com / image.jpeg "
}
  

Автосохранение

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

Сначала вам нужно включить автосохранение опций с помощью enableAutosaves: true

АВТОСЕЙБЫ

Метод: GET

Эта конечная точка вызывается при получении всех автосохранений.

Параметры:

  Content-Type: приложение / json

{
  "ключ": "ключ API",
  "имя хоста": "происхождение"
  "templateId": "идентификатор шаблона",
  "uuid": "userId"
}
  

Ожидаемый ответ:

  {
  успех: правда,
  данные: [
    {
      uid: 'userID',
      ключ: 'autosaveKey',
      время: «Время ISO 8601»
    }
  ]
}
  

AUTOSAVE

Метод: POST

Эта конечная точка вызывается при создании автосохранения.

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

Запрос:

  Content-Type: приложение / json

{
  "definition": "MJML в JSON",
  "ключ": "ключ API",
  "имя хоста": "происхождение"
  "templateId": "идентификатор шаблона",
  "uuid": "userId"
}
  

Ожидаемый ответ: СОСТОЯНИЕ 200

GET_AUTOSAVE

Метод: GET

Эта конечная точка вызывается при получении созданного автосохранения.

Эта конечная точка добавляет ‘/ {{key}}’

Параметры:

  Content-Type: приложение / json

{
  "ключ": "ключ API",
  "имя хоста": "происхождение"
  "templateId": "идентификатор шаблона",
  "uuid": "userId"
}
  

Ожидаемый ответ:

  {
  успех: правда,
  данные: "{" tempalte ":" jsonTemplate "}"
}
  

Продукт из кормов

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

ПРОДУКТ

Метод: GET

Эта конечная точка вызывается при получении продуктов из FEED.

Параметры:

  Content-Type: приложение / json

{
  "id": "productID",
  "search": "строка поискового запроса",
  "per_page": "ожидаемых товаров на странице"
  "current_page": "текущая страница продуктов с разбивкой на страницы",
  "feed": "активный идентификатор FEED"
}
  

Ожидаемый ответ:

  {
  успех: правда,
  данные: [
    {
      id: 'идентификатор продукта',
      name: 'название продукта',
      description: 'описание продукта',
      url: 'ссылка на товар',
      img_url: 'ссылка на изображение товара',
      price_with_vat: 'цена товара с НДС',
      валюта: 'валюта цены',
      price_before: 'цена товара со скидкой',
      product_feed_id: 'идентификатор корма, которому принадлежит продукт'
    }
  ],
  
  from: "с id ресурса",
  to: "Идеи ресурса",
  total_records: "общее количество записей ресурса",
  per_page: "ресурс на страницу",
  current_page: "текущая страница ресурса",
  last_page: "последняя страница ресурса",
}
  

КОРМОВ

Метод: GET

Эта конечная точка вызывается при получении ФИДОВ продуктов.

Параметры:

  Content-Type: приложение / json

{
  "id": "идентификатор фида",
  "search": "строка поискового запроса",
  "per_page": "ожидаемых фидов на странице"
  "current_page": "текущая страница фидов, разбитых на страницы",
}
  

Ожидаемый ответ:

  {
  успех: правда
  данные: [
    {
      id: 'идентификатор ленты',
      name: "название ленты"
    }
  ],
  
  from: "с id ресурса",
  to: "Идеи ресурса",
  total_records: "общее количество записей ресурса",
  per_page: "ресурс на страницу",
  current_page: "текущая страница ресурса",
  last_page: "последняя страница ресурса",
}
  

Разное

Домены, используемые TOPOL.Плагин io

Какие домены использует плагин? Иногда проблема может быть вызвана брандмауэром в сети ваших клиентов, поэтому им может потребоваться добавить домены в белый список. Плагин TOPOL.io использует следующие домены:

  d5aoblv5p04cg.cloudfront.net
fonts.googleapis.com
  

Флаги, сделанные Freepik с сайта www.flaticon.com

Проверка синтаксиса кода | Qt Creator Руководство

По мере написания кода Qt Creator проверяет синтаксис кода. Когда Qt Creator обнаруживает синтаксическую ошибку в вашем коде, он подчеркивает ее и показывает подробности ошибки, когда вы наводите указатель мыши на ошибку.Точно так же, когда вы работаете с экземпляром объекта нотации объекта JavaScript (JSON), Qt Creator подчеркивает ошибки в структуре данных JSON.

На следующем снимке экрана Qt Creator указывает на ошибку, поскольку в конце строки отсутствует точка с запятой:

На следующем снимке экрана Qt Creator выдает предупреждение, потому что переменная не используется:

Чтобы изменить цвета, используемые для подчеркивания ошибок и предупреждений, выберите Инструменты > Параметры > Текстовый редактор > Шрифт и цвета > Копировать и выберите новые цвета для Ошибка и Предупреждение .

Просмотр аннотаций

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

На следующем снимке экрана имя класса Qt содержит опечатку:

Вы можете использовать значки во всплывающей подсказке, чтобы скопировать сообщение об ошибке или предупреждении в буфер обмена или проигнорировать и скрыть его. Выберите ссылку Annotation Settings , чтобы указать положение линейных аннотаций.

На следующем снимке экрана в конце строки отсутствует точка с запятой.

На следующем снимке экрана переменная не используется.

При написании кода QML или JavaScript аннотации могут содержать коды ошибок, перечисленные в кодах ошибок JavaScript и QML.

Указание позиций аннотации линий

Чтобы указать положение, в котором будут отображаться примечания, выберите Инструменты > Параметры > Текстовый редактор > Отображение > Линейные аннотации , а затем выберите, отображать ли аннотации непосредственно рядом с кодом, выровненным справа от кода или в правом поле.Отображение аннотаций между строками может быть полезно, если обычно недостаточно места для отображения аннотаций рядом с текстом.

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

Коды ошибок JavaScript и QML

Вы можете запускать статические проверки кода QML и JavaScript в своем проекте, чтобы найти общие проблемы. Чтобы запустить проверки, выберите Инструменты > QML / JS > Выполнить проверки или нажмите Ctrl + Shift + C .Результаты показаны в фильтрах QML и QML Analysis на панели вывода Issues .

Многие сообщения об ошибках аналогичны сообщениям в инструменте JSLint Дугласа Крокфорда. Дополнительные сведения об ошибках JSLint см. В разделе «Объяснения ошибок JSLint».

Сброс кода Модель

Если вы измените комплект сборки и запуска, когда у вас есть файлы QML, открытые в редакторе кода, модель кода может стать поврежденной. Следующее сообщение об ошибке указывает на то, что это могло произойти: Использование модели кода Qt Quick 1 вместо Qt Quick 2 .

Вы можете увидеть сообщение об ошибке, когда вы наводите указатель мыши на код, который Qt Creator подчеркивает в редакторе кода, или когда вы открываете файл QML в режиме разработки.

Чтобы сбросить модель кода, выберите Tools > QML / JS > Reset Code Model .

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

Проверка QML и JavaScript

Чтобы проверить свойства, методы и перечисления QML и JavaScript, наведите на них курсор и выберите Инструменты > QML / JS > Проверить API для элемента под курсором .

Автоматическое форматирование файлов QML / JS

Для автоматического форматирования файлов QML / JS при сохранении выберите Инструменты > Параметры > Qt Quick > Редактирование QML / JS > Включить автоматическое форматирование при сохранении файла .

Создать шаблон электронной почты

Прочтите эту страницу в

английский Español Français Português Deutsch

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

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

Перед тем, как начать

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

• В зависимости от вашего тарифного плана у вас может не быть доступа ко всем параметрам шаблона. Чтобы узнать, какие функции включены в каждый план, посетите нашу страницу с ценами.
• Если вы не уверены, какой шаблон использовать, прочтите больше о различных вариантах шаблона.
• Чтобы ваш классический шаблон отображался должным образом, ознакомьтесь с нашими требованиями к изображениям для блоков содержимого.
• Когда вы редактируете шаблон с пользовательским кодом, ваши изменения могут повлиять на существующие кампании, в которых используется этот шаблон. Изменения в шаблоне перетаскивания не будут отображаться в существующих кампаниях.

Новостройке

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

1. Щелкните значок Кампании .
   
2. Щелкните Шаблоны электронной почты.
   
3. Щелкните Создать шаблон .
   
4. Наведите указатель мыши на шаблон, с которого хотите начать, и нажмите Выберите .
5. Во всплывающем окне Create New Template введите имя и нажмите Save .
6. Добавляйте или редактируйте блоки содержимого и стили, чтобы создать свой шаблон по мере необходимости. Чтобы узнать больше, прочтите статью «Создание электронного письма с помощью New Builder».
7. Щелкните Preview , чтобы увидеть, как ваш шаблон будет выглядеть на настольных компьютерах и мобильных устройствах.
8. Когда будете готовы, нажмите Сохранить шаблон и выйти из .
   

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

Для классического строителя

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

1. Щелкните значок Кампании .
   
2. Щелкните Шаблоны электронной почты .
   
3. Щелкните Создать шаблон .
   
4. Щелкните вкладку, чтобы выбрать категорию шаблона.
   
   Вкладка Layouts содержит шаблоны Featured и Basic. Рекомендуемые шаблоны содержат рекомендации по типу контента для включения в кампанию, а базовые шаблоны предоставляют пустые макеты. Вкладка Themes содержит готовые макеты. Вкладка Code your own позволяет импортировать или вставлять HTML для создания макета шаблона.Чтобы узнать больше об этих параметрах, ознакомьтесь с Типами шаблонов электронной почты.
5. Щелкните шаблон, с которым хотите работать.
6. Перетаскивайте блоки содержимого в макет шаблона для добавления и форматирования текста, изображений, файлов и другого содержимого по мере необходимости.
7. Когда вы закончите, нажмите Сохранить и выйти .
8. В модальном всплывающем окне Сохранить шаблон введите имя для своего шаблона.
   
9. Нажмите Сохранить .

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

Создайте собственный код

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

Чтобы просмотреть или добавить шаблон с пользовательским кодом, перейдите на страницу Templates и щелкните Create Template .На вкладке Code your own вы увидите варианты Вставить в код , Import HTML или Import zip . Вы также можете получить доступ к настраиваемым шаблонам в классическом конструкторе.

Для получения дополнительной информации о шаблонах с настраиваемым кодом ознакомьтесь с разделами «Начало работы с языком шаблонов Mailchimp» и «Импорт настраиваемого HTML-шаблона».

Следующие шаги

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

Доступ к сохраненным шаблонам электронной почты

Создайте регулярную кампанию

HTML и обычные текстовые кампании | Cakemail

HTML означает язык разметки гипертекста. Это способ кодирования веб-страниц и шаблонов электронной почты: форматирование текста и добавление изображений.

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

Как это повлияет на вашу кампанию?

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

Важно: Наличие простой текстовой версии с тем же содержанием, что и HTML-версия, поможет улучшить доставляемость ваших электронных писем.

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

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

Помните: Обычные текстовые сообщения электронной почты не так легко отследить.

• Имейте много ссылок и побуждайте людей переходить по ним
• Ваша версия в виде обычного текста может включать URL-адреса, например http: // и ftp: //
• Попытайтесь ограничить длину символов в URL-адресах - все, что превышает 80 символов, приведет к поломке URL-адреса.

Что делать

• Сгенерируйте текстовую версию на основе вашей HTML-версии, щелкнув Создать из HTML в разделе Редактировать текстовую версию в Email Campaign Builder. По-прежнему требуется дополнительное форматирование.
• Если вы хотите узнать, какой HTML-код лучше всего подходит для определенных почтовых клиентов, вы можете обратиться к базе данных стандартов электронной почты

S-Index (OSU CSE Components)

Генерация кода - CLion

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

Меню «Создать» помогает быстро создавать стандартные конструкции кода в коде.В зависимости от текущего контекста, позиции курсора или выбранного кода CLion дает вам список конструкций, которые необходимо сгенерировать.

Вызов всплывающего окна создания

Используйте один из следующих вариантов:

Создать конструкторы

1. Выберите конструктор из всплывающего окна «Создать».

2. Если класс содержит поля, выберите поля для инициализации:

3. Если установлен флажок Создать на месте, конструктор шаблона будет сгенерирован в общедоступной области класса , в противном случае код будет помещен в соответствующий файл cpp.

Создание средств получения и установки

1. Выберите средство получения, установки или средство получения и установки во всплывающем окне "Создать".

2. Выберите поля для создания геттеров / сеттеров для:

3. Если установлен флажок «Создать на месте», геттеры / сеттеры будут сгенерированы в общедоступной области класса , в противном случае код будет быть помещенным в соответствующий файл cpp.

Сгенерировать операторы равенства

Это действие создает функции operator == и operator! = , которые будут использовать выбранные поля для сравнения объектов текущего класса.

1. Выберите «Операторы равенства» во всплывающем окне «Создать».

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

3. Если установлен флажок «Создать на месте», функции оператора будут сгенерированы в общедоступной области класса , в противном случае код будет помещается в соответствующий файл cpp.

Создать реляционные операторы

Это действие создает функции operator <, operator> , operator <= и operator> = , которые будут использовать выбранные поля для сравнения объектов текущего класса.

1. Выберите операторы отношения во всплывающем окне «Создать».

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

3. Если установлен флажок «Создать на месте», функции оператора будут сгенерированы в общедоступной области класса , в противном случае код будет помещается в соответствующий файл cpp.

Сгенерировать операторы вывода потока

Это действие генерирует оператор вставки operator << , который будет использовать выбранные поля для определения способа создания потокового вывода для объектов текущего класса.

1. Выберите «Оператор вывода потока» во всплывающем окне «Создать». Выберите поля для использования.

2. Если установлен флажок «Создать на месте», функция оператора будет сгенерирована в общедоступной области класса , в противном случае код будет помещен в соответствующий файл cpp.

Последнее изменение: 10 марта 2021 г.

Передача функций компонентам - React

Как передать обработчик событий (например, onClick) компоненту?

Передавать обработчики событий и другие функции в качестве свойств дочерним компонентам:

Если вам нужен доступ к родительскому компоненту в обработчике, вам также необходимо привязать функцию к экземпляру компонента (см. Ниже).

Как привязать функцию к экземпляру компонента?

Есть несколько способов убедиться, что функции имеют доступ к атрибутам компонентов, таким как this.props и this.state , в зависимости от того, какой синтаксис и шаги сборки вы используете.

Привязка в конструкторе (ES2015)

  class Foo extends Component {
  конструктор (реквизит) {
    супер (реквизит);
    это.handleClick = this.handleClick.bind (это);
  }
  handleClick () {
    console.log («Щелчок произошел»);
  }
  оказывать() {
    return  Нажми меня ;
  }
}  

Class Properties (этап 3 предложения)

  class Foo extends Component {
  
  handleClick = () => {
    console.log («Щелчок произошел»);
  }
  оказывать() {
    return  Нажми меня ;
  }
}  

Привязка в рендере

  class Foo extends Component {
  handleClick () {
    консоль.log ('Щелчок произошел');
  }
  оказывать() {
    return  Нажми меня ;
  }
}  

Примечание:

Использование Function.prototype.bind в рендере создает новую функцию каждый раз при рендеринге компонента, что может повлиять на производительность (см. Ниже).

Функция стрелки в рендере

  class Foo extends Component {
  handleClick () {
    console.log («Щелчок произошел»);
  }
  оказывать() {
    return  this.handleClick ()}> Нажми меня ;
  }
}  

Примечание:

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

Можно ли использовать стрелочные функции в методах рендеринга?

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

Если у вас есть проблемы с производительностью, во что бы то ни стало оптимизируйте!

Зачем вообще нужна привязка?

В JavaScript эти два фрагмента кода эквивалентны , а не :

  var method = obj.метод;
метод ();  

Методы привязки помогают гарантировать, что второй фрагмент кода работает так же, как и первый.

В React обычно нужно только привязать методы, которые вы передаете другим компонентам. Например, передает this.handleClick , поэтому вы хотите его привязать. Однако связывать метод render или методы жизненного цикла необязательно: мы не передаем их другим компонентам.

В этом сообщении Иегуды Кац подробно объясняется, что такое привязка и как функции работают в JavaScript.

Почему моя функция вызывается каждый раз при рендеринге компонента?

Убедитесь, что вы не вызываете функцию при передаче ее компоненту:

  render () {
  
  return 

Нажми меня }

Вместо передайте саму функцию (без парных скобок):

  render () {
  
  return  Нажми меня 
}  

Как передать параметр в обработчик событий или обратный вызов?

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

   this.handleClick (id)} />  

Это эквивалентно вызову .bind :

Пример: передача параметров с помощью стрелочных функций

  const A = 65

Класс Alphabet расширяет React.Компонент {
  конструктор (реквизит) {
    супер (реквизит);
    this.state = {
      justClicked: null,
      буквы: Array.from ({длина: 26}, (_, i) => String.fromCharCode (A + i))
    };
  }
  handleClick (letter) {
    this.setState ({justClicked: letter});
  }
  оказывать() {
    возвращаться (
      

        Только что нажал: {this.state.justClicked}
        

          {this.state.letters.map (letter =>
            
 this.handleClick (letter)}>
              {письмо}
            
          )}
        
      
    )
  }
}  

Пример: передача параметров с использованием атрибутов данных

В качестве альтернативы вы можете использовать DOM API для хранения данных, необходимых для обработчиков событий.Рассмотрите этот подход, если вам нужно оптимизировать большое количество элементов или иметь дерево рендеринга, основанное на проверках равенства React.PureComponent.

  const A = 65

class Alphabet extends React.Component {
  конструктор (реквизит) {
    супер (реквизит);
    this.handleClick = this.handleClick.bind (это);
    this.state = {
      justClicked: null,
      буквы: Array.from ({длина: 26}, (_, i) => String.fromCharCode (A + i))
    };
  }

  handleClick (e) {
    this.setState ({
      justClicked: e.target.dataset.letter
    });
  }

  оказывать() {
    возвращаться (
      

        Только что нажал: {this.state.justClicked}
        

          {this.state.letters.map (letter =>
            

              {письмо}
            
          )}
        
      
    )
  }
}  

Как я могу предотвратить вызов функции слишком быстро или слишком много раз подряд?

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

См. Эту визуализацию для сравнения функций дроссельной заслонки , и , дребезга .

Примечание:

_.debounce , _.throttle и raf-schd предоставляют метод cancel для отмены отложенных обратных вызовов. Вы должны либо вызвать этот метод из componentWillUnmount , либо проверить , чтобы убедиться, что компонент все еще смонтирован в отложенной функции.

Дроссель

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

  импортный дроссель от 'lodash.throttle';

class LoadMoreButton расширяет React.Component {
  конструктор (реквизит) {
    супер (реквизит);
    this.handleClick = this.handleClick.bind (это);
    this.handleClickThrottled = дроссель (this.handleClick, 1000);
  }

  componentWillUnmount () {
    это.handleClickThrottled.cancel ();
  }

  оказывать() {
    return  Загрузить еще ;
  }

  handleClick () {
    this.props.loadMore ();
  }
}  

Debounce

Debouncing гарантирует, что функция не будет выполнена до тех пор, пока не пройдет определенное время с момента ее последнего вызова. Это может быть полезно, когда вам нужно выполнить некоторые дорогостоящие вычисления в ответ на событие, которое может быть отправлено быстро (например, события прокрутки или клавиатуры).В приведенном ниже примере показан ввод текста с задержкой 250 мс.

  импорт debounce из lodash.debounce;

class Searchbox расширяет React.Component {
  конструктор (реквизит) {
    супер (реквизит);
    this.handleChange = this.handleChange.bind (это);
    this.emitChangeDebounced = debounce (this.emitChange, 250);
  }

  componentWillUnmount () {
    this.emitChangeDebounced.cancel ();
  }

  оказывать() {
    возвращаться (
      <ввод
        type = "текст"
        onChange = {this.handleChange}
        placeholder = "Искать... "
        defaultValue = {this.props.value}
      />
    );
  }

  handleChange (e) {
    this.emitChangeDebounced (e.target.value);
  }

  emitChange (value) {
    this.props.onChange (значение);
  }
}  

  импорт rafSchedule из 'raf-schd';  class ScrollListener расширяет React.Component {
 конструктор (реквизит) {
 супер (реквизит);  this.handleScroll = this.handleScroll.bind (это); 
 this.scheduleUpdate = rafSchedule (
 точка => this.props.onScroll (точка)
 );
 }  handleScroll (e) { 
 это.scheduleUpdate ({x: e.clientX, y: e.clientY});
 }  componentWillUnmount () { 
 this.
No related posts.