Основная функция секции:
Секция-галерея для яркого и необычного представления ваших работ на сайте.
При наведении выбранная картинка растягивается,
а соседние изображения сжимаются, как в гармошке.
2 варианта отображения:
Вы можете выбрать как будут выглядеть картинки в галерее:
• плотно примыкать друг к другу
• с небольшим отступом (отступ и скругления картинок регулируется)
Пример секции с картинками без отступа:
Пример секции с отступами между картинок:
Общие настройки секции:
В этом разделе вы можете настроить:
• высоту галереи
• растянуть галерею на всю ширину
• скорость анимации
• раскрытие по нажатию (по умолчанию картинки раскрываются при наведении)
Пример галереи растянутой на всю ширину секции:
Настройка изображений:
В этом разделе вы можете настроить:
• коэффициент увеличения — то, во сколько раз будет увеличиваться картинка при наведении на неё
• эффекты для картинки — такие же визуальные эффекты, что и в обычном блоке Картинка, применяться эффекты будут на все картинки сразу
Пример картинки с коэффициентом увеличения: 2
Пример картинки с коэффициентом увеличения: 10
Описание картинок:
Заголовок и подзаголовок описания вы добавляете для каждой картинки отдельно в разделе "Изображения". При желании эти описания можно скрыть.
Вы можете настроить:
• положение текста (9 вариантов расположения)
• отступ между описанием (между заголовком и подзаголовком)
• выравнивание текста
• цвет фона (цвет затемнения картинки, при появлении описания)
• стиль и цвет текста
Обратите внимание, что описания картинок для мобильной версии можно скрыть отдельно, оставив их только в ПК-версии сайта.
Пример оформления описания:
Список картинок:
В разделе "Изображения" вы добавляете картинки и описания к ним.
Всего в галерею можно добавить до 15 изображений.
Для каждого изображения можно указать атрибуты Alt и Title + настроить микроразметку.
Пример секции с 8-ю картинками:
Как для этой секции выглядит список изображений
(заголовок описания и картинка сразу видны):
Контент секции:
Всего в разделе "Контент секции" 2 элемента:
• заголовок
• подзаголовок
У заголовка и подзаголовка можно настроить отступ сверху + для заголовка можно указать SEO-тег. Стили заголовка и подзаголовка настраиваются прямо в секции (в тулбаре).
Фон секции:
Варианты фона:
• пустой
• цвет
• картинка
• видео
• слайдер
• карта
Если вы используете картинку в качестве фона, то для картинки можно применить различные фильтры (как в блоке Картинка), наложить цвет, настроить положение
и растянуть, а ещё вам доступно несколько эффектов для фона:
• параллакс
• перемещение
• интерактивный фон
• плавное увеличение фона
Для слайдера можно настроить эффект анимации (листание, появление), скорость и паузу между слайдами. А для видео вы сможете загрузить картинку-заглушку.
Пример секции с фоновым цветом:
Пример секции с картинкой на фоне:
Границы секций:
Эта настройка примечательна тем, что фон секции может занимать либо всё пространство секции (стандартно), либо ограничиваться областью, которая содержит весь контент секции, плюс, у этой области можно настроить скругление углов и настроить цвет фона подложки.
А ещё для области с контентом можно настроить тень.
Пример секции с ограниченным фоном:
Если вы используете стандартный фон на всю ширину секции, то для него можно настроить вид верхней и нижней границы: выбрать заготовленный шаблон и видоизменить его.
Вам доступно 11 вариантов необычных границ секций, причём высоту границ можно редактировать, а ещё цвет фона границы при желании можно настроить вручную
(по умолчанию цвет наследуется от соседней секции).
Пример секции с необычной границей снизу:
Анимация появления контента:
Эффект “анимация при прокрутке” позволяет показать контент секции не сразу,
а с небольшой задержкой.
Можно выбрать из 2х эффектов: При проявлении контент постепенно проявляется,
как на плёночных фото. А при смещении контент выпрыгивает снизу.
Сетка и отступы:
Заголовок и подзаголовок этой секции можно регулировать по ширине, причём эта ширина привязывается к гридам вашего сайта, которые (напоминаем) вы можете детального настроить.
Отключить привязку к гридам и регулировать по пикселям можно в разделе "Отступы".
В этом же разделе вы настраиваете верхний и нижний отступы секции.
Вид ползунков, с помощью которых можно уменьшать/увеличивать ширину элементов: