HTML Templates Documentation
Template Customization
Changing the Logo
In HTML Website Template, you can use either custom image or text logo.
Attention: HTML Website Template is an HTML product. Thus, the logo should be changed manually in every target .html file.
Changing the Logo
Header logo for the desktop version of the site should be changed in Page Head section of the target page with the .rd-navbar-brand class.
How to change footer logo
Footer logo is changed in Page Footer section of the block with .footer-brand or .brandclass.
< !--Footer Brand-->
< div class="footer-brand">
< img src='path/to/your-footer-logo.png' alt=''/>
Template navigation setup
HTML Website Template uses RD Navbar plugin for implementing website navigation.
Adding a new menu item
To add a new menu item to an existing menu, you should define a new list element on the first navigation level:
Adding a submenu
To add a submenu to the existing menu item, create an additional list with .rd-navbar-dropdown class inside the corresponding menu item:
...
Your Page
...
Adding Megamenu
To add a Megamenu to the corresponding menu item, please use the following markup:
...
Your Page
...
Bootstrap Grid is used for creating Megamenu columns. You can use any number of the columns for creating Megamenu structure. However, we recommend using 4-column structure .
Mailform setup
HTML Website Template uses a set of RD Mailform plugins for implementing contact forms. You can find more detailed instructions about these plugins in Extensions > RD Mailform section.
In order to set up the email address to send the e-mails (sent with the help of RD Mailform) to, please replace in bat/rd-mailform.php file the e-mail, which is specified in $recipients variable, with the needed recipient's email:
$recipients = 'your@email.com';
Template scroll animation setup
HTML Website Template uses Wow.js extension and css library Animate.css for implementing the scroll animation. To enable animation on page scroll, add .wow-animation class for the html tag.
You should also specify the .wow class and the corresponding class for the target element.
...
You can also set the animation delay, using the data-wow-delay attribute.
...
You can find the list of available animations on the Components > Toolkit Components > Animations template page. You can find a list of classes for generating different animated effects below.
- fadeIn
- fadeLeft
- fadeRight
- fadeUp
- fadeDown
- slideLeft
- slideRight
- slideUp
- slideDown
Slider Setup
HTML Website Template uses Swiper Slider plugin for implementing the slider. You can find more detailed instructions on setting it up in Extensions > Swiper Slider section.
Parallax Setup
HTML Website Template comes with RD Parallax plugin for implementing parallax effect. You can find more detailed information about the plugin and its setup in Extensions > RD Parallax section.
Adding a section with background image parallax
To create a section with background image parallax, please use the following marking, in which you should replace the image path in data-url attribute:
...
Search by pages setup
HTML Website Template comes with RD Search plugin for implementing search by pages.
Changing the date on the page
To change the date on the target page, find the meta-tag with name="date" attribute and change the value of the 'content' attribute.
How to change tags on the page
To change tags on the target page, find the meta-tag with name="keywords" attribute and change the value of the 'content' attribute.
hese tags are required for the correct functioning of the search. If you add new pages, you should also add these meta-tags.