Ур.№5 - Иерархия. Вложенность. Меню. Категории. Метки.

Урок №5 - Иерархия. Вложенность. Меню. Категории. Метки.

1. Цель урока

Новый заголовок

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

2. Понятия и определения

3. Инфоурок

Уровень вложенности меню

Может существовать любое количество уровней вложенности, но как привило, больше 3-х или 4-х уровней вложенности воспринимается тяжело. Рассмотрим пример, четыре уровня вложенности:

  • Первый уровень — сам раздел каталога (1). Вложенность отсутствует.
  • Второй уровень — видны только категории каталога (2).
  • Третий уровень — появляется видимость разделов категорий и иконок (3).
  • Четвертый уровень — становятся видны пункты разделов (4).

 


 

Количество видимых пунктов в меню

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

 


 

Количество видимых пунктов в меню ограничено до 3

 


 

Как сделать в Элементоре меню

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

1. Создайте Elementor меню
Давайте сначала создадим простое меню на панели управления WordPress. Войдите в свой бэкэнд и перейдите в «Внешний вид» > «Меню», расположенный на боковой панели. Найдите «Название меню» и введите название нового меню навигации, затем нажмите большую синюю кнопку, чтобы создать его.

 


 

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

Добавьте в созданное меню требуемые страницы или создайте произвольные ссылки:

Установите требуемое количество уровней вложенности путем перетаскивания (отодвигания вправо) мышкой нужные элементы меню:

Можно создать несколько уровней вложенности сразу:

Обязательно нажмите кнопку «СОХРАНИТЬ МЕНЮ»


 

Так же добавляются «Произвольные ссылки в МЕНЮ:

 


 

Настройка отображения меню (на примере мобильного) на странице и стили показаны в видео ниже.

4. Практикум

Задание №-1

Создайте в административной части сайта меню с произвольными пунктами (ссылки прикреплять не нужно).

Название меню: Пельменная «У Тараса»;

Пункты меню первого уровня: Пельмени, Сурпа, Соусы;

Пункты меню второго уровня, где родительская категория «Соусы»: Тат-тар, Сметанный, Горчичный.

Задание№-2

На странице редактирования задайте требуемые стили отображения меню.

Шрифт: Montserat. // Размер шрифта пунктов меню первого уровня: 24рх. // Размер шрифта пунктов меню второго уровня: 16рх.

Должно получиться как на скриншоте:

В административной части —

На странице редактирования — 

5. Промежуточная проверка

Ошибка: Контактная форма не найдена.

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

×
×

Корзина