Главная Работа в онлайн-редакторе

Работа в онлайн-редакторе

Создание писем в визуальном редакторе DashaMail: сборка, настройка и оформление рассылок без кода.
Даниил Соснин
От Даниил Соснин
47 статьи

Какие шрифты использовать в email-рассылках

Правильно подобранные шрифты делают ваши письма не только приятными для чтения, но и помогают донести нужную информацию до получателя. Но что делать, если тщательно подобранные шрифты отображаются некорректно у подписчиков? Веб-шрифты и безопасные веб-шрифты Существует два основных подхода к выбору шрифтов: использование безопасных (стандартных или системных) веб-шрифтов и кастомных веб-шрифтов. В нашем редакторе представлены безопасные шрифты, гарантирующие корректное отображение во всех почтовых клиентах. Безопасные (системные) шрифты Секрет надежности безопасных веб-шрифтов кроется в их повсеместной доступности. Эти шрифты предустановлены на подавляющем большинстве компьютеров и мобильных устройств. Когда подписчик открывает ваше письмо, его почтовый клиент ищет указанный шрифт в системе. Если шрифт системный, он уже есть на устройстве, и письмо всегда будет отображаться именно так, как вы задумали. Основные безопасные веб-шрифты: - Arial. Классический и универсальный шрифт без засечек, обеспечивающий отличную читаемость. - Helvetica. Еще один популярный шрифт без засечек, известный своей нейтральностью и четкостью. - Times New Roman. Традиционный шрифт с засечками, часто используемый для формальных писем и документов. - Verdana. Шрифт без засечек, специально разработанный для хорошей читаемости на экранах. - Georgia. Элегантный шрифт с засечками, подходящий для более стилизованных рассылок. - Tahoma. Четкий и компактный шрифт без засечек, хорошо подходящий для небольших текстовых блоков. Они по умолчанию доступны в нашем онлайн-редакторе. Просто выберите нужный из выпадающего списка, и он автоматически применится к вашему письму. Никаких дополнительных настроек не требуется: Стандартные веб-шрифты Кастомные веб-шрифты (Google Fonts / .woff) Плюсы: Гарантированное корректное отображение во всех почтовых клиентах; простота использования; не требуют дополнительных настроек. Плюсы: Широкий выбор; возможность использовать фирменный шрифт; индивидуализация дизайна рассылок. Минусы: Ограниченный выбор; менее оригинальный дизайн. Минусы: Риск некорректного отображения в некоторых почтовых клиентах; требуют дополнительной настройки и тестирования; ответственность за лицензирование при загрузке .woff-файла. Если для вас приоритет — надежность и простота, рекомендуем использовать безопасные веб-шрифты, предоставляемые в онлайн-редакторе по умолчанию. Кастомные веб-шрифты Если же вы готовы потратить больше времени на настройку и полноценное тестирование, веб-шрифты помогут вам создать брендированный дизайн рассылок. Мы представляем возможность загрузить собственные веб-шрифты двумя способами: 1. Загрузка из Google Fonts. Вы можете выбрать любой шрифт из обширной библиотеки Google Fonts прямо в интерфейсе сервиса. Это удобный и быстрый способ добавить в рассылку нестандартный шрифт. 2. Загрузка готового .woff-файла. Если у вас есть собственный .woff-файл шрифта, вы можете загрузить его в сервис. Этот вариант подходит для тех, кто использует уникальные фирменные шрифты. ​Важно: при загрузке собственного woff-файла убедитесь, что у вас есть все необходимые лицензии на его использование. Использование коммерческих шрифтов без лицензии является нарушением авторских прав. Однако, несмотря на свою привлекательность, такие шрифты имеют некоторые подводные камни, о которых важно знать: - Проблемы с рендерингом на разных устройствах. Даже если почтовый клиент поддерживает кастомные веб-шрифты, их отображение может немного отличаться на разных устройствах — компьютерах, планшетах, смартфонах. Это может привести к незначительным, но все же заметным, различиям в верстке ваших писем. Тщательное тестирование в разных средах — необходимый этап при использовании веб-шрифтов. - Влияние на клиентский опыт. Загрузка шрифтов может незначительно увеличить время загрузки письма. Поэтому важно оптимизировать размер woff-файлов и использовать шрифты разумно. Либо использовать Google Fonts, так как это гарантирует оптимальный размер файлов и широкую совместимость. - Несовместимость с некоторыми почтовыми клиентами. Не все почтовые клиенты поддерживают веб-шрифты. В некоторых случаях вместо выбранного вами шрифта подписчик увидит резервный шрифт или вовсе шрифт по умолчанию своего почтового клиента. Например, Outlook известен своей "любовью" к Times New Roman. Почтовый клиент Поддержка веб-шрифтов Apple Mail ✓ Да Outlook 2013-2021 ✘ Нет Outlook Office 365 (Win & Mac) ✘ Нет Outlook for Mac ✓ Да Windows 11 ✓ Да Windows 11 ✘ Нет Gmail App ✘ Нет* iOS ✓ Да Samsung Mail ✘ Нет** AOL Mail ✘ Нет Gmail ✘ Нет*** Office 365 ✘ Нет Outlook.com ✘ Нет Yahoo! Mail ✘ Нет * (Google заменяет шрифты — по умолчанию на Android используется Roboto, на iOS — Helvetica) ** (Шрифты автоматически заменены — Roboto является шрифтом без засечек по умолчанию) *** (Отображается Roboto, поэтому существует ограниченная поддержка очень специфических веб-шрифтов — вероятно, специфических из Google Fonts, возможно, только Roboto, поскольку это шрифт Google по умолчанию) Рекомендации по работе с кастомными веб-шрифтами Если вы решили использовать веб-шрифты для создания уникального дизайна email-рассылок, следующие рекомендации помогут вам избежать подводных камней и добиться максимальной эффективности: 1. Выбор правильного резервного шрифта (для кастомных HTML-макетов) Резервный шрифт будет отображаться, если основной веб-шрифт не поддерживается почтовым клиентом. Он должен соответствовать вашему. Выберите шрифт, визуально близкий к вашему веб-шрифту, чтобы сохранить единый стиль и не разрушить дизайн письма. Обратите внимание на классификацию шрифтов (с засечками/без засечек) и их x-высоту (высоту строчных букв). - Быть безопасным: Резервный шрифт должен быть одним из безопасных веб-шрифтов, чтобы гарантировать его корректное отображение. 2. Избегайте писем только с изображениями Использование изображений вместо текста для обхода ограничений веб-шрифтов — плохая практика. Такие письма недоступны для пользователей с отключенными изображениями или с нарушениями зрения, использующих программы чтения с экрана. Кроме того, они с большой вероятностью попадут в спам. Как вариант, можно добавлять alt-текст к изображениям, но лучше всего использовать непосредственно текст с правильно подобранным шрифтом. 3. Обязательное тестирование перед отправкой: Перед каждой рассылкой обязательно тестируйте ваши письма в разных почтовых клиентах и на разных устройствах. Функцию “Провидица”, которая позволяет увидеть, как ваше письмо будет выглядеть у получателей. Это поможет выявить и исправить возможные проблемы с отображением шрифтов и версткой: 4. Настраивайте веб-шрифты в DashaMail Вы можете выбрать шрифт из Google Fonts или загрузить свой .woff-файл непосредственно в редакторе. Подробные инструкции вы найдете в нашей базе знаний. 5. Особенности Outlook и как их обойти Как уже упоминалось, Outlook может заменять веб-шрифты на Times New Roman. Чтобы избежать этого, в HTML-макетах всегда указывайте резервный безопасный шрифт. Также вы можете обратиться к базе знаний MSO для более точной настройки стилей в Outlook. Читайте в блоге. Отображение писем в Outlook. 6. Избегайте faux bold и faux italic Faux bold и faux italic — это искусственное утолщение и наклон шрифта, которые применяются браузером или почтовым клиентом, если отсутствуют соответствующие стили в файле шрифта. Текст с таким стилем может выглядеть неаккуратно. Если вам нужны жирный или курсивный стили, убедитесь, что они присутствуют в загружаемом вами woff-файле или доступны в Google Fonts. Выбор правильного шрифта для вашего бренда Вот три ключевых аспекта, которые нужно учитывать при выборе шрифта для email-рассылок, и примеры того, как известные компании используют шрифты для укрепления своего бренда. Согласованность с общей брендовой айдентикой Шрифт в ваших email-рассылках должен соответствовать общему визуальному стилю вашего бренда. Используйте те же шрифты, что и на вашем сайте, в логотипе и других маркетинговых материалах. Это поможет создать единый и узнаваемый образ бренда. Читабельность на разных устройствах и доступность Шрифт должен быть легко читаем на экранах разных размеров — от смартфонов до мониторов компьютеров. Также важно учитывать доступность: выбирайте шрифты, которые легко воспринимаются людьми с нарушениями зрения. Избегайте слишком декоративных или визуально перегруженных шрифтов, которые могут быть сложными для чтения. Лучше сделать ставку на системные шрифты, обеспечивая отличное визуальное восприятие текста. Тон и эмоции, которые передает шрифт Каждый шрифт имеет свой характер и настроение. Например, шрифты с засечками могут создавать впечатление традиционности и формальности, а шрифты без засечек — современности и минимализма. Выбирайте шрифт, который соответствует тону и голосу вашего бренда и помогает передать нужные эмоции. Вы хотите выглядеть серьезно и профессионально или легко и дружелюбно? Выбор шрифта играет важную роль в ответе на этот вопрос. Помните, что выбор правильного шрифта помогает создать положительное впечатление у подписчиков, повысить читабельность ваших писем и в конечном итоге улучшить результаты ваших email-кампаний. Заключение: Тестируйте и анализируйте! Чтобы убедиться, что ваши письма выглядят безупречно, необходимо регулярно тестировать и анализировать результаты. Тестирование Прежде чем отправить рассылку всей вашей базе подписчиков, воспользуйтесь отправкой тестовых писем и “Провидицей” в редакторе. Это позволит увидеть, как ваше письмо будет отображаться в разных почтовых клиентах и на разных устройствах. Вы сможете выявить и исправить потенциальные проблемы с отображением шрифтов и версткой до того, как они достигнут ваших подписчиков. Анализ После отправки рассылки отслеживайте ключевые метрики: открываемость, кликабельность, конверсии. Анализируйте, как выбор шрифтов влияет на эти показатели. Экспериментируйте с разными шрифтами и их сочетаниями, чтобы найти оптимальный вариант для вашей аудитории.

