HTML Website Template uses custom accodrions. To add аccordions to the target page, use the following marking:

<div class="accordion">
  <div class="accordion-item active">
    <div class="accordion-head">Lorem ipsum dolor sit amet, consectetur adipiscing?</div>
    <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-head">Sed do eiusmod tempor incididunt?</div>
    <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-head">Cursus vitae congue mauris rhoncus?</div>
    <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-head">Sit amet commodo nulla facilisi nullam vehicula ipsum?</div>
    <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-head">Aliquet porttitor lacus luctus?</div>
    <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</div>
  </div>
</div>

HTML Website Template uses Bootstrap extension for implementing tabs. To add tabs to the target page, use the following marking:

<div class="tab">
  <ul class="nav nav-line" role="tablist">
    <li class="nav-item"><a class="nav-link active" href="#tabs-1-1" data-toggle="tab" aria-selected"true">Tab 1</a></li>
    <li class="nav-item"><a class="nav-link" href="#tabs-1-2" data-toggle="tab" aria-selected"true">Tab 2<a><li>
    <li class="nav-item"><a class="nav-link" href="#tabs-1-3" data-toggle="tab" aria-selected"true">Tab 3</a></li>
  </ul>
   
  <div class="tab-content">
    <div id="tabs-1-1" class="tab-pane fade show active">Tab content 1</div>
    <div id="tabs-1-2" class="tab-pane fade">Tab content 2</div>
    <div id="tabs-1-3" class="tab-pane fade">Tab content 3</div>
  </div>
</div>

HTML Website Templates use αCounter.js extension to add counters to webpage.

Creating new counter

In order to create new counter the following HTML code should be added to page content:

<div data-counter="">25</div>

where "25" is your value for the counter

Counter working time correction

In order to change speed of counting you should add duration option to attribute and set time interval to the end of counting, in milliseconds.

For example,

<div data-counter='{"duration":"5000"}'>125</div>

Counter update interval

In order to change time interval between counter updates you should add refresh option to attribute and set needed time interval in milliseconds.

For example,

<div data-counter='{"duration":"5000","refresh":"300"}'>3000</div>

All available plugin parameters can be viewed in GitHub repository.

The plugin supports the following settings:

• Google API key setup for the map;
• Changing the map scale;
• Modifying the map’s center according to an address or coordinates;
• Setting the map style;
• Adding markers to the map.

Google API key setup for the map

Without a key, your map will work in demo mode. You can find a guide on getting the key ondevelopers.google.com

Insert the received key after key option in script.js:

...
components.gmap = {
  ...
  script: [
    '//maps.google.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry,places&v=quarterly',
    './components/google-map/google-map.min.js'
  ],
  init: function ( nodes ) {
    ...
};
...

How to change the map center coordinates

To replace the map center coordinates with the necessary ones, you need:

<!-- Google Map-->
  ...
<div class="google-map">
</div>
...

to replace a required address in data-settings attribute in .html file with a map in the section. As a result, you will get the following code:

<!-- Google Map-->
<div class="google-map" data-settings='{"center":{"lat":"40.715847","lng":"-73.999925"}}'>
</div>

How to add a marker to the map

To add your marker to the map, you need to add into the data-settings attribute code in json format:

...
<!-- Google Map-->
<div class="google-map" data-settings='{markers:{'park':{position:'Columbus Park, Baxter Street, New York, United State',html:'Columbus park'}}}}'>
</div>
...

How to replace the map style

The map supports lots of styling variants. You can get different ready-made styling variations on the website:https://snazzymaps.com/.

On the given website you need to copy the style array of a map you prefer and insert it into data-settings attribute of a corresponding map on a target *.html page. For option styles :

<!-- Google Map-->
<div class="google-map" data-settings='{"styles":"Your Map Styles"}'>
</div>

HTML Website Template uses Isotope for creating a layout filter.

To insert isotope to the corresponding layout of the target page, you should create '.isotope-wrap' container and just add the data-isotope-layout attribute to the target HTML marking in this container, then specify the corresponding layout mode:

<div class="isotope-wrap">
  <div class="row" data-isotope-layout="masonry">
      <div class="col-sm-6 col-md-4">
          Item 1
      </div>
      <div class="col-sm-6 col-md-4">
          Item 2
      </div>
  </div>
</div>

Supported layout modes are the following:

1. masonry

   elements are grouped randomly;

2. fitRows

   elements are grouped horizontally;

3. vertical

   elements are grouped vertically.

To insert isotope to the layouts, which do not contain grid elements, you should define the .isotope-item class for every isotope element.

<div class="isotope-wrap">
  <div data-isotope-layout="masonry">
      <div class="isotope-item">
          Item 1
      </div>
      <div class="isotope-item">
          Item 2
      </div>
  </div>
</div>

Attention: in this case, dimensions of Isotope elements should be set up manually. HTML Website Template offers the ready-made functionality only for the grid elements.

To add Isotope filters to a page, you should define the corresponding filter types for each item with data-filter attribute:

<div class="isotope-wrap">
  <div data-isotope-layout="masonry">
      <div class="isotope-item" data-filter="type-1">
          Item 1
      </div>
      <div class="isotope-item" data-filter="type-2">
          Item 2
      </div>
  </div>
</div>

Now, for items filtering it’s enough just to define the corresponding filter control buttons within the isotope container.

<div class="isotope-wrap">
  <button class="isotope-filter active" data-isotope-filter="*">Show All</button>
  <button class="isotope-filter" data-isotope-filter="type-1">Type 1</button>
  <button class="isotope-filter" data-isotope-filter="type-2">Type 2</button>
  <div data-isotope-layout="masonry">
    <!-- Isotope items -->
  </div>
</div>

For convenience, put the buttons in the filter container:

<div class="isotope-wrap">
  <ul class="isotope-filters">
    <li>
      <button class="isotope-filter active" data-isotope-filter="*">Show All</button>
    </li>
    <li>
      <button class="isotope-filter" data-isotope-filter="type-1">Type 1</button>
    </li>
    <li>
      <button class="isotope-filter" data-isotope-filter="type-2">Type 2</button>
    </li>
  </ul>
  <div data-isotope-layout="masonry">
    <!-- Isotope items -->
  </div>
</div>

We use LightGallery plugin in our templates to implement functional mobile-friendly galleries.

This script supports galleries with:

• Thumbnails
• YouTube/Vimeo/HTML5 video
• iframe
• Photo captions
• HTML markup
• Social network sharing
• Custom CSS3 animation

Plugin and style sheets linking occurs when the element that matches the `[data-lightgallery]ё selector is present on the page.

Markup example:

<div class="d-sm-flex group-10" data-lightgallery>
  <a class="lightgallery-item" href="https://via.placeholder.com/800x600">
    <img src="https://via.placeholder.com/140x90" alt="">
  </a>
  <a class="lightgallery-item" href="https://via.placeholder.com/800x600">
    <img src="https://via.placeholder.com/140x90" alt="">
  </a>
  <a class="lightgallery-item" href="https://via.placeholder.com/800x600">
    <img src="https://via.placeholder.com/140x90" alt="">
  </a>
</div>

This template provides a data-lightgallery attribute for Lightgallery that can accept a JSON object with the plugin parameters, e.g.:

<div data-lightgallery='{ "thumbnail": false }'>...</div>

All available parameters of the plugin can be viewed in its GitHub repository.

HTML Website Templates use Owl-carousel.js extension for carousel functionality implementing to template pages with extended data-API for interaction.

Сarousel only requires a container .owl-carousel :

<!-- Owl Carousel -->
  <div class="owl-carousel">

  </div>

All elements of the carousel are located one after another inside the container. For exapmle images:

<!-- Owl Carousel -->
  <div class="owl-carousel">
    <img src="path/to/image">
    <img src="path/to/image">
    <img src="path/to/image">
  </div>

or any markup:

<!-- Owl Carousel -->
  <div class="owl-carousel">
    <div class="your-element">
      ...
    </div>
    <div class="your-element">
      ...
    </div>
    <div class="your-element">
      ...
    </div>
  </div>

Carousel loop configuration

In order to enable carousel loop you should use data-loop data attribute (true/false, by default is set to true) for target item with .owl-carousel class.

For example,

<div class="owl-carousel" data-loop="false">
    ...
  </div>

Carousel autoplay configuration

HTML Website templates Owl Carousel has autoplay disabled by default. In order to enable this feature you should use data-autoplay data attribute with value set to ‘true’.

<div class="owl-carousel" data-autoplay="true">
   ...
 </div>

Carousel items display configuration

Owl carousel allows to display one or couple of items at once. In order to manage carousel items display you should use corresponding data attributes data-items and data-*-items.

• data-items=”N” - shows N carousel items by default (default value = 1).
• data-items=”N” - shows N carousel items, starting from XS screen dimensions.
• data-sm-items=”N” - shows N carousel items, starting from SM screen dimensions.
• data-md-items=”N” - shows N carousel items, starting from MD screen dimensions.
• data-lg-items=”N” - shows N carousel items, starting from LG screen dimensions.
• data-xl-items=”N” - shows N carousel items, starting from xl screen dimensions.
• data-xxl-items=”N” - shows N carousel items, starting from xxl screen dimensions.

For example,

<div class="owl-carousel" data-items="2" data-sm-items="3" data-lg-items="4">
    ...
  </div>

This example shows that by default there will appear 2 carousel items, for xs, sm and md dimensions - 3 items, for lg dimensions - 4 items.

Carousel navigation setup

In order to display “Previous”/”Next” navigation in Owl Carousel you should use corresponding data-nav=”true” data attribute for target carousel.

<div class="owl-carousel" data-dots="true">
    ...
  </div>

In order to define pagination dots display step you should use data-dots-each=”N” data attribute.

<div class="owl-carousel" data-dots="true" data-dots-each="1">
    ...
  </div>

Carousel scene padding configuration

In order to define carousel scene padding you should use data-*-stage-padding=”N” data attribute.

<div class="owl-carousel" data-stage-padding="30">
    ...
  </div>

Carousel items padding configuration

In order to define carousel items padding you should use data-*-margin=”N” data attribute (by default = 30).

<div class="owl-carousel" data-margin="15">
    ...
  </div>

HTML Website Templates use RD Mail Form extension to implement mail form functionality. Basic form code structure is similar to the one below:

<!-- RD Mailform-->
<form class="rd-mailform" data-form-output="form-output-global" data-form-type="contact" method="post" action="bat/rd-mailform.php">
  <div class="form-wrap">
      <label for="contact-name" class="form-label">Name</label>
      <input id="contact-name" type="text" name="name" data-constraints="@Required" class="form-control"/>
    </div>
    <div class="form-wrap">
      <label for="contact-phone" class="form-label>Phone</label>
      <input id="contact-phone" type="text" name="phone" data-constraints="@Required" class="form-control"/>
    </div>
    <div class="form-wrap">
      <label for="contact-email" class="form-label">E-Mail</label>
      <input id="contact-email" type="email" name="email" data-constraints="@Email @Required" class="form-control"/>
    </div>
    <div class="form-wrap">
      <label for="contact-message" class="form-label">Message</label>
      <textarea id="contact-message" name="message" data-constraints="@Required" class="form-control"></textarea>
    </div>
    <div class="form-wrap form-wrap-recaptcha">
      <div class="recaptcha" id="captcha1" data-sitekey="6LfZlSETAAAAAC5VW4R4tQP8Am_to4bM3dddxkEt" ></div>
    </div>
    <button type="submit" class="button button-primary">Send</button>	
</form>
<div id="form-output-global"></div>

Form mode configuration

RD Mailform allows to use mail form in three modes:

• Contact form - contact;
• Booking form - order;
• Newsletter form - subscribe;

In order to change form working mode you should add hidden form-type field to target form HTML code, where respectable form mode is set as a value.

<!-- RD Mailform -->
<form class='rd-mailform' method="post" action="bat/rd-mailform.php">
  <!-- RD Mailform Type -->
  <input type="hidden" data-form-type="contact" value="contact"/>
  <!-- END RD Mailform Type -->
</form>
<!-- END RD Mailform -->

Mail configuration for messages delivery

Form sends messages to specific email address, defined in bat/rd-mailform.php file in $recipients variable. You may set any number of email addresses, separated by space here.

$recipients = "test@demolink.com test2@demolink.com" 

Form fields configuration

Mail form RD Mailform allows you to use the following field types:

• Text field

  <input type="text" name="name" data-constraints="@Required" placeholder="Name:"/>

• Date selector

  <div class="form-group" >
    <input type="date" data-constraints="@Date" name="date" placeholder="Date:" class="form-control"/>
   </div>

• Text area

  <textarea type="text" name="message" data-constraints="@Required" placeholder="Message:"></textarea>

Form fields validation setup

Mail form RD Mailform supports form fields dynamic validation. You should add data-constraints data attribute to target field HTML code in order to implement this validation for target form.

There are following validation types available:

• @LettersOnly - field’s value should be set to letters only;
• @NumbersOnly - field’s value should be set to numbers only;
• @Required - field must be filled in;
• @Email - field’s value should be set to email address;
• @PhoneNumber - field’s value should be set to phone number in the international format;
• @Date - field’s value should be set to date in MM / DD / YYYY format;
• @SelectRequired - at least one of menu options must be selected.

For instance,

<div class="form-group" >
  <label data-add-placeholder for="mailform-input-textarea"> Message </label>
  <textarea name="message" id="mailform-input-textarea" data-constraints="@Required"></textarea>
</div>

Form informing messages configuration

Mail form RD Mailform allows you to set custom informing messages, such as fields validation error messages or messages on successful/unsuccessful form submitting.

if (plugins.rdMailForm.length) {
    var i, j, k,
      msg = {
        'MF000': 'Successfully sent!',
        'MF001': 'Recipients are not set!',
        'MF002': 'Form will not work locally!',
        'MF003': 'Please, define email field in your form!',
        'MF004': 'Please, define type of your form!',
        'MF254': 'Something went wrong with PHPMailer!',
        'MF255': 'Aw, snap! Something went wrong.'
      };

    for (i = 0; i < plugins.rdMailForm.length; i++) {
      var $form = $(plugins.rdMailForm[i]),
        formHasCaptcha = false;

      $form.attr('novalidate', 'novalidate').ajaxForm({
        data: {
          "form-type": $form.attr("data-form-type") || "contact",
          "counter": i
        },
        beforeSubmit: function (arr, $form, options) {
          if (isNoviBuilder)
            return;

          var form = $(plugins.rdMailForm[this.extraData.counter]),
            inputs = form.find("[data-constraints]"),
            output = $("#" + form.attr("data-form-output")),
            captcha = form.find('.recaptcha'),
            captchaFlag = true;

          output.removeClass("active error success");

          if (isValidated(inputs, captcha)) {

            // veify reCaptcha
            if(captcha.length) {
              var captchaToken = captcha.find('.g-recaptcha-response').val(),
                captchaMsg = {
                  'CPT001': 'Please, setup you "site key" and "secret key" of reCaptcha',
                  'CPT002': 'Something wrong with google reCaptcha'
                }

              formHasCaptcha = true;

              $.ajax({
                method: "POST",
                url: "bat/reCaptcha.php",
                data: {'g-recaptcha-response': captchaToken},
                async: false
              })
                .done(function (responceCode) {
                  if (responceCode != 'CPT000') {
                    if (output.hasClass("snackbars")) {
                      output.html(' <p> <span class="icon text-middle mdi mdi-check icon-xxs"> </span> <span>' + captchaMsg[responceCode] + ' </span> </p>')

                      setTimeout(function () {
                        output.removeClass("active");
                      }, 3500);

                      captchaFlag = false;
                    } else {
                      output.html(captchaMsg[responceCode]);
                    }

                    output.addClass("active");
                  }
                });
            }

            if(!captchaFlag) { 
              return false;
            }

            form.addClass('form-in-process');

            if (output.hasClass("snackbars")) {
              output.html(' <p> <span class="icon text-middle fa fa-circle-o-notch fa-spin icon-xxs"> </span> <span>Sending </span> </p>');
              output.addClass("active");
            }
          } else {
            return false;
          }
        },
        error: function (result) {
          if (isNoviBuilder)
            return;

          var output = $("#" + $(plugins.rdMailForm[this.extraData.counter]).attr("data-form-output")),
            form = $(plugins.rdMailForm[this.extraData.counter]);

          output.text(msg[result]);
          form.removeClass('form-in-process');

          if(formHasCaptcha) {
            grecaptcha.reset();
          }
        },
        success: function (result) {
          if (isNoviBuilder)
            return;

          var form = $(plugins.rdMailForm[this.extraData.counter]),
            output = $("#" + form.attr("data-form-output"));

          form
            .addClass('success')
            .removeClass('form-in-process');

          if(formHasCaptcha) {
            grecaptcha.reset();
          }

          result = result.length === 5 ? result : 'MF255';
          output.text(msg[result]);

          if (result === "MF000") {
            if (output.hasClass("snackbars")) {
              output.html(' <p> <span class="icon text-middle mdi mdi-check icon-xxs"> </span> <span>' + msg[result] + ' </span> </p>');
            } else {
              output.addClass("active success");
            }
          } else {
            if (output.hasClass("snackbars")) {
              output.html('  <p class="snackbars-left"> <span class="icon icon-xxs mdi mdi-alert-outline text-middle"> </span> <span>' + msg[result] + ' </span> </p>');
            } else {
              output.addClass("active error");
            }
          }

          form.clearForm();
          form.find('input, textarea').blur();

          setTimeout(function () {
            output.removeClass("active error success");
            form.removeClass('success');
          }, 3500);
        }
      });
    }
  }

SMTP server configuration

SMTP server setting does not relate to RD Mailform form settings at all.

In order to send your site messages via SMTP-server you'll need to refer to official PhpMailer (library, used in form) documentation or check this tutorial from official documentation.

• http://phpmailer.worxware.com/?pg=examplebsmtp

Please, note: mail form extension does not work locally. You should upload site to corresponding hosting server in order to send emails.

Configuring spam and abuse protection

RD Mailform uses Google reCAPTCHA for spam protection.

Pay attention: in order to disable Google reCAPTCHA, just delete a section of html code, wrapped in comments "<!--Google captcha-->" - "<!-- End google captcha-->".

Getting Started with Google ReCaptcha

To manage Google ReCaptcha, you should:

• Register your domain at Google reCaptcha website and get a pair of API-keys (a pair of keys consists of site key and secret).
• Specify your API-keys in bat/reCaptcha.php file in $siteKey and $secret variables at the beginning of the file:

  $siteKey = 'You site key here';
  $secret = 'You secret key here';

• Paste this section to html and specify your site key in data-attribute data-sitekey=""

You can find more detailed instructions at Google ReCaptcha official website.

Google ReCaptcha Marking

The basic marking for ReCaptcha looks the following way:

<!--Google captcha-->
  <div class="form-wrap">
    <div id="captcha1" data-sitekey="You site key here" class="recaptcha"></div>
  </div>
<!-- End google captcha-->

Pay attention: id attribute and .recaptcha class are required.

Google ReCaptcha Setup

Google Recaptcha supports the following settings:

• Changing size;
• Changing color scheme.

Changing Google ReCaptcha Size

To change widget size, specify in data-attribute data-size one of the following size values:

• compact;
• normal (default).

The sample code looks the following way:

<!--Google captcha-->
  <div class="form-wrap">
    <div id="captcha1" data-sitekey="You site key here" data-size="compact" class="recaptcha"></div>
  </div>
<!-- End google captcha-->

Changing Google ReCaptcha widget color scheme

To change widget color scheme, specify in the data-attribute data-theme one of the following variants:

• dark;
• light (default).

Sample code looks the following way:

<!--Google captcha-->
  <div class="form-wrap">
    <div id="captcha1" data-sitekey="You site key here" data-theme="dark"class="recaptcha"></div>
  </div>
<!-- End google captcha-->

HTML Website Templates use RD Navbar extension to implement site navigation functionality.

Plugin and style sheets linking occurs when the element that matches the .rd-navbar selector is present on the page.

An example of the simplest markup:

<div class="rd-navbar-wrap">
  <nav class="rd-navbar">
    <ul class="rd-navbar-nav">
      <li class="rd-navbar-nav-item"><a class="rd-navbar-link"></a></li>
      <li class="rd-navbar-nav-item"><a class="rd-navbar-link"></a></li>
      <li class="rd-navbar-nav-item"><a class="rd-navbar-link"></a></li>
      <li class="rd-navbar-nav-item"><a class="rd-navbar-link"></a></li>
    </ul>
  </nav>
</div>

Please, note: navbar HTML structure might differ depending on exact template design specifications.

All RD Navbar parameters are configured only in initialization.

All available parameters of the plugin can be viewed on RD Navbar website.

HTML Website Templates use RD Range plugin to enable range selection.

The plugin supports the following settings:

• data-min

  sets min range value.

• data-max

  sets max range value.

• data-step

  sets step value.

• data-start

  sets start position. For example: [10,20].

• data-min-diff

  sets min acceptable difference between 2 values.

• data-input

  you should specify CSS selector of the HTML element, in which the value should be displayed (required).

• data-input-2

  you should specify CSS selector of the HTML element, in which the second value should be displayed.

• data-precision

  data-precision - sets the number of characters after the decimal point for values. For example: (0,01).

• data-tooltip

  data-tooltip - enables\disables tooltips with current values for each indicator.

The basic range selection marking looks the following way:

<!-- RD Range-->
<input type="text" name="value-1" class="rd-range-input-value-1"/>
<input type="text" name="value-2" class="rd-range-input-value-2"/>

<div class="rd-range" data-min="50" data-max="1000" data-start="[75, 244]" data-step="1"
	data-tooltip="true" data-min-diff="10"
	data-input=".rd-range-input-value-1" data-input-2=".rd-range-input-value-2"></div>

You can create a simple range selection slider:

<!-- RD Range single line-->
<div class="rd-range-input-value-3"> </div>

<div class="rd-range" data-min="1" data-max="100" data-start="[15]" data-step="1"
data-min-diff="10" data-input=".rd-range-input-value-3" > </div>

This plugin allows to implement the search on several pages with the ability to set up the layout for search results.

Plugin and style sheets linking occurs when the element that matches the data-rd-search attribute is present on the page.

The basic form marking should look the following way:

<form class="rd-form" action="search-results.html" method="GET" data-rd-search='{"mode":"submit"}'>
	<input class="form-control" type="text" placeholder="Enter a keyword" autocomplete="off" name="s">
	<button class="btn btn-dark" type="submit">Search</button>
</form>
<div class="rd-search-results"></div>

This search allows to display results with any marking, but you should correctly set up all the target pages.

Search pages setup

All the setup is carried out in the head section of every page and is necessary for generating the search results template:

<head>
		...
</head>

Title display in search results

To display the title in search results, specify it for every page inside the title tag:

<!-- Site Title-->
<title>HTML Website Template</title>

Keywords display in search results

To display keywords (tags) in search results, specify them for every page in 'content' attribute of the tag:

<meta name="keywords" content="HTML Website Template web design multipurpose template">

Additional information display in search results

To display additional information in search results, specify it for every page in meta tag with name and content attributes, where 'name' is the unique information name, and 'content' is the information that should be displayed. For example, to display the page description, add the following tag:

<meta name="description" content="This page ...">

The amount of tags is unlimited.

Search form setup

RD Search provides a data-rd-search attribute that can accept a JSON object with the plugin parameters, e.g.:

<form class="rd-form" action="search-results.html" method="GET" data-rd-search='{"mode":"submit"}'>
	...
</form>

Search filter setup

You can set up a filter, which specifies pages, on which the search should be carried out (by title). For example, to carry out search on HTML pages, the title of which contains 'blog' word, use the following code:

<form class="rd-form" action="search-results.html" method="GET" data-rd-search='{ "mode":"submit", "filter":"blog*.html" }'>
		...
</form>

The default search filter can be changed in script.js file in filter variable, which can be found in RD Search options:

new RDSearch( Object.assign( {
	...
	filter: '*.html',
	handler: 'components/rd-search/rd-search.php',
	output: '.rd-search-results'
	...
} );

Live Search setup

You can enable live search to display search results without reloading the page. To do this, change optionmode in JSON object with valuelive and specifyoutput option, which will display the result. For example:

<form class="rd-form" action="search-results.html" method="GET" data-rd-search='{ "mode":"live", "output":".rd-search-live-results" }'>
		...
</form>
<div id="rd-search-live-results"></div>

Search results template setup

Search results template is closely connected with the setup of the page described above, namely with specifying different meta-tags. You can set up the HTML markup for search results. To do this, add template option to JSON object, to which you should add the corresponding marking for displaying the search results. The line supportrule data transfer format.

Here, 'rule' is the 'name' attribute of the meta-tag, which is specified on the page. There are 4 default values, which do not require meta-tags and display the necessary information:

• title - contains the value of the'<title/> tag of the target page;
• tokens - contains a part of the found content of the target page, which meets the search results;'
• href - contains the path to the target page;'
• count - amount of the found instances on the page.'

For example:

<form class="rd-form" action="search-results.html" method="GET" data-rd-search='{ "mode":"submit", "template":"
	<div class="result-item">
		<h3 class="search-title"><a href="href">title</a></h3>
		<p class="tags">in keywords</p>
	</div>
	...
" }'>
<div id="rd-search-results"></div>

The default search results template can be changed in script.js file in the template variable, which can be found in RD Search options:

new RDSearch( Object.assign( {
	...
	template: 'YOUR_TEMPLATE',
	handler: 'components/rd-search/rd-search.php',
	output: '.rd-search-results'
	...
} );

HTML Website Templates use Swiper.js extension to implement slider functionality to template pages with extended data-API for interaction.

Default slider code structure appears as follows:

<!-- Swiper -->
<div class="swiper-container swiper-slider" data-height="" data-min-height="">
  <div class="swiper-wrapper">
    <div class="swiper-slide" data-slide-bg="">
      <div class="swiper-slide-caption">

      </div>
    </div>
    <div class="swiper-slide" data-slide-bg="">
      <div class="swiper-slide-caption">

      </div>
    </div>
    <div class="swiper-slide" data-slide-bg="">
      <div class="swiper-slide-caption">

      </div>
    </div>
  </div>

  <!-- Swiper Pagination -->
  <div class="swiper-pagination"></div>

  <!-- Swiper Navigation -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- Swiper Scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>
<!-- END Swiper -->

Slide background image configuration

Swiper slider height is set by using corresponding data-height and data-min-height attributes to target slider.

• data-height - defines requires slider height;
• data-min-height - defines slider height minimum;

You can set slider height (data-height, data-min-height) value in 3 formats:

• *px - defines static height, it will stay unchanged on screen resize;
• *% - defines slider height as a percent of its width;
• *vh - defines slider height as a percent of window height.

Static height example.

<div class="swiper-container swiper-slider" data-height="500px">
   ...
 </div>

Slider percent example

<div class="swiper-container swiper-slider" data-height="50%" data-min-height="300px">
   ...
 </div>

Window height example

<div class="swiper-container swiper-slider" data-height="100vh" data-min-height="300px">
    ...
  </div>

In case you do not specify slider height, it will be calculated based on the embedded content.

Slider autoplay configuration

By default Swiper slider in HTML Website template has autoplay enabled. In order to disable it or change slides switching time you should use data-autoplay attribute by using false key or time value in milliseconds. It should be added to target item with .swiper-slider class.

For example,

<div class="swiper-container swiper-slider" data-autoplay="false">
    ...
  </div>

or,

<div class="swiper-container swiper-slider" data-autoplay="3000">
    ...
  </div>

Slider loop configuration

To loop the slide display in slider you should use the data-loop data attribute (true/false, by default it’s set to true) for target item with .swiper-slider class.

For example,

<div class="swiper-container swiper-slider" data-direction="vertical">
    ...
  </div>

Slider navigation setup

Swiper supports the display of “Previous” and “Next” buttons to manage slides appearance. In order to show them you should use the following code structure for target slider.

<div class="swiper-container swiper-slider">
    <!-- Slider Navigation -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

Slider pagination setup

Swiper supports slider pagination display. In order to show it you should use the following code structure for target slider.

<div class="swiper-container swiper-slider">
    <!-- Slider Pagination -->
    <div class="swiper-pagination"></div>
  </div>

By default slider pagination is clickable. If you need to disable this feature you should define data-clickable attribute for corresponding slider pagination.

<div class="swiper-container swiper-slider">
    <!-- Slider Pagination -->
    <div class="swiper-pagination" data-clickable="false"></div>
  </div>

To show the numeric value for corresponding pagination point you should use data-index-bullet=”true” data attribute for target slider pagination.

<div class="swiper-container swiper-slider">
    <!-- Slider Pagination -->
    <div class="swiper-pagination" data-index-bullet="true"></div>
  </div>

Scrollbar configuration

Swiper slider supports scrollbar display. In order to show them you should use the following code structure for target slider.

<div class="swiper-container swiper-slider">
    <!-- Slider Scrollbar -->
    <div class="swiper-scrollbar"></div>
  </div>

By default interaction with scrollbar is enabled. If you need to disable this feature you should define data-draggable=”false” data attribute for corresponding scrollbar in target slider code.

<div class="swiper-container swiper-slider">
    <!-- Slider Scrollbar -->
    <div class="swiper-scrollbar" data-draggable="false"></div>
  </div>

Arrows management

Swiper slider allows to manage slides appearance by using keypad arrow buttons. In order to enable this option you should use data-keyboard data attribute for target slider.

<div class="swiper-container swiper-slider" data-keyboard="true">
    ...
  </div>

Mouse management

Swiper slider supports slider management by using mouse. In order to enable this option you should use data-mousewheel data attribute for target slider.

<div class="swiper-container swiper-slider" data-mousewheel="true">
    ...
  </div>

By default this option blocks further page scrolling when first or last slide is reached. In order to disable page scrolling in this case you should use data-mousewheel-release=”true” data attribute for target slider.

<div class="swiper-container swiper-slider" data-mousewheel="true"
    data-mousewheel-release="true">
    ...
  </div>

Slide parallax integration

В HTML Website Templates allow you to integrate RD Parallax parallax effect to target slide of your Swiper slider. In order to do this you should use the following markup :

<!-- Swiper -->
<section class="rd-parallax rd-parallax-swiper">
  <div class="rd-parallax-layer" data-speed="" data-sm-speed=""  data-type="html">
    <section class="swiper-container swiper-slider" data-parallax="true">
      <div class="swiper-wrapper">
        <!-- RD Parallax -->
        <div class="swiper-slide" data-slide-bg="images/page-1_img01.jpg">
        </div>

        <div class="swiper-slide"></div>
      </div>
    </section>
  </div>
</section>

Slide background video integration

HTML Website Templates allow you to integrate Vide.js background video to target slide of your Swiper slider. In order to do this you should use the following markup :

<div class="swiper-slide">
  <div class="vide" data-vide-bg="video/video-bg">
    <div class="swiper-caption swiper-parallax" data-speed="0.5" data-fade="true"></div>
  </div>
</div>

Animate.css integration to slide elements

HTML Website Templates allow you to integrate Animate.css to slider elements. In order to do this you should define corresponding data attributes: data-caption-animate and data-caption-delay (to set delay if needed) for target slide. Delay time for data-caption-delay is set in milliseconds. You can use any animation effect, available in Animate.css as a target animation.

<div class="swiper-container swiper-slider">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="swiper-slide-caption">
          <h2 data-caption-animate="fadeUp">Your text goes here</h2>
          <p data-caption-animate="fadeUp" data-caption-delay="200">
          Some other text goes here
          </p>
        </div>
      </div>
    </div>
  </div>

Sliding effect configuration

Swiper slider has few sliding effects available:

• fade
• slide
• coverflow
• cube

To change sliding effect, you should use corresponding data-slide-effect data attribute for target slider.

<div class="swiper-container swiper-slider" data-slide-effect="fade">
  ...
</div>