Статьи по теме: Редактор
Эта статья также доступна на:

Управление изображениями в Flex block

Во Flex block вы можете добавлять изображения, размещать их в произвольном месте блока, друг над другом, выравнивать по разным сторонам блока (за левым и верхним краем и т.п.), изменять размер и видимую часть изображения (позиционировать его) и пр — это даёт свободу в редактировании и позволяет реализовать множество креативных идей.


Содержание:


Добавление и редактирование изображения


Примечание: узнайте, как добавить элемент “Изображение” в Flex block в этой статье.


  1. После добавления элемента “Изображение” наведите на него и нажмите на “шестерню”. В новом окне нажмите Загрузить для добавления файла со своего компьютера или на кнопку Галерея для поиска или генерации других изображений:


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


  1. В новом окне вы можете выбрать одно из уже добавленных изображений, найти необходимое изображение на вкладке Бесплатные фото или сгенерировать собственное изображение с помощью AI Visual:


Примечание: вы можете узнать о стандартных настройках изображений в этой статье.


  1. Зажмите клавишу ALT и нажмите на изображение, чтобы увидеть расстояние до краёв блока в пикселях:

Подсказка: при нажатии на добавленное изображение вы увидите его размер в пикселях внизу.


  1. Для перемещения изображения по пространству блока зажмите его левой клавишей мыши и потяните в необходимую сторону. Как только изображение приблизится к центру блока по длинне или ширине, вы увидите соответствующие линии красного цвета — они пригодятся, если вам необходимо разместить изображение ровно по центру блока (по вертикали и/или по горизонтали):


Примечание: если зажать клавишу "Shift" и затем начать перемещать изображение, оно будет двигаться только по горизонтали или по вертикали — это полезно, если вам необходимо сместить изображение только по 1 оси (X или Y), а по другой оси оставить расположение изображения неизменным.


  1. Нажав на иконку в виде трех точек, у вас откроется список доступных действий с изображением:


Подсказка: подробнее о "Выравнивании" можно узнать здесь, а о "Расположении" — в этом разделе инструкции.


Групповое редактирование изображений


  1. Вы можете выделить мышкой несколько изображений и перемещать их как один элемент:


  1. Чтобы проверить расстояние в пикселях от одного изображения к другому, выберите одно из них и наведите курсор на другое.

Примечание: если нужно переместить одно изображение только на пару пикселей, то это легко можно сделать с помощью стрелочек на клавиатуре. Каждое нажатие на кнопку со стрелкой перемещает изображение в соответствующую сторону на 1 пиксель. А если при этом зажать клавишу "Shift", то изображение будет перемещаться по 10 пикселей при каждом нажатии на стрелочку на клавиатуре.


  1. Изображение можно также размещать друг относительно друга по верхнему краю:


…по нижнему краю:


А также выровнять центры двух изображений между собой:


Подсказка: вы также можете перемещать изображения мышкой и выравнивать их относительно края или центра других изображений – вы увидите оранжевую линию, когда 2 изображения будут выровнены по одному из их краев.Примечание: вышеуказанная опция выравнивания действительна не только для изображений, но и для других элементов в Flex block.


Режим заполнения (изменение пропорций изображения)


По умолчанию к Флекс блоку изображения добавляются с режимом заполнения (Scale to fill) — то есть изображение будет заполнять ту область (контейнер), который для него выделен, даже если при этом часть изображения будет обрезана.


  1. Вы можете редактировать размер изображения, растягивая или сужая его в разные стороны:


  1. Также есть возможность настроить позиционирование изображения, то есть, какая его часть будет видима, а какая будет обрезаться. Для этого нажмите на кнопку Позиционирование:


…и выберите часть изображения, которая должна отображаться:


  1. Чтобы применить изменения, нажмите на левую кнопку мыши вне фото.


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


Детальнее об этом режиме в следующем видео:


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

ㅤㅤㅤ1) Для этого нажмите на вышеупомянутую кнопку Позиционирование или дважды кликните по изображению.

ㅤㅤㅤ2) Затем установите необходимый масштаб изображения:

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

ㅤㅤㅤ3) В случае необходимости вы можете выбрать для отображения ту область изображения, которая вам необходима:


Режим масштабирования (сохранение пропорций изображения)


Режим масштабирования (Scale to fit) позволяет изменять размеры изображения с сохранением его пропорций – это удобно, если вам важно, чтобы изображение имело свои оригинальные пропорции и ни одна его часть точно не была обрезана.


  1. Чтобы включить этот режим, нажмите на значок шестеренки:


  1. Активируйте переключатель Масштабировать:


Эта опция позволяет изменять размер изображения с сохранением его пропорций:

Примечание: вы можете ознакомиться с данной опцией в следующем видео.


Будем рады помочь в чате или на почте (support@weblium.com) в любое время!

Последнее изменение: 31/01/2024

Была ли эта статья полезна?

Поделиться отзывом

Отменить

Спасибо!