Виджет Галерея в конструкторе сайтов
В конструкторе сайтов 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) | Скруглите углы изображений, задав значение в пикселях. |
Вы также можете настроить дополнительные параметры взаимодействия: включить или выключить открытие изображения после нажатия.
Отредактируйте изображения
Вы можете изменить размер изображения и добавить фокусную точку — часть изображения, на которую хотите обратить больше внимания. Так вы выделите главный объект на большом фото.
Нажмите изображение в виджете и перетащите маркер, чтобы изменить размер. Нажмите центр изображения, чтобы задать фокусную точку.
Изображения можно редактировать прямо в конструкторе сайтов: например, добавить текст или применить разные эффекты.
Подробнее: Как редактировать изображения в конструкторе сайтов.
Скопируйте идентификатор элемента
Каждый элемент имеет идентификатор, который отличает его на странице. С помощью идентификатора вы можете добавлять стили и скрипты, показывать поп-апы и отслеживать события для этого элемента.
Чтобы скопировать идентификатор, нажмите на него. Чтобы изменить идентификатор, нажмите иконку карандаша.
Подробнее: Идентификатор блока и виджета.
Обновлено: 19.03.2025
или