Как создать мега-меню для Elementor с помощью дополнения JetMenu
Приветствуем вас! JetMenu — это простое в использовании и настраиваемое премиальное дополнение конструктора сайтов Elementor, которое позволяет изменять цвета, шрифты, цвета фона, добавлять тени, значки, значки и многое другое! Лучшее в этом то, что он позволяет вам создавать мегаменю, просто перетаскивая в него виджеты Elementor, так как вы это делаете при создании страниц.
Ну что не будем откладывать и сразу приступим к делу. Да забыли сказать, в конце статьи ваш ждет приятный сюрприз) Так что не переключайтесь.
Установка JetMenu
После того, как вы установили и активировали плагин, перейдите в JetMenu, который находится на боковой панели вашей панели. Там вы найдете следующие настройки, которые вы можете настроить в соответствии со своими предпочтениями. Давайте на них посмотрим.
1 Общие
2 Стили
3 Стили главного меню
4 Стили меню второго порядка
5 Меню мобильного устройства
6 Расширенные
7 Менеджер предустановок
Создание мегаменю для Elementor с помощью дополнения JetMenu
Теперь давайте посмотрим, как создается мегаменю, которое мы будем использовать. Перейдите в «Внешний вид» — «Меню» , выберите меню, которое хотите редактировать (обычно это главное меню), включите для него JetMenu, затем нажмите кнопку «Сохранить» .
Убедитесь, что у вас есть правильное расположение меню в нижней части. Наведите указатель мыши на пункт меню, который вы хотите превратить в мегаменю, и нажмите кнопку JetMenu.
Появится всплывающее окно.
Включите Mega Submenu, если вы хотите, чтобы при наведении курсора отображался любой контент. Прежде чем приступить к редактированию содержимого пункта меню, пройдите через настройки слева и посмотрите, хотите ли вы изменить или добавить что-либо, например, значки, цвета и т.д.
После того, как вы прошли через настройки, нажмите кнопку «Редактировать контент элементов мегаменю» . Появится всплывающее окно с Elementor, где вы можете перетаскивать любые виджеты, которые вы хотите в пункт меню. Это похоже на создание страницы, за исключением того, что вы создаете свое меню.
В мегаменю мы добавили виджеты «Изображение» , «Текст» и «Кнопка» с помощью Elementor. Возможно, вам потребуется установить некоторые отступы и поля в JetMenu, чтобы все выглядело хорошо, особенно если вы используете значки.
Так что, не паникуйте, если они сначала выглядят непрезентабельно. Если мегаменю не появляется вообще, убедитесь, что вы все включили и сохранили, затем очистите ваш сайт и кеш браузера.
Добавление мегаменю в разных местах с помощью Elementor
Вы можете использовать виджет JetMenu Mega Menu в Elementor, чтобы добавить созданное вами меню в любое место на странице. Все, что вам нужно сделать, это перетащить его.
Если вы создаете несколько разных меню, вы можете выбрать, какое из них вы хотите добавить, щелкнув по значку редактирования Mega Menu и выбрав ваше меню из выпадающего меню слева.
Добавление мега-меню по вертикали
JetMenu также позволяет добавлять мегаменю по вертикали. В Elementor просто перетащите виджет «Вертикальное мегаменю» .
Вы также можете выбрать, на какой стороне вы хотите расположить вертикальное мегаменю: левом или правом. Все, что вам нужно сделать, это нажать на значок редактирования виджета и выбрать сторону в раскрывающемся меню слева.
Мы надеемся, что с помощью нашего руководства вам удалось создать потрясающее мегаменю на вашем сайте WordPress с помощью Elementor и дополнения JetMenu. Оба этих плагина платные, но сегодня вы можете забрать их совершенно бесплатно, перейдя по данной ссылке. А у нас на этом все. Всем пока.
Как создать меню гамбургера в wordpress с помощью elementor
WordPress
Сегодня подавляющее большинство тем WordPress имеют отзывчивое меню. Меню автоматически превращается в значок гамбургера, когда вы заходите на свой сайт через смартфон или другие устройства с маленьким экраном. Можно ли иметь меню в виде гамбургера, когда вы заходите на свой сайт через настольный компьютер? Конечно. Вы можете создать меню гамбургера, чтобы заменить обычное горизонтальное меню на вашем сайте.
В этой статье мы расскажем вам, как создать меню гамбургера в WordPress с помощью Elementor. Если вы еще не знаете, Elementor — это плагин для построения страниц для WordPress. В нем есть функция конструктора тем, позволяющая создавать темы WordPress без кодирования. Одним из элементов темы, который вы можете создать с помощью Elementor, является заголовок. Заголовок, созданный с помощью Elementor, заменит заголовок вашей активной темы.
Есть два способа создать меню гамбургера в WordPress с помощью Elementor.
Обратите внимание, что функция построения тем доступна только в Elementor Pro . Читать: Elementor Free vs Elementor Pro .
1. Создание меню гамбургера в WordPress с помощью Elementor с помощью Nav Menu
Nav Menu — один из элементов дизайна, доступных в Elementor. Этот элемент будет использовать одно из существующих меню на вашем сайте WordPress в соответствии с вашими настройками. Поэтому, прежде чем использовать Nav Menu для создания меню гамбургера, вы можете сначала создать меню, если у вас его еще нет. Перейдите в Appearance -> Menus , чтобы создать меню.
Если у вас уже есть меню, перейдите в Templates -> Theme Builder .
На странице Theme Builder нажмите вкладку Header , а затем кнопку Add New , чтобы создать новый заголовок.
Появится всплывающее окно. Дайте название своему заголовку и нажмите кнопку CREATE TEMPLATE , чтобы начать создание заголовка.
Вы можете либо создать заголовок, используя один из доступных шаблонов, либо создать его с нуля. В данном примере мы используем один из доступных шаблонов.
Все шаблоны заголовков, предлагаемые Elementor, содержат элемент Nav Menu. Для дальнейшей настройки необходимо активировать этот элемент. Просто щелкните по одному из пунктов меню, чтобы активировать этот элемент. Или вы также можете активировать Nav Menu, щелкнув его на панели Navigator.
Если Nav Menu активировано, переключитесь на панель элементов (панель слева), чтобы настроить меню. На вкладке Content установите Layout на Dropdown и Toggle Button на Hamburger .
По умолчанию Nav Menu извлекает главное меню вашего сайта WordPress (меню заголовка). Вы можете изменить его с помощью опции Menu (самая верхняя на скриншоте выше).
Вы можете изменить размер, а также цвет значка гамбургера на вкладке Style . Для этого перейдите в раздел Toggle Button .
Нажмите кнопку PUBLISH , чтобы опубликовать ваш заголовок. На следующем шаге вам будет предложено добавить условие. Просто нажмите кнопку ADD CONDITION , чтобы добавить условие. Как правило, на всех страницах сайта используется один и тот же заголовок, поэтому вы можете просто оставить все по умолчанию (Entire Site) и нажать кнопку SAVE & CLOSE .
2. Создание меню гамбургера в WordPress с помощью Elementor с использованием всплывающего окна
Альтернативно, вы также можете создать меню гамбургера в WordPress с помощью Elementor, воспользовавшись всплывающим окном. Вы можете использовать функцию построения всплывающих окон в Elementor для создания полноэкранного меню, как показано ниже.
- Создание всплывающего окна
Прежде всего, вам нужно создать всплывающее окно для отображения пунктов меню. Чтобы ваше меню выглядело более привлекательно, вы можете создать полноэкранное всплывающее окно (как на рисунке выше). Перейдите в Шаблоны -> Всплывающие окна для создания всплывающего окна.
Нажмите кнопку Добавить новое для создания нового всплывающего окна.
Дайте всплывающему окну имя и нажмите кнопку СОЗДАТЬ ТЕМПЛАТУ .
Опять же, вы можете создать всплывающее окно из шаблона или с нуля. В данном примере мы создадим всплывающее окно с нуля. Перед началом создания всплывающего окна мы хотим сделать некоторые настройки, чтобы окно отображалось в полноэкранном режиме.
В разделе Layout на вкладке Settings измените единицу ширины с PX на VW и установите значение 100. Также измените опцию Height на Fit To Screen .
Если вы хотите применить анимацию входа для вашего всплывающего окна, вы можете выбрать ее в разделе Entrance Animation .
Поскольку ваше всплывающее окно будет отображаться в полноэкранном режиме, вы также можете добавить кнопку закрытия. Убедитесь, что опция Close Button включена.
Вы можете настроить кнопку закрытия в разделе Close Button на вкладке Style .
Теперь вы можете приступить к созданию всплывающего окна. Нажмите кнопку с плюсом на холсте/редакторе Elementor и выберите структуру. В этом примере мы используем одноколоночную структуру.
Прежде чем начать добавлять элемент, измените Content Width на Full Width и Height на Fit To Screen .
Также измените фон в разделе Background на вкладке Style .
В этом примере мы отобразим четыре пункта меню на всплывающем окне. Для размещения каждого пункта мы будем использовать четыре колонки. Добавьте элемент Inner Section .
Дублируйте одну из колонок внутренней секции дважды, чтобы получилось четыре колонки.
Добавьте элемент Heading в первую колонку и измените заголовок в соответствии с меткой нужного вам пункта меню, например, «HOME». Добавьте ссылку в раздел Link . Чтобы настроить этот элемент, вы можете перейти на вкладку Style .
Повторите описанные выше шаги для колонок 2, 3 и 4 — соответственно — и настройте метку пункта меню, а также ссылку. При желании вы можете добавить элемент Spacer над и под пунктами меню. Вы также можете изменить ширину внутренней секции, которая содержит пункты меню.
Вы также можете добавить в меню другие элементы, например, кнопки социальных сетей или кнопку призыва к действию. Просто поиграйте с панелью элементов, пока результат вас не удовлетворит.
Когда вы закончите, нажмите кнопку PUBLISH , чтобы опубликовать всплывающее окно.
В появившемся всплывающем окне выберите Advanced Rules и нажмите кнопку SAVE & CLOSE .
- Создание кнопки меню
После того как вы закончили работу над всплывающим окном, можно приступить к созданию заголовка. Мы добавим кнопку в заголовок в качестве триггера для появления всплывающего окна. Чтобы создать заголовок, перейдите в раздел Шаблоны -> Конструктор тем . На странице Theme Builder перейдите на вкладку Header и нажмите кнопку Add New , чтобы создать новый заголовок.
Дайте заголовку название и нажмите кнопку CREATE TEMPLATE , чтобы начать создание заголовка. Опять же, вы можете создать заголовок либо из шаблона, либо с нуля. В этот раз мы создадим заголовок с нуля.
Добавьте новый раздел, нажав на кнопку с плюсом на холсте Elementor. Вы можете выбрать любую структуру в соответствии с концепцией заголовка, который вы хотите создать. В этом примере мы используем одноколоночную структуру. Добавьте кнопку в заголовок, перетащив элемент Button.
Измените текст кнопки по умолчанию на любое слово, например «MENU». Вы также можете оставить его пустым, если хотите показывать только значок гамбургера. В разделе Link на вкладке Content установите значение Popup и выберите всплывающее окно, которое вы создали выше.
Установите значок в разделе Icon и найдите значок под названием «bars».
До этого момента вы успешно создали кнопку гамбургера. Вы можете поиграть с панелью элементов, чтобы настроить ваше меню, например, изменить фон, установить отступы и так далее. Также добавьте другие элементы по своему усмотрению. Как только вы закончите, нажмите кнопку PUBLISH , чтобы опубликовать ваш заголовок.
Как в Elementor сделать выдвижное мобильное меню без плагина
Данное руководство по созданию мобильного меню для Elementor я нашел на канале Youtube у многоуважаемого дизайнера и разработчика сайтов Jeffrey Lytbox (Джефри Лайтбокс) и перевел статью через Гугл-переводчик. Статья очень полезная, думаю многим пригодится при разработке сайтов.
Мобильные меню очень важны для веб-сайтов, но, к сожалению, они были очень простыми в виджете Elementor Nav Menu по умолчанию. Были и другие варианты создания мобильных меню, например, использование всплывающих окон, но всплывающие окна не лучший вариант для SEO оптимизации.
Другой вариант — использовать надстройку Elementor. Почти все дополнительные плагины поставляются с виджетом вне холста.
Существует альтернативный вариант создания наших собственных выдвижных меню с использованием пользовательских HTML и CSS, что не слишком сложно для тех, кто умеет писать небольшой код.
Выдвижные меню для Elementor
В этом уроке я шаг за шагом покажу вам, как создать выдвижное мобильное меню, используя только HTML и CSS. Плагины не требуются. В конце этого поста также есть видео, которое поможет вам в этом.
Разработка мобильного меню
Прежде чем добавить приведенный ниже код, нам сначала нужно спроектировать и создать наше мобильное меню. Начните с создания шаблона секции. Это будет ваше меню.
Сделайте свое меню полной ширины и полной высоты и стилизуйте его по своему усмотрению. Я расскажу об этом подробнее в своем видео-уроке, поэтому обязательно посмотрите его.
Мне нравится добавлять либо виджет «Меню навигации», либо виджет «Список значков» в мои мобильные меню, и я предлагаю придерживаться их. Для лучших результатов SEO и если в вашем меню есть раскрывающиеся подпункты, лучше всего использовать ширину навигационного меню.
Как только ваш шаблон будет готов, вы готовы перейти к следующему шагу.
Создание собственного слайд-меню для Elementor без плагина
Шаг 1: Добавление HTML
В шаблон шапки (header) добавьте виджет HTML.
Ниже приведены 2 разных фрагмента HTML. Один из них предназначен для использования виджета Nav Menu в шаблоне мобильного меню. Другой предназначен для использования виджета «Список значков» в шаблоне мобильного меню. Это сделано для того, чтобы ваше мобильное меню было оптимизировано для SEO.
HTML для виджетов навигационного меню
HTML для виджетов списка значков
Шаг 2: Редактирование HTML
Единственное, что нужно отредактировать в вашем HTML, — это шорткод идентификатора шаблона Elementor.
Найдите Shortcode вашего шаблона секции и замените им шорткод во фрагменте кода HTML.
Шаг 3: Добавьте CSS
Скопируйте и вставьте фрагмент CSS ниже:
В верхней части фрагмента CSS есть 3 области для редактирования.
- Цвет гамбургера — замените цветовой код своим собственным цветом значка меню.
- Цвет «Закрыть X» — замените цветовой код на цвет, который вы хотите использовать для кнопки «Закрыть».
- Идентификационный номер Elementor (elementor-265) — замените номером в шорткоде вашего шаблона. Это делается для того, чтобы ваше выдвижное меню было полноразмерным.
Шаг 4: Настройте заголовок
Вам нужно будет внести все обычные корректировки, например, скрыть заголовок рабочего стола и исправить расстояние вокруг виджета HTML.
Дополнение к статье. Как сделать чтобы закрывалась выдвижная секция при нажатии на якорную ссылку.
Чтобы секция закрывалась по нажатии на пункт меню, нужно в секцию добавить виджет HTML и добавить следующий JS код (будет лучше, если добавите js-код в подвал сайта — footer):
Создание якорь-меню на WordPress: навигация по Landing Page
Сразу оговорюсь, у меня уже было несколько уроков по созданию хедера: Создание хедера в конструкторе Elementor и Создание мега-меню на Elementor. Если вы их пропустили, то будет отличной идее ознакомиться и с ними. Впрочем, это самодостаточная инструкция по созданию навигации в пределах одной страницы на WordPress и после ее прочтения вы гарантированно справитесь с созданием необходимого функционала.
- Плагины и тема
- Создание меню
- Создание хедера
- Создаем якоря
- Возвращаемся к меню
Плагины и тема
В данной инструкции я буду пользоваться стандартной темой Elementor Hello, а также плагинами Elementor и Elementor Header & Footer Builder. Вы можете использовать свои настройки, на результат это не должно повлиять.
В данный момент у меня уже готова посадочная страница и весь необходимый функционал тоже установлен. Сайт выглядит следующим образом:
Создание меню
Теперь нам потребуется создать меню и этот пункт я решил не опускать. Пойти можно двумя путями: колхозным и нормальным. Меню можно создать в виде блока со ссылками, или кнопками и привязать к ним якоря для навигации — это плохой способ и я не рекомендую им пользоваться, но встречал и такое. Второй способ описывается с этого момента и далее.
Для создания меню, нам потребуется перейти по пути: административная панель > внешний вид > меню > создать новое меню. Выглядит этот раздел, с уже созданным меню, так:
В принципе ничего сложно, главное накидать элементы (пункты) меню через «произвольные ссылки», что бы иметь возможно редактировать путь, по которому идет пользователь при клике по элементу. На данном этапе можно заменить ссылки на «#».
Создание хедера
В моем случае, как упоминалось ранее, я пользуюсь плагином «Elementor Header & Footer Builder». Для создания хедера с его помощью, мне нужно перейти в Elementor Header & Footer Builder > Создать новый > Пройти настройки > Сохранить изменения. Учитывая то, что все плагины для Elementor выделяются простотой и удобством, ваш путь создания хедера будет мало чем отличаться, вне зависимости от используемого «ПО».
Теперь нам потребуется перейти в настройку «Редактировать в Elementor». Тут мы можем использовать стандартные фишки плагина и создавать такой внешний вид меню, какой хотим. Особенно, если меню статичное (не двигается при скролле).
Небольшой лайфхак: если вы хотите чтобы ваше меню показывалось поверх содержимого страницы корректно, в расширенных настройках блока выставьте отступ снаружи -90px и в разделе «макет» в пункте «минимальная высота» введите значение, равное 90px. Число можно заменить на свое, главное чтобы цифра без знака совпадала.
Создаем якоря
Если вы выставили в настройках вашего хедера отображение по всему сайту, то при переходе на главную страницу, мы уже должны видеть наше меню:
Но при клике по меню ничего не происходит… Оно и понятно, пока некуда переходить и никакие ссылки не привязаны к пунктам меню. Чтобы это исправить, переходим в редактирование страницы в Elementor. В сайдбаре элементов находим с помощью поиска «Якорь»:
И вставляем его перед тем блоком, куда должен вести пункт меню (к которому мы применим все необходимые настройки позднее). У якоря в Elementor есть всего одна настройка — инпут. Здесь мы (желательно на латинице) вводим название нашего блока. Оно может быть любым, на ваше усмотрение. Такую же операцию проделываем со всеми блоками, к которым вы хотите создать возможность перехода из меню.
Возвращаемся к меню
По уже знакомому нам пути: административная панель > внешний вид > меню > создать новое меню, мы переходим в меню и в каждом пункте меню вместо «#» прописываем «#punkt», где «punkt» — название каждого из ваших блоков, прописанное на предыдущем этапе.