К основному содержимому
Все коллекцииЛендинги
Как добавить картинку на лендинг?
Как добавить картинку на лендинг?

Инструкция по настройке изображения в макете лендинга

Евгений avatar
Автор: Евгений
Обновлено более 4 мес. назад

Чтобы добавить картинку на лендинг, выберете соответствующий блок во вкладке Содержимое и перенесите его в нужную строку:


Загрузить изображение можно через хранилище файлов, для этого нажмите на кнопку Обзор (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) помогает представить заданные отступы в блоке:


Поле Скрыть позволяет выключить блок на мобильной или десктопной версии лендинга. На скриншоте отображено состояние кнопок при скрытом блоке на десктопной версии и включенном на мобильной версии лендинга:

Нашли ответ на свой вопрос?