Intense Template Documentation

Кастомизация шаблона

Замена логотипа в шаблоне

В Intense предусмотрена возможность замены трех типов логотипа: в шапке (для настольных и мобильных разрешений) и в футере сайта. Вы можете использовать как собственное изображение так и текст для замены логотипа.

Обратите внимание: Intense - это HTML продукт. Процедура замены логотипа выполняется вручную в каждом целевом .html файле.

Как заменить логотип в шапке сайта

Замена логотипа в шапке сайта для настольной версии выполняется в секции Page Head целевой страницы в блоке с классом .rd-navbar-brand.


        <!--Navbar Brand-->
        <div class="rd-navbar-brand">
            <a href="index.html">
                <img src='path/to/your-logo.png' alt=''/>
            </a>
        </div>

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

Замена логотипа для мобильной версии выполняется по тому же принципу в секции Page Head целевой страницы в блок с классом .rd-navbar-mobile-brand.


        <!--Navbar Brand-->
        <div class="rd-navbar-mobile-brand">
            <a href="index.html">
                <img src='path/to/your-mobile-logo.png' alt=''/>
            </a>
        </div>

Как заменить логотип в футере сайта

Замена логотипа в футере сайта выполняется в секции Page Footer целевой страницы в блоке с классом .footer-brand.


        < !--Footer Brand-->
        < div class="footer-brand">
            < a href="index.html">
                < img src='path/to/your-footer-logo.png' alt=''/>
            </a>
        </div>

Настройка навигации в шаблоне

Intense использует плагин RD Navbar для реализации навигации по сайту.

Как заменить тип навигации на странице

Intense поддерживает набор различных типов навигации для вашего удобства.

Вы можете воспользоваться одним из представленных ниже типов навигации.

Default
Sidebar Toggle
Sidebar Fixed
Floated

Как настроить темную цветовую гамму для навигации

Для того чтобы настроить темную цветовую гамму для навигации воспользуйтесь классом .rd-navbar-dark для сответствующего типа навигации.


        <!-- RD Navbar -->
        <nav class="rd-navbar rd-navbar-default rd-navbar-dark" …>
        ...
        </nav>

Как добавить новый пункт меню

Для того, чтобы добавить новый пункт меню к существующей навигации на странице необходимо определить новый элемент списка в первом уровне навигации:


        <!-- RD Navbar Nav-->
        <ul class="rd-navbar-nav">
         <li>
                <a href="path/to/your-page.html>Your Page</a>
         </li>
        ...

Как сделать пункт меню активным

Для того, чтобы указать активное состояние для соответствующего существующего пункта меню, воспользуйтесь классом .active для целевого элемента списка меню.


        <!-- RD Navbar Nav-->
        ...
                <li class="active">
                        <a href="path/to/your-page.html">Your Page</a>
                </li>
        ...

Как добавить иконку для пункта меню

Для того чтобы добавить иконку к существующему пункту меню, воспользуйтесь следующей разметкой:


        <!-- RD Navbar Nav-->
        ...
        <li>
             <a href="path/to/your-page.html">
                <span class="rd-navbar-icon mdi mdi-shuffle"></span>
                <span class="text-middle">Your Page</span>
             </a>
        </li>
        ...

где "mdi mdi-shuffle" - класс для отображения целевой иконки. Список всех иконок и соответствующих классов к ним представлен на странице Components > Toolkit Components > Icons.

Как добавить метку для пункта меню

Для того чтобы добавить метку к существующему пункту меню, воспользуйтесь следующей разметкой:


        <!-- RD Navbar Nav-->
        ...
        <li>
                <a href="path/to/your-page.html">
                        <span class="text-middle">Your Page</span>
                        <span class="rd-navbar-label text-middle label-custom label-xs-custom">
                        Your Label
                        </span>
                </a>
        </li>
        ...

Обратите внимание: Вы можете использовать любой из классов, представленных на странице Components > Toolkit Components > Labels, для стилизации меток.

