Начало

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


ONEPAGE — шаблон сайта-визитки, работающего под управлением системы uCoz. Также будет очень удобно использовать шаблон в качестве посадочной страницы.

Преимущества:
  • Современный дизайн
  • HTML5 разметка
  • CSS3 анимация
  • Адаптивность
  • Кроссбраузерная верстка
  • Чистый ручной код
  • Нестандартные шрифты
  • Иконки Font Awesome
  • Конструктор шаблонов
  • Конструктор меню
  • Конструктор блоков
  • Обновленный вид блога
  • Обновленный вид фотоальбомов
  • Уникальное оформление страниц:
    • Главная магазина
    • Информация о сайте
    • Обратная связь
  • Дополнительные элементы:
    • Таймер обратного отсчета
    • Иконочные блоки
    • Счетчики
    • Прогресс-бары
    • Вкладки
    • Прайс-таблицы
  • Неограниченное количество цветовых схем
  • Расширенная документация по установке и настройке шаблона

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


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

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

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

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

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


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

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

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

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


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

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

Блог


Зайдите в раздел управления дизайном Дизайн » Управление дизайном (шаблоны), откройте шаблон Вид материалов для модуля Блог
Замените шаблон Вид материалов на код ниже:
Код будет доступен в купленной версии шаблона
Рекомендуется активировать поле Краткое описание материала. Сделать это можно в разделе настроек материалов блога: Блог » Настройки блога. Для этого установите две галочки напротив поля Краткое описание

Фотоальбомы


Зайдите в раздел управления дизайном Дизайн » Управление дизайном (шаблоны), откройте шаблон Вид фотографий для модуля Фотоальбомы Замените шаблон Вид фотографий на код ниже:
Код будет доступен в купленной версии шаблона
Общие настройки Почтовые формы

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

Зайдите в раздел управления почтовыми формами: Почтовые формы » Управление почтовыми формами Вы увидите стандартную почтовую форму, которая называется братная связь. Зайдите в конструктор полей данной почтовой формы. В конструкторе полей удалите лишние поля, оставив только следующие: Имя отправителя, E-mail отправителя, Текст письма, Текст сооббщения. Затем добавьте одно новое поле, назовите его Номер телефона. Должно получится следующее: После редактирования полей почтовой формы появится ссылка Перестроить шаблон формы — нажмите на нее: Замените код шаблона почтовой формы на код ниже и сохраните:
Код будет доступен в купленной версии шаблона

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

Настройка страниц

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

Убедитесь, что персональные шаблоны заданы для трех страниц: Гланвая страница Информация о сайте и Обратная связь.


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

Информеры

Откройте раздел управления информерами: Информеры

Информер фотоальбомов на главной


Создайте информер со следующими значениями полей:
  • Раздел: Фотоальбомы
  • Тип данных: Материалы
  • Способ сортировки: Дата добавления материала D
  • Количество материалов: 6
Замените шаблон данного информера на код ниже:
Код будет доступен в купленной версии шаблона

Облако тегов


Создайте информер со следующими значениями полей:
  • Раздел: Теги
  • Способ вывода: Облако тегов
Настройка страниц Загрузка файлов

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

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

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

А вот файл 404.htm загрузите в корень сайта именно с помощью файлового менеджера. Через FTP файлы с расширением ".htm" и ".html" загружать нельзя.

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


Информеры Конструктор шаблонов

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

Зайдите в раздел Дизайн » Конструктор шаблонов: Скопируйте код ниже, вставьте его в поле конструктора шаблонов, нажмите кнопку Создать шаблоны
Код будет доступен в купленной версии шаблона
Загрузка файлов Таблица стилей (CSS)

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

Зайдите в раздел редактирования таблицы стилей: Дизайн » Управление дизайном (CSS) Замените все содержимое ее поля на код ниже и сохраните:
Код будет доступен в купленной версии шаблона
Конструктор шаблонов Восстановление из бэкапа

Восстановление резервной копии

Зайдите в раздел резервного копирования шаблонов Дизайн » Управлени дизайном (шаблоны) » Backup шаблонов, найдите там резервную копию 0000000000.zip 00.00.0000 00:00 и восстановите ее:

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


Таблица стилей (CSS) Настройка шаблона

Настройка шаблона

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

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

Логотип

