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

Для начала

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

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

Разархивируйте и перейдите в папку с шаблоном, в которой будут находиться 8 папок с различными цветовыми схемами. Откройте файл Цвета.png — номер цвета соответствует номеру цвета выбранной цветовой схемы. Выберите необходимую Вам цветовую схему и перейдите в папку с ней.

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

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

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

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

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

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

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

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

Далее, перейдите в ПУ: Главная - Файловый менеджер загрузите файл 404.htm из папки «Дополнительно».

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

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 и вставьте с заменой в форму управления дизайном.

Перейдите во вкладку Почтовые формы — Управление почтовыми формами.

Нажмите на кнопку «Создать почтовую форму».

Название почтовой формы: Заказать звонок.

Нажмите на кнопку «Создать форму».

Нажмите на  ссылку «Конструктор полей», только что созданной формы.

Form

На странице, что открылась, удалите поле «Текст сообщения», после этого добавьте два новых поля. Нажмите на кнопку «Добавить новое поле»:

Название поля: Имя

Нажмите на «Добавить поле»

Нажмите, еще раз, на кнопку «Добавить новое поле»:

Название поля: Телефон

Обязательно поставьте галочку на «Обязательное поле»

Нажмите на «Добавить поле»

В итоге, форма будет выглядеть так:

Form

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

Form

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

Сохраните изменения.

Если вам необходимо изменить формат номера, перейдите шаблон почтовой формы, и найдите data-mask="+9 (999) 999 99 99".

По умолчанию, формат номера соответствует номеру России. Для Украины используйте +99 (999) 999 99 99, для Беларуси +999 (99) 999 99 99, для Казахстана используйте +9 (999) 999 99 99

