Главная / Сервисы / Maliver / Работа с HTML-редактором / Вставка изображения в письмо

Вставка изображения в письмо

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

Обратите внимание!

  • Вставить иллюстрацию можно только в html шаблонах. В простом текстовом письме вставка изображений недоступна.

Шаг 1

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

phpuonm7e

 

Шаг 2

Откроется окно свойств изображения, в котором Вы сможете:

  • Указать ссылку на необходимую иллюстрацию или выбрать ее из "Галереи изображений";

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

  • Задать ширину и высоту изображения (как в режиме сохранения пропорций, так и без него);

  • Задать толщину границы изображения;

  • Задать отступы (вертикальный и горизонтальный);

  • Выровнять текст относительно изображения;

  • Закрепить за изображением ссылку на какую-либо страницу.

phpwTkmQZ

Рассмотрим каждую из доступных настроек более подробно.

 

Шаг 2.1. Добавление изображения

Укажите ссылку на изображение в соответствующем поле.

 php22KaLk

Или нажмите "Выбрать" и в открывшемся окне "Галереи изображений" нажмите на нужную иллюстрацию (если в галерее нет ни одного изображения, сперва загрузите его с помощью кнопки "Добавить изображение", а затем нажмите на загруженную картинку).

phpg2Mswj

 

Шаг 2.2. Альтернативный текст

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

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

phpvaGhmt

 

Шаг 2.3. Ширина и высота изображения

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

phpUx7b2J

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

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

phplIXWwp

  • При закрытом "замке" - пропорции сохраняются;

  • При открытом "замке" - пропорции не сохраняются и Вы можете указывать различные значения "Ширины" и "Высоты", тем самым растягивая и сжимая изображение до любых разрешений (1х1000, 250х100 и пр.).

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

phpH7mY9r

Обратите внимание!

  • Все изменения отображаются в окне предпросмотра.

Шаг 2.4. Граница

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

 phpEG9FJk

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

 

Шаг 2.5. Отступы

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

phpzY0Brp

  • Горизонтальный отступ - определяет отклонение изображения от правого и левого краев письма;

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

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

 

Шаг 2.6. Выравнивание

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

php7fpjIO

  • По левому краю - изображение будет расположено у левого края письма, текст будет обтекать его по правому краю;

  • По правому краю - изображение будет расположено у правого края письма, а текст будет обтекать его по левому краю.

Шаг 2.7. Ссылка

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

Для этого сперва перейдите к вкладке "Ссылка".

php7wSEmF

И укажите адрес нужной страницы в поле "Ссылка" (это может быть ссылка на Ваш официальный сайт, подробную информацию о чем-либо и пр.).

Адрес должен быть указан в виде "http://адрес_сайта.домен"

phpCw17dV

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

phpbSlMFn

 

Шаг 2.8. Цель

 

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

phpDPkqud

 

Шаг 3

После внесения всех изменений нажмите "Ок".

phpRdAQUt

 

 

Шаг 4

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

 phpdvMEwI

 

В приведенном примере:

  • Изменена ширина и высота изображения (изображение сжато до удобных и приемлимых для письма размеров);

  • Граница = 10 (синяя рамка вокруг изображения);

  • Горизонтальный отступ = 10 (небольшой отступ слева от края письма и справа от текста);

  • Вертикальный отступ =10 (небольшие отступы сверху и снизу от картинки);

  • Выравнивание по левому краю;

  • В качестве ссылки указан сайт http://megagroup.ru (при клике по картинке он открывается в новой вкладке).

 

Была ли статья вам полезна?
Укажите, пожалуйста, почему?
Комментарий