Обновлено Jan 19, 2026

Функция «Пишите с AI» блока «Параграф»

ИИ открывает множество возможностей для бизнеса и создателей контента. Наш AI-ассистент, доступный в блоке «Параграф», поможет вам создавать тексты с нуля, редактировать и оптимизировать их для SEO, персонализировать контент и работать с текстами на разных языках. Как использовать функцию «Пишите с AI» Функция «Пишите с AI» поможет вам быстро создавать и редактировать тексты для ваших email-рассылок и лендингов. 1. Выберите блок «Параграф» и добавьте его в шаблон письма или лендинга. 2. В свойствах блока выберите «Пишите с AI». 3. В открывшемся окне «ИИ Параграф Ассистент» введите готовый текст или составьте запрос, описывающий желаемый текст. Будьте как можно более конкретны. Примеры запросов: - «Напиши короткий текст о преимуществах email-маркетинга для интернет-магазинов.» - «Создай текст приветственного письма для новых подписчиков, предлагающее им скидку 10%.» - «Напиши текст для кнопки призыва к действию, побуждающий пользователей скачать бесплатный гайд.» Неудачные примеры запросов: - «Напишите что-нибудь.» (слишком общий запрос) - «Текст» (не дает никакой информации о желаемом тексте) 4. Нажмите кнопку «Сгенерировать». 5. Примените или перепишите текст: - «Применить»: Если текст вас устраивает, нажмите «Применить», чтобы добавить его в блок «Параграф». - «Regenerate»: Если текст вам не подходит, нажмите «Regenerate», чтобы сгенерировать новый вариант на основе того же запроса. 6. Укажите дополнительные параметры (опционально): Нажмите на поле ввода текста, чтобы задать дополнительные параметры вручную или из предложенного списка. Примеры параметров: - Тон текста (формальный, неформальный, дружеский) - Количество символов - Ключевые слова - Язык текста (английский, русский, испанский и др.) (скриншот с примерами параметров) Варианты использования Наш ИИ-помощник предлагает ряд функций: - Создание текста с нуля: Помощник может написать маркетинговый текст с нуля по вашим параметрам, включая количество символов и желаемый тон. - Редактирование текста: Помощник может редактировать текст, заменяя слова и предложения, меняя лицо повествования, проверяя орфографию и грамматику, а также создавая краткое содержание длинных текстов. - SEO-оптимизация: Помощник поможет оптимизировать контент для поисковых систем, предлагая ключевые слова и анализируя эффективность. - Персонализация: Помощник поможет персонализировать контент для вашей аудитории, повышая вовлеченность и конверсию. - Многоязычность: Помощник поддерживает несколько языков, включая английский, испанский, французский, немецкий, итальянский, португальский, голландский, русский, китайский и корейский. Преимущества использования ИИ: - Уверенность в своих текстах: ИИ поможет проверить ошибки и улучшить качество, что повысит вашу уверенность в результатах работы. - Удовлетворение от работы: ИИ повысит вашу продуктивность и эффективность, что приведет к большему удовлетворению от работы. - Новые идеи: ИИ поможет вам генерировать новые идеи и подходы к созданию контента. - Более тесная связь с аудиторией: инструменты персонализации помогут создавать контент, который будет резонировать с вашей аудиторией. - Вдохновение: ИИ может подсказать новые идеи и направления, вдохновляя вас на эксперименты. Важно помнить: контент, созданный искусственным интеллектом, — это полезный инструмент, но не замена живому автору. Человеческий фактор необходим, чтобы контент был не только грамотным, но и вызывал отклик у целевой аудитории. Ассистент может не уловить нюансы, тон и культурный контекст, необходимые для создания по-настоящему эффективного контента. Убедитесь, что контент подходит для вашей аудитории и не нарушает этических и правовых норм. Прежде чем воспользоваться нашим ИИ-помощником, обратите внимание: Помощник ИИ создан исключительно для помощи в создании и редактировании электронных писем и лендингов. Пожалуйста, будьте внимательны при использовании этого инструмента и не вводите личные данные, касающиеся вас и/или третьих лиц, а также любую конфиденциальную информацию. Эта функция разработана OpenAI L.L.C. ИИ-модель использует передовые технологии обработки естественного языка, такие как семантический анализ и понимание контекста, чтобы генерировать релевантные ответы на ваши запросы. Однако точность ответов не абсолютна, поэтому в некоторых случаях результаты могут быть не совсем точными или подходящими. Рекомендуем критически оценивать ответы и не полагаться на них полностью. Мы просим не вводить личные данные при использовании AI-ассистента. Если сгенерированный текст все же содержит фактически неверную личную информацию, которую вы хотите исправить, отправьте запрос на исправление непосредственно в OpenAI по адресу: dsar@openai.com. Мы не получаем и не обрабатываем, ни прямо, ни косвенно, информацию, которую вы вводите в ИИ Параграф Ассистент, а также сгенерированные им тексты. Мы также не позволяем OpenAI обрабатывать эту информацию для обучения ИИ-модели и улучшения своих сервисов. OpenAI хранит информацию в течение 30 дней исключительно для выявления злоупотреблений и ненадлежащего использования инструмента. Подробнее читайте в документации на сайте OpenAI.

Обновлено Jan 19, 2026

Видеоуроки по работе в онлайн-редакторе DashaMail

1. Начало работы в редакторе, основные настройки 2. Работа с изображениями 3. Как добавить кнопку в шаблон 4. Как добавить и редактировать текст 5. Как вставить видео в письмо 6. Создание карточки товара 7. Блоки с контентом: текстовые, разделители, HTML, медиа и пр. 8. Фон письма и контента 9. Настройка мобильной версии шаблона 10. Настройка скругления элементов 11. Специальные ссылки и дополнительные поля 12. Сохранение и добавление шаблона в рассылку Внимание! Если у вас возникают трудности с просмотром видео, вы можете перейти по прямым ссылкам и просмотреть их на нашем канале. 1. Начало работы в редакторе, основные настройки 2. Работа с изображениями 3. Как добавить кнопку в шаблон 4. Как добавить и редактировать текст 5. Как вставить видео в письмо 6. Создание карточки товара 7. Блоки с контентом: текстовые, разделители, HTML, медиа и пр. 8. Фон письма и контента 9. Настройка мобильной версии шаблона 10. Настройка скругления элементов 11. Специальные ссылки и дополнительные поля 12. Сохранение и добавление шаблона в рассылку

Обновлено Jan 19, 2026

Как сохранить блок?

Сохраненные блоки позволяют быстро добавлять в шаблон часто используемые элементы без необходимости их создания с нуля. Это особенно полезно для элементов, которые повторяются в каждом письме: шапки, подписи, разделы с контактной информацией и так далее. Чтобы сохранить блок: 1. Выделите нужную строку: 2. Нажмите на иконку дискеты: 3. Введите имя блока и нажмите ОК: Чтобы использовать сохраненный блок: 1. Перейдите во вкладку Строки: ​ 2. В выпадающем списке выберите Мои блоки: 3. Перетащите блок в нужное место макета. Для удаления сохраненного блока есть соответствующая кнопка: В онлайн-редакторе также доступен набор уже готовых предустановленных блоков для создания шаблона. Чтобы использовать предустановленный блок 1. Перейдите во вкладку Строки: 2. В выпадающем списке выберите Предустановленные: 3. Перетащите блок в нужное место макета.

