Diva Multipurpose Bootstrap 5 HTML Template
Your awesome template documentation version 1.0
Introduction
- Item Name : Diva eCommerce Multipurpose Bootstrap 5 HTML Template
- Item Version : v 1.0
- Author : Annimex Web
- Support Forum : annimexweb@gmail.com
Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel free to email us at annimexweb@gmail.com Thanks so much! Cheers!
This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this template. You may learn basics here(Html,CSS and Javascript).
Notes:- For questions on basic HTML, Javascript or CSS editing - please give your question a quick Google or visit W3Schools as template issues get top priority.
- You will need some basic knowledge of HTML/CSS to edit the template.
- Get started with Bootstrap 5, the world's most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.
Requirements
You will need the following softwares to customize this template.
- Code Editing Software (eg: Dreamweaver, Sublime Text or Notepad)
- Web Browser for testing (eg: Google Chrome or Mozilla Firefox)
- FTP Tool to upload files to Server (eg: FileZilla)
Be careful while editing the template. If not edited properly, the design layout may break completely. No support is provided for faulty customization.
Getting Started #back to top
Follow the steps below to setup your site template:
- Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files to your hosting web server using FTP in order to use it on your website.
- Below is the folder structure and needs to be uploaded to your website root directory:
Assets/css- Stylesheets FolderAssets/fonts- Fonts FolderAssets/images- Images FolderAssets/js- Java Scripts Folderindex.html- Main home file (and All HTML files)
- You should upload all or specific HTML files as per your need.
- You're now good to go..! Start adding your content/images and generate your beautiful brand new website for your awesome users.
Bootstrap Grid System
YOUR CODES GOES HERE
Our you can use the grid system with 2 columns like this;
YOUR CODES GOES HERE
YOUR CODES GOES HERE
Our you can use the grid system with 3 columns like this;
YOUR CODES GOES HERE
YOUR CODES GOES HERE
YOUR CODES GOES HERE
HTML Structure #back to top
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="description">
<title>Diva - Multipurpose Bootstrap 5 Html Template</title>
<link rel="shortcut icon" href="assets/images/favicon.png" />
<link rel="apple-touch-icon" href="assets/images/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="assets/images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="assets/images/apple-touch-icon-114x114.png" />
<link rel="stylesheet" href="assets/css/plugins.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/responsive.css">
</head>
<body>
<div class="pageWrapper">
<header>
[Section Content]
</header>
<div class="container" id="page-content">
[Body Section Content]
</div>
<footer>
[Footer Content]
</footer>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/main.js"></script>
</div>
</body>
</html>
Included Files #back to top
1.1 HTML Files (alphabetical order)
- 404.html
- about-us-style1.html
- about-us-style2.html
- about-us-style3.html
- blog-fullwidth.html
- blog-grid-view.html
- blog-left-sidebar.html
- blog-right-sidebar.html
- blog-list-view.html
- blog-masonry.html
- blog-single-post.html
- brands-page.html
- cart.html
- cart-style2.html
- checkout.html
- checkout-style2.html
- checkout-success.html
- cms-page.html
- collection-3columns.html
- collection-4columns.html
- collection-5columns.html
- coming-soon-style1.html
- coming-soon-style2.html
- coming-soon-style3.html
- coming-soon-style4.html
- compare.html
- compare-style2.html
- contactus-style1.html
- contactus-style2.html
- empty-cart.html
- empty-category.html
- empty-compare.html
- empty-search.html
- empty-wishlist.html
- faqs-style1.html
- faqs-style2.html
- forgot-your-password.html
- home2-default.html
- home3-classic.html
- home4-fullwidth.html
- home5-boxed.html
- home6-parallax.html
- home7-creative.html
- home8-simple.html
- home9-simple2.html
- home10-minimal.html
- home11-modern.html
- home12-category.html
- home13-dark.html
- home14.html
- index.html
- login.html
- lookbook-2columns.html
- lookbook-3columns.html
- lookbook-4columns.html
- lookbook-5columns.html
- lookbook-shop.html
- my-account.html
- privacy-policy.html
- prodcut-360-degree-view.html
- product-accordian.html
- product-call-for-price.html
- product-external-affiliate.html
- product-grouped.html
- product-hover-info.html
- product-labels.html
- product-layout1.html
- product-layout2.html
- product-layout3.html
- product-layout4.html
- product-layout5.html
- product-layout6.html
- product-layout7.html
- product-layout8.html
- product-outofstock.html
- product-pre-orders.html
- product-standard.html
- product-swatches-style.html
- product-variable.html
- register.html
- shop-fullwidth.html
- shop-grid-2.html
- shop-grid-3.html
- shop-grid-4.html
- shop-grid-5.html
- shop-grid-6.html
- shop-left-sidebar.html
- shop-right-sidebar.html
- shop-listview.html
- shop-listview-sidebar.html
- shop-search-results.html
- shop-sidebar-drawer.html
- size-guide.html
- wishlist.html
- wishlist-style2.html
Technology #back to top
Diva is based on front-end framework Bootstrap for fully flexible and responsive layouts. It also uses the latest web technology HTML5 for semantic content structuring and CSS3 for versatile and powerful styling options.
Read more about the used technologyBootstrap: http://getbootstrap.com
HTML5/CSS3: http://www.w3schools.com
HTML5: http://html5doctor.com
Usage – Customization #back to top
General & Fonts Options - #back to top
1. Annimex Fonts Icon
- You can add/change the site font icon, used from Annimex Custom Fonts Icon.
2. Google Fonts
You can add/change the site font, from all fonts used from Google Web Font Services, with the one that suits you the best. You can find the font link in top of the styles.css in all HTML file. See example below:
Using on the Importing Style.css
/*------------------------------------------
Google Fonts
--------------------------------------------*/
@import url('//fonts.googleapis.com/css?family=Poppins:300,400,400i,500,600,700&display=swap');
@import url('//fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800&display=swap');
3. Lazy Load Image
Add code if you want to the image lazy load .html pages.
Adding this code the script below Footer.
4. Animation
You can also use delays, duration and offset for your animations:
Including Javascript for animation on scroll Wow.js And also css for animation adding animated css.
<div class=" wow fadeIn" data-wow-delay="0ms">
Style Options - #back to top
If you want layout style then Adding class in body tag as mentioned below represent.Boxed Layout
18<body class="template-index home5-boxed-layout">
home5-boxed.html page and above is the code for your reference.
Full Width Layout
18<body class="template-index home4-fullwidth">
home4-fullwidth.html page and above is the code for your reference.
Here our The 14 unique homepage layouts options.
- 1 - Classic 01 Layout >>
index.html - 2 - Default Layout >>
home2-default.html - 3 - Classic 02 Layout >>
home3-classic.html - 4 - Full Width Layout >>
home4-fullwidth.html - 5 - Boxed Layout >>
home5-boxed.html - 6 - Parallax Banner Layout >>
home6-parallax.html - 7 - Creative Layout >>
home7-creative.html
- 8 - Simple Layout >>
home8-simple.html - 9 - Simple 2 Layout >>
home9-simple2.html - 10 - Minimal Layout >>
home10-minimal.html - 11 - Modern Layout >>
home11-modern.html - 12 - Category Layout >>
home12-category.html - 13 - Dark Layout >>
home13-dark.html - 14 - Layout 14 >>
home14.html
Header Style - #back to top
There are 9 diffrent header style. You can also use transparent home page header.
Default Header Style
45<div class="header-section classicHeader">
.classicHeader in html file. For eg. Demo index.html
Transparent Header Style
45<div class="header-section">
.classicHeader in html file. For eg. Demo home11-modern.html
Header Style 1
Header Style 2
Header Style 3
Header Style 4
Header Style 5
Header Style 6
Header Style 7
Header Style 8
Header Style 9
Promotional with Header Style
All file include promotional bar, so you want then remove class="d-none".
26<div class="notification-bar d-none">
Slider Style - #back to top
Diva includes Slick of sliders as mentioned below:Home Page Banner Slider
You can find Slick Slider - full screen code in index.html page and above is the code for your reference.
Collection Slider
index.html page and above is the code for your reference.
Product Slider
index.html page and above is the code for your reference.
Products Slider & Tab with products slider
Brand Slider
home11-modern.html page and above is the code for your reference.
Testimonial Slider
home9-simple2.html page and above is the code for your reference.
Masonry Banner - #back to top
Masonry Style 1
You can find Masonry Banner - full screen code in lookbook-3columns.html page and above is the code for your reference.
NOTE:- Here Please including Masonry Jquery library like.
Javascript Code Add after "Masonry Jquery" library.
Masonry Banner Style 2
You can find Masonry Banner - full screen code in lookbook-4columns.html page and above is the code for your reference.
You can find Masonry Banner - full screen code in lookbook-shop.html page and above is the code for your reference.
Image Banner - #back to top
Image Banner Style 1
You can find Image Banner - full screen code in home14.html page and above is the code for your reference.
You can find Image Banner - full screen code in home7-creative.html page and above is the code for your reference.
You can find Image Banner - full screen code in home8-simple.html page and above is the code for your reference.
You can find Image Banner - full screen code in home10-minimal.html page and above is the code for your reference.
You can find Image Banner - full screen code in home11-modern.html page and above is the code for your reference.
You can find Image Banner - full screen code in home12-category.html page and above is the code for your reference.
You can find Image Banner - full screen code in home5-boxed.html page and above is the code for your reference.
Hero Banner - #back to top
Hero Banner Style 1
Diva New Fashion style
Stunning Full Width Banner
with flexible heights, text size, text color and overlay color options
Purchase Now
You can find Hero Banner - full screen code in home4-fullwidth.html page and above is the code for your reference.
Parallax Banner - #back to top
Parallax Banner Style 1
Welcome to diva template
Beautiful Parallaxed Demo
Beautiful stores are now easy to made
Shop Collection
You can find Parallax Banner - full screen code in home6-parallax.html page and above is the code for your reference.
Blog Pages - #back to top
index.html page and above is the code for your reference.
Form Settings - #back to top
You can find - full screen code in contactus-style1.html page and above is the code for your reference.
PHP Code
/* Set the recipient email address. - line no 13
* FIXME: Update this to your desired email address. */
$to = "your@email.com";
/* From - line no 23 */
$header = "From: your@email.com\r\n";
PHP File Path >> assets/php/ajax_sendmail.php
JS File Path >> assets/js/ajax_sendmail.js
Product 360 degree view Settings - #back to top
product-360-degree-view.html page and above is the code for your reference.
You can add more and less, can also settings script code in product-360-degree-view.html
2498totalFrames: 4,
2498endFrame: 4,
totalFrames: 4, // Total no. of image you have for 360 slider
endFrame: 4, // end frame for the auto spin animation
Newsletter Cookie Popup - #back to top
You can find - full screen code in index.html page and above is the code for your reference.
JS Code
Footer Styles - #back to top
Footer Style 1(Default)
You can find - full screen code in index.html page and above is the code for your reference.
Footer Style 2
You can find - full screen code in home2-default.html page and above is the code for your reference.
Footer Style 3
You can find - full screen code in home3-classic.html page and above is the code for your reference.
Footer Style 4
You can find - full screen code in home4-fullwidth.html page and above is the code for your reference.
Footer Style 5
You can find - full screen code in home5-boxed.html page and above is the code for your reference.
Footer Style 6
You can find - full screen code in home6-parallax.html page and above is the code for your reference.
Footer Style 7
You can find - full screen code in home7-creative.html page and above is the code for your reference.
Footer Style 8
You can find - full screen code in home8-simple.html page and above is the code for your reference.
Footer Style 9
You can find - full screen code in home14.html page and above is the code for your reference.
Instagram Styles - #back to top
You can find - full screen code in home2-default.html page and above is the code for your reference.
Quickview Popup - #back to top
You can find - full screen code in index.html page and above is the code for your reference.
Addtocart Added Popup - #back to top
You can find - full screen code in index.html page and above is the code for your reference.
Wishlist Added Popup - #back to top
You can find - full screen code in index.html page and above is the code for your reference.
Product Promotion Popup - #back to top
You can find - full screen code in index.html page and above is the code for your reference.
Support Desk #back to top
Please remember you have purchased a very affordable HTML Template and you have not paid for a full-time web design agency. Occasionally we will help with small tweaks, but these requests will be put on a lower priority due to their nature. Support is also 100% optional and we provide it for your connivence, so please be patient, polite and respectful.
Please ask the question support@annimexweb.com
Support for my items includes:- * Responding to questions or problems regarding the item and its features
- * Fixing bugs and reported issues
- * Providing updates to ensure compatibility with new software versions
- * Customization and installation services
- * Support for third party software and plug-ins
Version History (Changelog) #back to top
You can find the version history (changelog.txt) file on yourthemename-full.zip folder or you can check changelog on HTML Template sale page.
Once again, thank you so much for purchasing this HTML Template.
Changelog
-----------------------------------------------------------------------------------------
Version 1.0.0
-----------------------------------------------------------------------------------------
- Initialized
Sources and Credits #back to top
We would really love to take this opportunity to appreciate guys whose items were helpful to us to make Diva a really beautiful HTML Template for our awesome users: