Готовые вариации
Здесь вы можете выбрать преднастроенный вариант под определенную сферу деятельности.
Точная настройка
Здесь вы можете точечно управлять всеми разделами и блоками сайта, настраивать их внешний вид и последовательность, включать и отключать отдельные элементы.
IntecUniverse SITE 
v. 2.3.10
Готовые вариации
IntecUniverse SITE 
v. 2.3.10
Точная настройка
Общие
Главная
Шапка
Каталог
Разделы каталога
Карточка товара
Услуги
Корзина
Разделы
Футер
Мобильная версия
Цветовая схема
Отображать фон
Цвет фона
Ширина сайта
Шрифт
Размер заголовков
Размер текста
Эффект изображений
Карта
Режим поиска
Шаблон главной страницы
Блоки главной страницы
Баннер
Вид отображения
Иконки
Преимущества
Вид отображения
Разделы каталога
Вид отображения
Баннеры с текстом
Вид отображения
Товары
Вид отображения
Отзывы к товарам
Вид отображения
Готовые образы
Вид отображения
Коллекции
Вид отображения
Товар дня
Вид отображения
Услуги
Вид отображения
Истории
Вид отображения
Статьи
Вид отображения
Акции
Вид отображения
Отзывы
Вид отображения
О нас
Вид отображения
Этапы работ
Вид отображения
Наша команда
Вид отображения
Сертификаты
Вид отображения
Проекты
Вид отображения
Видео
Вид отображения
Фотогалерея
Вид отображения
Тарифы
Вид отображения
Вопрос-ответ
Вид отображения
Видеогалерея
Вид отображения
Бренды
Вид отображения
Instagram
Вид отображения
Новости
Вид отображения
Контакты
Вид отображения
Шаблон шапки
Шаблон меню инфоблока
Шаблон всплывающего меню
Шаблон всплывающего поиска
Шаблон быстрого просмотра товара
Шаблон фильтра каталога
Шаблон корня каталога
Расположение элементов в корне каталога
Шаблон разделов каталога
Режим отображения списка товаров по умолчанию
Шаблон элементов каталога вида "Плитка"
Шаблон элементов каталога вида "Список"
Шаблон элементов каталога вида "Расширенный список"
Пропорции изображения в шаблоне элементов каталога вида "Плитка"
Расположение элементов в разделах каталога
Вид корневых разделов бокового меню каталога
Вид подразделов бокового меню каталога
Шаблон подразделов бокового меню каталога
Шаблон карточки товара
Шаблон главного блока в 4-м виде карточки товара
Режимы работы галереи в карточке товара
Вид торговых предложений в карточке товара
Шаблон подарков в карточке товара
Корень услуг. Шаблон разделов
Корень услуг. Шаблон элементов
Разделы услуг. Шаблон подразделов
Разделы услуг. Шаблон элементов
Шаблон фильтра услуг
Шаблон карточки услуги
Тип баннера карточки услуги
Расположение корзины
Шаблон фиксированной корзины
Шаблон акций
Шаблон сотрудников
Шаблон контактов
Шаблон новостей
Шаблон статей
Шаблон брендов
Шаблон вакансий
Шаблон блога
Шаблон сертификатов
Шаблон коллекций
Шаблон фотогалереи
Блоки футера
Форма
Вид отображения
Контакты
Вид отображения
Тема футера
Шаблон футера
Мобильный шаблон шапки
Размер заголовков в мобильной версии
Отображать фон и контент баннера
Тип мобильного поиска
Мобильный шаблон меню шапки
Мобильные блоки
Панель
Вид отображения
Количество колонок в шаблоне элементов каталога вида "Плитка" на мобильной версии
empty basket
Ваша корзина пуста
Выберите в каталоге интересующий товар
и нажмите кнопку «В корзину».
Перейти в каталог
Заказать звонок
Челябинск
Например:
Челябинск
Екатеринбург
или
Выбрать автоматически
Челябинск
Екатеринбург
Москва
Ваш город
Челябинск
г. Челябинск, ул. Труда, д.64, оф. 2
Пн-Пт: 9:30-18:30
Cб-Вс: Выходной
г. Челябинск, Копейское ш., 64
Пн-Пт: 9:30-18:30
Cб-Вс: Выходной
Заказать звонок
Войти

