Все вопросы отправляйте на email: support@athemes.ru

Начало

Благодарим за покупку данного шаблона!


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

Преимущества:
  • Современный дизайн
  • HTML5 разметка
  • CSS3 анимация
  • Адаптивность
  • Кроссбраузерная верстка
  • Чистый ручной код
  • Нестандартные шрифты
  • Более 700 векторных иконок:
    • Font Awesome — 519 иконок
    • Stroke 7 — 202 иконки
  • Конструктор шаблонов
  • Конструктор меню
  • Конструктор блоков
  • Полная поддержка модуля «Интернет-магазин»:
    • Новое стильное оформление модуля
    • Автоматическая подгрузка товаров при прокрутке страницы
    • Два варианта вида товаров [сетка/список]
    • Информер избранного товара в левой колонке сайта
    • Вкладки на странице товра
  • Обновленный вид материалов блога
  • Обновленный вид материалов фотоальбома
  • Уникальное оформление страниц:
    • Главная
    • О нас
    • Меню ресторана
  • Дополнительные элементы:
    • Слайдер контента на главной
    • Блоки преимуществ
    • Блоки со счетчиками
    • Блоки сотрудников
    • Форма заказа звонка
    • Меню ресторана
    • Прогрессбары
  • Несколько цветовых схем: красная, зеленая, желтая
  • Расширенная документация по установке и настройке шаблона

Примечания:
  • Панель смены цветовой схемы доступна только на демо-сайте. В документации к шаблону описан процесс смены цветовой схемы.
  • Адаптивность гарантируется для модулей и страниц, представленных на демо-сайте шаблона.
  • Под кроссбраузерностью понимается корректное отображение элементов дизайна в последних версиях следующих браузеров: Google Chrome, Mozilla Firefox, Internet Explorer, Opera, Safari


Установка шаблона

Установка шаблона

Установка шаблона займет некоторое время. Пожалуйста, внимательно читайте инструкции и старайтесь следовать всем рекомендациям.

Перед установкой сделайте полный бэкап шаблонов и файлов дизайна на случай, если вы в какой-то момент решите вернуть прежний вид сайту или отдельным его элементам. Сделать это можно в соответствующем разделе: ПУ » Управление дизайном » Backup шаблонов.

Не забудьте активировать все необходимые вам модули. Если модуль активровать после установки шаблона, он не будет выглядеть должным образом. Это особенность всех нестандартных шаблонов для uCoz.


Начало Общие настройки

Общие настройки

Зайдите в раздел общих настроек: ПУ » Настройки » Общие настройки:



Установите следующие значения полей:
  • Дату сегодняшнего дня выводить как "Сегодня": снять галочку
  • Версия библиотеки jQuery: jquery-1.7.2.js
  • При переходе на главную страницу открывать: Главная страница
  • Значение тега <!DOCTYPE>: <!doctype html>
Не рекомендуется использовать визуальный редактор материалов, т.к. он создает сложную структуру кода, оставляя при этом много ненужных тегов. В процессе редактирования материалов данные теги могут оказаться незакрытыми, в результате чего вероятность некорректного отображения элементов дизайна увеличивается. Чтобы отключить визуальный редактор, задайте следующее значение соответствующего поля (рекомендуется, но не обязательно):
  • Тип формы по умолчанию для редактирования материалов: BB-codes + HTML или Чистый HTML

Убедитесь, что вы установили значение тега <!DOCTYPE>, про этот пункт очень часто забывают либо не придают ему особого значения.



Установка шаблона Настройка модулей

Настройка модулей

интернет-магазин


Зайдите в раздел настроек интернет-магазина ПУ » Интернет-магазин » Настройки модуля и установите следующие значения полей:



Зайдите в раздел управления дизайном интернет-магазина ПУ » Управление дизайном » Интернет-магазин



1. Замените шаблон Вид товара в каталоге на код ниже:

Код будет доступен в купленной версии шаблона
2. Замените шаблон Корзина на код ниже:

Код будет доступен в купленной версии шаблона
3. Замените шаблон Вид товара в корзине на код ниже:

Код будет доступен в купленной версии шаблона
4. Замените шаблон Таблица стилей (CSS) на код ниже:

Код будет доступен в купленной версии шаблона