Обновлено Jan 19, 2026

Как скруглить углы у контента

Кликните по строке, в которой нужно скруглить блок с контентом: Для того, чтобы скругление отображалось корректно, в меню «Строки» откройте «Свойства строки» и в «Фоны» обязательно задайте цвет фона контента, он не должен быть прозрачным или совпадать с фоном строки/всего письма: В этом же меню в разделе «Бордеры» выбираем «Скругленные углы области содержимого»: Задаем нужный радиус скругления: Если нужно сделать закругление только у некоторых углов, в «Скругленные углы области содержимого» активируем «Больше свойств», так откроются настройки скругления для каждой стороны блока: Также в меню «Бордеры» вы можете выбрать варианты обводки для границ содержимого. Обводка будет скруглена по границе блока: Подробнее о свойствах строки и ее элементах рассказано в нашей инструкции.

Обновлено Jan 19, 2026

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

Чтобы добавить таблицу, перетяните блок TABLE из панели справа: Свойства таблицы При нажатии на блок с таблицей вы можете работать со следующими свойствами: - Layout Позволяет задать количество столбцов (1), количество рядов (2), границы ячеек (3), цвет фона (4) и "полосатые ряды" (5) - Header Предназначен для добавления ряда с заголовками столбцов. Если включить Header row (1), появятся параметры для изменения фона ячеек с заголовками (2), толщины шрифта (3), размера шрифта (4), цвета текста (5) и выравнивания текста в ячейках (6) - Content Дает возможность задавать параметры для содержимого таблицы, а именно: шрифт (1), толщину шрифта (2), размер шрифта (3), цвет текста (4), цвет ссылки (5), выравнивание текста в ячейках (6), межстрочный интервал (7), межбуквенный интервал (8), направление текста (9) - Свойства блока Необходимы для настройки отступов (1) и скрытия блока с таблицей на десктопе или мобильном устройстве

Обновлено Jan 19, 2026

Блок с иконками

Чтобы добавить блок с иконками, перетяните его в нужную строку в письме: По умолчанию в блоке находится одна иконка с изображением звезды. Нажмите на блок - в меню справа появятся настройки данного блока: Рассмотрим подробнее все настройки данного блока. Кнопка «Добавить новую иконку» позволяет добавить нужное вам количество иконок: Кнопка «Изменить картинку» (1) дает возможность установить изображение через хранилище контента. Кнопка «Графические эффекты» открывает редактор для работы с изображением (2). При переключении слайдера «Подробнее» открываются расширенные настройки для иконки (3): «Url иконки» (1) – поле, в которое вы можете вставить ссылку на изображение вашей иконки, если оно не загружено в наше внутреннее хранилище. «Альтернативный текст» (2) - поле для описания иконки словами, если изображения будут отключены в письме или не прогрузятся. Пользователь сможет понять, что должно быть на этом месте. Вы можете задать текст для иконки и выбрать его расположение относительно этой иконки (3). Настройка «Тип ссылки» (4) позволяет задать действие, которое будет выполнено: Действие «Открыть ссылку». Вы можете установить страницу, на которую будет направлен пользователь после нажатия на иконку, а также задать файл для скачивания. Параметр «Цель» (2) определяет, откроется ссылка в текущей вкладке или новой. Поле «Заголовок» устанавливает заголовок для страницы, на которую будет осуществлен переход: ​ Действие «Отправить письмо». При нажатии на иконку пользователь сможет сразу отправить вам email. Укажите адрес, на который вы хотите получить письмо (1). Также доступны поля для установления темы письма (2), содержания (3) и заголовка (4). Но эти поля пользователь сможет изменить при отправлении письма: Действие «Позвонить». Если почтовый клиент получателя письма умеет обрабатывать url-схему «tel:», то при нажатии на иконку он сможет позвонить на указанный номер телефона: Действие «Отправить СМС». Если почтовый клиент получателя поддерживает url-схему «tel:», вы можете задать действие, при котором отправится СМС на указанный номер (1). Предварительно можно установить текст СМС (2) и его заголовок (3): ​ ​ Рассмотрим общие настройки для блока иконки. Для текста иконок вы можете установить шрифт: Установить обычную или жирную толщину шрифта: Задать размер шрифта: А также задать цвет. Цвет устанавливается с помощью цветовой палитры(1) или RGB (2): Вы можете выровнять иконки внутри блока: слева, по центру или справа: «Межбуквенный интервал» позволяет изменить расстояние между буквами: «Размер иконки» позволяет установить желаемый размер иконки. Доступны размеры 16рх, 32рх, 64рх, 128рх: С помощью настройки «Интервал иконок» можно отрегулировать расстояние между иконками: Настройка «Отступы иконки» позволяет задать отступы для иконок (1). Изображение рядом (2) помогает представить заданные отступы. Переключив слайдер (3), вы можете задать отступ для каждой стороны иконки отдельно: Параметр «Отступы» задает отступы внутри блока. При включении слайдера (1) вы можете настроить отступы для каждой стороны отдельно (2). Изображение (3) поможет визуализировать заданные отступы: С помощью опции скрытия блока вы можете настроить отображение блока на десктопе или мобильном телефоне:

Обновлено Jan 19, 2026

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

Чтобы вставить картинку в письмо, выберете соответствующий блок во вкладке «Содержимое» и перенесите его в нужную строку. Подробнее о строках вы можете прочитать в статьях Строки, структура письма, Строки, свойства: Загрузить изображение в письмо можно через хранилище файлов, для этого нажмите на кнопку «Обзор» (1) или кнопку «Choose image» (2): ​ Обе кнопки перенесут вас в хранилище файлов. После выбора, изображение загрузится в нужный блок: ​ Также можно перетащить картинку напрямую с компьютера: ​ ​ Либо вставить ссылку на изображение в поле «URL»: Это изображение имеет пустой атрибут alt; его имя файла - image-1-1024x349.png Рассмотрим подробнее настройки блока «Картинка». В поле «Ширина» вы можете задать необходимую ширину картинки, сдвигая ползунок влево или вправо (1). Процентное соотношение выбранной ширины относительно оригинальной будет показано справа (2). Вы можете включить полную ширину картинки на мобильном устройстве, поставив галочку в соответствующем поле (3). При переключении слайдера (4) подключится функция автоматической ширины. Данная настройка позволяет автоматически подгонять картинку по ширине блока. Поля 1-3 будут недоступны для изменения. ​ Поле «Выравнивание» размещает картинку относительно блока, в котором она находится, слева, по центру или справа. ​ Кнопка «Графические эффекты» (1) откроет редактор изображения. Кнопка «Изменить картинку» (2) откроет хранилище контента, позволив заменить изображение. В строке «URL» (3) указана ссылка на изображение. В строке ниже (4) указано название загруженного изображения, чтобы вы могли убедиться, что загрузили верный файл. В поле «Альтернативный текст» введите описание картинки. Рекомендуем заполнять это поле, так как пользователь должен понимать содержание изображения, даже если оно не отображается: ​ Поле «Ссылка картинки» позволяет: 1. Добавить в картинку ссылку, по которой перейдет пользователь, если нажмет на изображение. 2. Отправить письмо на заранее указанный email с заданной темой и текстом. 3. Позвонить или отправить СМС на заданный номер с заранее указанным текстом. ​ ​ В поле «Отступы» вы можете задать отступы для всех сторон изображения (1) или, если слайдер переключен (3), будет доступна возможность задать отступы для каждой стороны в индивидуальном порядке. Изображение (2) помогает представить заданные отступы в блоке: Поле «Скрыть» позволяет выключить блок на мобильной или десктопной версии письма. На скриншоте отображено состояние кнопок при скрытом блоке на десктопной версии и включенном на мобильной версии письма:

Обновлено Jan 19, 2026

Блок "Меню"