Возможности

Типография

Стандартизированная типография на всем сайте. Далее приведены все стандарты типографии шаблона.

Заголовок H1 (h1, .intec-ui-markup-h1, [data-ui-markup="h1"])

Интернет-магазин (англ. online shop или e-shop) — сайт, торгующий товарами посредством сети Интернет. Позволяет пользователям онлайн, в своём браузере или через мобильное приложение, сформировать заказ на покупку, выбрать способ оплаты и доставки заказа, оплатить заказ.
(p, .intec-ui-markup-p, [data-ui-markup="p"])

При этом продажа товаров осуществляется дистанционным способом и она накладывает ограничения на продаваемые товары.
(blockquote, .intec-ui-markup-blockquote, [data-ui-markup="blockquote"])

Заголовок H2 (h2, .intec-ui-markup-h2, [data-ui-markup="h2"])

Когда онлайн-магазин настроен на то, чтобы позволить компаниям покупать у других компаний, этот процесс называется онлайн-магазинами бизнес для бизнеса (B2B).
(i, .intec-ui-markup-i, [data-ui-markup="i"])

Когда онлайн-магазин настроен на то, чтобы позволить компаниям покупать у других компаний, этот процесс называется онлайн-магазинами бизнес для бизнеса (B2B).
(b, .intec-ui-markup-b, [data-ui-markup="b"])

Заголовок H3 (h3, .intec-ui-markup-h3, [data-ui-markup="h3"])

  • Пункт обычного списка
  • Пункт обычного списка
  • Пункт обычного списка
  • Пункт обычного списка
  • (ul li, .intec-ui-markup-ul .intec-ui-markup-li, [data-ui-markup="ul"] [data-ui-markup="li"])

Заголовок H4 (h4, .intec-ui-markup-h4, [data-ui-markup="h4"])

  1. Пункт нумерованного списка
  2. Пункт нумерованного списка
  3. Пункт нумерованного списка
  4. Пункт нумерованного списка
  5. (ol li, .intec-ui-markup-ol .intec-ui-markup-li, [data-ui-markup="ol"] [data-ui-markup="li"])
Заголовок H5 (h5, .intec-ui-markup-h5, [data-ui-markup="h5"])

Ссылка 1, Ссылка 2, Ссылка 3 (a, .intec-ui-markup-a, [data-ui-markup="a"])

Заголовок H6 (h6, .intec-ui-markup-h6, [data-ui-markup="h6"])

Горизонтальная линия (hr, .intec-ui-markup-hr, [data-ui-markup="hr"])


Код (code, .intec-ui-markup-code, [data-ui-markup="code"])
<div class="intec-ui-markup-code">
Пример оформления кода
</div>

Заголовок 1 Заголовок 2 Заголовок 3
Столбец 1 Столбец 2 Столбец 3
Столбец 1 Столбец 2 Столбец 3
Столбец 1 Столбец 2 Столбец 3
Заголовок 1 Заголовок 2 Заголовок 3
Столбец 1 Столбец 2 Столбец 3
Столбец 1 Столбец 2 Столбец 3
Столбец 1 Столбец 2 Столбец 3
Заголовок 1 Заголовок 2 Заголовок 3 Заголовок 4 Заголовок 5 Заголовок 6 Заголовок 7 Заголовок 8 Заголовок 9 Заголовок 10 Заголовок 11 Заголовок 12 Заголовок 13 Заголовок 14 Заголовок 15
Столбец 1 Столбец 2 Столбец 3 Столбец 4 Столбец 5 Столбец 6 Столбец 7 Столбец 8 Столбец 9 Столбец 10 Столбец 11 Столбец 12 Столбец 13 Столбец 14 Столбец 15
Столбец 1 Столбец 2 Столбец 3 Столбец 4 Столбец 5 Столбец 6 Столбец 7 Столбец 8 Столбец 9 Столбец 10 Столбец 11 Столбец 12 Столбец 13 Столбец 14 Столбец 15
Столбец 1 Столбец 2 Столбец 3 Столбец 4 Столбец 5 Столбец 6 Столбец 7 Столбец 8 Столбец 9 Столбец 10 Столбец 11 Столбец 12 Столбец 13 Столбец 14 Столбец 15

