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

Начало

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


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

Преимущества:
  • Современный дизайн
  • HTML5 разметка
  • CSS3 анимация
  • Адаптивность
  • Кроссбраузерная верстка
  • Чистый ручной код
  • Нестандартные шрифты
  • Почти 900 векторных иконок:
    • Font Awesome — 519 иконок
    • Media Icons — 360 иконки
  • Конструктор шаблонов
  • Конструктор меню
  • Конструктор блоков
  • Поддержка всех модулей
  • Полная поддержка модуля «Интернет-магазин»:
    • Новое стильное оформление модуля
    • Слайдер контента на главной
    • Карусели новинок и бестселлеров
    • Дополнительный блок категорий на главной
    • Готовые баннеры
    • Информер популярных товаров в левой колонке сайта
    • Вкладки на странице товра
  • Обновленный вид материалов блога
  • Обновленный вид материалов фотоальбома
  • Бесконечное количество цветовых схем
  • Расширенная документация по установке и настройке шаблона

Примечания:
  • Панель выбора цветовой схемы и генерации ее стилей доступна только на демо-сайте шаблона. Процесс выбора и смены цветовой схемы описан в документации.
  • Под кроссбраузерностью понимается корректное отображение элементов дизайна в последних версиях следующих браузеров: 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 — популярные товары в левой колонке сайта


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



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

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

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

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

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



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

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

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



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


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

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

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



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


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

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

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



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


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

Первые шаги

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

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

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

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



Код логотипа выглядит так:
Код будет доступен в купленной версии шаблона
Где <span class="pe-mi-devices"></span> — иконка.

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

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


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

Меню сайта

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



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



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

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

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



Выберите нужный вам цвет, нажмите "Сгенерировать код" — появится окошко с готовым кодом. Скопируйте данный код и вставьте в конец CSS: ПУ » Дизайн » Управление дизайном (CSS)

Меню сайта Тонкая настройка

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

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

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

Иконки

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

Font Awesome 4.3.0


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

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

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


Media Icons 1.0.2


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

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

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

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

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

Слайдер


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

Блоки категорий




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


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

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

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

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

Главная страница Советы и замечания

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

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

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