Віджет Галерея у конструкторі сайтів
У конструкторі сайтів SendPulse ви можете додати галерею, щоб показати кілька зображень як карусель, сітку або колаж. Наприклад, галерея підійде для портфоліо або для показу товарів і відгуків про них.
Розглянемо, як додати галерею на сайт і налаштувати її відображення.
Додайте елемент
Додайте віджет Галерея (Gallery) у потрібну частину сайту.
Завантажте зображення
Натисніть Виберіть файл (Choose file) і виберіть, як додати зображення:
| Менеджер файлів (File manager) | Відкриває менеджер файлів, де ви можете вибрати наявне зображення або завантажити нове. |
| Менеджер стоків (Stock manager) |
Відкриває модальне вікно, де ви можете вибрати зображення з безкоштовних стокових фото Unsplash. Знайдіть зображення за назвою, виберіть його зі списку та натисніть Вибрати (Select) внизу, щоб додати зображення на сторінку. |
Зображення на сайті автоматично масштабуються під розмір екрана пристрою відвідувача (720, 1080 або 1920 px) і конвертуються у формат webp. Якщо потрібного розміру немає, відвідувач побачить оригінальне зображення, яке зберігається в менеджері файлів.
Додавати зображення в галерею можна тільки по одному.
Щоб додати ще зображення, натисніть Додати (Add).
Щоб замінити або видалити зображення, наведіть на нього вказівник і натисніть відповідну іконку.
Щоб змінити порядок зображень у сітці, перетягніть їх у потрібне місце.
Налаштуйте галерею
Виберіть тип галереї (карусель, сітка або колаж) і натисніть Налаштувати (Customize).
Частину налаштувань галереї платформа за замовчуванням синхронізує для всіх типів пристроїв. Щоб задати їх окремо, натисніть іконку поруч із Стилі синхронізовані (Styles are synced). Далі перемикайтеся між вкладками для комп’ютера, планшета й мобільного.
Карусель
Показує зображення як слайдшоу, де вони змінюють одне одного.
Налаштуйте вигляд каруселі:
| Кількість зображень у рядку (Number of images in a row) | Виберіть, скільки зображень показувати в одному рядку.
Якщо стилі не синхронізовані, задайте це налаштування окремо для кожного типу пристрою. |
| Показувати як (Show as) | Виберіть режим відображення каруселі.
Доступні варіанти: Рядок (Row) — усі зображення розміщуються в один рядок. Мініатюри (Thumbnails) — одне головне зображення з рядком мініатюр під ним. |
| Показувати край останньої мініатюри (Show the edge of the last thumbnail) | Позначте чекбокс, щоб частково показувати наступну мініатюру на краю рядка. Так відвідувач бачить, що в галереї є ще зображення.
Доступно тільки для режиму Мініатюри (Thumbnails). |
| Масштабування зображення (Image scaling) | Виберіть, як зображення вписуються у свої контейнери.
Доступні варіанти: Cover — зображення заповнює всю площу, частину зображення може бути обрізано. Contain — зображення показується повністю, без обрізання. Використовуйте Contain для зображень із нестандартним співвідношенням сторін, наприклад для скриншотів відгуків. |
| Масштабування мініатюр (Preview image scaling) | Виберіть, як мініатюри вписуються у свої контейнери: Cover або Contain.
Доступно тільки для режиму Мініатюри (Thumbnails). |
| Колір фону (Background color) | Виберіть колір фону для контейнерів зображень.
Цей колір видно в режимі масштабування Contain або коли зображень у галереї більше, ніж уміщується на екрані. |
| Відстань між елементами (Spacing) | Задайте відстань між зображеннями в рядку в пікселях.
Якщо стилі не синхронізовані, задайте це налаштування окремо для кожного типу пристрою. |
| Розмір стрілки (Arrow size) | Задайте розмір стрілок навігації в пікселях.
Якщо стилі не синхронізовані, задайте це налаштування окремо для кожного типу пристрою. |
| Висота мініатюр (Preview height) | Задайте висоту рядка мініатюр у пікселях.
Доступно тільки для режиму Мініатюри (Thumbnails). Якщо стилі не синхронізовані, задайте це налаштування окремо для кожного типу пристрою. |
| Заокруглення (Rounding) | Заокругліть кути зображень, задавши значення в пікселях. |
| Колір кнопок «Назад»/«Далі» (Prev/next button color) | Виберіть колір стрілок навігації каруселі. |
| Колір точок (Dots color) | Виберіть колір точок навігації каруселі.
Доступно тільки для режиму Рядок (Row). |
| Стрілки за межами контейнера (Arrows outside the container) | Перемістіть стрілки навігації за краї рядка зображень.
Доступно тільки для режиму Рядок (Row). |
Ви також можете налаштувати додаткові параметри взаємодії: увімкнути або вимкнути відкриття зображення після натискання* та автоматичну зміну слайдів.
*Якщо цей параметр увімкнено, зображення відкриється в модальному вікні в оригінальному розмірі.
Сітка
Показує всі зображення одразу в одному блоці й в однаковому розмірі.
Налаштуйте вигляд сітки:
| Кількість зображень у рядку (Number of images in a row) | Виберіть, скільки зображень показувати в одному рядку.
Якщо стилі не синхронізовані, задайте це налаштування окремо для кожного типу пристрою. |
| Масштабування зображення (Image scaling) | Виберіть, як зображення вписуються у свої контейнери.
Доступні варіанти: Cover — зображення заповнює всю площу, частину зображення може бути обрізано. Contain — зображення показується повністю, без обрізання. Використовуйте Contain для зображень із нестандартним співвідношенням сторін, наприклад для скриншотів відгуків. |
| Колір фону (Background color) | Виберіть колір фону для контейнерів зображень.
Цей колір видно в режимі масштабування Contain або коли зображень у галереї більше, ніж уміщується на екрані. |
| Відстань між елементами (Spacing) | Задайте відстань між зображеннями в рядку в пікселях.
Якщо стилі не синхронізовані, задайте це налаштування окремо для кожного типу пристрою. |
| Заокруглення (Rounding) | Заокругліть кути зображень, задавши значення в пікселях. |
Ви також можете налаштувати додаткові параметри взаємодії: увімкнути або вимкнути відкриття зображення після натискання.
Колаж
Показує всі зображення одразу в одному блоці за вибраним шаблоном колажу.
Налаштуйте вигляд колажу:
| Показувати як (Show as) | Виберіть шаблон розкладки колажу. |
| Масштабування зображення (Image scaling) | Виберіть, як зображення вписуються у свої контейнери.
Доступні варіанти: Cover — зображення заповнює всю площу, частину зображення може бути обрізано. Contain — зображення показується повністю, без обрізання. Використовуйте Contain для зображень із нестандартним співвідношенням сторін, наприклад, для скриншотів відгуків. |
| Колір фону (Background color) | Виберіть колір фону для контейнерів зображень.
Цей колір видно в режимі масштабування Contain або коли зображень у галереї більше, ніж уміщується на екрані. |
| Відстань між елементами (Spacing) | Задайте відстань між зображеннями в рядку в пікселях.
Якщо стилі не синхронізовані, задайте це налаштування окремо для кожного типу пристрою. |
| Заокруглення (Rounding) | Заокругліть кути зображень, задавши значення в пікселях. |
Ви також можете налаштувати додаткові параметри взаємодії: увімкнути або вимкнути відкриття зображення після натискання.
Відредагуйте зображення
Ви можете змінити розмір зображення та додати фокусну точку — частину зображення, на яку хочете звернути більше уваги. Так ви виокремите головний об’єкт на великому фото.
Натисніть зображення у віджеті та перетягніть маркер, щоб змінити розмір. Натисніть центр зображення, щоб задати фокусну точку.
Зображення можна редагувати безпосередньо в конструкторі сайтів: наприклад, додати текст або застосувати різні ефекти.
Докладніше: Як редагувати зображення в конструкторі сайтів.
Скопіюйте ідентифікатор елемента
Кожен елемент має ідентифікатор, який відрізняє його на сторінці. За допомогою ідентифікатора ви можете додавати стилі та скрипти, показувати попапи й відстежувати події для цього елемента.
Щоб скопіювати ідентифікатор, натисніть на нього. Щоб змінити ідентифікатор, натисніть іконку олівця.
Докладніше: Ідентифікатор блоку та віджета.
Оновлено: 01.04.2025
або