Редактор Wix: создание полноэкранного меню в поп-апе
4 мин.
Используйте элемент поп-ап, чтобы создать эффектное полноэкранное всплывающее меню. Когда посетители нажимают кнопку «Меню», оно открывается поверх контента сайта.
Шаг 1 | Добавление поп-апа на сайт
Начните с добавления любого поп-апа на сайт из панели Добавить элементы. Вы измените его дизайн позже.
Чтобы добавить поп-ап:
- Перейдите в редактор.
- Нажмите Добавить элементы
слева в редакторе. - Нажмите Интерактивные (боксы).
- Выберите поп-ап, чтобы добавить его на сайт.
Шаг 2 | Настройка меню в поп-апе
После добавления поп-апа настройте его так, чтобы он не отображался автоматически при каждом посещении сайта. Затем оформите поп-ап по своему вкусу и добавьте вертикальное меню.
Чтобы настроить поп-ап:
- Нажмите на поп-ап в редакторе.
- Нажмите на иконку Настройки
. - Переименуйте поп-ап во что-то узнаваемое, например, «Меню».
- Выберите Нет в разделе Автоматически показывать поп-ап на страницах.
- Удалите все элементы внутри поп-апа. Не удаляйте иконку «X».
- Добавьте вертикальное меню в поп-ап.
- Настройте дизайн меню. Мы рекомендуем использовать крупные шрифты и выравнивание по центру.
- Когда все будет готово, нажмите Выйти из режима вверху.
Совет:
Вы также можете настроить фон поп-апа и фоновое перекрытие в соответствии со стилем сайта. Сделайте фоны слегка прозрачными для создания интересного эффекта.
Шаг 3 | Добавление кнопки для открытия меню
Теперь, когда поп-ап и меню готовы, добавьте кнопку, на которую посетители будут нажимать для доступа к меню. Затем привяжите кнопку к поп-апу.
Чтобы добавить кнопку:
- Нажмите Добавить элементы слева в редакторе.
- Выберите Декоративные элементы.
- Выберите Основные фигуры.
- Нажмите Больше основных фигур.
- Введите «menu» в строке поиска и нажмите Enter.
- Выберите дизайн кнопки меню и нажмите Добавить на страницу.
- Нажмите на кнопку меню в редакторе.
- (Необязательно) Нажмите на иконку Дизайн
, чтобы настроить дизайн кнопки меню. - Нажмите на иконку Ссылка
. - Выберите Поп-ап слева.
- Выберите нужный поп-ап из выпадающего списка.
- Нажмите Готово.
Советы:
- Разместите кнопку меню на видном месте. Это может быть хедер, или вы можете использовать функцию Закрепить на экране, чтобы закрепить ее в верхней части сайта. Если кнопка меню находится не в хедере, убедитесь, что вы настроили ее показ на всех страницах.
- Вы также можете создать собственный дизайн кнопки меню. Это может быть текстовая кнопка, кнопка-иконка или любая другая фигура — выбор за вами. Посмотрите примеры ниже:
Шаг 4 | Скрытие кнопки в версии для смартфонов
Скройте кнопку, которую вы только что создали, в версии сайта для смартфонов, так как там уже предустановлено полноэкранное меню.
Чтобы скрыть кнопку:
- Перейдите в мобильный редактор.
- Нажмите на кнопку меню, которая связана с поп-апом.
- Нажмите на иконку Скрыть
.
