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

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

Umbrella — многофункциональный адаптивный шаблон для сайта, работающего под управлением системы uCoz.

Преимущества:
  • Современный дизайн
  • Адаптивная верстка
  • Кроссбраузерность
  • HTML5 разметка
  • Нестандартный шрифт
  • Иконки FontAwesome 4.2.0
  • Поддержка конструктора меню
  • Поддержка конструктора шаблонов
  • Поддержка конструктора блоков
  • Поддержка модуля «Интернет-магазин»
  • Нестандартное оформление модуля «Фотоальбомы»
  • Нестандартный вид материалов в модулях «Новости», «Блог», «Каталог статей», «Каталог файлов»
  • Несколько вариантов оформления
  • Подробная документация по установке и настройке

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

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

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

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

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


Начало Настройка системы

Настройка системы

Зайдите в раздел общих настроек: ПУ » Настройки » Общие настройки:



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

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



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

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

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


Зайдите в раздел управления страницами сайта ПУ » Редактор страниц » Управление страницами сайта. Откройте форму редактирования содержимого главной страницы и установите персональный шаблон для нее:


Блог


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



Активировать поле "краткое описание материала" также рекомендуется и для следующих модулей: новости, каталог статей, каталог файлов


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



Скопируйте код ниже и замените содержимое вида материалов (быстрое выделение по клику):
Код будет доступен в купленной версии шаблона

Фотоальбомы


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



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

Интернет-магазин


Зайдите в раздел настроек интернет-магазина ПУ » Интернет-магазин » Настройки модуля и установите следующие значения полей:



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



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

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


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



Откройте конструктор полей только что созданной почтовой формы и удлите поле «Текст сообщения»



Теперь поочередно добавьте три следующих поля с параметрами, как на скриншотах ниже:
  • Ваше имя
  • Номер вашего телефона
  • Удобное для вас время звонка


После этого зайдите в радел редактирования шаблона данной почтовой формы, нажав на ссылку Перестроить шаблон формы:



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

Создание информеров

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


Информер #1 — список последних материалов блога в нижней части сайта


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



После откройте окно управления дизайном данного информера, нажав на соответствующую иконку справа или на ссылку [Шаблон информера]. Замените весь код в открывшемся окошке на код ниже: (быстрое выделение по клику):
Код будет доступен в купленной версии шаблона

Информер #2 — последние добавленные фотографии в нижней части сайта


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



После откройте окно управления дизайном данного информера, нажав на соответствующую иконку справа или на ссылку [Шаблон информера]. Замените весь код в открывшемся окошке на код ниже: (быстрое выделение по клику):
Код будет доступен в купленной версии шаблона

Информер #3 — последние добавленные фотографии на главной странице


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



После откройте окно управления дизайном данного информера, нажав на соответствующую иконку справа или на ссылку [Шаблон информера]. Замените весь код в открывшемся окошке на код ниже: (быстрое выделение по клику):
Код будет доступен в купленной версии шаблона

Информер #4 — последние добавленные товары на главной странице


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



После откройте окно управления дизайном данного информера, нажав на соответствующую иконку справа или на ссылку [Шаблон информера]. Замените весь код в открывшемся окошке на код ниже: (быстрое выделение по клику):
Код будет доступен в купленной версии шаблона
Настройка модулей Загрузка файлов на сервер

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

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

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

Создание шаблонов

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



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

Замена таблицы стилей (CSS)

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



Замените весь код там на код ниже (быстрое выделение по клику):
Код будет доступен в купленной версии шаблона
Создание шаблонов Восстановление шаблонов из резервных копий

Восстановление шаблонов из резервных копий

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



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


Замена таблицы стилей (CSS) Выбор стилей

Выбор стилей

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



Так вот, настройте демо-сайт шаблона на свое усмотрение, затем нажмите кнопку Сгенерировать код. Появится окошко с CSS-кодом.



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



Восстановление шаблонов из резервных копий Логотип сайта

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

