Основная функция секции:
Секция-мозайка для стильного представления ваших работ на сайте. С помощью этой секции вы можете создать интересную галерею с необычной сеткой всего за несколько минут.

В секции доступно большое количество анимаций и эффектов для картинок + добавлен подробный просмотр картинок при клике.

Вид секции по умолчанию:

Сетка карточек:
В этой секции доступно 2 варианта отображения:
•‎ Вариант 1 — сетка с выравниванием всех картинок по высоте и автоматическим выбором количества картинок в ряд; в этом варианте можно настроить высоту картинок
•‎ Вариант 2 — необычная сетка без выравнивания, с выбором количества карточек в ряд; в этом варианте высота картинок будет подбираться автоматически

Пример секции с выравниванием всех картинок по высоте:

Пример секции с сеткой без выравнивания:

Галерея на всю ширину:
Картинки в галерее можно растянуть на всю ширину. Это делается в разделе "Общие настройки" — свитч "Растянуть на всю ширину".

Подробный просмотр картинок:
По клику на изображения, будет раскрываться подробный просмотр всех картинок в слайдере, сама галерея при этом будет слегка затемняться. Цвет затемнения можно детально настроить (применить сплошной цвет или градиент, настроить насыщенность)

По умолчанию предпросмотр включен. Эта настройка находится в разделе "Общие настройки".

Пример подробного просмотра с затемнением фона:

Настройка изображений:
В этом разделе вы можете настроить:
• пропорции изображения
• скругление
• отступы между изображениями
• тень
• обводку (сплошная, пунктирная)

В разделе "Эффект картинки" для картинок доступны такие же визуальные эффекты, что и в обычном блоке Картинка, применяться эффекты будут на все картинки сразу.

Обратите внимание на параметр "Модифицировать размытие — включите его, если при использовании размытия у вас появляются границы у изображений.

Примечание: Если вы сделаете картинки галереи по умолчанию чёрно-белыми, то при наведении и подробном просмотре они будут становиться цветными.

Пример, когда ч/б картинка галереи становится цветной при наведении:

Описание картинок:
Заголовок и подзаголовок описания вы добавляете для каждой картинки отдельно в разделе "Изображения". Описания картинок можно показывать постоянно, а не только при наведении. При желании описания можно полностью скрыть, выключив свитч рядом с параметром "Показывать описание" в разделе "Настройки галереи".

Вы можете настроить:
• положение текста (9 вариантов расположения)
• отступ между описанием (между заголовком и подзаголовком)
• выравнивание текста
• цвет фона (цвет затемнения картинки, при появлении описания)
• стиль и цвет текста

Обратите внимание, что описания картинок для мобильной версии можно скрыть отдельно, оставив их только в ПК-версии сайта.

Пример секции с описанием, показывающимся
при наведении:

Эффекты при наведении:
При наведении на изображение можно применить следующие эффекты:
• увеличение*
• размытие*
• чёрно-белое фото
• инверсия цветов

*коэффициент увеличения — то, во сколько раз будет увеличиваться картинка при наведении на неё

*коэффициент размытия — сила эффекта размытия

Анимация:
Мы подобрали 13 различных эффектов анимации при появления картинок, чтобы секция привлекала ещё больше внимания и выглядела стильно.
Наглядные иллюстрации анимаций в настройках говорят сами за себя.

Список картинок:
В разделе "Изображения" вы добавляете картинки и описания к ним.
Всего в галерею можно добавить до 15 изображений.

Для каждого изображения можно указать атрибуты Alt и Title + настроить микроразметку.

Список картинок

Как выглядит настройка картинки из списка:

Контент секции:
Всего в разделе "Контент секции" 2 элемента:
•‎ заголовок
•‎ подзаголовок
У заголовка и подзаголовка можно настроить отступ сверху + для заголовка можно указать SEO-тег. Стили заголовка и подзаголовка настраиваются прямо в секции (в тулбаре).

Фон секции:
Варианты фона:
•‎ пустой
•‎ цвет
•‎ картинка
•‎ видео
•‎ слайдер
•‎ карта

Если вы используете картинку в качестве фона, то для картинки можно применить различные фильтры (как в блоке Картинка), наложить цвет, настроить положение
и растянуть, а ещё вам доступно несколько эффектов для фона:
•‎ параллакс
•‎ перемещение
•‎ интерактивный фон
•‎ плавное увеличение фона

Для слайдера можно настроить эффект анимации (листание, появление), скорость и паузу между слайдами. А для видео вы сможете загрузить картинку-заглушку.

Пример секции с картинкой на фоне:

Границы секций:
Эта настройка примечательна тем, что фон секции может занимать либо всё пространство секции (стандартно), либо ограничиваться областью, которая содержит весь контент секции, плюс, у этой области можно настроить скругление углов и настроить цвет фона подложки.
А ещё для области с контентом можно настроить тень.

Пример секции с ограниченным фоном:

Если вы используете стандартный фон на всю ширину секции, то для него можно настроить вид верхней и нижней границы: выбрать заготовленный шаблон и видоизменить его.

Вам доступно 11 вариантов необычных границ секций, причём высоту границ можно редактировать, а ещё цвет фона границы при желании можно настроить вручную
(по умолчанию цвет наследуется от соседней секции).

Пример секции с необычной границей снизу:

Сетка и отступы:
Заголовок и подзаголовок этой секции можно регулировать по ширине, причём эта ширина привязывается к гридам вашего сайта, которые (напоминаем) вы можете детального настроить.

Отключить привязку к гридам и регулировать по пикселям можно в разделе "Отступы".
В этом же разделе вы настраиваете верхний и нижний отступы секции.