[Онлайн обучение] Создаём интернет-магазин с нуля для slon21veka! Этап 6: Создание простого HTML-модуля и собственного меню

Ссылки на предыдущие уроки:

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

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

Для этого опять перейдём в настройки стиля шаблона и выберем вкладку Menu. И в поле Position установим значение slider.

Сохраним и посмотрим, что получилось.

Меню переместилось в нужную позицию, но картинка в шапке сайта пропала. Почему так получилось? Дело в том, что неиспользуемые под модули позиции в шаблоне скрываются. Наша картинка определялась, как свойство фона и пока модуль с главным меню находился в позиции Header - она отображалась. Как только мы переместили меню - позиция скрылась вместе с картинкой.

Что же делать? Да просто создадим свой собственный модуль и поместим его в позицию Header!

Переходим: Расширения - Модули и нажимаем кнопку Создать

Нам предлагают выбрать тип модуля. Сейчас нам нужен HTML-код.

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

Просто сделайте в нём всё, что хотите видеть в конкретной позиции сайта. К примеру, можно создать надпись и задать ей нужный цвет, шрифт, размер и стиль:

Я специально сделал несколько отступов перед надписью, чтобы она отображалась внизу картинки.

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

Совсем другое дело! Конечно, над дизайном ещё придётся поработать, но это уже дело техники.

Создаём собственное меню.

Рано или поздно нам придётся создать своё собственное меню. Давайте посмотрим как это делается.

Переходим: Меню - Менеджер меню - Создать меню

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

Мы создали объект меню, но чтобы оно отобразилось на сайте, необходимо присвоить ему какой-нибудь модуль.

В списке менеджера меню висит для нас подсказка, в виде синей кнопки напротив только что созданного меню: Добавить модуль для этого меню. Нажмём на неё.

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

Но и это ещё не всё! Мы создали меню, но до сих пор не создали ни одного пункта.
Переходим: Меню - MyMainMenu - Создать пункт меню

Откроется следующее окно:

Здесь самое главное - правильно выбрать тип пункта меню. В большинстве случаев этот тип - Материал, т.е. заранее приготовленная статья, которую мы выбираем в поле Выбор материала.

Но о том, как создавать материалы и о том, какие ещё существуют типы пунктов меню, мы поговорим с вами в следующем уроке.

Спасибо за внимание и поддержку!
Автор поста @manavendra
—