Как настроить навигационное меню Elementor и виджет портфолио Elementor (учебник)

Вы хотите улучшить пользовательский опыт вашего сайта WordPress с помощью прибыльного дизайна? Вы как раз в нужном месте, если этот вопрос витает у вас в голове.

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

61% пользователей пробуют другой сайт, если не могут быстро найти то, что ищут.

Google

Итак, что может помочь вам разработать структуру вашего веб-сайта для лучшего взаимодействия с пользователем?

В сегодняшнем учебном посте мы покажем, как вы можете улучшить взаимодействие с пользователем на своем веб-сайте, используя навигационное меню и виджет портфолио на своем сайте Elementor.

Начнем с виджета Elementor Nav Menu .

Что такое навигационное меню Elementor?

Меню навигации или навигационное меню — это сегмент веб-сайта, который одновременно демонстрирует все важные кликабельные ссылки. Если пользователи заходят на сайт, они могут щелкнуть каждую ссылку, чтобы найти предпочитаемый контент на сайте. Навигационное меню может быть представлено по-разному. Например, по горизонтали, по вертикали и в раскрывающемся списке .

В зависимости от шаблона вашего сайта, вы можете выбрать любой из них. Но мы рекомендуем вам использовать наиболее совместимый вариант, соответствующий дизайну вашего сайта.

Вот пример текущего меню Happy Addons. Выглядит здорово и просто. Постарайтесь, чтобы меню вашего веб-сайта было таким, как это, и включало все важные ссылки.

Как работает навигационное меню Elementor (типы навигационного меню)

Мы знаем, что виджет Elementor Nav Menu имеет три типа шаблонов, которые вы можете использовать на своем сайте WordPress. Как и другие виджеты Elementor, виджет навигационного меню также прост в реализации и полностью гибок. Даже вам не нужно использовать какие-либо сторонние расширения для применения этого виджета.

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

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

Горизонтальное меню навигации

Используя этот шаблон, меню будет расширено по горизонтали слева направо. Этот дизайн-макет специально предназначен для пользователей, которые хотят, чтобы их веб-сайт был простым и аккуратным. Например, для профессионалов, общественных деятелей, новостных порталов и других типов веб-сайтов Elementor.

Вертикальное меню навигации

Как и горизонтальное меню, вертикальное меню расширяет меню сверху вниз. Этот макет выглядит великолепно, модно и просто. Вы можете применить этот макет на своем сайте Elementor, если ваш сайт представляет недвижимость, образование или любое онлайн-агентство.

Узнайте больше: Как создать целевую страницу с высокой конверсией для онлайн-бизнеса

Выпадающее меню навигации

Он выглядит вертикальным, но после нажатия кнопки раскрывающегося списка откроется меню. Вы можете использовать этот простой, но красивый макет, если хотите сохранить место в разделе заголовка. Достаточное пространство дает пользователям хороший обзор веб-сайта, включая логотип, текст заголовка, кнопки социальных сетей и многое другое.

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

Как добавить меню в Elementor

Ниже мы покажем вам пошаговый процесс добавления навигационного меню Elementor на ваш сайт WordPress.

Предпосылки

• WordPress сайт
• Элементор (БЕСПЛАТНО)
• Элементор (Про)

Допустим, у вас есть существующий сайт WordPress. И вы установили как Elementor БЕСПЛАТНО, так и версию Pro. Навигационное меню является премиальной функцией. Поэтому вы должны приобрести профессиональный пакет, прежде чем использовать этот виджет.

Шаг первый: откройте новую страницу

• Выберите холст Elementor и нажмите кнопку « Редактировать с помощью Elementor ».

Шаг второй: добавьте раздел

• Выбрав Elementor Canvas , вы получите новый интерфейс. Для этого нажмите на красную кнопку (+) . А затем выберите предпочтительный раздел, который вы хотите использовать. В нашем случае мы выбрали второй шаблон.

• После выбора второго шаблона вы можете увидеть два раздела в верхней части экрана.

• Теперь найдите виджет «Меню навигации» на панели поиска Elementor.

