ОБЗОР ФУНКЦИЙ

Боковое меню ∙ Слайдер до/после ∙ Обновлённая галерея

Динамические секции

ОБЗОР ФУНКЦИЙ

Динамические секции
Боковое меню ∙ Слайдер до/после ∙ Обновлённая галерея
На этой неделе мы хотим порадовать вас новым паком секций:
• меню с вертикальной шторкой  →
• слайдер до/после  →
• обновлённая галерея  →

Меню с вертикальной шторкой

Ваш сайт будет выглядеть очень современно и необычно, если заменить привычное горизонтальное меню на то, которое будет раскрываться в шторке слева или справа вашего сайта.

Как выглядит это меню:
Меню с вертикальной шторкой

Отображение меню в редакторе

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

Отображение меню в редакторе сайта

Настройки меню

Как редактировать пункты меню?

Перейдите в раздел "Список пунктов меню" и кликните по 3 точкам напротив нужного пункта, отредактируйте текст и выберите, что будет происходить при клике:
• переход на другую страницу сайта;
• прокрутка к секции (якорь);
• переход по внешней ссылке.

Настройка пунктов меню

Как настроить выпадающее меню?

В том же разделе "Список пунктов меню", в настройках действий выберите "Выпадающий список" и затем настройте подпункты:

Настройка подпунктов меню

Менять порядок пунктов можно, потянув за полосы напротив названия раздела, а удалять лишние — кликнув по значку корзины:

Блок для логотипа

В этом разделе можно поместить картинку или текстовый блок с названием компании:

Блок для контактов

В настройках можно включить отображение слота и поместить внутрь него блок "Кнопка" или "Всплывающая форма", чтобы клиент мог быстро оставить заявку на сайте. Делается это в разделе "Настройки секции" — "Блок с контактами"

Либо вместо кнопки можно поставить блок "Колонки" и внутри разместить иконки соц.сетей, настроить в них переход по ссылке.

Оформление меню

Положение шторки

Расположение можно поменять в разделе "Настройки" секции — "Положение меню":

Кнопка бургер

Настроить внешний вид бургера можно в разделе "Дизайн":

А положение кнопки можно поменять в разделе "Настройки секции":

Эффект стекла

Меню будет выглядеть ещё интереснее, если включить этот эффект. Перейдите в настройки секции — раздел Дизайн, пункт Фон меню и включите "Эффект стекла":

Градиент

А ещё вы можете настроить у меню градиент и сделать его полупрозрачным. Пример:

И включить эффект стекла при желании:

Цвет пунктов

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

Полоса при наведении

Как вы могли заметить, при наведении на пункт, он выделяется тонкой линией. Цвет этой линии можно изменить в этом же разделе "Дизайн" — "Пункты меню":

Меню в мобильной версии

В мобильной версии меню будет показываться почти точно так же, как и в ПК:
Отображение меню в мобильной версии

При желании между пунктами можно включить отображение разделительной полосы в редакторе мобильной версии. Настройка всего одна :)

Слайдер до/после

Эта секция идеально подходит, чтобы продемонстрировать результат вашей работы или какие-то существенные изменения. Вы можете создать сразу несколько слайдеров до/после в рамках одной секции.

Пример использования слайдера:

Настройки секции

Чтобы загрузить картинку в слайдер вы можете 2 раза кликнуть по нужной части слайдера "до" или "после" и затем загрузить изображение с ПК.
Либо загрузить картинку в настройках секции, раздел "Контент":

Структура секции

В разделе "Структура" вы можете показать или скрыть:
• заголовок и подзаголовок секции;
• бейджи с текстом "до" и "после";
• заголовок и подзаголовок самих слайдеров.

Дизайн

Пропорции картинки

Если требуется показать изображение другого формата, настроить пропорции можно в разделе "Дизайн" — Картинка:

Сетка слайдеров

Можно оставить только 1 слайдер в строке. Это делается в разделе "Структура":

Разделитель

Вы можете поменять цвет черты, стрелок и подложки под ними:

Бейджи

Поменяйте шрифт и цвет текста с фоном, если хотите, чтобы бейджи были заметнее.

Обновлённая галерея

Стало лучше и удобнее! Мы исправили большое количество багов, связанных с вёрсткой.

Сетка картинок

Появились более кастомные настойки сетки: теперь можно задавать отступы между картинками. Сделать это можно в разделе "Дизайн" —  Настройки сетки:

Эффекты для картинок

Теперь появилась возможность сделать галерею интереснее, появились эффекты для картинок: при наведении и в обычном состоянии. Настроить это можно в разделе "Дизайн" — Картинка:
Настройки галереи, раздел "Дизайн"

Виды эффектов при наведении:

Увеличение
Размытие
Черно-белое фото:
Наложение цвета:

Эффекты по умолчанию

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

Пример использования

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

Настройки в мобильной версии

В мобильном виде появилась возможность отображать картинки не только друг под другом и в слайдере, но и ставить по 2 фото в ряду. Все эти настройки теперь собраны в редакторе мобильной версии, вкладка "Дизайн":
Слайдер стал выглядеть, как привычная "карусель" в инстаграм:
до
после

Как добавить секцию?

Новые секции открыты в раннем доступе и находятся в категории «Новинки (beta)».