Керування зображеннями у 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
Дякуємо!