Онлайн-обучение. Создаём интернет-магазин с нуля для slon21veka! Этап 4: установка шаблона сайта.

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

На прошлом этапе мы русифицировали панель управления нашим сайтом и стало намного понятнее и приятнее работать.

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

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

Для начала, давайте посмотрим какие шаблоны уже установлены и готовы к использованию на нашем сайте. Переходим через верхнее меню: Расширения - Шаблоны - Стили

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

Нажмите на звёздочку в колонке "По умолчанию", чтобы изменить существующий шаблон.
Я назначил, для проверки, шаблон Beez3 - Fruit Shop. Посмотрим как изменился внешний вид сайта?

Неплохо, но не совсем то, что хотелось бы. Давайте поищем подходящий нам шаблон.

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

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

Для этого перейдём в меню: Компоненты - Менеджер расширений - Установка

Нам предлагают 3 варианта установки:
1. Загрузить файл пакета - В этом случае выбирается файл архива по нажатию кнопки "Выберите файл".
2. Установить из каталога - Указываем путь к каталогу содержащему файлы для установки.
3. Установить из URL - указываем интернет-адрес интересующего нас пакета установки.

Однако, не любой из перечисленных способов нам подойдёт. Это зависит от того, как реализован инсталлятор в скаченном вами компоненте. Как определить какой способ выбрать? Самый простой вариант - попробовать!

Я попытался загрузить скаченный архив через первую вкладку, но, после нажатия на кнопку "Загрузить и установить" получил ошибку. Не беда - попробуем второй способ!
Для этого мне нужно было распаковать архив в какую либо папку на своём компьютере и указать на 2й вкладке путь к ней.

Я воспользовался временным каталогом tmp, расположенным в папке с нашим сайтом.
Проверить и установить! На этот раз установка прошла успешно:

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

Возвращаемся в меню: Расширения - Шаблоны - Стили и ставим новый шаблон "по умолчанию" для всех страниц, также как мы это делали выше.

Готово! Самое время ещё раз взглянуть на то как изменился наш сайт.

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

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

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

Скриншоты автора

—