Логотип представляет собой текст — название сайта, магазина, фирмы и т.п.. Чтобы изменить логотип, зайдите в редактирование шаблона верхней части сайта: Дизайн » Управление дизайном (шаблоны) » Глобальные блоки » Верхняя часть сайта Код логотипа выглядит так:
Код будет доступен в купленной версии шаблона
Чтобы заменить текстовый логотип на графический (вставить изображение), замените его код на такой:
Код будет доступен в купленной версии шаблона
Где /img/logo.png — путь до изображения логотипа.

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


Настройка шаблона Меню

Меню

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

Если вам не нужно указывать ссылку, например, для главного пункта выпадающего меню, тогда для данного пункта в поле URL адрес укажите следующий код:
Код будет доступен в купленной версии шаблона
Логотип Иконки

Иконки

Иконочный шрифт «Font Awesome» версии 4.5.0


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

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

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



Меню Цветовая схема

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

На демо-сайте шаблона в верхнем левом углу есть панель настройки цветовой схемы шаблона. Выберите нужный вам цвет, сгенерируйте стили, скопируйте их и вставьте в самый конец таблицы стилей (CSS): Дизайн » Редактор » CSS

Иконки Дополнительно

Дополнительные настройки

В самом начале файла /js/scripts.js задано несколько переменных:
Код будет доступен в купленной версии шаблона
animateIt — включение или отключение CSS3 анимации элементов, допустимые значения:
  • true — анимация включена
  • false — анимация отключена
blogCols — количество колонок для материалов в блоге, допустимые значения:
  • 1 — одна колонка
  • 2 — две колонки
Цветовая схема Редактирование страниц

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

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

Дополнительно Главная страница

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

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

Слайдер контента


Общий HTML-код слайдера выглядит так:
Код будет доступен в купленной версии шаблона
Код отдельного слайда:
Код будет доступен в купленной версии шаблона
Код будет доступен в купленной версии шаблона
— путь до фонового изображения

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

Иконочные блоки

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

Таймер обратного отсчета

Код будет доступен в купленной версии шаблона
— это html-код самого таймера, который изображен на скриншоте выше слева. Вы можете вставить данный код в любое место любой страницы. Следует отметить, что таймер будет везде один и тот же.

Задать дату, до которой будет вестись отсчет можно в файле /js/scripts.js. Найдите в нем код, необходимые действия указаны в комментарии к третей строке:
Код будет доступен в купленной версии шаблона

Счетчики

Код каждого счетчика выглядит так:
Код будет доступен в купленной версии шаблона
Код будет доступен в купленной версии шаблона
— код иконки Font Awesome

Код будет доступен в купленной версии шаблона
— в атрибуте data-count укажите необходимое число

Прайс-таблицы

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

Карта от Google

Адрес, который указан на карте от Google, а точнее его координаты задаются в файле скриптов /js/scripts.js. Найдите в нем код:
Код будет доступен в купленной версии шаблона
Код будет доступен в купленной версии шаблона
— в этой строке задайте координаты

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

Редактирование страниц Информация о сайте

Информация о сайте

Все элементы страницы "информация о сайте" редактируются в ее индивидуальном шаблоне: Дизайн » Управление дизайном (шаблоны) » Редактор страниц » Информация о сайте

Блоки сотрудников

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

Код будет доступен в купленной версии шаблона
— укажите ссылку на профиль в соц.сети

Прогресс-бары

Общий код списка прогресс-баров таков:
Код будет доступен в купленной версии шаблона
Код отдельного прогресс-бара выглядит так:
Код будет доступен в купленной версии шаблона
Код будет доступен в купленной версии шаблона
— в атрибуте data-percent укажите процент выполнения

Вкладки

Количество вкладок неограничено, общая структура кода такова:
Код будет доступен в купленной версии шаблона
Главная страница Обратная связь

Обратная связь

Все элементы страницы "обратная свзяь" редактируются в ее индивидуальном шаблоне: Дизайн » Управление дизайном (шаблоны) » Редактор страниц » Обратная связь

Блоки контактов


Каждый блок контактов представляет собой иконочный блок, его код такой же:
Код будет доступен в купленной версии шаблона
Код будет доступен в купленной версии шаблона
— код иконки Font Awesome

Информация о сайте Советы и замечания

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

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

Информация о сайте