Чтобы создать меню на странице вашего письма, перетяните соответствующий блок в нужную строку письма: Затем нажмите на этот блок, в меню справа вы увидите его настройки: Кнопка «Добавить новый элемент» позволяет задать пункт меню: Введите текст, который будет отображаться (1) и действие, которое будет происходить при клике на этот пункт (2). Рекомендуем в «Меню» использовать действие «Открыть ссылку». При выборе этого действия введите в поле «URL» ссылку, на которую будет вести пункт меню (3). В поле «Цель» вы можете выбрать, в какой вкладке браузера откроется страница (5), а также добавить заголовок для этой страницы. Кнопка "Удалить" (6) удалит пункт меню. Для всех пунктов меню вы можете задать шрифт (1), его толщину (2) и размер (3): Вы можете задать цвет текста и цвет ссылки, используя палитру (1) или RGB (2): Поле «Выравнивание» позволяет расположить меню относительно блока, в котором оно находится, слева, по центру или справа. ​ Настройка «Ориентация» позволяет задать отображение меню вертикально или горизонтально: В поле «Разделитель» используйте символ для визуального разделения пунктов меню. Помните, что цвет разделителя будет тот, который вы указали в поле «Цвет текста»: При включении пункта «Сворачивающееся меню» будет доступна настройка для иконки «гамбургера»: Вы можете установить размер иконки (24рх, 36рх, 46рх, 64рх) (1) и цвет полосок меню (2). Для фона иконки вы можете задать цвет (3), а также форму (4) - круглую (rounded) или квадратную (normal). С помощью поля «Отступы» вы можете задать отступы для пункта меню или всего блока. При переключении слайдера появляется возможность задать отступы для каждой стороны отдельно: Блок «Скрыть» позволяет задать видимость блока на десктопе или мобильном устройстве:

Обновлено Jan 19, 2026

Блок социальные сети, как настроить

Перетяните блок «Соцсети» в нужную строку письма: Для задания настроек блока нажмите на него: С помощью настройки коллекции иконок вы можете задать вид отображения: При переключении слайдера «Подробнее» (1) доступны отдельные настройки для каждой иконки. Вы можете задать подпись для иконки (2). Установить текст, который будет отображаться, если картинка не прогрузилась (3). Указать ссылку, на которую будет вести иконка(4), а также удалить иконку (5): С помощью кнопки «Добавить новую иконку» можно добавить иконку: Среди предустановленных есть самые популярные и запрашиваемые иконки, такие как Watsapp, YouTube, VK, Одноклассники, а также многие другие. Если вы не нашли нужную социальную сеть, вы можете добавить ее через кнопку «Добавить свою иконку»: Все иконки вы можете выровнять внутри блока по левому краю, по центру или по правому краю: Также можно задать интервал между иконками: Отступы позволяют установить отступы внутри блока, при переключении слайдера появляется возможность задать отступы для каждой стороны отдельно: Настройка «Скрыть» позволяет выбрать, будет ли отображаться блок на мобильной и десктопной версии:

Обновлено Jan 19, 2026

Делитель, настройки

Чтобы установить визуальный разделитель в письмо, перенесите соответствующий блок в нужную строку: ​ Рассмотрим подробнее настройки блока «Делитель».​ Вы можете выбрать тип линии (1): сплошную, точками и пунктирную. Есть возможность задать толщину линии (2), а также установить необходимый цвет (3): Параметр «Ширина» позволяет задать ширину линии относительно блока, в котором она находится: С помощью настройки «Выравнивание» вы можете привязать линию к левому краю, центру или правому краю блока: В параметре «Отступы» задаются отступы для всех сторон линии (1). Если переключить слайдер (2), появится возможность задать отступы для каждой стороны отдельно. Изображение (3) помогает представить заданные отступы в блоке: ​ Опция «Скрыть» позволяет спрятать блок в мобильной или десктопной версии письма: ​ При включении настройки «Прозрачность» линия становится прозрачной и появляется возможность задать высоту блока:

Обновлено Jan 19, 2026

Список, настройки

Рассмотрим все настройки блока "Список". Вы можете удалить или продублировать блок, а также вернуться в меню выбора другого блока. В поле тип списка вы можете переключить список на нумерованный (1) и ненумерованный (2). Для нумерованного списка доступны шесть вариантов отображения. «Предустановленный»(1) тип включает в себя арабские цифры, строчные латинские буквы и строчные римские цифры. Тип «Номер» нумерует список арабскими цифрами. Тип «Нижняя alpha» (3) показывает список со строчными латинскими буквами. Тип «Верхняя alpha» (4) - заглавными латинскими буквами. Тип «Нижняя roman»(5) - строчными римскими цифрами. Тип «Верхняя roman» (6) заглавными римскими цифрами. Также при выборе нумерованного списка доступна возможность задать номер элемента, с которого начинается список. Для ненумерованного списка доступны четыре стиля отображения. «Предустановленный»(1) тип, он включает в себя диски, круги и квадраты, тип «Диски(2)» - маркирует список закрашенными кругами, тип «круги» (3) маркирует список не закрашенными кругами и тип «Квадраты» (4) – маркирует закрашенными квадратами. Поле шрифт позволяет установить необходимый шрифт только для редактируемого списка. В поле «Толщина шрифта» вы можете установить жирную или обычную толщину. Поля цвет текста и цвет ссылок позволяют задать цвет с помощью палитры цвета(открыть ее можно, нажав на цветной квадрат(1)) или окно для ввода цветового кода(2). Поле выравнивание дает возможность выровнять список по левому краю блока, центрировать его, привязать к правому краю блока или распределить текст по всему блоку. Поле «Межстр. интервал» дает возможность, выбрать интервал между строками текста. В поле «Межбуквенный интервал» вы можете задать расстояние между буквами. Поле «Отступы» дает возможность задать отступы внутри блока сразу для всех сторон (1), визуальное отображение можно увидеть на рядом расположенном изображении(2). Если переключить слайдер (3), представится возможность задать отступы для каждой из сторон блока индивидуально. Поле «Скрыть» позволяет выключить блок на мобильной или десктопной версии письма. На скриншоте отображено состояние кнопок при включенном блоке на десктопной версии и выключенном на мобильной версии письма. О том как добавить блок в письмо, вы можете прочитать в статье : "Виды текстовых блоков, как добавить и отредактировать".

Обновлено Jan 19, 2026

Параграф, настройки

Рассмотрим все настройки блока "Параграф". Вы можете удалить или продублировать блок, а также вернуться в меню выбора другого блока. Поле шрифт позволяет установить необходимый шрифт только для редактируемого параграфа. В поле «Толщина шрифта» вы можете установить жирную или обычную толщину. Поля цвет текста и цвет ссылок позволяют задать цвет через отрывающуюся палитру цвета(открыть ее можно, нажав на цветной квадрат(1)) или окно для ввода цветового кода(2). Поле выравнивание дает возможность выровнять параграф по левому краю блока, центрировать его, привязать к правому краю блока или распределить текст по всему блоку. Поле «Межстр. интервал» дает возможность, выбрать интервал между строками текста. В поле «Межбуквенный интервал» вы можете задать расстояние между буквами. Поле «Отступы» дает возможность задать отступы внутри блока сразу для всех сторон (1), визуальное отображение можно увидеть на рядом расположенном изображении(2). Если переключить слайдер (3), представится возможность задать отступы для каждой из сторон блока индивидуально. Поле «Скрыть» позволяет выключить блок на мобильной или десктопной версии письма. На скриншоте отображено состояние кнопок при скрытом блоке на десктопной версии и включенном на мобильной версии письма. О том как добавить блок в письмо, вы можете прочитать в статье : "Виды текстовых блоков, как добавить и отредактировать".

Обновлено Jan 19, 2026

Заголовок, настройки

Рассмотрим все настройки блока "Заголовок". Вы можете удалить или продублировать блок, а также вернуться в меню выбора другого блока. В поле заголовок, из выпадающего списка, вы можете выбрать размер заголовка. Представлены размеры H1, H2 или Н3. H1 равен размеру текста 23, H2- 18, H3 – 16. ​ Поле шрифт позволяет установить необходимый шрифт только для редактируемого заголовка. В поле «Толщина шрифта» вы можете установить жирную или обычную толщину. Поля цвет текста и цвет ссылок позволяют задать цвет через отрывающуюся палитру цвета(открыть ее можно, нажав на цветной квадрат(1)) или окно для ввода цветового кода(2). Поле выравнивание дает возможность выровнять заголовок по левому краю блока, центрировать его, привязать к правому краю блока или распределить текст по всему блоку. Поле «Межстр. интервал» дает возможность, выбрать интервал между строками текста. В поле «Межбуквенный интервал» вы можете задать расстояние между буквами. Поле «Отступы» дает возможность задать отступы внутри блока сразу для всех сторон (1), визуальное отображение можно увидеть на рядом расположенном изображении(2). Если переключить слайдер (3), представится возможность задать отступы для каждой из сторон блока индивидуально. Поле «Скрыть» позволяет выключить блок на мобильной или десктопной версии письма. На скриншоте отображено состояние кнопок при включенном блоке на десктопной версии и выключенном на мобильной версии письма. О том как добавить блок в письмо, вы можете прочитать в статье : "Виды текстовых блоков, как добавить и отредактировать".

Обновлено Jan 19, 2026

Как добавить видео в письмо?

