[Онлайн-обучение]Создаём интернет-магазин с нуля для slon21veka! Этап 5: Настройка шаблона сайта. Позиции модулей

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

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

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

Заходим: Расширения - Шаблоны - Стили
И нажимаем на название используемого нами стиля.

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

Давайте лучше заглянем на другие вкладки.

Вкладка Style позволяет выбрать и настроить показ логотипа сайта. А также, настроить основные параметры шаблона, такие как:

Стиль заголовка (Header style)
Цвет ссылок (Link Color)
Шрифт текста и его размер (Font Settings)

Настройка этих 3х параметров интуитивно понятна. Разберёмся с настройкой логотипа (Logo).

Прежде всего нужно выбрать логотип, нажав на кнопку Select. Изображение логотипа должно находиться в папке Images, внутри папки нашего сайта.
Переключаем Show в позицию On
Выбираем в каком месте на сайте будет отображаться наш логотип. Для этого выбираем из выпадающего списка Position одно из значений.

Позиции модулей.

Самое время сделать отступление и рассмотреть подробнее, что такое Position и где его искать.
Любой элемент сайта (модуль) имеет собственное место (позицию) для размещения на страницах сайта. Каждая позиция имеет своё название и местоположение, которое определяется шаблоном сайта.

У каждого шаблона свои позиции модулей и, чтобы их наглядно увидеть, необходимо сделать следующие действия:

Включить показ позиции модулей:
Система - Общие настройки - Шаблоны

После сохранения настроек зайдите на свой сайт и в адресной строке допишите /?tp=1

Если всё верно, вы увидите примерно следущее:

Как видите, после слова Position написано название модуля, к примеру top-a и теперь мы наглядно видим где эта позиция находится.

Вернёмся к настройке шаблона. Вкладка Layouts

На данной вкладке мы можем настроить позиции модулей так, как нам нужно.
С помощью свойства Position Count можно разбить одину позицию на несколько. А пользуясь ползунком можно настроить относительную ширину подпопозиций.
Подробнее о настройке позиций модулей можно почитать здесь, а мы идём дальше.

Картинку на фон!

Ещё одна интересная и полезная возможность менеджера настройки шаблона - способность выбирать изображение или цвет фона практически для любой части сайта.

Переходим на вкладку JD ATLANTA

Чтобы выбрать изображение для фона нужно нажать кнопку Select, предварительно поместив изображение в какую-нибудь папку внутри нашего сайта.
К примеру, у нас уже существует папка headers и в ней есть несколько изображений. Выберем одно из них и нажмём "Вставить".

Попробуйте изменить цвет фона ещё какой-нибудь группы позиций, например TOP и давайте посмотрим на результат.

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

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

Автор поста @manavendra

—