• Найдя его, перетащите виджет в понравившийся раздел. Мы рекомендуем вам вставить его в правой части раздела.

• Как только вы добавите меню в раздел, оно сразу появится.

Если вы не знаете, как создать меню в WordPress, ознакомьтесь с руководством здесь.

Шаг третий: настройка навигационного меню

Итак, все готово для настройки меню вашего сайта. В этой настройке вы можете использовать три важные части.

• Содержание
• Стиль
• Передовой

Настройка контента

В содержании можно найти два варианта. Ссылка на макет и обертку . Теперь нажмите на кнопку Макет . Вы найдете все соответствующие параметры настройки для вашего дизайна меню.

• Меню : выберите меню, которое вы создали на своем сайте WordPress.
• Макет : доступны три типа макетов. Горизонтальные, вертикальные и раскрывающиеся.
• Align : Чтобы изменить выравнивание вашего меню.
• Указатель : добавьте их, чтобы сделать ваше меню более привлекательным. Например, подчеркивание, надчеркивание, рамка, текст и т. д.
• Анимация : с его помощью вы можете добавить анимацию в свое меню. Например, исчезновение, сжатие и многое другое.
• Раскрывающийся список Modile : проверьте, является ли ваш дизайн адаптивным для мобильных устройств или нет.

• Давайте посмотрим, как вы можете добавить макет на этот виджет

• Таким же образом вы можете применить анимацию к виджету.

Настройка стиля

После первоначальной настройки вы можете стилизовать меню. Для этого нажмите на кнопку « Стиль» . И вы найдете две опции – Главное меню; Выпадающий .

• Давайте посмотрим, как вы можете быстро добавить функции в виджет навигационного меню Elementor. Здесь вы можете изменить цвет текста, ширину, отступы, вертикальные отступы и пробел.

• Чтобы добавить цвета при наведении курсора, нажмите на него и измените предпочтительные цвета, которые хотите добавить.

Расширенные возможности

Благодаря расширенным функциям вы можете сделать больше с вашим текущим дизайном. Такие как эффекты движения, фон, эффект границы, маскирование, позиционирование, отзывчивость, настраиваемый CSS и многое другое.

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

Вот как вы можете добавить виджет меню Nav на свой сайт Elementor. Мы просто попытались показать, как эта функция работает, и применить ее к дизайну. Теперь ваша очередь применять их один за другим.

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

Что еще вы можете добавить с помощью навигационного меню Elementor?

• Подчеркивание анимации
• Фоновая анимация
• Текстовые анимации
• Расстояние между меню и выравнивание
• Цвет, фон и типографика
• И больше

Таким образом, используя эти функции, вы можете улучшить структуру меню WordPress и придать ему стандартный вид. Но помни; попытайтесь реализовать их, выполнив соответствующие шаги. Например, вы можете попробовать один за другим на вашем локальном сервере. После того, как вы подтвердите окончательный дизайн, примените его на своем действующем сайте. Попробуйте попрактиковаться в этом правиле, если вы не хотите ломать формирование шаблона вашего сайта.

Дополнительный совет: представляем виджет мегаменю Happy Addons

Помимо объединения этих функций с меню вашего веб-сайта, вы можете добавить более продвинутые функции с помощью виджета мегаменю Happy Addons. Вы можете создавать мегаменю, такие как Dribble, InVision, Bobbi Brown, Adidas, Puma, Evernote и многое другое, исходя из своего воображения.

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

Вот краткое руководство, которое вы можете просмотреть, чтобы узнать о виджете мегаменю Happy Addons.

Чтобы получить подробное руководство, вы также можете ознакомиться с официальной документацией, чтобы узнать, как работает этот виджет и процесс подачи заявки.

Как настроить свой сайт WordPress с помощью виджета портфолио Elementor

Здесь мы поговорим о еще одной премиальной функции Elementor — виджете портфолио . После настройки навигационного меню Elementor вы можете украсить внешний вид своего сайта, применив виджет портфолио. Этот виджет помогает отображать ваши сообщения, страницы и пользовательские типы сообщений в привлекательной, фильтруемой сетке. Для завершения процесса требуется всего несколько шагов. Таким образом, вы можете легко использовать этот виджет на своем сайте.