Перейдите на сайт. Войдите администраторским аккаунтом на сайт. Перейдите на страницу «Обратная связь» (по умолчанию, http://ваш-сайт.ucoz.ru/index/0-3). Нажмите на иконку «Редактировать HTML-код»

Page Edit Html Code

В форме «Содержимое страницы» замените все содержимым из файла Страница обратной связи.txt (файл находиться в папке Модули) и нажмите «Сохранить».

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

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

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

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

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

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

Т.е Вам нужно заменить содержимое ТОЛЬКО от строки 29 (<!-- <body> -->), к строке 52 (<?endif?>).

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

Blog Page

Далее, оставаясь на той-же странице, прокрутите немного вверх и удалите код от строки 20 - 24 и нажмите на кнопку «Сохранить».

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

Blog Remove

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

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

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

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

Перейдите по ссылке «Страница архива материалов», и на странице, что открылась, на строке 22 замените код $MODULE_NAME$ на текст Портфолио (или Наши работы).

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

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

News Arch Page

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

Т.е Вам нужно заменить содержимое ТОЛЬКО от строки 20 (<div id="page-meta">), к строке 52 (<?endif?>).

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

News Page

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

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

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

Forum Page

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

Скопируйте содержимое файла «Страница поиска.txt», ВСТАВЬТЕ ПОСЛЕ 11 строки (<link type="text/css") «Страница поиска» в ПУ сайтом в графе «Поиск по сайту».

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

Search Page

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

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

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

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

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

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

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

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

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

Поставьте вторую галочку на «Краткое описание материала».

CutText On

"Максимальное количество изображений: " 10

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

 

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

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

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

Поставьте вторую галочку на «Краткое описание материала».

CutText On

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

Перейдите по ссылке Отзывы (Гостевая книга) - настройки модуля, и установите:

"Название модуля:" Отзывы

Снимите галочку с «WWW»

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

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

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

 

Кейсы

Название информера: Кейсы

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

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

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

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

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

Нажмите на кнопку «Управление дизайном информера», и вставьте с заменой код из файла «Кейсы.txt» (папка «Информеры» - 1)

 

Блог

Название информера: Блог

Раздел: Блог

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

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

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

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

Нажмите на кнопку «Управление дизайном информера», и вставьте с заменой код из файла «Блог.txt» (папка «Информеры» - 2)

Слайдер

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

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

<div class="slide">
<div class="info">
<h2>Название материала</h2>
<a class="link-buy" href="Тут ссылка на материал">Подробнее</a>
</div>
</div>

Этот код нужно вставлять в div-блок с class = owl-carousel (Верхняя часть сайта - строка 48)

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

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

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

Раздел: Блог (или другой необходимый вам раздел)

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

Способ сортировки: Рейтинг материала D (или любой другой способ сортировки)

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

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

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

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

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

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

Блок «Предоставляемые Услуги» формируется на 8 строке (внутри блока div class="clearfix") в глобальном блоке «PROMO»

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

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

<div class="offer-block">
<div class="icon">
<i class="flaticon-command"></i>
</div>
<div class="body">
<h4 class="offer-header">Название услуги</h4>
<div class="offer-text">Описание услуги.</div>
<div class="tac"><a href="Ссылка_на_страницу">Подробнее</a></div>
</div>
</div>

Блок «Почему нужно выбрать нас?» формируется на 66 строке (внутри блока div class="clearfix") в глобальном блоке «PROMO»

Иконка задается внутри блока div class="icon".

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

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

<div class="why-block" data-number="1">
<div class="icon"><i class="flaticon-telescope"></i></div>
<div class="font">Название</div>
<div class="body">Описание</div>
</div>

Обратите внимание на data-number="1". Номер в этом коде, отвечает за вывод числа в блоке «Почему нужно выбрать нас?». Иконка задается внутри блока div class="icon".

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

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

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

<div class="review-single">
<div class="review-name">
<div>Имя</div>
Компания
</div>
<hr/>
<div class="font">Текст отзыва</div>
</div>

Блок «Процесс работы» формируется на 184 строке (внутри блока div class="clearfix") в глобальном блоке «PROMO»

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

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

<div class="stage">
<div class="stage-number">1</div>
<div class="stage-description">
<div class="font">Название</div>
<div class="body">Описание</div>
</div>
</div>

Обратите внимание на <div class="stage-number">1</div>. Номер в этом коде, отвечает за вывод числа в блоке «Процесс работы».

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

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

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

<li>
<div class="price-title">Название </div>
<div class="price-body">
<div class="price-body-text">Описание услуги<div>
<div class="price-a">Цена</div>
</div>
</li>

Блок «Абонентское обслуживание» формируется на 281 строке (внутри блока div class="clearfix") в глобальном блоке «PROMO».

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

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

<div class="plan pl4">
<div class="head" data-title="Название для автозаполнения">Название</div>
<div class="price font">Цена</div>
<div class="features">
<ul>
<li>Название услуги №1</li>
<li>Название услуги №2"</li>
<li>Название услуги №N"</li>
</ul>
</div>
<div class="more"><a href="/" class="to-contact-js">Подробнее</a></div>
</div>

Обратите внимание на класс pl4. Этот класс отвечает за количество блоков информации об услугах в целом. Т.е если Вы добавили 4 блока информации об услугах, то у каждого из должно быть pl4, а если 3 тарифных плана – pl3.

По умолчанию, при нажатии на ссылку «Подробнее», произойдет плавное автозаполнение формы обратной связи. Если вам необходимо, чтобы при нажатии на ссылку, открывалась страница сайта – удалите class="to-contact-js" и задайте ссылку href="http://site.ru/".

Текст специального предложения формируется на 336 строке. Там же, ссылка «Получить».

<a href="#" id="special-link" class="link-special" data-topic="Бесплатная консультация">Получить</a>

Обратите внимание на параметр data-topic, в нем можно указать необходимую тему письма при автозаполнении формы.

Если вам нужна переадресация на другую страницу - укажите страницу в параметре href="#" и удалите id="special-link".

Хедер и футер

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

Конструкция для 3 блоков формируется на 3 строке (ПУ - Управление дизайном (шаблоны) - Нижняя часть сайта):

<div class="footer-block">
 <div class="font">Название</div>
 <div class="social-block">Информация</div>
 </div>

Если вам нужно использовать только 2 блока - замените класс с footer-block на footer-block2.

Класс footer-big-block используется для самого большого (по ширине) блока. Может использоваться только один раз.

Если в логотипе вам нужно использовать одну или три строчки текста, то сделайте следующее.

Перейдите в ПУ - Управление дизайном (шаблоны) - Верхняя часть сайта.

Перейдите на 13 строку <a href="$HOME_PAGE_LINK$" id="logo" class="line2 font clearfix">

И измените class line2 на line1 – если нужна одна строчка, line3 – если три.

Далее измените <h1>Компания<br>Capitalius</h1> под ваши нужды.

Если задана одна строчка <h1> Capitalius</h1>

Если три <h1>Компания<br>ООО<br>Capitalius</h1>

Вверху сайта вы можете использовать режим «только логотип» - вверху сайта будет выводиться ТОЛЬКО логотип с текстом. Если вам это необходимо, проделайте следующее.

Перейдите в ПУ - Управление дизайном (шаблоны) - Верхняя часть сайта.

Удалите все в диапазоне строк 11 (<div class="brand wrap clearfix">) - 38 (</div>)

Вставьте на это место, вот этот код:

<div class="brand wrap clearfix">
<div class="only-logo">
<a href="$HOME_PAGE_LINK$" id="logo" class="line2 font clearfix">
<img src="/img/logo.png" alt="Лого">
<h1>Компания<br>Capitalius</h1>
</a>
</div>
</div>

Изменение иконок на примере блока «Предоставляемые услуги»

Перейдите сюда - http://capitalius-temp.do.am/f/font.html

Выберете необходимую вам иконку, скопируйте её класс, например flaticon-agreement (без точки).

Далее перейдите "Панель управления" - "Управление

Дизайном (шаблоны)" - глобальный блок "PROMO" на строку 11 <i class="flaticon-command"></i>

Вам нужно будет удалить flaticon-command и заменить на необходимую иконку (в нашем случае flaticon-agreement). Сохраните изменения.

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

Дополнение. Если вы будете использовать Font Awesome), то помимо класса иконки (например, fa-adjust), копируйте общий класс fa. В итоге, Вам нужно будет удалить flaticon-command и заменить на необходимую иконку (в нашем случае fa fa-adjust).

ЧаВо

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

— Да.

 

Как отключить анимацию появления блоков на главной странице?

— Панель Управления - Управление дизайном (шаблоны) - Нижняя часть сайта. Перейдите на 48 строку и измените allowAnimate = false; Сохраните изменения.

 

Как отключить кнопку «Заказать звонок»?

Перейдите в Панель Управления — Файловый менеджер — папка css — перейдите в режим редактирования файла main.css (справа, первая иконка «Изменить содержимое файла») и добавьте в конец файла:

#client-call{display: none !important; width: 0; height: 0;}

 

Как быстро изменить цветовую схему?

— Выберите необходимую Вам цветовую схему и перейдите в папку с ней. Загрузите содержимое папки «Файлы» на сервер (с заменой, если используете FTP-клиент). Более подробная инструкция в шаге «Загрузка файлов на сервер».

 

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

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

 

Сколько можно создать блоков с информацией внутри блока "Предоставляемые Услуги"?

— 2-6+.

 

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

— 3-9.

 

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

— 3-9+.

 

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

— 2-8.

 

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

— 3-4.

 

Сколько строк можно использовать в логотипе?

— 1-3.

 

Сколько блоков можно использовать в футере?

— 2-3.

 

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