Настраиваем текст при ошибках загрузки изображений

Задумывались ли вы о том, что происходит, когда картинка на вашем сайте не отображается? В этой статье мы расскажем, как правильно настроить атрибут alt и превратить проблему в преимущество!

Добавить alt-текст к изображению в email-письме очень просто!

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

Там вы найдете раздел «Альтернативный текст». Кликните по нему, и появится поле для ввода описания и введите текст.

Готово!

Стилизация alt-текста.

Шаг 1: Переходим в редактор кода

•   Первым делом, нужно получить доступ к редактору кода редактора. Это можно сделать, нажав на кнопку  «</>» на верхней панели.

•   Найдите в коде  тег <img> для изображения, для которого вы хотите добавить alt-текст. (Если кликнуть на картинку в рабочей области редактора, то код автоматически покажет где находится нужный тег)

Шаг 2: Добавляем стили для альтернативного текста

•   Оберните тег <img> в тег <div> со стилями для текста.

В итоге у вас должен получится вот такой код:

<div style="font-family: Helvetica, Roboto, Arial, sans-serif; font-size: 16px; line-height: 21px; color: #5a5a5a;">
  <img src="URL_ВАШЕГО_ИЗОБРАЖЕНИЯ" alt="Описание изображения">
</div>

Шаг 3: Разберем параметры, заданные для <div>:

•   Настройте параметры в теге <div> в соответствии с вашим дизайном.

font-family: Определяет шрифт, используемый для текста.

font-size: Определяет размер текста в пикселях.

line-height: Определяет высоту строки (расстояние между базовыми линиями строк текста) в пикселях.

color: Определяет цвет текста.

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