Однако давайте посмотрим, как добавить портфолио с помощью Elementor. Мы предполагаем, что у вас уже есть сайт-портфолио, созданный с помощью Elementor. Если нет, вы можете прочитать статью, чтобы узнать, как создать сайт-портфолио с помощью Elementor.

Шаг первый: создайте страницу

Прежде всего, откройте страницу, на которую вы хотите добавить виджет портфолио. Затем нажмите «Редактировать с помощью Elementor ».

После этого откроется ваше дизайнерское полотно. Точно так же, как вы добавили виджет навигационного меню Elementor, вы можете добавить этот виджет.

Шаг второй: добавьте виджет портфолио

Найдите виджет «Портфолио» в строке поиска и перетащите его на холст.

Примечание . Виджет «Портфолио» работает ТОЛЬКО с записями, страницами и пользовательскими типами записей. Виджет портфолио НЕ работает с галереями.

Шаг третий: настройте виджет портфолио

Как только вы добавите виджет, ваши посты автоматически появятся на экране.

Вся настройка состоит из трех частей. Содержание, стиль и продвижение .

Содержание

• Столбцы: установите количество столбцов, отображаемых в виджете.
• Количество сообщений: установите точное количество сообщений, которые будут отображаться в виджете.
• Размер изображения: установите размер изображений.
• Соотношение предметов: установите соотношение предметов
• Показать заголовок: выберите, показывать или скрывать заголовок. Название будет отображаться при наведении курсора на изображения
• HTML-тег заголовка: оберните заголовок тегом H1…H6, span, div или абзацем.

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

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

Стиль

• Зазор между элементами: Установите точный зазор между элементами.
• Rows Gap : Установите точный зазор между рядами элементов.
• Радиус границы : установите радиус границы для изображений, чтобы контролировать округлость углов.
• Цвет фона : установите цвет фона наложения при наведении курсора на изображение.
• Цвет : установите цвет заголовка сообщения. Заголовок появляется в оверлее при наведении курсора на изображение.
• Типографика : Настройте типографику заголовка.
• Цвет : установите цвет текста панели фильтра.
• Активный цвет : установите цвет активного текста на панели фильтров.
• Типографика : настройка типографики текста панели фильтров.
• Пространство между элементами: установите расстояние между элементами на панели фильтров.
• Интервал фильтра : Установите интервал между полосой фильтра и изображениями.

Расширенные возможности

Вы можете добавить некоторые дополнительные функции в свой дизайн. Такие как поля, отступы, Z-индекс, CSS, эффекты движения, фон, граница, маскирование, атрибуты и многое другое.

Итак, после настройки всех параметров вашего дизайна, вот как он будет выглядеть на вашем действующем сайте.

Однако, если вы хотите добавить более подробный учебник, вы можете посмотреть следующий видеоурок.

Некоторые часто задаваемые вопросы о меню Elementor и виджете портфолио

Заключение

Создание меню сайта требует много кропотливой работы и терпения. Но платформа с открытым исходным кодом, такая как WordPress, облегчает нам задачу. Доступные ресурсы, плагины, документация и другие короткие учебные пособия могут легко помочь любому создать и настроить свои сайты.

Тем не менее, есть несколько способов создать собственное меню WordPress и сайт-портфолио. Вы можете сделать это вручную или следовать процессу, который мы показали выше. Но мы рекомендуем вам избегать ручного процесса. Это может нарушить структуру вашего сайта, если у вас недостаточно опыта в дизайне веб-сайтов.

Чтобы автоматизировать ваш процесс и уменьшить ненужные усилия, виджет навигационного меню Elementor может стать лучшим выбором. А виджет портфолио может помочь вам изменить дизайн вашего сайта, сделав ваши веб-страницы более прибыльными и привлекательными.

Если вы хотите вывести дизайн сайта Elementor на новый уровень, вы можете использовать Happy Addons . Это набор разнообразных функций и виджетов Elementor. Используя их правильно, вы сможете за короткое время обогатить профессиональный вид.