Техническими правилами большинства почтовых провайдеров запрещено использовать потенциально опасные объекты, такие как ActiveX, JavaScript, VBScript, Java-апплеты, Frames и IFrames, подключаемые с внешних сайтов CSS, Meta Refresh и т.п. (использование таких элементов может привести к блокировке ваших рассылок). Это связано с безопасностью конечных пользователей. Но выход есть! Онлайн-конструктор может самостоятельно подставлять скриншот из видео и при нажатии на него открывать видео в новом окне браузера. Перетяните блок «Видео» в нужное место шаблона: Нажмите на блок, когда перенесете его, и справа откроется меню для его редактирования. Рассмотрим подробнее настройки блока «Видео»: 1. Задает свойства блока, в нем размещены кнопки для удаления, дублирования и перехода в меню к другим блокам. 2. В это поле необходимо вписать ссылку на видео, и обложка из этого видео автоматически погрузится в блок. 3. Поле, в котором вы задаете название для видео. 4. Блок, который отвечает за внешний вид кнопки воспроизведения. Здесь вы можете задать: - тип иконки; - цвет иконки, выбрав светлую или темную иконку; ​ - размер иконки; ​ Итоговой вариант иконки будет отображен на превью видео и в самом блоке: 5. Настройка позволяет задать отступы для блока. Сразу для со всех сторон: Переключив слайдер «Больше свойств», вы можете задать отступы для каждой стороны отдельно: Заданные настройки вы можете увидеть как на самом блоке, так и на изображение в свойствах: ​ 6. Опция помогает скрыть выбранный блок. Возможно отключить скрытие блоков, задать скрытие блока для десктопной версии письма (на скриншоте для десктопной версии срытие блока отключено), задать скрытие блока для мобильной версии письма (на скриншоте скрытие блока для мобильной версии включено):

Обновлено Jan 19, 2026

Генерация изображений в онлайн-редакторе DashaMail: советы и рекомендации

В предыдущей статье мы рассказали, как работать с функционалом, теперь разберем самое важное — запросы (промты), по которым генерируются изображения и как их правильно составлять. Что такое промт и из чего он состоит Промт (prompt) — это описание, которое Midjourney использует для генерации изображения. В промте обязательно должен быть текст, также он может содержать параметры изображения. Ссылка на изображение добавляется, если требуется, чтобы генерируемая картинка была в каком-то конкретном стиле. URL-адрес всегда прописывается в начале промта. Текст описывает изображение, которое вы хотите получить. Параметры позволяют менять способ создания изображения. Они позволяют изменять пропорции, модели, стили и многое другое. Параметры добавляются в конце промта после двух дефисов --. Хорошо продуманное описание поможет создать уникальные и захватывающие изображения. На что нужно обратить внимание На текущий момент бот понимает только текст на английском языке. Не бойтесь при необходимости использовать онлайн-переводчик, в текстовом описании изображения (промте) не требуется идеальное построение фраз. Нынешняя версия Midjourney довольно хорошо распознает текст запроса, поэтому составлять промты стало значительно проще. Например, по запросу «create a high-resolution image of a legendary gold chest, half buried in the ground, in a dark forest. Bright light is radiating from the chest, the chest is bright gold, and glowing», (который выглядит привычнее для ChatGPT или DALL-E) нейросеть выдает очень приличный результат: Обратите внимание на тот факт, что Midjourney создает картинки, опираясь на изображения объектов, которые имеются в сети. Например, фото котиков в свободном доступе много, поэтому картинки с ними получаются очень хорошо и генерируются без проблем. В отличие от этого, оазис для цветов часто скрыт на снимках с букетами. Поэтому при запросе нарисовать флористическую пену, бот рисует различные объекты с цветами, но не тот, который нужен. Составление текстового промта Выбор основного объекта В первую очередь нужно описать центральную тему или объект, вокруг которого строится остальная часть промта. Правда, если вписывать в запрос исключительно один объект, то результаты вряд ли порадуют разнообразием. Пример по запросу «puppy» Детали запроса Для генерации картинки достаточно пары слов, и изображения с такими промтами получаются отличными: Пример: картинки по запросу distopian futuristic 2d monochrome Но если вы введете фразу без дополнительных условий, то все, что не было точно описано, ai «додумает». Большое количество деталей может сломать генерацию, когда бот не понимает, что именно нужно нарисовать. Поэтому, если требуется большое количество предметов на фото (например, десять подарков разного цвета), не описывайте отдельно каждый, а объедините их в одну категорию. Учитывайте, что Midjourney плохо понимает отрицания (нет, без, но, исключая). Лучше описать то, что вы хотите видеть на изображении, а не то, чего нужно избегать. Например, если попросить нарисовать сцену праздника без фейерверка, то с большой вероятностью на итоговом изображении как раз появится фейерверк. По запросу «holiday without fireworks» отрицание не сработало ни в одном из вариантов. Стили Midjourney обучена на обширном списке художественных стилей, работ конкретных художников, разнообразных направлений и временных эпох. При указании стилистики в запросе, будь то выбор материалов (акварель, живопись маслом), художественные направления, конкретные художники — результаты получаются впечатляющими. watercolor of a duck wearing victorian style clothing Shrek by Picasso Ссылки на изображения Есть несколько вариантов, как использовать URL в промте: 1. Использование стиля изображения Если нужно использовать какое-либо изображение в качестве примера, то сначала укажите ссылку на него и только после этого добавьте текстовое описание. Пример: https://ссылка_на_изображение текст описания Исходное изображение Результат по запросу https://ссылка_на_изображение colorful collage, Coliseum 2. Объединение нескольких изображений Чтобы объединить несколько изображений, вставьте ссылки на них, разделенные пробелом или запятой: https://ссылка_на_изображение1, https://ссылка_на_изображение2 или https://ссылка_на_изображение1 https://ссылка_на_изображение2 Например, при объединении этих двух изображений: Получился такой котик на диване: Параметры Применяйте параметры в запросе, чтобы влиять на генерируемое изображение. Допускается использование несколько параметров одновременно. Важно правильно прописывать их, используя два дефиса и пробел перед числами, в противном случае параметры не сработают. Также не забывайте, что их нужно добавлять только в конец промта. Пример — промт «three-quarter close-up pose, young woman with curly brown hair and wearing a blue strapless dress, focus on the eyes» без параметров: Этот же промт, но уже с параметрами, отвечающими за стиль, соотношение сторон изображения и качество рендеринга: Самые часто используемые параметры: Пропорции. По умолчанию изображение генерируется в пропорции 1:1. Параметр в конце запроса --ar отвечает за соотношение сторон, оно может быть любым. Например, добавьте в конце промта --ar 2:3, чтобы получить вертикальную картинку или --ar 3:2, чтобы получить горизонтальную. Рекомендуем использовать только параметры 1:1, 16:9 и 9:16, 3:2 и 2:3, 2:1 и 1:2, 3:4 и 4:3. Также можно использовать кнопки пропорций при создании запроса: ​ Хаос. Параметр --chaos увеличивает процент абстракции в генерируемом изображении. Больший показатель поможет дать интересные и неожиданные результаты, но они могут значительно отличаться от вашего запроса. Диапазон — от 0 до 100. Запрет. Параметр --no указывает, что не должно присутствовать на изображении. Например, --no text отвечает за отсутствие текста в сгенерированном изображений. Следует помнить, что нейросеть не очень дружит с отрицаниями, поэтому это условие может не всегда срабатывать. Режим Niji. Параметр --niji позволяет генерировать изображения в аниме-стиле. Картинка по запросу «cat» без параметров и картинка с параметром --niji Seed. Параметр на данный момент не поддерживается. Если эта переменная есть в промте, она будет удалена при передаче запроса. Замощение. Параметр --tile позволяет создать изображения, которые можно использовать в качестве повторяющихся элементов для бесшовных узоров. Особенно он будет удобен для создания фона письма с повторяющимися элементами. Картинка без параметров и картинка с параметром --tile Перечисленного выше достаточно для создания эффектных изображений. Например, в запросе «Imagine a futuristic fashion shoot on Mars: beautiful woman, light gray simple and easy outfit, anamorphic lens, ultra-realistic, hyper-detailed portrait photography taken by Thierry Mugler. The image must be captured in ultra-high resolution. Use the enabled photorealism mode to create an ultra-realistic image 8k, --ar 2:3» подробно расписаны только условия и указаны пропорции, однако изображение получилось достаточно точным: ОБРАТИТЕ ВНИМАНИЕ! Функция генерации изображений работает только на платных тарифных планах.

Обновлено Jan 19, 2026

Как сгенерировать картинку с помощью ИИ в онлайн-редакторе DashaMail