Блог


Зайдите в раздел настроек блога ПУ » Блог » Настройки модуля и установите следующие значения полей:



Рекомендуется активировать поле Краткое описание материала, для этого нужно поставить две галочки напротив него:



Зайдите в раздел управления дизайном блога ПУ » Управление дизайном » Блог



Замените шаблон Вид материалов на код ниже:

Код будет доступен в купленной версии шаблона

Фотоальбомы


Зайдите в раздел настроек фотоальбомов ПУ » Фотоальбомы » Настройки модуля и установите следующие значения полей:



Зайдите в раздел управления дизайном фотоальбомов ПУ » Управление дизайном » Фотоальбомы



Замените шаблон Вид фотографий на код ниже:

Код будет доступен в купленной версии шаблона

Редактор страниц


Зайдите в раздел управления страницами сайта ПУ » Редактор страниц » Управление страницами сайта.

Добавьте новую страницу и назовите ее Меню ресторана.



Для страниц «Главная страница», «Информация о сайте» и «Меню ресторана» нужно задать персональный шаблон. Для этого нажмите изменить информацию напрротив каждой из них



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



Зайдите в раздел управления дизайном ПУ » Управление дизайном и замените шаблон Меню ресторана на код ниже:

Код будет доступен в купленной версии шаблона

Почтовые формы


Зайдите в раздел управления почтовыми формамии ПУ » Почтовые формы » Управление почтовыми формами.

1. Создайте новую форму, это будет форма заказа звонка. Назовите ее, например, «Заказ звонка». В конструкторе полей удалите поле Текст сообщения.



Затем создайте поочередно три текстовых поля со следующими названиями:



Замените шаблон почтовой формы Заказ звонка на код ниже:

Код будет доступен в купленной версии шаблона

2. Создайте еще одну почтовую форму с названием, например, «Напишите нам». Эта форма будет размещена в нижней части главной страницы. В конструкторе полей удалите поле Текст сообщения. Затем создайте поочередно 2 поля типа text и 1 поле типа textarea со следующими названиями:



Замените шаблон почтовой формы Напишите нам на код ниже:

Код будет доступен в купленной версии шаблона
Общие настройки Создание информеров

Создание информеров

Зайдите в раздел управления информерами ПУ » Информеры.


Информер #1 — самые продаваемые товары на главной


Создайте новый информер со следующими параметрами:



Замените шаблон данного информера на код ниже:
Код будет доступен в купленной версии шаблона

Информер #2 — материалы блога на главной


Создайте новый информер со следующими параметрами:



Замените шаблон данного информера на код ниже:
Код будет доступен в купленной версии шаблона

Информер #3 — список материалов блога в нижней части сайта


Создайте новый информер со следующими параметрами:



Замените шаблон данного информера на код ниже:
Код будет доступен в купленной версии шаблона

Информер #4 — материалы фотоальбомов в нижней части сайта


Создайте новый информер со следующими параметрами:



Замените шаблон данного информера на код ниже:
Код будет доступен в купленной версии шаблона

Информер #5 — избранный товар в левой части сайта


Создайте новый информер со следующими параметрами:



Замените шаблон данного информера на код ниже:
Код будет доступен в купленной версии шаблона
Настройка модулей Загрузка файлов

Загрузка файлов

Загрузите содержимое папки /upload/ в корень сайта через FTP.

Инструкцию по переносу файлов через FTP можно найти на официальном форуме uCoz по ссылке: http://forum.ucoz.ru/forum/33-8027-1. Конечно, можно воспользоваться и стандартной загрузкой файлов с помощью файлового менеджера, но это долго, и можно пропустить какой-нибудь файл.

Загрузить нужно именно содержимое папки /upload/, а не ее саму.



Создание информеров Конструктор шаблонов

Конструктор шаблонов

Зайдите в конструктор шаблонов ПУ » Дизайн » Конструктор шаблонов:



Скопируйте код ниже, вставьте его в поле конструктора шаблонов и создайте шаблоны:
Код будет доступен в купленной версии шаблона


Загрузка файлов Таблица стилей (CSS)

Таблица стилей (CSS)

Зайдите в раздел редактирования такблицы стилей (CSS) ПУ » Дизайн » Управление дизайном (CSS):