Отступы

Имеются классы для работы с margin и padding.

  • .intec-ui-p - класс для работы с padding;
  • .intec-ui-m - класс для работы с margin.

Использование класса отступов

  1. .intec-ui-(m|p)-<значение>;
  2. .intec-ui-(m|p)-(t|r|b|l|v|h)-<значение>.

(m|p) означает тип отступа (margin или padding соответственно). (t|r|b|l|v|h) направление отступа (top, right, bottom, left, vertical или horizontal соответственно), v означает отступ сверху и снизу, h - слева и справа. <значение> может иметь none, что означает необходимость убрать отступ, либо значение от 5 до 100 с шагом в 5. В варианте 1, где не указано направление оступа, он будет применен ко всем сторонам.

Элементы интерфейса

Каждый элемент интерфейса имеет класс .intec-ui, а также собственный класс .intec-ui-control-<элемент>.

Большинство элементов (кнопки, поля ввода, счетчики) имеют сетку в 4px и стандартную высоту в 32px. Размеры элементов можно менять с помощью класса .intec-ui-size-<размер>, где размер - это число от 1 до 5. Каждый размер увеличивает высоту элемента на 4px.

Все элементы (кроме полей ввода) имеют цветовые схемы. Цветовые схемы задаются с помощью класса .intec-ui-scheme-<схема>
Доступны следующие цветовые схемы:

  • current - Текущая цветовая схема сайта
  • blue - Синяя цветовая схема
  • blue-1 - Синяя цветовая схема 1
  • red - Красная цветовая схема
  • green - Зеленая цветовая схема
  • green-1 - Зеленая цветовая схема 1
  • orange - Оранжевая цветовая схема
  • gray - Серая цветовая схема

Кнопка (button)

Класс для применения: .intec-ui.intec-ui-control-button.

Кнопка
Блочная кнопка

Для того чтобы сделать кнопку блочным элементом, необходимо добавить класс .intec-ui-mod-block.

Кнопка
Прозрачная кнопка

Для того чтобы сделать кнопку прозрачной, необходимо добавить класс .intec-ui-mod-transparent.

Кнопка
Ссылочная кнопка

Для того чтобы сделать кнопку ссылочной, необходимо добавить класс .intec-ui-mod-link.

Скругление углов

Для того чтобы скруглить углы кнопки, необходимо добавить класс .intec-ui-mod-round-<значение>, где значение - это число от 1 до 5, которое эквивалентно скруглению в пикселях, none или half. Если значение half, то подразумевается скргление углов на половину высоты элемента.

Кнопка (none)
Кнопка (1)
Кнопка (2)
Кнопка (3)
Кнопка (4)
Кнопка (5)
Кнопка (half)
Интерактивная кнопка

Интерактивная кнопка обычно состоит из 2-х частей. Первая часть это контейнер с классом .intec-ui-part-icon (иконка), вторая - .intec-ui-part-content (содержимое кнопки). Кнопка может содержать любое количество частей. Каждая часть может быть расположена в любом месте. Отступ между частями интерактивной кнопки зависит от размеров текста.

Кнопка
Кнопка
Цветовые схемы
Кнопка
Кнопка (current)
Кнопка (blue)
Кнопка (blue-1)
Кнопка (red)
Кнопка (green)
Кнопка (green-1)
Кнопка (orange)
Кнопка (gray)
Размеры
Кнопка
Кнопка (1)
Кнопка (2)
Кнопка (3)
Кнопка (4)
Кнопка (5)

Поле ввода (input)

Класс для применения: .intec-ui.intec-ui-control-input.

Блочное поле ввода

Для того чтобы сделать поле ввода блочным элементом, необходимо добавить класс .intec-ui-mod-block.

Варианты отображения

Имеет несколько вариантов отображения, необходимо добавить класс .intec-ui-view-<значение>, где <значение> - число.

Скругление углов

Для того чтобы скруглить углы поля ввода, необходимо добавить класс .intec-ui-mod-round-<значение>, где значение - это число от 1 до 5, которое эквивалентно скруглению в пикселях, none или half. Если значение half, то подразумевается скргление углов на половину высоты элемента.

Размеры

Числовое поле ввода (numeric)

Класс для применения: .intec-ui.intec-ui-control-numeric.

Варианты отображения

Имеет несколько вариантов отображения, необходимо добавить класс .intec-ui-view-<значение>, где <значение> - число.

Вариант по умолчанию
Вариант 1
Вариант 2
Вариант 3
Вариант 4
Цветовые схемы
Схема по умолчанию
Схема current
Схема blue
Схема blue-1
Схема red
Схема green
Схема green-1
Схема orange
Схема gray
Размеры
Схема 1
Схема 2
Схема 3
Схема 4
Схема 5

Сообщение или оповещение (alert)

Класс для применения: .intec-ui.intec-ui-control-alert.

Сообщение или оповещение.
Цветовые схемы
Сообщение или оповещение.
Сообщение или оповещение. (current)
Сообщение или оповещение. (blue)
Сообщение или оповещение. (blue-1)
Сообщение или оповещение. (red)
Сообщение или оповещение. (green)
Сообщение или оповещение. (green-1)
Сообщение или оповещение. (orange)
Сообщение или оповещение. (gray)

Checkbox (checkbox)

Класс для применения: .intec-ui.intec-ui-control-checkbox. Имеет нестандартную сетку.



Размеры





Цветовые схемы









Radio (radiobox)

Класс для применения: .intec-ui.intec-ui-control-radiobox. Имеет нестандартную сетку.



Размеры





Цветовые схемы









Переключатели (switch)

Класс для применения: .intec-ui.intec-ui-control-switch. Имеет нестандартную сетку.



Размеры





Цветовые схемы









Вкладки (tabs)

Класс для применения: .intec-ui.intec-ui-control-tabs. Имеет нестандартную сетку.

Контент первой вкладки.
Контент второй вкладки.
Контент третьей вкладки.

Для того чтобы сделать вкладки блочным элементом, необходимо добавить класс .intec-ui-mod-block.

Контент первой вкладки.
Контент второй вкладки.
Контент третьей вкладки.
Варианты отображения

Имеет несколько вариантов отображения, необходимо добавить класс .intec-ui-view-<значение>, где <значение> - число.

Вариант по умолчанию
Контент первой вкладки.
Контент второй вкладки.
Контент третьей вкладки.
Вариант 1
Контент первой вкладки.
Контент второй вкладки.
Контент третьей вкладки.
Вариант 2
Контент первой вкладки.
Контент второй вкладки.
Контент третьей вкладки.
Цветовые схемы
Схема по умолчанию
Контент первой вкладки.
Контент второй вкладки.
Контент третьей вкладки.
Схема current
Контент первой вкладки.
Контент второй вкладки.
Контент третьей вкладки.
Схема blue
Контент первой вкладки.
Контент второй вкладки.
Контент третьей вкладки.
Схема blue-1
Контент первой вкладки.
Контент второй вкладки.
Контент третьей вкладки.
Схема red
Контент первой вкладки.
Контент второй вкладки.
Контент третьей вкладки.
Схема green
Контент первой вкладки.
Контент второй вкладки.
Контент третьей вкладки.
Схема green-1
Контент первой вкладки.
Контент второй вкладки.
Контент третьей вкладки.
Схема orange
Контент первой вкладки.
Контент второй вкладки.
Контент третьей вкладки.
Схема gray
Контент первой вкладки.
Контент второй вкладки.
Контент третьей вкладки.
Выравнивание

Имеет выравнивание вкладок слева, справа и по центру. Необходимо добавить класс .intec-ui-mod-position-<значение>, где <значение> - left, right или center. Позиционирование работает только при блочном варианте отображения.