Робота з блоком Зображення

Використання зображень у маркетингових повідомленнях підсилює їхню ефективність, робить листи привабливішими, інформативнішими та емоційно насиченими. Нижче описано, як працювати з блоком Зображення в email-редакторі eSputnik.

Завантаження зображення

  1. Натисніть на блок у контейнері, щоб відкрити Галерею зображень.
Натисніть на блок у контейнері щоб відкрити

Галерея містить такі вкладки:

  • Підготовлені — готові картинки з комп'ютера, з буфера обміну або URL-адреси.
  • Загальні — зображення, що вже збережені в бібліотеці акаунта.
  • AI-зображення — генерація зображень за текстовим описом безпосередньо у редакторі;
  • Фотосток — вибір зображень із фотобанків.
  • Іконки — набір піктограм.
  • Гіфки — анімовані зображення (GIF).

Зображення додаються по одному: завантажити архів із файлами не можна, і система не формує списку посилань на завантажені файли.

  1. Виберіть спосіб завантаження зображення.
Виберіть спосіб завантаження зображення

Завантаження з ПК

На вкладці Підготовлені натисніть іконку Додати зображення та виберіть потрібний файл на вашому комп’ютері. Система підтримує формати PNG, JPG і GIF. Розмір не має перевищувати 3 МБ або 4000 пікселів завширшки.

Формату WebP серед них немає: зображення в ньому не додається ні завантаженням, ні за посиланням. Спершу конвертуйте його в PNG або JPG. Те саме стосується WebP-зображень із товарного фіда: у Gmail прозорі ділянки WebP малюються чорною заливкою, яким би не було тло під зображенням.

На вкладці Підготовлені натисніть іконку Додати зображення

Посилання на зовнішній ресурс

  1. Натисніть Вставте URL.
Натисніть Вставте URL
  1. Введіть у поле URL-адресу.
Введіть у поле URL-адресу
👍

Порада

Зображення, додані за URL, залежать від зовнішнього ресурсу. Якщо файл буде видалено або змінено, зображення не відобразиться в листі. Щоб уникнути цього, збережіть його в галереї.

Зображення додані за URL залежать від зовнішнього
🚧

Важливо

Не вставляйте зображення як рядок base64 в атрибуті src — це стосується й згенерованих зображень, наприклад, QR-кодів. Такі зображення не відображаються в Gmail, Yahoo та ukr.net. Завантажте зображення в галерею або розмістіть його на зовнішньому ресурсі й вставте посилання.

Банк зображень

До банку зображень належать картинки що знаходяться у вкладках:

  • Фотосток
  • Іконки
  • Гіфки

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

Перейдіть на потрібну вкладку та виберіть зображення

AI-зображення

Інструмент, який дозволяє створювати унікальні ілюстрації за текстовим описом без завантаження файлів із комп’ютера.

  1. Введіть детальний текстовий запит, що саме потрібно згенерувати.

  2. Оберіть AI-модель.

  3. За потреби вкажіть стиль зображення.

  4. Оберіть формат сторін (наприклад, 1:1).

  5. Натисніть Генерувати.

Натисніть Генерувати
  1. Оберіть результат, який підходить, і вставте його в лист. За потреби перегенеруйте зображення.
Вибір згенерованого варіанта AI-зображення для вставлення в лист

Параметри зображення

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

  1. Альтернативний текст — показується, якщо зображення не завантажилось.

  2. Посилання — відкриває сайт, email, файл, телефон чи інший ресурс.

  3. Розмір для десктопу — ширина та висота у пікселях.

Розмір для десктопу — ширина та висота
  1. Вирівнювання — ліворуч, по центру або праворуч.
  2. Радіус — округлення кутів.
  3. Ефект Rollover — друге зображення при наведенні.
  4. Приховати елемент — вимикає показ у десктопній або мобільній версії.
  5. Зовнішні відступи — відстань між зображенням та іншими елементами.
  6. Показувати — контроль видимості в HTML і AMP.
  7. Анкорне посилання — перехід до визначеного місця в цьому ж листі.
  8. Тип події — використовується для автоматизації. Наприклад, можна вказати подію, яка спрацьовуватиме після натискання зображення, щоб запустити подальші автоматичні дії.
Тип події — використовується для автоматизації Наприклад

Дії з зображенням

У верхній частині вкладки з параметрами доступні такі дії для керування зображенням:

  1. Заміна — відкрити галерею та вибрати інше зображення або завантажити нове.
Кнопка Заміна для вибору іншого зображення
  1. Редагування — перехід до вбудованого редактора.
Кнопка Редагування для переходу до вбудованого редактора зображень

Інструменти редагування поділяються на такі умовні групи:

  • Зміна вигляду: фільтри (ч/б, сепія, контраст тощо), зміна розміру, обрізка, трансформація (обертання, віддзеркалення).
Інструменти зміни вигляду зображення: фільтри, розмір, обрізка, трансформація
  • Додавання елементів: малювання, текст, фігури, стікери, рамки.
Інструменти додавання елементів: малювання, текст, фігури, стікери, рамки
  • Оформлення: закруглення кутів, зміна/додавання фону, об’єднання кількох зображень.
Інструменти оформлення: закруглення кутів, фон та об'єднання зображень

Після змін натисніть Застосувати → Зберегти.

📘

Примітка

Якщо додати текст за допомогою вбудованого редактора зображень, він назавжди «зливається» із картинкою. Якщо ви хочете, щоб текст залишався редагованим, поєднайте зображення з текстом іншим способом: скористайтеся блоком Банер, який дозволяє накладати редагований текст на завантажене зображення, або встановіть зображення як фон структури (вкладка Стилі смуги/структури → Фонове зображення) і розмістіть звичайний блок Текст поверх нього.

  1. Видалення — повністю прибрати зображення з блоку.
Кнопка Видалення зображення з блока
  1. Видалення/копіювання прямого посилання на файл зображення.
Копіювання прямого посилання на файл зображення

Did this page help you?