Ecomus | Ultimate HTML HTML Template

  • Version: 1.0.5
  • Last Updated: 09/26/2024
  • Author: Themesflat
Thank you so much for your interests. Your comments and ratings would be much appreciated. If you purchase this template, you will get support. We will update this template time by time and we want to hear your wishes for the future updates or for complete new templates.

Template features:

  • HTML5 & SCSS
  • 12 Home pages (update+)
  • 81 inner pages
  • Product style list
  • 07 product style grid
  • 30+ page product style detail
  • 02 Blog Page
  • 02 Brand Page
  • 02 Contact Page
  • 02 FAQ Page
  • Responsive Template
  • Free icons used
  • Pixel Perfect
  • Clean & Unique Design
  • Easy to customize
  • Retina Ready
  • Unlimited Colors
  • Ajax Contact Form
  • Ajax Appointment Form
  • Filter product
  • Popup cart, popup search
  • Parallax Effect
  • & much more...

HTML Structure

Ecomus is a premium responsive HTML template created especially for logistic & transportation companies, offices. It is very easy to customize and use. The template comes with loads of great features like custom components, web fonts, animated content & powerful CSS3 animations. We studied and reviewed hundreds of logistic sites across the web before planning the features of the template and element to ensure we covered all function and abilities.

We designed our Ecomus template to be simple to use, intuitive and powerful, and most importantly results orientated. Ecomus HTML template will help you get your site up and running in minutes, provide an excellent user and admin experience, and help convert visitors in to attendees!

Get Ecomus now along with our whole-hearted support!

Below is Ecomus basic structure:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Ecomus - Ultimate HTML Templates</title>

    <!-- Mobile Specific Metas -->

    <!-- Bootstrap  -->

    <!-- Template Style -->

    <!-- Responsive -->

    <!-- colors -->    
   
    <!-- Animation Style -->    

    <!-- Favicon and touch icons  -->
</head>

<body>
	<!-- Header -->	
	<header id="header"> </header>

	<!-- Slider -->
	<div class="tf-slideshow"> </div>
	
    <!-- Section -->
    <section class="flat-section"> </section>

    <!-- Footer -->
    <footer class="footer"> </footer>

   	<!-- Toolbar -->
   	<div class="toolbar-bottom"> </div>

   	<!-- Go Top -->
    <a class="go-top"></a>
   
   <!-- Javascript -->
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
   <script type="text/javascript" src="js/swiper-bundle.min.js"></script>
   <script type="text/javascript" src="js/lazysize.min.js"></script>   
   <script type="text/javascript" src="js/jquery-validate.js"></script>
   <script type="text/javascript" src="js/jquery.countdown.js"></script>
   <script type="text/javascript" src="js/wow.min.js"></script>
   <script type="text/javascript" src="js/main.js"></script>
</body>

</html>

CSS System

The Ecomus CSS System contains 3 parts:
  • Template style
  • Library - Fonts

Style.css ( Template style )


/**
  * Abstracts variable
  *	Reset css styles
  * Components
  	* header
	* footer
	* tabs
	* slider banner
	* button
	* range slider
	* form
	* nice select
	* carousel
	* avatar
	* pop up
	* box icon
	* hover
	* collection
	* product
	* blog
	* testimonial
	* lookbook
	* featured
	* accordion
	* zoom
  * section
  * Responsive
*/

Library - Fonts

/**  
  * font-icons.css
  * fonts.css

  * styles.css
  * bootstrap.min.css
  * animate.css

  * swiper-bundle.min.css
  * image-compare-viewer.min.css
  * photoswipe.css
  * image-compare-viewer.min.css
  * drift-basic.min.css
  
  * jqueryui.min.css
  * jquery.fancybox.min.css

*/

Javascript Custom

Here you can modify any settings

Main.js ( javascript/main.js )


/**
  * select Images
  * preloader
  * Scroll process
  * Button Quantity
  * Delete file
  * Go Top
  * color swatch product
  * change value
  * footer accordion
  * close announcement bar
  * sidebar mobile
  * tabs
  * flatAccordion
  * button wishlist
  * button loading
  * variant picker
  * switch layout
  * item checkbox
  * infinite scroll
  * stagger wrap
  * filter
  * modal second
  * header sticky
  * header change background
  * img group
  * contact form
  * subscribe mailchimp
  * auto popup
*/

Compile Styles System

When you edit the sass code, run the sass scss/app.scss css/styles.css --watch command to compile the code.

You can go to the official https://sass-lang.com/ page to see more features

Contact Form

To edit the contact form to send mails to your email box, you can look for the config.php. You need to edit yourname@yourdomain.com to your email.

contact-process.php ( contact/contact-process.php )


$address = "themesflat@gmail.com";

Example Edit Template

1. Example of how to edit the logo template


You change the logo image in the folder of project "Images" of your logo images, the same name as the original (logo.png)
Project Ecomus:-> images -> logo.png

2. Example of how to edit the "product style" template

Style list: If you want to use style listuse the sample below

<!-- Product style list -->
    <div class="card-product list-layout"> 
    	<div class="card-product-wrapper"> 
    		...
    	</div>
		<div class="card-product-info"> 
    		...
    	</div>
    </div>

Style grid: If you want to use style listuse the sample below

<!-- Product style 01 -> 07 -->
    <div class="card-product style-2...style-7"> 
    	<div class="card-product-wrapper"> 
    		...
    	</div>
		<div class="card-product-info"> 
    		...
    	</div>
    </div>

3. Example of how to edit the "top bar style"

Background:If you want to change the white background color, add class "bg_white"

<!-- Top bar -->
    <div class="tf-top-bar bg_white"> 
		...
    </div>

Credits

Enable code bellow in all file HTML 
				
					<a href="javascript:void(0);" id="toggle-rtl" class="tf-btn animate-hover-btn btn-fill"> </a>