Нужно ли добавить полноэкранное отзывчивое меню в WordPress?
Когда ваши пользователи нажмут или коснутся значка гамбургера, на экране появится полноэкранное меню вашего сайта с красивой анимацией.
В этой статье мы покажем вам, как добавить полноэкранное отзывчивое меню в WordPress без написания кода.
Зачем добавлять полноэкранное отзывчивое меню в WordPress?
Хорошо оформленные меню помогают вашим посетителям ориентироваться на вашем сайте WordPress. Однако при использовании маленького экрана смартфона может быть трудно нажать на стандартное меню.
Мобильные пользователи уже превзошли пользователей настольных компьютеров для многих веб-сайтов. Именно поэтому мы рекомендуем вам предварительно просмотреть мобильную версию вашего сайта WordPress, чтобы увидеть, как ваш сайт выглядит на мобильных устройствах.
Полноэкранное отзывчивое меню будет автоматически подстраиваться под разные размеры экрана. Поскольку все свободное пространство используется для меню, на смартфонах и планшетах легче ориентироваться.
How to Add a Fullscreen Responsive Menu in WordPress
Давайте рассмотрим, как добавить полноэкранное отзывчивое меню в WordPress.
Как добавить полноэкранное отзывчивое меню в WordPress
Первое, что вам нужно сделать, это установить и активировать плагин FullScreen Menu — Mobile Friendly and Responsive. Вы можете ознакомиться с нашим пошаговым руководством о том, как установить плагин WordPress для получения более подробной информации.
После активации, вам следует перейти в раздел Параметры полноэкранного меню страницу в меню администратора WordPress для настройки параметров плагина. Вы автоматически перейдете на вкладку «Настройки».
Начните с установки флажка ‘Activate Animated Fullscreen Menu’, чтобы включить меню.
Неплохо также сначала установить флажок «Показывать меню только для пользователей администратора». Это позволит вам видеть изменения по мере настройки меню, но посетители вашего сайта не смогут увидеть его до тех пор, пока вы не закончите работу.
Не забудьте вернуться и снять галочку с этого поля, когда закончите.
Другие настройки позволяют показывать меню только на мобильных устройствах, закрывать меню при нажатии или прокрутке, а также скрывать меню на определенных страницах. Для нашего примера мы оставим эти настройки не отмеченными, но вы можете настроить их по своему усмотрению для своего сайта.
Дизайн и внешний вид полноэкранного меню
Далее мы настроим дизайн меню. Для этого вам нужно перейти на вкладку «Дизайн/Внешний вид» в верхней части страницы. На этой странице вы можете выбрать цвета, шрифт и настройки анимации для вашего меню.
В верхней части страницы вы заметите две настройки цвета. Первый цвет — для значка меню гамбургера. Оно будет отображаться в правом верхнем углу вашего сайта. Когда ваши посетители нажмут или коснутся его, полноэкранное меню будет показано или скрыто.
Вторая настройка цвета предназначена для фона меню.
Когда вы щелкните на каждом поле, появится палитра цветов. Вы можете либо нажать на цвет, который хотите использовать, либо ввести его шестнадцатеричный код.
После выбора цветов меню следует прокрутить страницу вниз до раздела «Шрифт/Внешний вид». Здесь вы можете выбрать цвет, семейство и размер шрифта, который будет использоваться для текста меню.
В этом руководстве мы останемся с настройками по умолчанию, которые используют шрифт из нашей темы. Мы рекомендуем эту настройку, потому что она будет соответствовать дизайну вашего сайта. Кроме того, загрузка дополнительных шрифтов может повлиять на производительность и скорость работы вашего WordPress сайта.
Также есть настройки для отображения бокового меню на определенных страницах и прокрутки главного меню, если оно недостаточно высокое. В данном руководстве мы оставим эти настройки не отмеченными, но не стесняйтесь экспериментировать с ними на своем сайте.
После этого вам нужно прокрутить вниз до раздела ‘Настройки анимации’. Существует два основных параметра, которые вы можете настроить.
Первый из них — «Тип анимации». Это позволяет выбрать направление анимации при активации меню. Вы можете выбрать вариант сверху вниз, слева направо и справа налево.
Вторая настройка — это эффект, который вы получите при наведении курсора мыши на пункт меню. На выбор предлагаются следующие варианты: линия отступов, цвет фона и цвет фона с закругленной рамкой.
Содержание полноэкранного меню
Наконец, вам нужно прокрутить страницу назад к верху и перейти на вкладку «Содержание меню». Здесь вы можете выбрать меню WordPress, которое будет отображаться на вашем полноэкранном меню.
Рядом с пунктом «Выбрать меню» в верхней части, вам нужно выбрать меню из выпадающего списка. Если вы еще не создали навигационное меню, то ознакомьтесь с нашим руководством о том, как добавить навигационное меню в WordPress.
Если вы хотите, чтобы на экране меню отображалось дополнительное содержимое, то вы можете добавить его в следующем разделе «Free HTML / Shortcodes». Просто введите свой контент в поле редактора и добавьте любые медиафайлы, которые вы хотите. Это содержимое будет отображаться под меню.
Есть также флажок, который будет включать ссылку на вашу страницу политики конфиденциальности. Многие владельцы сайтов предпочитают добавлять его в нижний колонтитул, а не в главное меню, хотя.
Далее, возможно, вы захотите добавить социальные иконки. Они будут отображаться в ряд в нижней части вашего полноэкранного меню.
Чтобы добавить их, просто прокрутите вниз до раздела «Социальные иконки» и введите название иконки, например, «Facebook (признана экстремистской организацией на территории РФ)». После этого выберите соответствующий значок и введите URL-адрес вашей социальной страницы.
Вы можете добавить дополнительные иконки, нажав кнопку «Добавить еще одну иконку».
Наконец, вы можете добавить встроенную строку поиска WordPress в верхнюю часть вашего отзывчивого меню. Вам нужно будет прокрутить страницу «Содержание меню» до самого низа и установить флажок «Добавить строку поиска?’ box. При желании вы также можете ввести текст-заполнитель.
Наконец, нажмите кнопку «Сохранить изменения», чтобы сохранить настройки.
Теперь вы можете посетить свой сайт, чтобы увидеть полноэкранное отзывчивое меню в действии. Мы рекомендуем вам изменить размер вашего браузера, чтобы увидеть, как меню ведет себя на разных размерах экрана.
Вот как это выглядит на нашем демонстрационном сайте.
Как только вы будете довольны своим полноэкранным меню, не забудьте перейти обратно на страницу Опции полноэкранного меню и снимите флажок «Показывать меню только для пользователей администратора». После нажатия кнопки «Сохранить изменения» посетители вашего сайта смогут получить доступ к меню.
Надеемся, эта статья помогла вам узнать, как добавить полноэкранное отзывчивое меню на ваш сайт WordPress. Вы также можете узнать, как вставить видео с Facebook (признана экстремистской организацией на территории РФ), или ознакомиться с нашим списком лучших плагинов контактных форм для WordPress.
Источник: www.wpbeginner.com