HTML Templates Documentation

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

Настройка Почтовой формы

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

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

$recipients = '[email protected]';

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

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>
    

Ниже приведен список классов для создания соответствующих анимаций.

  • fadeIn
  • fadeLeft
  • fadeRight
  • fadeUp
  • fadeDown
  • slideLeft
  • slideRight
  • slideUp
  • slideDown

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

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

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

В Website Template предусмотрен плагин 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>
    

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

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

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

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


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

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

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

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

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