Виджет Галерея в конструкторе сайтов
В конструкторе лендингов SendPulse вы можете добавить галерею, чтобы отобразить несколько изображений в виде карусели, сетки или коллажа. К примеру, вы можете использовать галерею как портфолио или, чтобы показать товары и скриншоты отзывов.
Рассмотрим, как добавить виджет и настроить каждый тип отображения.
Добавьте элемент
Добавьте виджет Галерея в нужную часть шаблона.
Загрузите изображения
Нажмите Выбрать файл (Choose file) и выберите откуда добавить изображение:
| Менеджер файлов (File manager) | Открывает панель менеджера файлов, где можно выбрать изображение из существующих или загрузить новое. |
| Стоковые изображения (Stock images) |
Открывает модальное окно, где можно выбрать изображение на бесплатном фотостоке Unsplash. Воспользуйтесь поиском по имени и нажмите на нужное изображение в списке. Нажмите Выбрать внизу окна и изображение будет добавлено на страницу. |
Для изображений на сайте применяется ресайз — это автоматический подбор размера картинки в зависимости от области изображения на устройстве посетителя (720, 1080 или 1920 px), а также конвертация в формат webp. Если нужного размера нет, посетителю будет показан оригинал, который хранится в менеджере файлов.
Вы можете добавлять изображения в галерею только по одному.
Чтобы добавить больше изображений, нажмите Добавить (Add).
Чтобы заменить, отредактировать или удалить изображение, наведите на него и нажмите на соответсвующую иконку.
Чтобы изменить расположение по сетке, зажмите картинку и перетащить в нужное место.
Настройте галерею
Выберите тип галереи — карусель, сетка, коллаж — и нажмите Настроить.
Карусель
Используется для презентации изображений в виде слайдов с прокруткой.
Настройте внешний вид карусели:
| Количество изображений в строке (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) | Задайте расстояние между изображениями в строке в пикселях. |
| Скругление (Rounding) | Задайте радиус скругления углов изображений в пикселях. |
| Цвет кнопок управления (Prev/next button color) | Выберите цвет стрелок навигации карусели. |
Вы также можете дополнительно настроить параметры взаимодействия пользователей с галереей: включить или выключить отображение картинки по клику* и автоматическую смену слайдов.
*При включенной опции изображение будет открываться в модальном окне в его оригинальном размере.
Сетка
Используется для демонстрации сразу всех изображений на одном блоке в одном размере.
Настройте внешний вид сетки:
| Количество изображений в строке (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) | Задайте радиус скругления углов изображений в пикселях. |
Вы также можете выбрать, как взаимодействовать с каждой картинкой в коллаже — открывать изображение по клику* или нет.
Редактируйте изображения
Вы можете масштабировать размер фото и поставить акцент — выделить часть изображения, к которой вы хотите привлечь больше внимания. Благодаря такой фокусной точке вы сможете выделить главный объект на фотографии большого размера.
Нажмите на нужное изображение в виджете, чтобы появился маркер внизу – зажмите его и изменяйте размер изображения. Нажмите на центр фото, чтобы задать фокусную точку.
Вы можете редактировать изображения прямо в конструкторе сайта, например, добавлять текст или создавать различные эффекты.
Читайте больше: Как редактировать изображения в конструкторе сайтов.
Скопируйте ID
Для каждого элемента предусмотрен идентификатор (ID), который определяет элемент на странице. C его помощью вы можете применять стили и скрипты, настроить показ попапов и отслеживать события по этому элементу.
Чтобы скопировать ID, нажмите на него. Чтобы отредактировать ID, нажмите на значок карандаша.
Читайте подробнее: ID блока и виджета.
Обновлено: 19.03.2025
или