Картинка

Элемент Картинка (Image) используется для добавления, редактирования и стилизации изображений.

Картинка отличается от фонового изображения тем, что фоновое изображение размещается на другом элементе, например, на Секции или Div-блоке, а картинка сама по себе является элементом.

Как добавить Картинку на страницу

Добавьте элемент Картинка на Холст — перетащите его из панели Элементов (Elements) или просто кликните на его названии.

Загрузите изображение — дважды кликните на элементе Картина на Холсте — в левой панели откроется вкладка Ресурсы, где вы можете выбрать одно из уже загруженных изображений или загрузить новое.

Вы можете загрузить изображения в форматах jpg, png, tiff, tif, bmp, svg, gif, webp. Максимальный размер загружаемого изображения — 64 мегабайта.

Подробнее о загрузке изображений —

Настройки Картинки

Настройки Картинки на вкладке Настройки (Settings) правой панели включают:

Общие настройки (General)

Предварительный просмотр изображения

Адрес файла со ссылкой на изображение

Данные о размере изображения (ширина и высота в пикселях и размер в килобайтах)

Кнопка Заменить изображение (Replace image) , которая открывает вкладку Ресурсы

Публикуемый размер (Incoming size)

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

По умолчанию ширина составляет 640px, высота — 480px. Вы можете изменить размер изображения, а также включить зависимость ширины от высоты, установив один из этих параметров (при этом другой автоматически под него подстроится).

Дополнительные стили (Extra styles)

Параметр Заполнение (Object fit) определяет, как элемент Картинка реагирует на высоту и ширину загруженного изображения:

Вмещать (Contain) — масштабирует изображение так, чтобы оно полностью отображалось внутри элемента Картинка. Это значение также переопределяет любую заданную ширину и высоту.

Покрывать (Cover) — масштабирует изображение, чтобы заполнить весь элемент, переопределяя любую заданную ширину и высоту. Изображение может быть обрезано в зависимости от соотношения сторон элемента Картинка, размера экрана и изображения.

Исходный размер (Original) — определяет исходную ширину и высоту изображения.

Полноэкранный просмотр изображения и галерея: опция «Открывать в режиме просмотра»

Опция позволяет настроить для Картинки полноэкранный просмотр по клику, а также объединять изображения в галерею с возможностью перелистывания.

По умолчанию опция отключена. После включения изображение становится кликабельным — при нажатии оно открывается в полноэкранном режиме в попапе.

Как создать галерею изображений

Чтобы объединить несколько изображений в галерею, добавьте их в один из списковых виджетов: List, Block List, Slider, Tabs, Accordion или Collection.

Дальше логика зависит от структуры виджета:

В виджетах с зависимой структурой достаточно включить режим просмотра у одного изображения — он автоматически применится ко всем. В галерее будут отображаться все изображения внутри этого виджета.

В виджетах с независимой структурой вы можете сами выбрать, какие изображения попадут в галерею. Для этого включите опцию «Листать с другими изображениями» только у нужных элементов — в галерее будут отображаться именно они.

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

Настройки SEO

Вы можете установить для изображения атрибут Alt и заголовок Title, которые имеют важное значение для seo-оптимизации сайта, помогая поисковым системам определить, о чем идет речь в изображении.

Альтернативный текст (Alt) предназначен для альтернативного текста, который появляется, когда по какой-либо причине изображение не загружается на страницу. Это может быть краткое описание изображения.

Название (Title) добавляет всплывающую подсказку с текстом, которая появляется при наведении курсора на изображение на сайте.

Стили Картинки

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

Некоторые стили не стоит применять к Картинкам, например, фоновые стили, так как они не будут видны, либо будут частично перекрываться изображением с прозрачным фоном.

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

настроить радиус закругления для одного или нескольких углов Картинки (в разделе Размер)

создать рамку вокруг Картинки (в разделе Граница)

добавить эффекты (в разделе Внешний вид):