Замените все содержимое на код ниже:
Код будет доступен в купленной версии шаблона


Конструктор шаблонов Восстановление из бэкапа

Восстановление из бэкапа

Зайдите в раздел резервного копирования шаблонов ПУ » Управление дизайном » Backup шаблонов, найдите там резервную копию **********.zip [**.**.**, **:**] и восстановите шаблоны:



Поздравляем, на этом установка шаблона полностью завершена! Ознакомьтесь, пожалуйста, с инструкциями по настройке шаблона.


Таблица стилей (CSS) Первые шаги

Первые шаги

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

Восстановление из бэкапа Логотип сайта

Логотип сайта

Логотип предстваляет собой обычный текст — это название вашего сайта. Сменить его можно в общих настройках ПУ » Настройки » Общие настройки.



Чтобы заменить текстовый логотип на графический (вставить изображение), необходимо внести кое-какие правки в код. Зайдите в редактирование верхней части сайта ПУ » Управление дизайном » Верхняя часть сайта



Замените $SITE_NAME$ на код вида:
Код будет доступен в купленной версии шаблона
Где /img/logo.png — путь до изображения логотипа.

Рекомендуемая высота изображения логотипа — 90px


Первые шаги Меню сайта

Меню сайта

Меню сайта редактируется с помощью конструктора меню ПУ » Дизайн » Конструктор меню:



Пункты меню можно создавать, перемещать, вкладывать друг в друга (для создания выпадающего меню), а также редактировать и удалять.



Логотип сайта Цветовая схема

Цветовая схема

Если вам нужна стандартная красная тема, то никаких действий уже не требуется. Чтобы сменить цветовую схему, необходимо скопировать CSS желаемой схемы и вставить его в конец таблицы стилей (CSS) вашего сайта.

Код красной цветовой схемы
Код будет доступен в купленной версии шаблона

Код зеленой цветовой схемы
Код будет доступен в купленной версии шаблона

Код желтой цветовой схемы
Код будет доступен в купленной версии шаблона
Меню сайта Тонкая настройка

Тонкая настройка

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

Цветовая схема Иконки

Иконки

В шаблоне используются два иконочных шрифта. Вместе это ровно 721 векторная иконка.

Font Awesome 4.3.0


Официальный сайт шрифта: fontawesome.io.

В данной версии доступно 519 иконок, всю документацию можно найти на официальном сайте, поэтому тут будут описаны лишь основные аспекты работы с ними.

Вы можете разместить иконки практически в любом месте, для этого необходимо вставить HTML-код следующего вида:
Код будет доступен в купленной версии шаблона
Где [icon] — класс, соответствующий каждой иконке (квадратные скобки следует опустить). Например, добавив такой код
Код будет доступен в купленной версии шаблона
мы получим иконку велосипеда: . Данные иконки можно оформлять с помощью CSS почти так же, как и обычный текст: менять размер, цвет, добавлять тени и т.п. Например, раскрасим иконку в красный цвет и увеличим размер, код будет выглядеть так:
Код будет доступен в купленной версии шаблона
Вот что в итоге получилось:


Stroke 7 1.2.0


Официальная страница шрифта: http://www.pixeden.com/icon-fonts/stroke-7-icon-font-set
Список всех иконок: http://themes-pixeden.com/font-demos/7-stroke/index.html
Документация: http://themes-pixeden.com/font-demos/7-stroke/documentation.html

Абсолютно все аналогично шрифту Font Awesome, только нет дополнительного класса, как "fa" у Font Awesome.

Тонкая настройка Главная страница

Главная страница

Все элементы главной страницы редактируются в ее шаблоне ПУ » Управление дизайном » Редактор страниц » Главная страница

Слайдер


Кд слайдера выглядит так:
Код будет доступен в купленной версии шаблона
Код отдельного слайда таков:
Код будет доступен в купленной версии шаблона

Раздел «Немного о нас»


Код данного раздела:
Код будет доступен в купленной версии шаблона
Слева находится изображение повара, его код:
Код будет доступен в купленной версии шаблона
Где /img/chef-1.jpg — путь до этого изображения.

Справа находится список блоков преимуществ. Код каждого блока такой:
Код будет доступен в купленной версии шаблона

