Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

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

Вы здесь:

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

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

Как выбрать шаблон

Чтобы найти шаблоны нового конструктора, на главной странице Личного кабинета нажимаем «Создать рассылку» или заходим через меню «Рассылки» → «Создать рассылку» → «Email».

Создание рассылки

На вкладке «Шаблоны» в выпадающем списке выбираем «Новый блочный конструктор».

Шаблоны нового конструктора

Далее выбираем шаблон и нажимаем кнопку «Использовать».

Выбираем шаблон

Открывается шаблон.

Шаблон

Сначала заменим картинку.

Как отредактировать картинку

Кликаем на картинку в письме, которую хотим заменить. На панели слева нажимаем «Изменить картинку».

Кнопка Изменить картинку

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

Загрузка картинки в менеджере файлов

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

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

Картинка загрузилась в письмо.

Картинка в письме

В нашем примере картинка слишком большая, поэтому уменьшим её.

Для этого кликаем на картинку в письме, слева на панели ползунком уменьшаем ширину.

Уменьшаем картинку

Так выглядит уменьшенная картинка.

Уменьшенная картинка

Теперь переходим к редактированию текста.

Как отредактировать текст

В текстовом блоке ставим курсор для редактирования.

Ставим курсор в текстовый блок

Удаляем текст и вписываем свой.

Вписываем свой текст

Переходим к форматированию.

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

Форматирование текста

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

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

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

Так выглядит в итоге вся строка с картинкой и текстом.

Строка с картинкой и текстом

Теперь перейдём к настройкам строки.

Как изменить свойства строки

Поменяем цвет фона всей строки. Для этого выделяем её в письме, а на панели слева в поле «Цвет фона» выбираем другой цвет.

Меняем цвет фона строки

То же самое делаем в свойствах нижней строки.

Меняем цвет фона строки

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

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

Название магазина сделаем ссылкой.

Выделяем текст, который нужно сделать ссылкой. На панели инструментов нажимаем кнопку «Insert/edit link».

Добавляем ссылку

Здесь заполняем поля:

  • Link type — тип ссылки, оставляем «URL».
  • Url — вставляем ссылку.
  • Underline link — подчёркивание ссылки, убираем галочку.
  • Text to display — отображаемый текст. Он уже добавлен, ничего не меняем.
  • Title — текст, который отображается при наведении на ссылку. Вписываем такой же, как в поле выше.

Target — оставляем «New window», чтобы ссылка открывалась в новом окне.

Редактируем ссылку

Теперь ссылка выглядит так.

Добавленная ссылка

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

Для этого выделяем блок с текстом, на панели слева кликаем на «Цвет текста» и выбираем белый.

Меняем цвет ссылки

Цвет ссылки изменился.

Белый цвет ссылки

Картинку ниже меняем таким же образом, как меняли предыдущую.

Обновлённая картинка

Эта картинка выглядит маленькой, поэтому увеличиваем её. Выделяем картинку в письме, а на панели слева ползунком увеличиваем ширину до 100%.

Теперь у изображения такой вид.

Увеличиваем картинку

Строку, которая идёт ниже, удаляем.

Как удалить строку

Кликаем на строку в письме. Справа вверху появятся пиктограммы, кликаем там на корзину.

Удаляем строку

Строка удалена.

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

Строка в шаблоне

В результате строка выглядит так.

Обновлённая строка

Осталась кнопка, которую тоже отредактируем.

Как отредактировать кнопку

Сначала заменим текст. Кликаем на блок с кнопкой, выделяем текст и вписываем свой.

Выделяем текст кнопки

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

Меняем шрифт и размер кнопки

Теперь выделяем кнопку в письме, а на панели слева редактируем её свойства:

  • Вставляем ссылку в поле «URL».
  • Отключаем автоширину и ползунком увеличиваем ширину кнопки.
  • Меняем цвет фона.
  • Устанавливаем выравнивание по центру.

Цвет текста оставляем белым.

Свойства кнопки

Листаем свойства вниз и меняем следующее:

  • Уменьшаем закругление углов.
  • В разделе «Отступы содержимого» увеличиваем отступы «Верх» и «Низ».

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

Свойства кнопки

Теперь вся строка выглядит так.

Готовая строка

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

Как скопировать строку

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

Копируем строку

Строка скопирована.

Копия строки

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

Новый контент в строке

Создаём копию строки ещё раз и опять меняем контент.

Контент в третьей строке

Переходим к настройкам блока соцсетей.

Как редактировать блок «Соцсети»

Кликаем на блок.

Кликаем на блок соцсетей

На панели слева появляются свойства блока.

Выбираем другую коллекцию иконок.

Выбираем коллекцию иконок

В нашем примере заменим иконку Twitter на иконку YouTube. Для этого напротив иконки Twitter нажимаем «Удалить», затем нажимаем «Добавить новую иконку» и выбираем YouTube.

Перетаскиваем иконку с YouTube на то место, где был Twitter.

Удаляем и добавляем иконку соцсетей

В полях «Url» вставляем ссылки.

Вставляем ссылки на соцсети

Далее меняем интервал иконок.

Также на этой странице можно настроить выравнивание и отступы, но мы оставим текущие значения.

Меняем интервал между иконками

Готовый блок с иконками соцсетей.

Готовый блок соцсетей

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

Изменённый текст

Готово. Посмотрим на общий результат.

Шаблон, который вы выбрали:

Шаблон, который мы выбрали

Отредактированный шаблон:

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

Полезные ссылки

Как попасть в новый конструктор
Как работает
Как настроить шрифты и цвета шаблона
Как собрать макет
Как отредактировать текст
Как вставить картинку
Как вставить кнопку
Как вставить соцсети
Как вставить видео
Как вставить GIF
Как сделать прехедер
Как посмотреть письмо перед отправкой

Оцените, на сколько вам показалась полезной статья «Как создать письмо на основе шаблона»
(0)