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

Начало

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


LPage — Landing page шаблон для сайта, работающего под управлением системы uCoz.

Преимущества:
  • Современный дизайн
  • HTML5 разметка
  • Адаптивность
  • Кроссбраузерная верстка
  • Чистый ручной код
  • Нестандартные шрифты
  • Иконки 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>, про этот пункт очень часто забывают либо не придают ему особого значения.



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

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

Блог


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



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



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

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

Фотоальбомы


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





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



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

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

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


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

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



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



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


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

Создайте поочередно 5 почтовых форм, для удобства назовите их "Заявка 1", "Заявка 2", "Заявка 3", "Заявка 4" и "Заявка 5". У вас должно получиться следующее:



Поочередно для каждой из только созданных 5 почтовых форм зайдите в Конструткор полей и везде проделайте одно и то же:

— Удалите поле "Текст сообщения"
— Создайте поле типа "text" с названием Имя *
— Создайте поле типа "text" с названием Номер телефона *

Для нечетных заявок (почтовые формы с именами "Заявка 1", "Заявка 3" и "Заявка 5") замените код шаблона на такой:
Код будет доступен в купленной версии шаблона
Для четных заявок (почтовые формы с именами "Заявка 2" и "Заявка 4") замените код шаблона на такой:
Код будет доступен в купленной версии шаблона

Для стандартной почтовой формы Обратная связь в конструкторе полей добавьте новое поле типа "text" с названием Номер телефона. После замените ее шаблон на такой:
Код будет доступен в купленной версии шаблона
Общие настройки Загрузка файлов

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

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

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

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


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

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

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



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

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

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



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

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

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



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


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

Первые шаги

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

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

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

Логотип представляет собой текст — название сайта, магазина, фирмы и т.п.. Чтобы изменить логотип, зайдите в редактирование шаблона верхней части сайта: ПУ » Управление дизайном » Верхняя часть сайта



Код логотипа выглядит так:
Код будет доступен в купленной версии шаблона
Чтобы заменить текстовый логотип на графический (вставить изображение),
замените <a href="/">LPAGE</a> на код вида:
Код будет доступен в купленной версии шаблона
Где /img/logo.png — путь до изображения логотипа.

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


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

Меню сайта

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



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



Надписи "Новое" и "Горячее" в меню сайта




Чтобы данные надписи появились возле какой-либо ссылки, нужно добавить для этой ссылки CSS-класс menu_hint1 (Новое) или menu_hint2 (Горячее).

Добавить класс к ссылке можно так: нажать на иконку редактирования пункта меню, затем на стрелочку "Опции", откроется поле, куда и нужно будет вставить имя нужного CSS-класса. Осталось только применить изменения.



Обратите внимание, CSS-классы menu_hint1 и menu_hint2 можно задавать только ссылок меню верхнего уровня. Для ссылок, находящихся в пунктах выпадающего меню этого делать нельзя.


Логотип сайта Тонкая настройка

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

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

Меню сайта Иконки

Иконки

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


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

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

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



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

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

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

Блоки с иконками




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

Блоки счетчиков




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

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




Вывести таймер обратного отсчета можно практически в любом месте. Для этого надо всего лишь вставить HTML-код:
Код будет доступен в купленной версии шаблона
Задать день, до которого будет вестись отсчет можно в файле скриптов /js/scripts.js — найдите в нем такой кусок кода:
Код будет доступен в купленной версии шаблона
В первой строке задайте дату в формате [год, месяц, число], до которой будет вестись отсчет и сохраните.

Отзывы клиентов




Код отдельного отзыва выглядит так:
Код будет доступен в купленной версии шаблона
Чуть выше самих отзывов есть теги <span></span> — это переключатели между отзывами. Их количество должно быть равно количеству отзывов, для каждого по одному. Где именно они находятся показано на скриншоте ниже:



Сертификаты




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

Карта Google




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

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

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

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


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




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

Вкладки




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

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

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

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