Для того, чтобы сгенерировать изображение, перейдите в раздел "Шаблоны" и откройте хранилище контента: ​ В нем переходим на вкладку “Хочу картинку”: В открывшемся окне генерации изображения в строке ввода промта добавляем текст с описанием картинки: Бот понимает текст как на русском, так и на английском языке. Далее нажимаем на кнопку генерации и ждем, когда изображения будут сгенерированы: В среднем, это занимает около минуты (в зависимости от сложности запроса). По запросу генерируется четыре варианта изображения. Вы можете переключаться между ними, используя кнопки навигации (1) или полосу над изображениями (2): Пример с промтом на русском языке При нажатии кнопки “Использовать картинку” открывается предпросмотр выбранного изображения с возможностью сохранить его: Выбранные изображения сохраняются в хранилище в общей папке. В сутки доступно 25 генераций. ОБРАТИТЕ ВНИМАНИЕ! Функция генерации изображений работает только на платных тарифных планах.

Обновлено Jan 19, 2026

Как добавить кнопку в письмо?

В редакторе, необходимо перейти на вкладку "СТРОКИ"(1), выбрать нужную структуру строки и перенести ее в тело шаблона (2) ​ Затем перейдите на вкладку «СОДЕРЖИМОЕ» (3) и выберите кнопку (4), зажав блок, перетяните ее в нужную строку (5-6). Кнопка. Свойства. Чтобы перейти к редактированию кнопки на нее (1). В правом меню откроется возможность редактирования свойств блока (2) и свойств самой кнопки (3). Вы можете удалить(1) или дублировать блок(2), а также вернуться в меню выбора содержимого строки (3). ​ В поле действие вы можете выбрать тип ссылки, которую поместите в кнопку. Доступны варианты: Открыть ссылку, отправить письмо, позвонить, смс. В поле «Ширина» вы можете задать необходимую ширину кнопки, сдвигая ползунок (1) влево или вправо. Процентное соотношение выбранной ширины относительно оригинальной будет показано справа (2). При переключении слайдера (3) картинке подключится функция автоматической ширины. Данная настройка позволяет соответствовать по ширине размеру колонки. Поля 1-2 будут недоступны для изменения. Поле шрифт позволяет установить необходимый шрифт только для текста внутри выбранной кнопки. ​ В поле «Толщина шрифта» вы можете установить жирную или обычную толщину. Поля цвет текста и цвет кнопки позволяют задать цвет через отрывающуюся палитру цвета(открыть ее можно, нажав на цветной квадрат(1)) или окно для ввода кода RGB(2). ​ Поле выравнивание дает возможность выровнять заголовок по левому краю блока, центрировать его, привязать к правому краю блока или распределить текст по всему блоку. Поле «Межстр. интервал» дает возможность, выбрать интервал между строками текста. В поле «Межбуквенный интервал» вы можете задать расстояние между буквами. Поля «Отступы» и «Отступы содержимого» дают возможность задать внешние и внутренние отступы соответственно сразу для всех сторон (1), визуальное отображение можно увидеть на рядом расположенном изображении(2). Если переключить слайдер (3), представится возможность задать отступы для каждой из сторон блока индивидуально. Задать границу кнопки возможно с помощью поле "Граница". К редактированию доступны вид линии ( сплошная, точками, пунктирная)(1), толщина линии(2) и ее цвет(3). Переключив слайдер(4), вы можете задать перечисленные настройки для каждой стороны кнопки отдельно. Вы можете настроить видимость элемента на мобильной и десктопной версии. Для скрытия блока нажмите на кнопку с соответствующим изображением. Если кнопка окрашена в серый цвет (как на скриншоте), значит скрытие блока отключено. ​ С помощью интерактивной функции «Hover Effects» можно добавлять эффекты наведения курсора, которые изменяют цвет, шрифт или стиль рамки кнопок в онлайн-редакторах писем и лендингов, делая CTA (призывы к действию) более визуально привлекательными и интересными. Функция доступна в качестве свойства у кнопок: Обратите внимание, что некоторые почтовые клиенты не поддерживают эффект наведения курсора. Для получения дополнительной информации ознакомьтесь с следующим списком: https://www.caniemail.com/features/css-pseudo-class-hover/.

Обновлено Jan 19, 2026

Строки, свойства

Чтобы перейти к редактированию конкретной строки, нажмите на строку. В меню справа откроется блок со свойствами выбранной строки: ​ Разберем основные составляющие. Любую строку можно удалить(1), продублировать (2), а также из редактирования строки вы можете вернуться к меню добавления строк (3). Фоны Для каждой строки вы можете: - задать цвет фона строки; - задать цвет контента строки ​ - задать фоновое изображение строки. Переведите слайдер фонового изображения во включенное состояние (1). Выберете нужное изображение из хранилища (2). После загрузки изображения вы можете внести изменения для него. Нажав на кнопку «Графические эффекты», вы попадете в редактор изображения. Кнопка «Изменить картинку» перенесет вас в хранилище изображений, позволив выбрать новое изображение. Настройки ниже поля URL (3) помогут выбрать положение и отображение картинки относительно строки. Если переключить слайдер «Вписать в фон», картинка будет растянута по всей области строки. Если включить свойство «Повторять», картинка будет повторяться. Свойство будет работать при условии, что картинка меньше области строки: Внимание! Фоновые изображения совместимы не со всеми почтовыми клиентами. Бордеры Для каждой строки можно задать стиль для границы области содержимого. Нажав на выпадающее меню (1), вы можете выбрать стиль для линии границы. Параметр (2) позволяет задать толщину линии. Кнопка (3) позволяет задать цвет линии: ​ Переключение слайдера «Подробнее» дает возможность задать стиль линии для каждой стороны отдельно: ​ Настройка скругления углов области содержимого дает возможность задать скругления углов строки: Переключив слайдер «Больше свойств», вы можете задать разные скругления для углов строки: Установить положение колонок внутри строки на мобильном вы можете с помощью ориентации: Отключить отображение строки на мобильном устройстве или ПК вы можете в свойстве «Скрыть» В параметре «Структура колонок» можно добавить колонку в строку (1), а также изменить ширину колонки, поместив курсор мыши между колонками, которые нужно изменить (2). Высота колонки регулируется автоматически в зависимости от контента: Для каждой колонки вы можете задать отдельный стиль линии границы:

Обновлено Jan 19, 2026

Основные настройки письма

Рассмотрим подробнее доступный набор функций на вкладке "НАСТРОЙКИ": Ширина письма Чтобы изменить ширину письма, вам необходимо перейти на вкладку "НАСТРОЙКИ" в правом меню шаблона и передвинуть ползунок в необходимую сторону (1). Установленное значение будет отображено справа (2): Выравнивание контента Переключая кнопки «Слева» и «Центр», вы можете менять расположение тела письма: Цвет фона Чтобы задать цвет фона всего письма, нажмите на квадрат с цветом в поле «Цвет фона» (1) или выделите текст рядом и впишите цвет кодом (2): Цвет фона области содержимого Поле «Цвет фона области содержимого» позволяет задать фон только для контента. Изменить его можно аналогично изменению цвета фона. Через цветной квадрат, который вызовет палитру с цветом, (1) или цветовой код (2): Фоновая картинка При переводе слайдера фоновой картинки во включенное состояние (1) вы сможете загрузить на фон любое изображение с помощью кнопки «Choose image»: ​ Шрифт по умолчанию Чтобы задать шрифт, который будет по умолчанию во всех элементах при добавлении в письмо, необходимо нажать на выпадающее меню в соответствующем поле: Чтобы задать цвет ссылок, который будет по умолчанию, выберите цвет через окно выбора цвета (1) или задайте его кодом (2):

Обновлено Jan 19, 2026

Начало работы в редакторе писем

1 - Название редактируемой рассылки. 2 – Кнопка, для возвращения в личный кабинет. 3 – Панель мобильной и десктопной версии письма . 4 - Верхняя панель навигации. 5 – Панель настройки редактирования дизайна и выбора содержимого письма 6 - Кнопка для скрытия поля настроек редактирования письма. 7 - Нижняя панель навигации 8- Кнопка вызова чата поддержки. 9 – Поле редактирования макета. Рассмотрим подробнее панели навигации. Панель просмотра версии письма Кнопка 1 - отвечает за макет письма на десктопе, синий цвет кнопки, означает включенное состояние кнопки. Кнопка 2 - отвечает за макет письма на мобильной версии. Кнопка 3 - появляется, если в макете есть скрытые элементы, скрытые элементы можно выключить. На скриншоте выше представлена включенный макет письма на десктопной версии с включенным отображением скрытых блоков. На скриншоте ниже представлена мобильное отображение письма, с выключенными скрытыми блоками. Верхняя панель навигации Кнопка 1 – Предпросмотра письма Предпросмотр письма, позволяет увидеть и оценить, как ваше письмо будет выглядеть у получателей на мобильной и десктопной версии. Чтобы вернуться в окно редактирования шаблона, нажмите на крестик в правом верхнем углу. Кнопка 2 – Перенесет вас в новое окно со встроенной функцией ГлавРед, о которой можно подробно почитать в блоге: Ваш собственный Главный Редактор Кнопка 3 – Провидица. Запустит тестирование функционалом, который позволит вам посмотреть, как выглядит ваша рассылка в популярных email-клиентах и сервиса. Подробнее об это функционале, вы можете прочитать в статье «Провидица» . ​ Кнопка 4 – Прехедер. При нажатии на эту кнопку, откроется окно, в котором вы можете ввести значение для анонса письма, заменить прежний анонс или удалить его. После внесения изменений нажмите на кнопку «Ок». Кнопка «Cancel» закроет окно прехедера, не сохранив изменения. Панель настройки редактирования дизайна и выбора содержимого письма В данной панели представлена вкладка "Настройки", в которой вы можете задать основные настройки для всего письма. Подробнее про данную вкладку: Настройки. (ссылка) Вкладка "Строки" - строки являются фундаментом письма, и помогают составить его структуру. На представленной вкладке вы можете выбрать необходимые комбинации строк и колонок в них. Подробнее про строки: Строки, структура письма, Строки, свойства. Вкладка "Содержимое" представляет собой все возможные блоки, из которых вы можете собрать контент письма. Подробнее о каждом блоке: Заголовок, Параграф, Список, Картинка, Кнопка, Делитель, Спейсер, Соцсети, HTML, Видео, Иконки, Меню, Текст. Нижняя панель навигации Кнопка 1 - возвращает вас на рабочий стол личного кабинета. Кнопка 2 - вернет вас к меню выбора типа макета. Кнопка 3 - сохранит шаблон и вернет вас в то меню, в котором вы начали создавать шаблон.

