Управление изображениями в Flex block
Во Flex block вы можете добавлять изображения, размещать их в произвольном месте блока, друг над другом, выравнивать по разным сторонам блока (за левым и верхним краем и т.п.), изменять размер и видимую часть изображения (позиционировать его) и пр — это даёт свободу в редактировании и позволяет реализовать множество креативных идей.
Содержание:
Добавление и редактирование изображения
Групповое редактирование изображений
Режим заполнения (изменение пропорций изображения)
Режим масштабирования (сохранение пропорций изображения)
Примечание: узнайте, как добавить элемент “Изображение” в Flex block в этой статье.
После добавления элемента “Изображение” наведите на него и нажмите на “шестерню”. В новом окне нажмите Загрузить для добавления файла со своего компьютера или на кнопку Галерея для поиска или генерации других изображений:
Подсказка: если изображение еще не выбрано, вы можете сразу открыть медиагалерею с помощью двойного клика по элементу изображения.
В новом окне вы можете выбрать одно из уже добавленных изображений, найти необходимое изображение на вкладке Бесплатные фото или сгенерировать собственное изображение с помощью AI Visual:
Примечание: вы можете узнать о стандартных настройках изображений в этой статье.
Зажмите клавишу ALT и нажмите на изображение, чтобы увидеть расстояние до краёв блока в пикселях:
Подсказка: при нажатии на добавленное изображение вы увидите его размер в пикселях внизу.
Для перемещения изображения по пространству блока зажмите его левой клавишей мыши и потяните в необходимую сторону. Как только изображение приблизится к центру блока по длинне или ширине, вы увидите соответствующие линии красного цвета — они пригодятся, если вам необходимо разместить изображение ровно по центру блока (по вертикали и/или по горизонтали):
Примечание: если зажать клавишу "Shift" и затем начать перемещать изображение, оно будет двигаться только по горизонтали или по вертикали — это полезно, если вам необходимо сместить изображение только по 1 оси (X или Y), а по другой оси оставить расположение изображения неизменным.
Нажав на иконку в виде трех точек, у вас откроется список доступных действий с изображением:
Подсказка: подробнее о "Выравнивании" можно узнать здесь, а о "Расположении" — в этом разделе инструкции.
Вы можете выделить мышкой несколько изображений и перемещать их как один элемент:
Чтобы проверить расстояние в пикселях от одного изображения к другому, выберите одно из них и наведите курсор на другое.
Примечание: если нужно переместить одно изображение только на пару пикселей, то это легко можно сделать с помощью стрелочек на клавиатуре. Каждое нажатие на кнопку со стрелкой перемещает изображение в соответствующую сторону на 1 пиксель. А если при этом зажать клавишу "Shift", то изображение будет перемещаться по 10 пикселей при каждом нажатии на стрелочку на клавиатуре.
Изображение можно также размещать друг относительно друга по верхнему краю:
…по нижнему краю:
А также выровнять центры двух изображений между собой:
Подсказка: вы также можете перемещать изображения мышкой и выравнивать их относительно края или центра других изображений – вы увидите оранжевую линию, когда 2 изображения будут выровнены по одному из их краев.
Примечание: вышеуказанная опция выравнивания действительна не только для изображений, но и для других элементов в Flex block.
По умолчанию к Флекс блоку изображения добавляются с режимом заполнения (Scale to fill) — то есть изображение будет заполнять ту область (контейнер), который для него выделен, даже если при этом часть изображения будет обрезана.
Вы можете редактировать размер изображения, растягивая или сужая его в разные стороны:
Также есть возможность настроить позиционирование изображения, то есть, какая его часть будет видима, а какая будет обрезаться. Для этого нажмите на кнопку Позиционирование:
…и выберите часть изображения, которая должна отображаться:
Чтобы применить изменения, нажмите на левую кнопку мыши вне фото.
Подсказка: перейти к позиционированию изображения можно также с помощью двойного клика на фото.
Примечание: вы можете отдельно изменять позиционирование изображения на всех девайсах в редакторе мобильной версии — это особенно полезно, если для разных устройств вы указали изображениям другие размеры или пропорции.
Детальнее об этом режиме в следующем видео:
В режиме заполнения у вас ещё есть возможность уменьшать и увеличивать масштаб изображения, чтобы выбрать необходимую область, которая должна быть отображена.
ㅤㅤㅤ1) Для этого нажмите на вышеупомянутую кнопку Позиционирование или дважды кликните по изображению.
ㅤㅤㅤ2) Затем установите необходимый масштаб изображения:
...и нажмите левой кнопкой мышки за его пределами, чтобы применить изменения.
ㅤㅤㅤ3) В случае необходимости вы можете выбрать для отображения ту область изображения, которая вам необходима:
Режим масштабирования (Scale to fit) позволяет изменять размеры изображения с сохранением его пропорций – это удобно, если вам важно, чтобы изображение имело свои оригинальные пропорции и ни одна его часть точно не была обрезана.
Чтобы включить этот режим, нажмите на значок шестеренки:
Активируйте переключатель Масштабировать:
Эта опция позволяет изменять размер изображения с сохранением его пропорций:
Примечание: вы можете ознакомиться с данной опцией в следующем видео.
Будем рады помочь в чате или на почте (support@weblium.com) в любое время!
Содержание:
Добавление и редактирование изображения
Групповое редактирование изображений
Режим заполнения (изменение пропорций изображения)
Режим масштабирования (сохранение пропорций изображения)
Добавление и редактирование изображения
Примечание: узнайте, как добавить элемент “Изображение” в Flex block в этой статье.
После добавления элемента “Изображение” наведите на него и нажмите на “шестерню”. В новом окне нажмите Загрузить для добавления файла со своего компьютера или на кнопку Галерея для поиска или генерации других изображений:
Подсказка: если изображение еще не выбрано, вы можете сразу открыть медиагалерею с помощью двойного клика по элементу изображения.
В новом окне вы можете выбрать одно из уже добавленных изображений, найти необходимое изображение на вкладке Бесплатные фото или сгенерировать собственное изображение с помощью AI Visual:
Примечание: вы можете узнать о стандартных настройках изображений в этой статье.
Зажмите клавишу ALT и нажмите на изображение, чтобы увидеть расстояние до краёв блока в пикселях:
Подсказка: при нажатии на добавленное изображение вы увидите его размер в пикселях внизу.
Для перемещения изображения по пространству блока зажмите его левой клавишей мыши и потяните в необходимую сторону. Как только изображение приблизится к центру блока по длинне или ширине, вы увидите соответствующие линии красного цвета — они пригодятся, если вам необходимо разместить изображение ровно по центру блока (по вертикали и/или по горизонтали):
Примечание: если зажать клавишу "Shift" и затем начать перемещать изображение, оно будет двигаться только по горизонтали или по вертикали — это полезно, если вам необходимо сместить изображение только по 1 оси (X или Y), а по другой оси оставить расположение изображения неизменным.
Нажав на иконку в виде трех точек, у вас откроется список доступных действий с изображением:
Подсказка: подробнее о "Выравнивании" можно узнать здесь, а о "Расположении" — в этом разделе инструкции.
Групповое редактирование изображений
Вы можете выделить мышкой несколько изображений и перемещать их как один элемент:
Чтобы проверить расстояние в пикселях от одного изображения к другому, выберите одно из них и наведите курсор на другое.
Примечание: если нужно переместить одно изображение только на пару пикселей, то это легко можно сделать с помощью стрелочек на клавиатуре. Каждое нажатие на кнопку со стрелкой перемещает изображение в соответствующую сторону на 1 пиксель. А если при этом зажать клавишу "Shift", то изображение будет перемещаться по 10 пикселей при каждом нажатии на стрелочку на клавиатуре.
Изображение можно также размещать друг относительно друга по верхнему краю:
…по нижнему краю:
А также выровнять центры двух изображений между собой:
Подсказка: вы также можете перемещать изображения мышкой и выравнивать их относительно края или центра других изображений – вы увидите оранжевую линию, когда 2 изображения будут выровнены по одному из их краев.
Примечание: вышеуказанная опция выравнивания действительна не только для изображений, но и для других элементов в Flex block.
Режим заполнения (изменение пропорций изображения)
По умолчанию к Флекс блоку изображения добавляются с режимом заполнения (Scale to fill) — то есть изображение будет заполнять ту область (контейнер), который для него выделен, даже если при этом часть изображения будет обрезана.
Вы можете редактировать размер изображения, растягивая или сужая его в разные стороны:
Также есть возможность настроить позиционирование изображения, то есть, какая его часть будет видима, а какая будет обрезаться. Для этого нажмите на кнопку Позиционирование:
…и выберите часть изображения, которая должна отображаться:
Чтобы применить изменения, нажмите на левую кнопку мыши вне фото.
Подсказка: перейти к позиционированию изображения можно также с помощью двойного клика на фото.
Примечание: вы можете отдельно изменять позиционирование изображения на всех девайсах в редакторе мобильной версии — это особенно полезно, если для разных устройств вы указали изображениям другие размеры или пропорции.
Детальнее об этом режиме в следующем видео:
В режиме заполнения у вас ещё есть возможность уменьшать и увеличивать масштаб изображения, чтобы выбрать необходимую область, которая должна быть отображена.
ㅤㅤㅤ1) Для этого нажмите на вышеупомянутую кнопку Позиционирование или дважды кликните по изображению.
ㅤㅤㅤ2) Затем установите необходимый масштаб изображения:
...и нажмите левой кнопкой мышки за его пределами, чтобы применить изменения.
ㅤㅤㅤ3) В случае необходимости вы можете выбрать для отображения ту область изображения, которая вам необходима:
Режим масштабирования (сохранение пропорций изображения)
Режим масштабирования (Scale to fit) позволяет изменять размеры изображения с сохранением его пропорций – это удобно, если вам важно, чтобы изображение имело свои оригинальные пропорции и ни одна его часть точно не была обрезана.
Чтобы включить этот режим, нажмите на значок шестеренки:
Активируйте переключатель Масштабировать:
Эта опция позволяет изменять размер изображения с сохранением его пропорций:
Примечание: вы можете ознакомиться с данной опцией в следующем видео.
Будем рады помочь в чате или на почте (support@weblium.com) в любое время!
Обновлено на: 31/01/2024
Спасибо!