Создание полноэкранного всплывающего меню

4 мин. чтения
Используйте элемент промобокса, чтобы создать потрясающее всплывающее меню во весь экран. Когда посетители нажимают кнопку «Меню», она открывается поверх содержимого вашего сайта, как в примере ниже:

Шаг 1 | Добавьте промобокс на сайт

Начните с добавления любого промобокса из панели «Добавить элементы». Настройкой промобокса можно заняться чуть позже.

Чтобы добавить промобокс:

  1. Нажмите Добавить элементы в левой части редактора.
  2. Выберите Интерактив.
  3. Выберите промобокс, чтобы добавить его на сайт.
Скриншот выбора промобокса в редакторе Wix

Шаг 2 | Настройте меню промобокса

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

Чтобы настроить промобокс:

  1. Нажмите на промобокс в редакторе. 
  2. Нажмите на значок Настроить .
  3. Переименуйте промобокс во что-нибудь узнаваемое, например, «Меню».
  4. Выберите Нет в разделе Показывать автоматически?
  1. Удалите все элементы внутри промобокса. Не удаляйте значок «X».
  2. Добавьте вертикальное меню в промобокс.
  3. Настройте дизайн меню Мы рекомендуем, чтобы шрифты меню были крупными и центрированными.
  4. Когда будете готовы, нажмите Выйти из режима вверху.
Совет
Вы также можете настроить фон промобокса и наложение фона. Сделайте фон немного прозрачным для создания запоминающегося эффекта.

Шаг 3 | Добавить кнопку для открытия меню

Теперь, когда промобокс и меню готовы, добавьте кнопку, которую посетители нажимают для доступа к меню. Затем свяжите кнопку с промобоксом.

Чтобы добавить кнопку:

  1. Нажмите Добавить элементы в левой части редактора.
  2. Выберите Оформление.
  3. Выберите Основные фигуры.
  4. Нажмите Больше основных фигур.
Скриншот, на котором выбраны другие основные фигуры в редакторе Wix
  1. Введите «меню» в строку поиска и нажмите Enter.
  2. Выберите дизайн кнопки меню и нажмите Добавить на страницу.
    Совет: разместите кнопку меню на видном месте на сайте, например, в хедере.
  3. Выберите кнопку меню в редакторе.
  4. (Необязательно) Нажмите на значок Дизайн , чтобы настроить дизайн кнопки меню.
  5. Нажмите на значок Ссылка .
  6. Выберите Промобокс слева.
  7. Выберите промобокс из раскрывающегося меню.
  8. Нажмите Сохранить.
Советы:
  • Разместите кнопку меню на видном месте на своем сайте. Это может быть в хедере, также вы можете использовать функцию Прикрепить к экрану, чтобы закрепить его вверху сайта. Если кнопка меню не помещена в хедер, убедитесь, что вы настроили ее отображение на всех страницах.
  • Вы также можете создать собственную кнопку меню. Это может быть текстовая кнопка, кнопка со значком или другая форма на ваше усмотрение! См. несколько примеров ниже:

Шаг 4 | Скройте кнопку с мобильного сайта

Скройте только что созданную кнопку с мобильного сайта, на котором уже есть предустановленное полноэкранное меню.

Чтобы скрыть кнопку:


  1. Перейдите в мобильный редактор.
  2. Нажмите кнопку меню, которая связана с промобоксом. 
  3. Нажмите значок Скрыть

Была ли статья полезна?

|