Обновлено Jan 19, 2026

Текст, настройки

Рассмотрим все настройки блока "Текст". Вы можете удалить или продублировать блок, а также вернуться в меню выбора другого блока. ​ Поля цвет текста и цвет ссылок позволяют задать цвет через отрывающуюся палитру цвета(открыть ее можно, нажав на цветной квадрат(1)) или окно для ввода кода RGB(2). Поле выравнивание дает возможность выровнять текст по левому краю блока, центрировать его, привязать к правому краю блока или распределить текст по всему блоку. Поле «Межстр. интервал» дает возможность, выбрать интервал между строками текста. В поле «Межбуквенный интервал» вы можете задать расстояние между буквами. Поле «Отступы» дает возможность задать отступы внутри блока сразу для всех сторон (1), визуальное отображение можно увидеть на рядом расположенном изображении(2). Если переключить слайдер (3), представится возможность задать отступы для каждой из сторон блока индивидуально. Поле «Скрыть» позволяет выключить блок на мобильной или десктопной версии письма. На скриншоте отображено состояние кнопок при включенном блоке на десктопной версии и выключенном на мобильной версии письма. Также вы можете отредактировать текст через панель настроек текста. Для этого нажмите на текст, который необходимо изменить. О том как добавить блок в письмо, вы можете прочитать в статье : "Виды текстовых блоков, как добавить и отредактировать".

Обновлено Jan 19, 2026

Темная тема в почтовых клиентах

