Документация для шаблона Consultant

Для начала

Спасибо за покупку шаблона!

Для начала установки шаблона перейдите в Панель Управления (дальше ПУ) Вашим сайтом (http://ваш-сайт.ucoz.ru/admin), и активируйте все необходимые модули.

Разархивируйте и перейдите в папку с шаблоном, в которой будут находиться 6 папок с различными цветовыми схемами (название папки соответствует цветовой схеме шаблона). Выберите необходимую Вам цветовую схему и перейдите в папку с ней.

Структура файлов и папок.

В папке с выбранной Вами цветовой схемой будут находиться такие файлы и папки (более подробное объяснение о структуре файлов и папок):

  • «_Исходные Файлы» - папка со всеми исходными файлами шаблона (то есть, не минимизированными файлами основного стиля и основного скрипт-файла).
  • «Информеры» - здесь вы найдете код основных информеров для вашего сайта.
  • «Модули» - в этой папке находится все разработанные модули для Вашего сайта, а также код двух глобальных контейнеров и код формы обратной связи.
  • «Файлы» - папка содержит все файлы, необходимые для правильной работы шаблона. Содержимое этой папки нужно загрузить на сервер.
  • «style.txt» - файл стилей.
  • «tmpl.txt» - код который необходим для установления шаблона через конструктор шаблонов сервиса uCoz.

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

Для начала перейдите в папку «Файлы», и загрузите файлы и папки на сервер (при этом следует соблюдать структуры файлов и папок).

Загрузить файлы на сервер можно двумя способами:

1. Через встроенный файловый менеджер ПУ: Главная - Файловый менеджер.

2. Через FTP-менеджер. Более подробную информацию вы можете найти здесь.

После загрузки всех файлов из папки «Файлы», Ваш файловый менеджер должен выглядеть со структурой вот так:

uCoz file manager

Установка дизайна сайта

Зайдите в Настройки - Общие настройки.

Найдите и измените версию библиотеки jQuery с 1.7.2 на 1.10.2 (Версия библиотеки jQuery: jquery-1.10.2.js).

Задайте параметр "Значение тега <!DOCTYPE>:"

<!DOCTYPE html>

Site Settings

Теперь, перейдите во вкладку Дизайн - Конструктор шаблонов. Скопируйте в форму «Конструктора шаблонов» содержимое файла tmpl.txt и нажмите «Создать шаблоны».

Далее, перейдите во вкладку Дизайн - Управление дизайном (CSS). Скопируйте в форму «Таблица стилей (CSS)» содержимое файла style.txt и нажмите «Сохранить».

Перейдите во вкладку Дизайн - Управление дизайном (шаблоны), на странице, что загрузилась перейдите по ссылке «Первый контейнер». В форме «Первый контейнер» замените всё содержимым файла Первый контейнер.txt (файл находиться в папке Модули) и нажмите «Сохранить».

Далее, вернитесь во вкладку Управление дизайном (шаблоны), перейдите по ссылке «Глобальные блоки». На странице «Глобальные блоки» нажмите на кнопку «Добавить блок». Укажите название блока - PROMO

Если у вас уже есть блок с названием «PROMO» - ничего создавать и пересоздавать не нужно!

Перейдите во вкладку Дизайн - Управление дизайном (шаблоны), перейдите в глобальный блок «PROMO». В форме «PROMO» вставьте код из файла PROMO.txt (файл находиться в папке Модули) и нажмите «Сохранить».

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

Mail Form

Скопируйте код из файла Форма обратной связи.txt и вставьте с заменой в форму управления дизайном.

Установка дизайна модулей сайта

В папке «Модули» Вы найдете разработанные модули для uCoz. Для установки модуля (например, блог), Вам необходимо будет перейти во вкладку Дизайн - Управление дизайном (шаблоны) и найти на странице «Блог». Зайти в папку «Блог», в ней будут находиться такие файлы:

Вид материалов.txt

Страница материала и комментариев к нему.txt

Вам нужно будет скопировать содержимое файла Вид материалов.txt, и заменить им, «Вид материалов» в ПУ сайтом в графе «Блог".

Далее, Вам нужно будет скопировать содержимое файла «Страница материала и комментариев к нему.txt», и заменить им, «Страница материала и комментариев к нему» строки от 32 - 45.

Т.е Вам нужно заменить содержимое ТОЛЬКО от строки 32 (<!-- <body> -->), к строке 45 (</table>).

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

Blog Page

Модули: Гостевая книга, Комментарии, Опросы содержат только один файл - файл Вид материалов (Гостевая книга еще файл - Форма добавления сообщений.txt), содержимым которого нужно просто полностью заменить, без каких либо условий, вид материалов соответствующего модуля.

Далее, переходим к модулю Новости сайта (Наши работы).

Переходим в папку Новости сайта.

Скопируйте содержимое файла Вид материалов.txt, и замените им, «Вид материалов» в ПУ сайтом в графе «Новости сайта".

Скопируйте содержимое файла Страница архива материалов.txt, и замените им 32 строку (<!-- <body> -->).

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

News Arch Page

Далее, Вам нужно будет скопировать содержимое файла «Страница материала и комментариев к нему.txt», и заменить им, «Страница материала и комментариев к нему» строки от 32 - 45.

Т.е Вам нужно заменить содержимое ТОЛЬКО от строки 32 (<!-- <body> -->), к строке 45 (</table>).

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

News Page

Перейдите в папку «Форум».

Скопируйте содержимое файла «Общий вид страниц форума.txt», и замените им, «Общий вид страниц форума» строки от 25 (<div class="forumContent">) - 39 ($BODY$</div><br />).

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

Forum Page

Замена стандартных надписей

В ПУ перейдите по ссылке «Замена стандартных надписей".

Откройте ссылку «НАЗВАНИЯ МОДУЛЕЙ» и измените «Новости сайта» на «Наши работы» и нажмите «Сохранить».

Откройте ссылку «НОВОСТИ САЙТА» и измените «Архив новостей» на «Архив работ» и нажмите «Сохранить».

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

Перейдите по ссылке Наши работы - Настройки модуля, и установите:

"Количество материалов на главной странице:" 6

"Количество материалов на странице в категории:" 6

"Количество материалов на странице в архиве:" 6

После изменений нажмите «Сохранить».

Перейдите по ссылке Блог - Настройки модуля, и установите:

"Количество материалов на главной странице:" 3

"Количество материалов на странице в категории:" 3

После изменений нажмите «Сохранить».

Установка информеров

После успешной установки модулей, перейдите по ссылке Главная - Информеры и создайте информеры (нажмите на кнопку «Создать информер») в соответствующем порядке:

1. Наши работы

Название информера: Наши работы

Раздел: Новости сайта

Тип данных: Материалы

Способ сортировки: Дата добавления материала A

Количество материалов: 6

Количество колонок: 1

Нажмите на кнопку «Управление дизайном информера», и вставьте с заменой код из файла «Наши работы.txt»

2. Наш интересный блог

Название информера: Наш интересный блог

Раздел: Блог

Тип данных: Материалы

Способ сортировки: Дата добавления материала A

Количество материалов: 3

Количество колонок: 1

Нажмите на кнопку «Управление дизайном информера», и вставьте с заменой код из файла «Наш интересный блог.txt»

Слайдер и футер

В слайдер и в блок футера "Полезное" информация добавляется в ручном режиме.

Информация в слайдере имеет простую структуру:

<div>
<div class="mainCenterView">
<h1>
<span>
<a href="тут_ссылка_на_материал">Название материала</a>
</span>
</h1>
</div>
</div>

Этот код нужно вставлять в div-блок с id = sliderPlace

ЕСЛИ у Вас нет необходимых знаний HTML, Вы можете использовать стандартные функции конструктора uCoz - создать новый информер, который будет автоматически выводить необходимый Вам материал.

Для этого, перейдите по ссылке Главная - Информеры и создайте новый информер.

Название информера: Слайдер

Раздел: Блог

Тип данных: Материалы

Способ сортировки: Рейтинг материала A

Количество материалов: 3 (можно любое количество, но оптимально - 2-6)

Количество колонок: 1

Нажмите на кнопку «Управление дизайном информера», и вставьте с заменой код из файла «Слайдер.txt», что находиться в папке «Слайдер».

Далее, перейдите по ссылке Управление дизайном - Верхняя часть сайта и удалите все в диапазоне строк 38 (<div>) - 64 (</div>)

На место удаленного напишите код вызова информера (например, $MYINF_3$).

Информация в блоке футера «Полезное» имеет следующую структуру:

<li><a href="тут_ссылка_на_материал">Название материала</a></li>

Этот код нужно вставлять в ul-список на 34 строке дизайна "Нижней части сайта"

ЕСЛИ у Вас нет необходимых знаний HTML, Вы можете использовать стандартные функции конструктора uCoz - создать новый информер, который будет автоматически выводить необходимый Вам материал.

Для этого, перейдите по ссылке Главная - Информеры и создайте новый информер.

Название информера: Футер

Раздел: Блог

Тип данных: Материалы

Способ сортировки: Количество просмотров A

Количество материалов: 6 (можно любое количество, но оптимально - 4-8)

Количество колонок: 1

Нажмите на кнопку «Управление дизайном информера», и вставьте с заменой код из файла «Полезное».txt», что находиться в папке «Футер».

Далее, перейдите по ссылке Управление дизайном - Нижняя часть сайта и удалите все в диапазоне строк 35 (<li><a) - 41 (</a></li>)

На место удаленного напишите код вызова информера (например, $MYINF_4$).

Блоки на главной странице

Блок «Что мы делаем?» формируется на 5 строке (внутри блока div class="inner") в глобальном блоке «PROMO»

По умолчанию, в шаблоне используется 3 блока информации об услуги. Вы можете добавить необходимое Вам количество Ваших услуг в диапазоне 2-6.

Конструкция необходимая для вставки в этот блок выглядит так:

<div class="viewWhatWeDo w3">
<h3>Название блока услуг</h3>
<ol>
<li>Название услуги №1</li>
<li>Название услуги №2"</li>
<li>Название услуги №N"</li>
</ol>
</div>

Обратите внимание на класс w3. Этот класс отвечает за количество блоков информации об услугах в целом. Т.е если Вы добавили 4 блока информации об услугах, то у каждого из должно быть w4, если 2 тарифных плана - w2, если 6 - w6.

Блок «Цифры о нас» формируется на 45 строке (внутри блока div id="numberArea") в глобальном блоке «PROMO»

По умолчанию, в шаблоне используется 4 блока информации. Вы можете добавить необходимое Вам количество Вашей информации в диапазоне 2-6.

Конструкция необходимая для вставки в этот блок выглядит так:

<div class="singleNumber4">
<i class="flaticon-businessmen26"></i>
<span>цифра</span>
<small>информация</small>
</div>

Обратите внимание на класс singleNumber4. Этот класс отвечает за количество блоков информации в целом. Т.е если Вы добавили 3 блока информации, то у каждого из должно быть singleNumber3, если 2 тарифных плана - singleNumber2, если 6 - singleNumber6.

Инструкция по настройке автозаполнения

«Стоимости услуг» формируется на 109 строке (внутри списка ul id="tarPlans") в глобальном блоке «PROMO»

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

Конструкция необходимая для вставки в этот список выглядит так:

<li>
<div class="priceDesc">
<p>Название услуги</p>
<p data-price="цена (например, 200)" class="tac">от цена (например, 200) USD</p>
</div>
</li>

ОБЯЗАТЕЛЬНО указывайте ЦИФРУ в аттрибуте data-price.

Вы можете просто и быстро изменить текст который формируется под блоком с услугами.

Cost Services

Для этого перейдите на 158 строку в глобальном блоке «PROMO». Вы увидите такой код:

<p id="priceTabText" class="tac" data-text="Вы выбрали {{count}} шт. на сумму {{price}} USD. Для более подробной информации {{link}}." data-link="отправьте форму" data-contact="Здравствуйте!{{e}}Меня интересует более подробная информация об услугах:{{e}}">Нажмите на необходимую вам услугу...</p>

data-text, data-link, data-contact - Вы можете изменить любой атрибут на ваше усмотрение.

data-text - текст, который формируется под блоком с услугами (см. выше).

При изменении data-text вы можете использовать такие переменные:

{{count}} - количество выбранных услуг

{{price}} - цена выбранных услуг

{{link}} - ссылка для прокрутки к автозаполнению формы

data-link - текст ссылки.

data-contact - текст, который отправляется автоматически в форму обратной связи.

При изменении data-text вы можете использовать одну переменную {{e}} - это перенос строки.

Список всех услуг формируется после текста data-contact. После изменения текста обязательно поставьте переменную переноса строки {{e}}

«Абонентское обслуживание» формируется на 168 строке (внутри блока div id="tarPlans") в глобальном блоке «PROMO»

По умолчанию, в шаблоне используется 4 тарифных плана. Это максимально возможное количество тарифных планов. Вы можете добавить тарифных планов в диапазоне от 2-4.

Конструкция необходимая для вставки в этот список выглядит так:

<div class="plan nr4">
<div class="planHeader">Название тарифного плана</div>
<div class="planPrice"><span data-before="$" data-after="USD">Цена</span></div>
<ul>
<li>Услуга №1</li>
<li>Услуга №2</li>
</ul>
<div class="planBuy"><a href="/" data-contact="Здравствуйте!{{e}}Меня интересует более подробная информация о тарифном плане «Название тарифного плана».{{e}}" data-topic="Тарифный план «Название тарифного плана»">Заказать</a></div>
</div>

Обратите внимание на класс nr4. Этот класс отвечает за количество тарифных планов в целом. Т.е если Вы добавили только 3 тарифных плана, то у каждого из должно быть nr3, если 2 тарифных плана - nr2.

data-before используется для указания символа валюты, а data-after для трёхбуквенного кода валют.

data-before и data-after - может использоваться на Ваше усмотрение.

Текст для автозаполнения формируется в блоке div class="planBuy", а точнее в атрибутах data-contact и data-topic.

В атрибуте data-contact Вы можете использовать переменную {{e}} - перенос строки.

data-contact - текст, который отправляется автоматически в форму обратной связи в поле "Текст сообщения".

data-topic - текст, который отправляется автоматически в форму обратной связи в поле "Тема письма".

data-contact и data-topic - Вы можете изменять на Ваше усмотрение.

ЧаВо

1. Работает ли в шаблоне конструктор блоков?

- Да.

2. Сколько можно добавить слайдов в слайдер?

- Любое необходимое Вам количество, но оптимально 1-6.

3. Сколько можно создать блоков с информацией внутри блока "Что мы делаем"?

- 1-6.

4. Сколько можно создать блоков с информацией внутри блока "Цифры о нас"?

- 1-6.

Частые вопросы будут пополняться по мере возможности и необходимости.