С помощью теоретического освоения материала и практического закрепления результата получить практические навыки по созданию элемента сайта — меню. Научиться привязывать к пунктам меню страницы сайта и произвольные ссылки, якоря. Разобрать понятия: иерархия сайта и вложенность меню, категории и метки на сайте. Закрепить пройденный материал прохождением теста по теме.
Иерархическая (древовидная) структура сайта — это структура, в которой страницы организованы в виде иерархии с главной страницей и подразделами.
Она используется для крупных сайтов с разнообразным контентом и организует контент в логическом порядке.
Пример иерархической структуры: корпоративный сайт с главной страницей, разделами по каждому направлению деятельности, контактами сотрудников, блоге о корпоративной жизни, структурой организации, пресс-центром и медиагалереей.
Также встречается многоуровневая иерархическая структура. Она используется для сайтов с глубокой иерархией, где каждый уровень представляет собой подробную категорию информации.
Меню сайта — это список разделов сайта, нажав на которые пользователь осуществляет переходы к ним.
Основные требования, выдвигаемые к интернет-страницам, — быстрый поиск нужной информации и высокая скорость загрузки.
Существует несколько видов меню в зависимости от:
Объёма: главное и второстепенное.
Способа реализации: выпадающее (используется для экономии пространства экрана, появляется при наведении курсора) и раскрывающееся (подкатегории появляются при нажатии на категорию).
Ориентации: вертикальное (в левой или правой части) и горизонтальное (верхняя часть — шапка сайта, хедер).
Дизайна: с эффектами, картинками, иконками, гармошками и т.д.
Вы можете задать уровень вложенности и количество видимых пунктов раздела в меню на каждом уровне для удобства восприятия контента и его структуры.
Категория — это объединение товаров и других категорий в единую группу.
Разделение товаров на категории необходимо:
для организации удобной навигации и поиска по каталогу;
для указания групповых свойств товаров, таких как характеристики и налоги.
Тег, либо тэг (от англ. tag: метка, бирка, ярлык) — ассоциированное ключевое слово, относящееся к какой-либо информации (текст, фото, видео, закладки браузера и другие файлы). Такие метаданные помогают полнее описать эти куски информации и быстро находить их через поисковый запрос. Часто используются для выделения индивидуальных, ярких свойств объекта или товара.
Уровень вложенности меню
Может существовать любое количество уровней вложенности, но как привило, больше 3-х или 4-х уровней вложенности воспринимается тяжело. Рассмотрим пример, четыре уровня вложенности:
Количество видимых пунктов в меню
Отображение всех пунктов в выпадающем меню без ограничений.
Количество видимых пунктов в меню ограничено до 3
Как сделать в Элементоре меню
По умолчанию вам не нужно ничего устанавливать, чтобы создать простое меню для вашего сайта WordPress. Возможно, это не самый элегантный способ или способ с наибольшим количеством возможностей настройки. Но меню WordPress работают достаточно хорошо, чтобы четко направлять посетителей по вашему сайту, и они хорошо выглядят с темой по умолчанию.
1. Создайте Elementor меню
Давайте сначала создадим простое меню на панели управления WordPress. Войдите в свой бэкэнд и перейдите в «Внешний вид» > «Меню», расположенный на боковой панели. Найдите «Название меню» и введите название нового меню навигации, затем нажмите большую синюю кнопку, чтобы создать его.
2. Добавьте и настройте элементы меню навигации.
Ваше Elementor меню мало что даст, если вы не укажете, что в нем есть. Теперь сбоку страницы вы должны увидеть раскрывающиеся списки со страницами, сообщениями, пользовательскими ссылками и категориями на выбор.
Добавьте в созданное меню требуемые страницы или создайте произвольные ссылки:
Установите требуемое количество уровней вложенности путем перетаскивания (отодвигания вправо) мышкой нужные элементы меню:
Можно создать несколько уровней вложенности сразу:
Обязательно нажмите кнопку «СОХРАНИТЬ МЕНЮ»
Так же добавляются «Произвольные ссылки в МЕНЮ:
Настройка отображения меню (на примере мобильного) на странице и стили показаны в видео ниже.
Задание №-1
Создайте в административной части сайта меню с произвольными пунктами (ссылки прикреплять не нужно).
Название меню: Пельменная «У Тараса»;
Пункты меню первого уровня: Пельмени, Сурпа, Соусы;
Пункты меню второго уровня, где родительская категория «Соусы»: Тат-тар, Сметанный, Горчичный.
Задание№-2
На странице редактирования задайте требуемые стили отображения меню.
Шрифт: Montserat. // Размер шрифта пунктов меню первого уровня: 24рх. // Размер шрифта пунктов меню второго уровня: 16рх.
Должно получиться как на скриншоте:
В административной части —
На странице редактирования —
Ошибка: Контактная форма не найдена.
С помощью теоретического освоения материала и практического закрепления результата получить практические навыки по созданию элемента сайта — меню. Научиться привязывать к пунктам меню страницы сайта и произвольные ссылки, якоря. Разобрать понятия: иерархия сайта и вложенность меню, категории и метки на сайте. Закрепить пройденный материал прохождением теста по теме.