С появлением темной темы пользователи получили больше возможностей настроить рабочую среду по своему вкусу. Однако, для email-маркетинга это принесло некоторые сложности в процессе создания рассылок, которые должны корректно отображаться как в светлом, так и в темном режиме. В данной статье мы разберемся в основных моментах, которые помогут сделать письма легко читаемыми и привлекательными для получателей, независимо от выбранной темы в почтовом приложении. ​ Как работает темная тема Стандартно темная тема в почтовых клиентах изменяет цветовую палитру и общий стиль интерфейса, включая в себя изменение цветов фона, текста, ссылок и прочих элементов. Она придает письмам более темный и контрастный вид, что удобно для чтения ночью или в условиях низкой освещенности. Разные почтовые клиенты могут иметь различные подходы к отображению цветов темной темы: - никак не изменяют письмо при включенной темной теме; В стандартном почтовом клиенте для iOS тема меняется только для приложения. Цветовая схема письма остается без изменений. - частично инвертируют цвета. Это касается только светлых элементов, темные или черные блоки не изменяются; - применяют более сложные алгоритмы для адаптации всех элементов письма под темный режим, что обеспечивает наилучшее отображение. Пример различий отображения одного и того же письма в Gmail и Яндекс Почте при использовании темной темы Эти особенности темного режима следует учитывать при выборе цветовых схем для вашего шаблона. Dark mode в различных почтовых клиентах. Темный режим, как и многие другие функции, не имеет единой поддержки в различных почтовых клиентах. Некоторые почтовые провайдеры позволяют самостоятельно настроить дизайн под устройства с включенной темной темой, в то время как другие принимают решения за вас, что может привести к нежелательным последствиям. Важно отметить, что поддержка темной темы может варьироваться в зависимости от конкретного почтового клиента и его версии. Вот некоторые из наиболее популярных почтовых клиентов, которые на данный момент поддерживают темную тему: Почтовый Клиент Инвертирование цветов в темном режиме Поддержка медиазапросов Gmail (веб-версия) нет нет Gmail (iOS) да да Gmail (Android) да нет Яндекс Почта (веб-версия) нет нет Яндекс Почта (iOS) да нет Яндекс Почта (Android) да нет Mail.ru (веб-версия) да да Mail.ru (iOS) да нет Mail.ru (Android) да нет MS Outlook 2019, 2021 (веб-версия) да нет MS Outlook (iOS) да да MS Outlook (Android) да нет Apple Mail нет да Thunderbird да да Samsung Email (Android) да да Это лишь некоторые из популярных почтовых приложений, которые на данный момент поддерживают темную тему. Однако, этот список и функционал постоянно растет, поэтому рекомендуем проверять актуальную информацию у разработчиков или в официальной документации конкретного почтового клиента. Советы для корректного отображения писем в темной теме. - Цветовые схемы и палитры. В темном режиме изменяются цвета элементов в письме, фон может стать более темным, а цвет текста — светлее или контрастнее. Поэтому, неплохим вариантом будет протестировать отображение писем в темном режиме и составить таблицу с цветами, которые обычно используете при создании шаблонов, и как эти цвета инвертируются. В дальнейшем это значительно упростит процесс создания рассылок и поможет обеспечить хорошую читаемость и сохранить дизайн письма. ​ Отличный пример цветовых схем. Источник: emailmatrix.ru ​ - Работа с изображениями. Элементы, сверстанные картинкой: логотипы, кнопки и пр., рекомендуем загружать с прозрачным фоном в формате png и использовать контрастную обводку или тень, чтобы они легко читались как в светлом, так и в темном режиме. С обводкой (справа) лого без проблем читается и в светлой, и в темной теме - Размер текста. Важно учитывать, что чем мельче текст, тем проще пользователю читать его в светлой теме. Поэтому, если в письме есть крупные текстовые блоки, рекомендуем протестировать отображение в темном, и в светлом оформлении и при необходимости увеличить шрифт, чтобы письмо было легко читаемым. ​ - Медиазапросы. Если есть возможность редактировать HTML-код шаблона рассылки, то можно использовать медиазапросы, которые позволяют применять стили только для определённых устройств. Например: Применение стилей для темной темы: @media (prefers-color-scheme: dark) {<br></br> /* Здесь можно указать стили, которые будут применяться только в темной теме */<br></br> body {<br></br> background-color: #333333;<br></br> color: #ffffff;<br></br> }<br></br> <br></br> /* Дополнительные стили для элементов в темной теме */<br></br> .section {<br></br> background-color: #222222;<br></br> border: 1px solid #555555;<br></br> }<br></br>}<br></br> В этом примере мы используем медиазапрос prefers-color-scheme: dark, чтобы применить определенные стили только в темной теме. В данном случае, мы меняем фоновый цвет и цвет текста для всего документа, а также добавляем дополнительные стили для элемента с классом .section. Инвертирование цветов для темной темы: @media (prefers-color-scheme: dark) {<br></br> /* Инвертируем цвета элементов */<br></br> body {<br></br> filter: invert(100%);<br></br> }<br></br> <br></br> /* Исправляем инвертированный цвет для конкретного элемента */<br></br> .logo {<br></br> filter: invert(0%);<br></br> }<br></br>}<br></br> В этом примере мы используем фильтр invert() для инвертирования цветов всего документа в темной теме. Однако, инверсия цветов может привести к проблемам с читаемостью, поэтому мы также исправляем инвертированный цвет для конкретного элемента с классом .logo. Подсветка ссылок при наведении для темной темы: @media (prefers-color-scheme: dark) {<br></br> /* Изменяем цвета ссылок */<br></br> a {<br></br> color: #ff9900;<br></br> }<br></br> <br></br> /* Изменяем цвета ссылок при наведении */<br></br> a:hover {<br></br> color: #ffa500;<br></br> }<br></br>}<br></br> В этом примере мы изменяем цвет ссылок в темной теме, чтобы они отличались от остального текста. Мы также изменяем цвет ссылок при наведении курсора, чтобы создать контрастный эффект. Это лишь некоторые примеры медиазапросов, которые можно использовать для адаптации HTML-шаблонов под темную тему. Вы можете настроить стили и свойства в соответствии со своими потребностями и дизайном. - Тестирование. Самый обязательный пункт :) Проверьте, как ваша рассылка отображается в разных почтовых клиентах, браузерах и устройствах с включенной темной темой. Это позволит обнаружить потенциальные проблемы с отображением рассылки и внести необходимые корректировки. Поддержка темного режима в почтовых клиентах играет важную роль в создании красивых и функциональных писем, поэтому необходимо учитывать перечисленные выше ключевые моменты для обеспечения корректного отображения писем. С учетом данных рекомендаций, вы сможете обеспечить качественное отображение и сохранить стиль и уникальность ваших рассылок, которые будут легко читаемы и привлекательны для получателей вне зависимости от выбранной ими темы. ​

Обновлено Jan 19, 2026

Отображение писем в Outlook

Outlook является одним из самых популярных почтовых клиентов, используемых как в бизнесе, так и в повседневной жизни. Однако, несмотря на его удобство, могут возникнуть проблемы с отображением писем, созданных в онлайн-редакторах или сверстанных в HTML. Рассмотрим самые распространенные из них. Изображения Одно из самых распространенных ограничений в Outlook - проблемы с изображениями. Изображения в рассылке: Если изображение загружается со сторонних сайтов, а не непосредственно в письмо, Outlook может заблокировать его. Это приведет к тому, что получатели не увидят важные элементы рассылки. Решение: - Лучшим решением этой проблемы является загрузка изображений непосредственно в письмо. Дополнительно необходимо убедиться, что изображения имеют правильный формат и размер, а также что они не блокируются каким-либо программным обеспечением (например, антивирусом). - Используйте альтернативный текст, пользователь должен иметь возможность понимать содержание изображения, даже если оно заблокировано. Без альтернативного текста С альтернативным тестом Фоновые изображения: Outlook отображает фон, установленный для всего письмо, но с отображением фона у отдельных элементов могут возникнуть сложности, что сильно влияет на дизайн и читабельность письма. Отображение макета в редакторе Отображение письма в Outlook Решение: - Для отдельных элементов лучшим решением будет не использовать фоновое изображение, а сам элемент заменить на картинку. Например, вместо того, чтобы использовать фон для блока с заголовком вашей рассылки, замените этот блок на картинку с текстом. Таким образом, он будет отображаться корректно в большинстве почтовых клиентов, включая Outlook. Отображение в Outlook баннера Отображение в Outlook баннера баннера картинкой с нерабочим фоном - Если необходимо использовать фоновые изображения, созданные с помощью CSS, можно использовать таблицы и inline-стили, чтобы обеспечить их правильное отображение в Outlook. - Корректное отображение background-image в Outlook невозможно без языка разметки векторов (VML). Для создания такого фона можно воспользоваться сервисом backgrounds.cm. Обратите внимание, что если в письме уже есть объект VML, то созданный таким способом фон не будет функционировать. Нужно удалить установленный первым объект. Шрифты Outlook может заменять пользовательские шрифты в письмах на стандартные, что значительно скажется на дизайне и читабельности письма. Решение: Используйте системные шрифты, такие как Arial, Verdana или Times New Roman, чтобы быть уверенными, что рассылка корректно отобразится в Outlook. Кнопки Кнопки часто отображаются в Outlook как простой текст без стилей, что может повлиять на эффективность письма и вызвать путаницу у получателя рассылки. Также можно столкнуться с некорректным отображением скругленных кнопок. Отображение в редакторе Отображение в Outlook Решение: - Вместо кнопки попробуйте использовать картинку с кнопкой. Такой элемент будет отображаться корректно в большинстве почтовых клиентов, включая Outlook. - Используйте ссылки вместо кнопок, если это возможно. - Для избежания проблем с отображением скругленных кнопок аналогично используйте изображение в виде скругленной кнопки. Также можно отдельно сверстать и добавить кнопку html-кодом, используя такой инструмент как MJML , табличный метод или VML (XML-язык для создания векторной графики, который может быть использован в Outlook для отображения скругленных элементов). Например, чтобы создать скругленную кнопку, нужно создать таблицу с одной ячейкой и установить в качестве фона изображение с закругленными углами: <table cellpadding="0" cellspacing="0"><br></br> <tr><br></br> <td background="https://example.com/images/rounded-button-bg.jpg" width="100" height="40" align="center" valign="middle"><br></br> <a href="#" style="color:#fff; text-decoration:none; font-size:16px;">Кнопка</a><br></br> </td><br></br> </tr><br></br></table> Чтобы создать прямоугольник с закругленными углами, нужно использовать следующий код: <!--[if gte mso 9]><br></br> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" arcsize="10%" stroke="false" fillcolor="#CCCCCC"><br></br> <v:textbox style="mso-fit-shape-to-text:true" inset="0px,5px,0px,5px"><br></br> <center><br></br> <![endif]--><br></br> <a href="#" style="background-color:#CCCCCC; border-radius:10px; color:#ffffff; display:inline-block; font-family:sans-serif; font-size:16px; line-height:44px; text-align:center; text-decoration:none; width:200px; -webkit-text-size-adjust:none;">Кнопка</a><br></br> <!--[if gte mso 9]><br></br> </center><br></br> </v:textbox><br></br> </v:roundrect><br></br><![endif]--> Этот код создаст кнопку с закругленными углами радиусом 10%, которая будет отображаться в Outlook. Важно помнить, что использование табличного метода и VML может занимать больше времени и усилий, чем использование готовых решений. Однако, если критически важно использовать такие элементы, как кнопки с скруглением, это будет наилучшим вариантом. Таблицы Outlook может неправильно отображать таблицы, особенно если они содержат сложные стили, объединенные ячейки или множество строк и столбцов разных размеров. Это может привести к нарушению структуры и дизайна всего письма. Решение: - Самый простой вариант - добавить таблицу как изображение. - Для обеспечения правильного отображения таблиц в Outlook, рекомендуется использовать наиболее простые стили и избегать объединенных ячеек. Проблемы с отображением могут быть связаны и с попаданием рассылок в нежелательную почту и, как следствие, блокировкой части контента письма. Поэтому, рекомендуем настроить домен и использовать обратный адрес на корпоративном домене. В самих письмах обязательно нужно разбавлять изображения текстовыми блоками. В целом, при создании писем для Outlook необходимо учитывать возможные проблемы с отображением и использовать подходящие методы для их решения. Также рекомендуется тестировать письма в разных почтовых клиентах, включая Outlook, и на кроссбраузерность, чтобы убедиться в их правильном отображении. Кроме того, для обеспечения правильного отображения писем в Outlook и других почтовых клиентах рекомендуется использовать тестирование на разных устройствах, а также проверять письма на соответствие стандартам HTML и CSS.

Обновлено Jan 19, 2026

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

Не секрет, что хороший текст дополняет дизайн письма и побуждает клиентов совершить покупку или прочитать важную информацию. Текст должен быть эмоциональным. “Упаковав” его в шрифт, который наилучшим образом соответствует ситуации и дизайну рассылки, вы сделаете его заметным, эффектным и привлекательным. И часто бывает так, что веб-безопасных шрифтов недостаточно. DashaMail позволяет добавить абсолютно любой шрифт, который вам нравится. Нет никаких ограничений на количество добавляемых пользовательских шрифтов. После установки новых шрифтов вы можете применять их ко всем текстам в своих рассылках, созданных в онлайн-редакторе. ВНИМАНИЕ! Мы настоятельно рекомендуем предварительно тестировать отображение ваших писем в различных комбинациях почтовиков, девайсов и ОС, т.к. не все стили шрифтов могут поддерживаться у получателей. Как загрузить свой шрифт? Для импорта шрифтов необходимо зайти в настройки своего аккаунта ("Мой аккаунт" - "Настройки"): Загрузка новых шрифтов доступна двумя способами: 1. Загрузить из Google Fonts: Чтобы скопировать URL шрифта: - Нажмите Get font на странице с нужным шрифтом: - Нажмите Get embed code: - Скопируйте ссылку из третьей строки: 2. Загрузить готовый .woff-файл: ВНИМАНИЕ! При загрузке собственного woff-файла вы принимаете на себя все обязательства по лицензированию данного шрифта. Использование коммерческих шрифтов без лицензии – преступление. Будьте внимательны и обязательно проверьте все права на загружаемый шрифт. В разделе "Настройки пользовательских шрифтов" в таблице будет отображаться список доступных в онлайн-редакторе дополнительных шрифтов: В самом онлайн-редакторе при форматировании текста список доступных пользовательских шрифтов выглядит так: О том, как редактировать и форматировать текст в конструкторе писем можно почитать в нашей базе знаний.

Обновлено Jan 19, 2026