Логотипом является изображение под названием logo в формате PNG, которое находится в папке /img вашего сайта



Логотип сайта можно легко сменить, не залезая в код. Достаточно лишь загрузить собственное изображение логотипа в формате PNG с таким же именем logo в данную папку.

Высота лототипа — 80px


Выбор стилей Работа с меню

Работа с меню

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



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



Логотип сайта Иконки

Иконки

В шаблоне используется иконочный шрифт Font Awesome версии 4.2.0. В данной версии доступно 479 иконок, всю документацию можно найти на официальном сайте, поэтому тут будут описаны лишь основные аспекты работы с ними.

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



Со стандартными примерами использования иконок (изменение размера, поворот, вращение, создание списков и др.) вы можете ознакомиться на официальном сайте.

Полный список доступных иконок в версии 4.2.0 (иконка, класс, юникод)



fa-adjust [&#xf042;]
fa-adn [&#xf170;]
fa-align-center [&#xf037;]
fa-align-justify [&#xf039;]
fa-align-left [&#xf036;]
fa-align-right [&#xf038;]
fa-ambulance [&#xf0f9;]
fa-anchor [&#xf13d;]
fa-android [&#xf17b;]
fa-angellist [&#xf209;]
fa-angle-double-down [&#xf103;]
fa-angle-double-left [&#xf100;]
fa-angle-double-right [&#xf101;]
fa-angle-double-up [&#xf102;]
fa-angle-down [&#xf107;]
fa-angle-left [&#xf104;]
fa-angle-right [&#xf105;]
fa-angle-up [&#xf106;]
fa-apple [&#xf179;]
fa-archive [&#xf187;]
fa-area-chart [&#xf1fe;]
fa-arrow-circle-down [&#xf0ab;]
fa-arrow-circle-left [&#xf0a8;]
fa-arrow-circle-o-down [&#xf01a;]
fa-arrow-circle-o-left [&#xf190;]
fa-arrow-circle-o-right [&#xf18e;]
fa-arrow-circle-o-up [&#xf01b;]
fa-arrow-circle-right [&#xf0a9;]
fa-arrow-circle-up [&#xf0aa;]
fa-arrow-down [&#xf063;]
fa-arrow-left [&#xf060;]
fa-arrow-right [&#xf061;]
fa-arrow-up [&#xf062;]
fa-arrows [&#xf047;]
fa-arrows-alt [&#xf0b2;]
fa-arrows-h [&#xf07e;]
fa-arrows-v [&#xf07d;]
fa-asterisk [&#xf069;]
fa-at [&#xf1fa;]
fa-automobile (alias)[&#xf1b9;]
fa-backward [&#xf04a;]
fa-ban [&#xf05e;]
fa-bank (alias)[&#xf19c;]
fa-bar-chart [&#xf080;]
fa-bar-chart-o (alias)[&#xf080;]
fa-barcode [&#xf02a;]
fa-bars [&#xf0c9;]
fa-beer [&#xf0fc;]
fa-behance [&#xf1b4;]
fa-behance-square [&#xf1b5;]
fa-bell [&#xf0f3;]
fa-bell-o [&#xf0a2;]
fa-bell-slash [&#xf1f6;]
fa-bell-slash-o [&#xf1f7;]
fa-bicycle [&#xf206;]
fa-binoculars [&#xf1e5;]
fa-birthday-cake [&#xf1fd;]
fa-bitbucket [&#xf171;]
fa-bitbucket-square [&#xf172;]
fa-bitcoin (alias)[&#xf15a;]
fa-bold [&#xf032;]
fa-bolt [&#xf0e7;]
fa-bomb [&#xf1e2;]
fa-book [&#xf02d;]
fa-bookmark [&#xf02e;]
fa-bookmark-o [&#xf097;]
fa-briefcase [&#xf0b1;]
fa-btc [&#xf15a;]
fa-bug [&#xf188;]
fa-building [&#xf1ad;]
fa-building-o [&#xf0f7;]
fa-bullhorn [&#xf0a1;]
fa-bullseye [&#xf140;]
fa-bus [&#xf207;]
fa-cab (alias)[&#xf1ba;]
fa-calculator [&#xf1ec;]
fa-calendar [&#xf073;]
fa-calendar-o [&#xf133;]
fa-camera [&#xf030;]
fa-camera-retro [&#xf083;]
fa-car [&#xf1b9;]
fa-caret-down [&#xf0d7;]
fa-caret-left [&#xf0d9;]
fa-caret-right [&#xf0da;]
fa-caret-square-o-down [&#xf150;]
fa-caret-square-o-left [&#xf191;]
fa-caret-square-o-right [&#xf152;]
fa-caret-square-o-up [&#xf151;]
fa-caret-up [&#xf0d8;]
fa-cc [&#xf20a;]
fa-cc-amex [&#xf1f3;]
fa-cc-discover [&#xf1f2;]
fa-cc-mastercard [&#xf1f1;]
fa-cc-paypal [&#xf1f4;]
fa-cc-stripe [&#xf1f5;]
fa-cc-visa [&#xf1f0;]
fa-certificate [&#xf0a3;]
fa-chain (alias)[&#xf0c1;]
fa-chain-broken [&#xf127;]
fa-check [&#xf00c;]
fa-check-circle [&#xf058;]
fa-check-circle-o [&#xf05d;]
fa-check-square [&#xf14a;]
fa-check-square-o [&#xf046;]
fa-chevron-circle-down [&#xf13a;]
fa-chevron-circle-left [&#xf137;]
fa-chevron-circle-right [&#xf138;]
fa-chevron-circle-up [&#xf139;]
fa-chevron-down [&#xf078;]
fa-chevron-left [&#xf053;]
fa-chevron-right [&#xf054;]
fa-chevron-up [&#xf077;]
fa-child [&#xf1ae;]
fa-circle [&#xf111;]
fa-circle-o [&#xf10c;]
fa-circle-o-notch [&#xf1ce;]
fa-circle-thin [&#xf1db;]
fa-clipboard [&#xf0ea;]
fa-clock-o [&#xf017;]
fa-close (alias)[&#xf00d;]
fa-cloud [&#xf0c2;]
fa-cloud-download [&#xf0ed;]
fa-cloud-upload [&#xf0ee;]
fa-cny (alias)[&#xf157;]
fa-code [&#xf121;]
fa-code-fork [&#xf126;]
fa-codepen [&#xf1cb;]
fa-coffee [&#xf0f4;]
fa-cog [&#xf013;]
fa-cogs [&#xf085;]
fa-columns [&#xf0db;]
fa-comment [&#xf075;]
fa-comment-o [&#xf0e5;]
fa-comments [&#xf086;]
fa-comments-o [&#xf0e6;]
fa-compass [&#xf14e;]
fa-compress [&#xf066;]
fa-copy (alias)[&#xf0c5;]
fa-copyright [&#xf1f9;]
fa-credit-card [&#xf09d;]
fa-crop [&#xf125;]
fa-crosshairs [&#xf05b;]
fa-css3 [&#xf13c;]
fa-cube [&#xf1b2;]
fa-cubes [&#xf1b3;]
fa-cut (alias)[&#xf0c4;]
fa-cutlery [&#xf0f5;]
fa-dashboard (alias)[&#xf0e4;]
fa-database [&#xf1c0;]
fa-dedent (alias)[&#xf03b;]
fa-delicious [&#xf1a5;]
fa-desktop [&#xf108;]
fa-deviantart [&#xf1bd;]
fa-digg [&#xf1a6;]
fa-dollar (alias)[&#xf155;]
fa-dot-circle-o [&#xf192;]
fa-download [&#xf019;]
fa-dribbble [&#xf17d;]
fa-dropbox [&#xf16b;]
fa-drupal [&#xf1a9;]
fa-edit (alias)[&#xf044;]
fa-eject [&#xf052;]
fa-ellipsis-h [&#xf141;]
fa-ellipsis-v [&#xf142;]
fa-empire [&#xf1d1;]
fa-envelope [&#xf0e0;]
fa-envelope-o [&#xf003;]
fa-envelope-square [&#xf199;]
fa-eraser [&#xf12d;]
fa-eur [&#xf153;]
fa-euro (alias)[&#xf153;]
fa-exchange [&#xf0ec;]
fa-exclamation [&#xf12a;]
fa-exclamation-circle [&#xf06a;]
fa-exclamation-triangle [&#xf071;]
fa-expand [&#xf065;]
fa-external-link [&#xf08e;]
fa-external-link-square [&#xf14c;]
fa-eye [&#xf06e;]
fa-eye-slash [&#xf070;]
fa-eyedropper [&#xf1fb;]
fa-facebook [&#xf09a;]
fa-facebook-square [&#xf082;]
fa-fast-backward [&#xf049;]
fa-fast-forward [&#xf050;]
fa-fax [&#xf1ac;]
fa-female [&#xf182;]
fa-fighter-jet [&#xf0fb;]
fa-file [&#xf15b;]
fa-file-archive-o [&#xf1c6;]
fa-file-audio-o [&#xf1c7;]
fa-file-code-o [&#xf1c9;]
fa-file-excel-o [&#xf1c3;]
fa-file-image-o [&#xf1c5;]
fa-file-movie-o (alias)[&#xf1c8;]
fa-file-o [&#xf016;]
fa-file-pdf-o [&#xf1c1;]
fa-file-photo-o (alias)[&#xf1c5;]
fa-file-picture-o (alias)[&#xf1c5;]
fa-file-powerpoint-o [&#xf1c4;]
fa-file-sound-o (alias)[&#xf1c7;]
fa-file-text [&#xf15c;]
fa-file-text-o [&#xf0f6;]
fa-file-video-o [&#xf1c8;]
fa-file-word-o [&#xf1c2;]
fa-file-zip-o (alias)[&#xf1c6;]
fa-files-o [&#xf0c5;]
fa-film [&#xf008;]
fa-filter [&#xf0b0;]
fa-fire [&#xf06d;]
fa-fire-extinguisher [&#xf134;]
fa-flag [&#xf024;]
fa-flag-checkered [&#xf11e;]
fa-flag-o [&#xf11d;]
fa-flash (alias)[&#xf0e7;]
fa-flask [&#xf0c3;]
fa-flickr [&#xf16e;]
fa-floppy-o [&#xf0c7;]
fa-folder [&#xf07b;]
fa-folder-o [&#xf114;]
fa-folder-open [&#xf07c;]
fa-folder-open-o [&#xf115;]
fa-font [&#xf031;]
fa-forward [&#xf04e;]
fa-foursquare [&#xf180;]
fa-frown-o [&#xf119;]
fa-futbol-o [&#xf1e3;]
fa-gamepad [&#xf11b;]
fa-gavel [&#xf0e3;]
fa-gbp [&#xf154;]
fa-ge (alias)[&#xf1d1;]
fa-gear (alias)[&#xf013;]
fa-gears (alias)[&#xf085;]
fa-gift [&#xf06b;]
fa-git [&#xf1d3;]
fa-git-square [&#xf1d2;]
fa-github [&#xf09b;]
fa-github-alt [&#xf113;]
fa-github-square [&#xf092;]
fa-gittip [&#xf184;]
fa-glass [&#xf000;]
fa-globe [&#xf0ac;]
fa-google [&#xf1a0;]
fa-google-plus [&#xf0d5;]
fa-google-plus-square [&#xf0d4;]
fa-google-wallet [&#xf1ee;]
fa-graduation-cap [&#xf19d;]
fa-group (alias)[&#xf0c0;]
fa-h-square [&#xf0fd;]
fa-hacker-news [&#xf1d4;]
fa-hand-o-down [&#xf0a7;]
fa-hand-o-left [&#xf0a5;]
fa-hand-o-right [&#xf0a4;]
fa-hand-o-up [&#xf0a6;]
fa-hdd-o [&#xf0a0;]
fa-header [&#xf1dc;]
fa-headphones [&#xf025;]
fa-heart [&#xf004;]
fa-heart-o [&#xf08a;]
fa-history [&#xf1da;]
fa-home [&#xf015;]
fa-hospital-o [&#xf0f8;]
fa-html5 [&#xf13b;]
fa-ils [&#xf20b;]
fa-image (alias)[&#xf03e;]
fa-inbox [&#xf01c;]
fa-indent [&#xf03c;]
fa-info [&#xf129;]
fa-info-circle [&#xf05a;]
fa-inr [&#xf156;]
fa-instagram [&#xf16d;]
fa-institution (alias)[&#xf19c;]
fa-ioxhost [&#xf208;]
fa-italic [&#xf033;]
fa-joomla [&#xf1aa;]
fa-jpy [&#xf157;]
fa-jsfiddle [&#xf1cc;]
fa-key [&#xf084;]
fa-keyboard-o [&#xf11c;]
fa-krw [&#xf159;]
fa-language [&#xf1ab;]
fa-laptop [&#xf109;]
fa-lastfm [&#xf202;]
fa-lastfm-square [&#xf203;]
fa-leaf [&#xf06c;]
fa-legal (alias)[&#xf0e3;]
fa-lemon-o [&#xf094;]
fa-level-down [&#xf149;]
fa-level-up [&#xf148;]
fa-life-bouy (alias)[&#xf1cd;]
fa-life-buoy (alias)[&#xf1cd;]
fa-life-ring [&#xf1cd;]
fa-life-saver (alias)[&#xf1cd;]
fa-lightbulb-o [&#xf0eb;]
fa-line-chart [&#xf201;]
fa-link [&#xf0c1;]
fa-linkedin [&#xf0e1;]
fa-linkedin-square [&#xf08c;]
fa-linux [&#xf17c;]
fa-list [&#xf03a;]
fa-list-alt [&#xf022;]
fa-list-ol [&#xf0cb;]
fa-list-ul [&#xf0ca;]
fa-location-arrow [&#xf124;]
fa-lock [&#xf023;]
fa-long-arrow-down [&#xf175;]
fa-long-arrow-left [&#xf177;]
fa-long-arrow-right [&#xf178;]
fa-long-arrow-up [&#xf176;]
fa-magic [&#xf0d0;]
fa-magnet [&#xf076;]
fa-mail-forward (alias)[&#xf064;]
fa-mail-reply (alias)[&#xf112;]
fa-mail-reply-all (alias)[&#xf122;]
fa-male [&#xf183;]
fa-map-marker [&#xf041;]
fa-maxcdn [&#xf136;]
fa-meanpath [&#xf20c;]
fa-medkit [&#xf0fa;]
fa-meh-o [&#xf11a;]
fa-microphone [&#xf130;]
fa-microphone-slash [&#xf131;]
fa-minus [&#xf068;]
fa-minus-circle [&#xf056;]
fa-minus-square [&#xf146;]
fa-minus-square-o [&#xf147;]
fa-mobile [&#xf10b;]
fa-mobile-phone (alias)[&#xf10b;]
fa-money [&#xf0d6;]
fa-moon-o [&#xf186;]
fa-mortar-board (alias)[&#xf19d;]
fa-music [&#xf001;]
fa-navicon (alias)[&#xf0c9;]
fa-newspaper-o [&#xf1ea;]
fa-openid [&#xf19b;]
fa-outdent [&#xf03b;]
fa-pagelines [&#xf18c;]
fa-paint-brush [&#xf1fc;]
fa-paper-plane [&#xf1d8;]
fa-paper-plane-o [&#xf1d9;]
fa-paperclip [&#xf0c6;]
fa-paragraph [&#xf1dd;]
fa-paste (alias)[&#xf0ea;]
fa-pause [&#xf04c;]
fa-paw [&#xf1b0;]
fa-paypal [&#xf1ed;]
fa-pencil [&#xf040;]
fa-pencil-square [&#xf14b;]
fa-pencil-square-o [&#xf044;]
fa-phone [&#xf095;]
fa-phone-square [&#xf098;]
fa-photo (alias)[&#xf03e;]
fa-picture-o [&#xf03e;]
fa-pie-chart [&#xf200;]
fa-pied-piper [&#xf1a7;]
fa-pied-piper-alt [&#xf1a8;]
fa-pinterest [&#xf0d2;]
fa-pinterest-square [&#xf0d3;]
fa-plane [&#xf072;]
fa-play [&#xf04b;]
fa-play-circle [&#xf144;]
fa-play-circle-o [&#xf01d;]
fa-plug [&#xf1e6;]
fa-plus [&#xf067;]
fa-plus-circle [&#xf055;]
fa-plus-square [&#xf0fe;]
fa-plus-square-o [&#xf196;]
fa-power-off [&#xf011;]
fa-print [&#xf02f;]
fa-puzzle-piece [&#xf12e;]
fa-qq [&#xf1d6;]
fa-qrcode [&#xf029;]
fa-question [&#xf128;]
fa-question-circle [&#xf059;]
fa-quote-left [&#xf10d;]
fa-quote-right [&#xf10e;]
fa-ra (alias)[&#xf1d0;]
fa-random [&#xf074;]
fa-rebel [&#xf1d0;]
fa-recycle [&#xf1b8;]
fa-reddit [&#xf1a1;]
fa-reddit-square [&#xf1a2;]
fa-refresh [&#xf021;]
fa-remove (alias)[&#xf00d;]
fa-renren [&#xf18b;]
fa-reorder (alias)[&#xf0c9;]
fa-repeat [&#xf01e;]
fa-reply [&#xf112;]
fa-reply-all [&#xf122;]
fa-retweet [&#xf079;]
fa-rmb (alias)[&#xf157;]
fa-road [&#xf018;]
fa-rocket [&#xf135;]
fa-rotate-left (alias)[&#xf0e2;]
fa-rotate-right (alias)[&#xf01e;]
fa-rouble (alias)[&#xf158;]
fa-rss [&#xf09e;]
fa-rss-square [&#xf143;]
fa-rub [&#xf158;]
fa-ruble (alias)[&#xf158;]
fa-rupee (alias)[&#xf156;]
fa-save (alias)[&#xf0c7;]
fa-scissors [&#xf0c4;]
fa-search [&#xf002;]
fa-search-minus [&#xf010;]
fa-search-plus [&#xf00e;]
fa-send (alias)[&#xf1d8;]
fa-send-o (alias)[&#xf1d9;]
fa-share [&#xf064;]
fa-share-alt [&#xf1e0;]
fa-share-alt-square [&#xf1e1;]
fa-share-square [&#xf14d;]
fa-share-square-o [&#xf045;]
fa-shekel (alias)[&#xf20b;]
fa-sheqel (alias)[&#xf20b;]
fa-shield [&#xf132;]
fa-shopping-cart [&#xf07a;]
fa-sign-in [&#xf090;]
fa-sign-out [&#xf08b;]
fa-signal [&#xf012;]
fa-sitemap [&#xf0e8;]
fa-skype [&#xf17e;]
fa-slack [&#xf198;]
fa-sliders [&#xf1de;]
fa-slideshare [&#xf1e7;]
fa-smile-o [&#xf118;]
fa-soccer-ball-o (alias)[&#xf1e3;]
fa-sort [&#xf0dc;]
fa-sort-alpha-asc [&#xf15d;]
fa-sort-alpha-desc [&#xf15e;]
fa-sort-amount-asc [&#xf160;]
fa-sort-amount-desc [&#xf161;]
fa-sort-asc [&#xf0de;]
fa-sort-desc [&#xf0dd;]
fa-sort-down (alias)[&#xf0dd;]
fa-sort-numeric-asc [&#xf162;]
fa-sort-numeric-desc [&#xf163;]
fa-sort-up (alias)[&#xf0de;]
fa-soundcloud [&#xf1be;]
fa-space-shuttle [&#xf197;]
fa-spinner [&#xf110;]
fa-spoon [&#xf1b1;]
fa-spotify [&#xf1bc;]
fa-square [&#xf0c8;]
fa-square-o [&#xf096;]
fa-stack-exchange [&#xf18d;]
fa-stack-overflow [&#xf16c;]
fa-star [&#xf005;]
fa-star-half [&#xf089;]
fa-star-half-empty (alias)[&#xf123;]
fa-star-half-full (alias)[&#xf123;]
fa-star-half-o [&#xf123;]
fa-star-o [&#xf006;]
fa-steam [&#xf1b6;]
fa-steam-square [&#xf1b7;]
fa-step-backward [&#xf048;]
fa-step-forward [&#xf051;]
fa-stethoscope [&#xf0f1;]
fa-stop [&#xf04d;]
fa-strikethrough [&#xf0cc;]
fa-stumbleupon [&#xf1a4;]
fa-stumbleupon-circle [&#xf1a3;]
fa-subscript [&#xf12c;]
fa-suitcase [&#xf0f2;]
fa-sun-o [&#xf185;]
fa-superscript [&#xf12b;]
fa-support (alias)[&#xf1cd;]
fa-table [&#xf0ce;]
fa-tablet [&#xf10a;]
fa-tachometer [&#xf0e4;]
fa-tag [&#xf02b;]
fa-tags [&#xf02c;]
fa-tasks [&#xf0ae;]
fa-taxi [&#xf1ba;]
fa-tencent-weibo [&#xf1d5;]
fa-terminal [&#xf120;]
fa-text-height [&#xf034;]
fa-text-width [&#xf035;]
fa-th [&#xf00a;]
fa-th-large [&#xf009;]
fa-th-list [&#xf00b;]
fa-thumb-tack [&#xf08d;]
fa-thumbs-down [&#xf165;]
fa-thumbs-o-down [&#xf088;]
fa-thumbs-o-up [&#xf087;]
fa-thumbs-up [&#xf164;]
fa-ticket [&#xf145;]
fa-times [&#xf00d;]
fa-times-circle [&#xf057;]
fa-times-circle-o [&#xf05c;]
fa-tint [&#xf043;]
fa-toggle-down (alias)[&#xf150;]
fa-toggle-left (alias)[&#xf191;]
fa-toggle-off [&#xf204;]
fa-toggle-on [&#xf205;]
fa-toggle-right (alias)[&#xf152;]
fa-toggle-up (alias)[&#xf151;]
fa-trash [&#xf1f8;]
fa-trash-o [&#xf014;]
fa-tree [&#xf1bb;]
fa-trello [&#xf181;]
fa-trophy [&#xf091;]
fa-truck [&#xf0d1;]
fa-try [&#xf195;]
fa-tty [&#xf1e4;]
fa-tumblr [&#xf173;]
fa-tumblr-square [&#xf174;]
fa-turkish-lira (alias)[&#xf195;]
fa-twitch [&#xf1e8;]
fa-twitter [&#xf099;]
fa-twitter-square [&#xf081;]
fa-umbrella [&#xf0e9;]
fa-underline [&#xf0cd;]
fa-undo [&#xf0e2;]
fa-university [&#xf19c;]
fa-unlink (alias)[&#xf127;]
fa-unlock [&#xf09c;]
fa-unlock-alt [&#xf13e;]
fa-unsorted (alias)[&#xf0dc;]
fa-upload [&#xf093;]
fa-usd [&#xf155;]
fa-user [&#xf007;]
fa-user-md [&#xf0f0;]
fa-users [&#xf0c0;]
fa-video-camera [&#xf03d;]
fa-vimeo-square [&#xf194;]
fa-vine [&#xf1ca;]
fa-vk [&#xf189;]
fa-volume-down [&#xf027;]
fa-volume-off [&#xf026;]
fa-volume-up [&#xf028;]
fa-warning (alias)[&#xf071;]
fa-wechat (alias)[&#xf1d7;]
fa-weibo [&#xf18a;]
fa-weixin [&#xf1d7;]
fa-wheelchair [&#xf193;]
fa-wifi [&#xf1eb;]
fa-windows [&#xf17a;]
fa-won (alias)[&#xf159;]
fa-wordpress [&#xf19a;]
fa-wrench [&#xf0ad;]
fa-xing [&#xf168;]
fa-xing-square [&#xf169;]
fa-yahoo [&#xf19e;]
fa-yelp [&#xf1e9;]
fa-yen (alias)[&#xf157;]
fa-youtube [&#xf167;]
fa-youtube-play [&#xf16a;]
fa-youtube-square [&#xf166;]

Работа с меню Подвал (нижняя часть сайта)

Подвал (нижняя часть сайта)

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



Иконки Элементы главной страницы

Элементы главной страницы

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


Текстовый слайдер


Код слайдера находится между комментариями <!-- TEXT SLIDER --> ... <!-- / TEXT SLIDER --> и выглядит следующим образом:
Код будет доступен в купленной версии шаблона
Код отдельного слайда таков:
Код будет доступен в купленной версии шаблона
Все предельно просто — замените весь текст и ссылки на нужные вам. Слайды можно добавлять и удалять.

Блоки преимуществ




Код блоков преимуществ находится между комментариями <!-- ADVANTAGES --> ... <!-- / ADVANTAGES --> и выглядит следующим образом:
Код будет доступен в купленной версии шаблона
Код отдельного блока таков:
Код будет доступен в купленной версии шаблона
Тут тоже ничего сложного — отредактируйте текст и ссылки. Единственное, на что нужно можно обратить внимание, это код иконки левее названия блока:
Код будет доступен в купленной версии шаблона
Но с иконками вы уже ознакомились в соответствующем разделе документации, поэтому проблем возникнуть тоже не должно.

Информационные блоки помощи




Код данных блоков находится между комментариями <!-- SERVICE --> ... <!-- / SERVICE --> и выглядит следующим образом:
Код будет доступен в купленной версии шаблона
Код отдельного блока выглядит так:
Код будет доступен в купленной версии шаблона
Можно обратить внимание только на код иконки выше названия блока:
Код будет доступен в купленной версии шаблона
Все остальное простой текст, который вы без проблем можете заменить на свой.

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




Код отзывов находится между комментариями <!-- REVIEWS --> ... <!-- / REVIEWS --> и выглядит следующим образом:
Код будет доступен в купленной версии шаблона
Код отдельного отзыва таков:
Код будет доступен в купленной версии шаблона
Кроме простого текста в отзыве можно найти код изображения:
Код будет доступен в купленной версии шаблона
Понятно, что /img/person2.jpg — путь до фотографии автора отзыва.

Блоки фактов




Код данных блоков находится между комментариями <!-- FACTS --> ... <!-- / FACTS --> и выглядит следующим образом:
Код будет доступен в купленной версии шаблона
Код отдельного блока таков:
Код будет доступен в купленной версии шаблона
Сразу видим код иконки:
Код будет доступен в купленной версии шаблона
Число (количество чебо-либо) указывается в атрибуте data-count тега <span>:
Код будет доступен в купленной версии шаблона

Блоки членов команды




Код данных блоков находится между комментариями <!-- TEAM --> ... <!-- / TEAM --> и выглядит следующим образом:
Код будет доступен в купленной версии шаблона
Код отдельного блока таков:
Код будет доступен в купленной версии шаблона
В строке
Код будет доступен в купленной версии шаблона
есть ссылка на фотографию участника команды — /img/person1.jpg

Также присутствуют ссылки на профили в соц.сетях:
Код будет доступен в купленной версии шаблона
Подвал (нижняя часть сайта) Советы и замечания

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

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

Элементы главной страницы