Как сделать блюр для фона с меню на мобильных версиях

Эффект размытого фона (blur) — это когда при открытии мобильного меню весь контент страницы становится размытым, а меню остается четким и в фокусе. Такой прием помогает выделить навигацию, не скрывая при этом контент полностью. Он делает интерфейс более современным, а также показывает пользователю, что меню открыто, но страница все еще находится «под ним».

Шаг 1. Настройте мобильное меню

Выберите меню (Menu) на холсте или в слоях и откройте вкладку Настройки.

2. Укажите, начиная с какого брейкпоинта меню будет переходить в мобильный вид («бургер») — например, Планшет.

3. Отключите опцию «Блокировать прокрутку страницы», чтобы при открытом меню можно было скроллить контент.

Шаг 2. Сделайте открытое меню полупрозрачным

Переключитесь на выбранный брейкпоинт (в нашем примере — Планшет). Теперь меню отображается в виде «бургера».

2. На вкладке Дизайн переключитесь на состояние меню «Открыт».

Меню отобразится на холсте в открытом виде.

3. В слоях выберите Div Block, который находится внутри Menu → Menu Scroll.

4. Задайте этому Div-блоку полупрозрачный фон — например, FFFFFF, 70%.

Теперь меню будет полупрозрачным, и под ним будет видно контент страницы.

Шаг 3. Настройте размытие контента

Для выбранного Div-блока на вкладке Дизайн пролистайте вниз до опции Фоновые фильтры. Нажмите на «+», чтобы добавить фильтр — по умолчанию добавляется «Размытие» (Blur).

В настройках фонового фильтра отрегулируйте степень размытия по своему вкусу, задав радиус размытия — например, 5px.

Шаг 4. Проверьте эффект на всех мобильных брейкпоинтах

Перейдите в режим предварительного просмотра. Проверьте, как работает эффект при открытии меню-бургера на каждом брейкпоинте — планшете, горизонтальном и вертикальном мобильном телефоне.

Резюме

Включите мобильное меню на нужном брейкпоинте и перейдите в состояние меню «Открыт».

В Menu → Menu Scroll выберите Div Block и задайте ему полупрозрачный фон.

Добавьте этому Div-блоку фоновый фильтр «Размытие» и настройте его радиус.

Проверьте работу эффекта на всех мобильных брейкпоинтах.