Как добавить подменю

Для того чтобы добавить подменю к существующему пункту меню, необходимо определить дополнительный список с классом .rd-navbar-dropdown внутри соответствующего пункта меню:


        <!-- RD Navbar Nav-->
        ...
        <li>
                <a href="path/to/your-page.html">Your Page</a>
                <ul class="rd-navbar-dropdown">
                <li>
                        <a href="path/to/your-page-1.html">Submenu Item 1</a>
                </li>
                <li>
                        <a href="path/to/your-page-2.html">Submenu Item 2</a>
                </li>
                ...
                <li>
                        <a href="path/to/your-page-n.html">Submenu Item N</a>
                </li>
                </ul>
        </li>
        ...

Как добавить мегаменю

Для того чтобы добавить мегаменю к существующему пункту меню, воспользуйтесь следующей структурой:


    <!-- RD Navbar Nav-->
    ...
    <li>
      <a href="path/to/your-page.html">Your Page</a>
      <div class="rd-navbar-megamenu">
        <div class="row">
          <ul class="col-lg-3">
            <li>
              <a href="path/to/your-page-1.html">Submenu Item 1</a>
            </li>
          </ul>

          <ul class="col-lg-3">
            <li>
              <a href="path/to/your-page-2.html">Submenu Item 2</a>
            </li>
          </ul>

          <ul class="col-lg-3">
            <li>
              <a href="path/to/your-page-3.html">Submenu Item 3</a>
            </li>
          </ul>
          <ul class="col-lg-3">
            <li>
              <a href="path/to/your-page-4.html">Submenu Item 4</a>
            </li>
          </ul>
        </div>
      </div>
    </li>
    ...

Для создания колонок в мега меню используется Bootstrap Grid. Вы можете использовать любое количество колонок для генерации структуры мегаменю, однако мы рекомендуем использовать 4-х колоночную структуру.

Как добавить подменю по вкладкам

Для того чтобы добавить подменю по вкладкам к существующему пункту меню, воспользуйтесь следующей структурой:


        <!-- RD Navbar Nav-->
        ...
        <li>
        <a href="path/to/your-page.html">Your Page</a>
          <div class="rd-navbar-megamenu">
            <!-- Responsive-tabs-->
            <div data-type="horizontal" class="responsive-tabs responsive-tabs-classic">
              <ul data-group="tabs-group-default" class="resp-tabs-list tabs-1 text-center tabs-group-default">
                <li>Tab 1</li>
                <li>Tab 2</li>
              </ul>
              <div data-group="tabs-group-default" class="resp-tabs-container text-left tabs-group-default">
                <div>
                ... Tab 1 Content ...
                </div>
                <div>
                ... Tab 2 Content ...
                </div>
              </div>
            </div>
          </div>
        </li>
        ...

По умолчанию в Intense используется разметка мегаменю для формирования контента в меню по вкладкам, но Вы также можете использовать любой пользовательский контент.

Инструкция по работе с оптимизацией файла стилей

Для минификации файла стилей вам нужно воспользоваться одним из сервисов: CSS Minifier, CSS Compressor, Minify and Compress CSS.
Файл с результатом минификации назовите style.min.css.
Скопируйте его в папку css/ вашего шаблона.
Подключите данный файл в ваши HTML файлы вместо неминифицированного:
```
    <link rel="stylesheet" href="css/style.min.css">
```
Вместо этого:
```
    <link rel="stylesheet" href="css/style.css">
```

Настройка интернет-магазина

Intense - это HTML шаблон, нацеленный на разработчиков. Пример магазина в Intense используется лишь для удобства последующей доработки продукта разработчиками в рамках своих професиональных заказов и не содержит готового функционала для реализации рабочего магазина.

Внимание: Intense не содержит функционала для создания рабочего магазина. В демо приводятся лишь примеры реализации HTML разметки для создания магазина на основе Intense.

Настройка cтраницы режима техобслуживания