Раздел «Как мы работаем»


Код данного раздела:
Код будет доступен в купленной версии шаблона
Код отдельного блока в данном разделе:
Код будет доступен в купленной версии шаблона

Раздел «Интересные факты»


Код данного раздела:
Код будет доступен в купленной версии шаблона
Код каждого блока:
Код будет доступен в купленной версии шаблона


Иконки Страница «О нас»

Страница «О нас»

Все элементы страницы «О нас» редактируются в шаблоне "Информация о сайте" ПУ » Управление дизайном » Редактор страниц » Информация о сайте

Раздел «Команда шеф-поваров»


Код данного блока:
Код будет доступен в купленной версии шаблона
Код отдельного блока:
Код будет доступен в купленной версии шаблона

Раздел «Профессиональные навыки»


Код данного раздела:
Код будет доступен в купленной версии шаблона
Слева расположены блоки с иконками, справа — прогрессбары. Код блока с иконкой выглядит так:
Код будет доступен в купленной версии шаблона


Код каждого прогрессбара:
Код будет доступен в купленной версии шаблона


Главная страница Страница «Меню ресторана»

Страница «Меню ресторана»

Все элементы страницы «Меню ресторана» редактируются в ее шаблоне ПУ » Управление дизайном » Редактор страниц » Меню ресторана

Меню ресторана


Код шапки меню:
Код будет доступен в купленной версии шаблона
Каждый элемент шапки меню это тег <span>. Первый элемент всегда должен иметь класс active. Каждому элементу шапки соответствует вкладка со списком блюд. Значение атрибута data-tab-id элемента шапки должно совпадать с идентификатором вкладки, которой он соответствует.

Если элементы не влезают в одну строку, можно продублировать весь код шапки меню.

Код каждого блюда:
Код будет доступен в купленной версии шаблона

Раздел «Люди выбирают нас»


Код каждого блока данного раздела:
Код будет доступен в купленной версии шаблона


Страница «О нас» Нижняя часть сайта

Нижняя часть сайта

Вся информация в нижней части сайта редактируется в одноименном шаблоне ПУ » Управление дизайном » Нижняя часть сайта



Никаких необычных элементов тут нет, разве что ссылки социальных сетей:
Код будет доступен в купленной версии шаблона


Страница «Меню ресторана» Дополнительный функционал

Дополнительный функционал

Некоторые функции шаблона легко меняются путем изменения значений некоторых переменных в скрипте.
Откройте файл /js/scripts.js, в самом начале объявлены переменные:
Код будет доступен в купленной версии шаблона
  • _tmpl_animated
    Значения: true или false
    Отвечает за включение/отключение анимации элементов шаблона.
    true — включение анимации
    false — отключение анимации

  • _tmpl_viewMode
    Значения: 'grid' или 'list'
    Тип отображения товаров по умолчанию (сетка или список).
    'grid' — сетка
    'list' — список

  • _tmpl_goodsLoad
    Значения: true или false
    Отвечает за включение/отключение подгрузки товаров при прокрутке страницы.
    true — включение подгрузки
    false — отключение подгрузки

  • _tmpl_newDays
    Значения: целые числа
    Количество дней с момента добавления товара, которое будет отображаться значек "NEW".

Нижняя часть сайта Советы и замечания

Советы и замечания

  1. Шаблон после установки отображается криво
    Проверьте, установлено ли значение тега <!DOCTYPE> в общих настройках. Про него часто забывают, даже если в инструкции это написано.
  2. Меню отображается криво или "съехало"
    Вероятно, пункты меню не вмещаются из-за их количества или их размеров. Решение — уменьшить количество пунктов меню, или сократить их названия, например, изменить "Главная страница" на просто "Главная".
  3. Визуальный редактор
    Полезная статья «Почему нужно сказать "нет" визуальному редактору»
  4. Добавление материалов на сайт
    Рекомендуется активировать поле "краткое описание материала" для следующих модулей: новости, блог, каталог статей, каталог файлов. Для этого зайдите в настройки соответствующего модуля и поставьте две галочки напротив поля краткого описание материала:
  5. Доработка шаблона под ваши нужды
    Куда обратиться за помощью на платной основе

Дополнительный функционал