Intense содержит готовые примеры реализации страниц Maintenance и Coming Soon в разделе Pages. Ниже приведена информация по настройке данных страниц.

Как указать дату в счётчике обратного отсчета

Intense использует плагин jQuery Countdown для реализации счётчиков обратного отсчета. Подробную информацию о работе с данным плагином Вы можете найти в разделе Extensions > Countdown.

Для того чтобы настроить счётчик обратного отсчета в Intense, Вам необходимо в соответствующей разметке счётчика указать целевую дату в атрибуте data-time в формате "DD Mon YYYY":


        <div class="countdown-custom countdown-ellipse">
        <div data-type="until" data-time="25 Apr 2017" data-format="dhms" class="countdown"></div>
        </div>

Настройка контактной формы

Intense использует набор плагинов RD Mailform для реализации контактных форм. Подробную информацию по данным плагинам Вы можете найти в разделе Extensions > RD Mailform.

Для того, чтобы указать email адрес, на который будут приходить сообщения, отправляемые с помощью RD Mailform необходимо в файле bat/rd-mailform.php вашего сайта заменить email, указанный в переменной $recipients, на соответствующий email получателя.

$recipients = '[email protected]';

Настройка плавной прокрутки страницы для Windows

В HTML Website Templates имеется встроенная поддержка плавной прокрутки страницы для браузера Chrome в ОС Windows. Для того чтобы включить её, просто добавьте класс .use--smoothscroll для тега html:

<html lang="en" class="use--smoothscroll">

Настройка анимации элементов шаблона при прокрутке страницы

HTML Website Template используют расширение Wow.js и css-библиотеку Animate.css для реализации анимации при прокрутке страницы. Для того чтобы включить анимацию элементов при прокрутке всей страницы, необходимо добавить класс .wow-animation для тега html:

<html lang="en" class="wow-animation">

Также необходимо указать класс .wow и соответствующий класс анимации для целевого элемента.


        <div class=wow fadeIn">
        ...
        </div>

Вы также можете поставить задержку на проигрывание анимации используя атрибут data-wow-delay.


        <div data-wow-delay="0.2s" class="wow fadeIn">
        ...
        </div>

Список доступных анимаций представлен на странице Components > Toolkit Components > Animations шаблона. Ниже приведен список классов для создания соответствующих анимационных эффектов:

fadeIn
fadeLeft
fadeRight
fadeUp
fadeDown
slideLeft
slideRight
slideUp
slideDown

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

Intense использует плагин Swiper Slider для реализации слайдера. Подробную информацию о его настройке Вы можете найти в разделе Extensions > Swiper Slider

Настройка параллакса

В Intense предусмотрен плагин RD Parallax для реализации параллакса. Подробная документация по данному плагину и его настройке представлена в разделе Extensions > RD Parallax.

Как добавить секцию с параллаксом фоновой картинки

Для создания секции с параллаксом фоновой картинки, используйте следующую разметку, в которой требуется заменить путь к необходимой картинке в атрибуте data-url:


        <div class="rd-parallax">
        <div data-speed="0.35" data-type="media" data-url="path/to/your-image.jpg" class="rd-parallax-layer"></div>
        <div data-speed="0" data-type="html" class="rd-parallax-layer">
        ...
        </div>
        </div>

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

В Intense предусмотрен плагин RD Search для реализации формы поиска по страницам.

В Intense реализован "живой" поиск на страницах header-sidebar-fixed-light и header-sidebar-fixed-dark с выводом даты и тегов.

Как изменить дату на странице

Для того чтобы изменить дату на целевой странице, необходимо найти тег meta с атрибутом name="date" и изменить атрибут content.


        <meta name="date" content="...">

Как изменить теги на странице

Для того чтобы изменить теги на целевой странице, необходимо найти тег meta с атрибутом name="keywords" и изменить атрибут content.


        <meta name="keywords" content="intense web design multipurpose template">

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