Welcome to Delixa ! Get familiar with the products and explore their features:
Well organized and easy to understand. You can any work by following our docs easily
Code is clean if it can be understood.Our code is more formatting for your website
Our Template is full Perfect for all device. You can visit our template all device easily.
The template has Sass available for css. You can Change and customize css by sass.
Delixa is faster loading speed. Delixa create your template so much faster and easier
We are provide 24 hours support for all clients.You can purchase without hesitation.
Welcome to Delixa
Delixa is a creative powerhouse that turns bold ideas into impactful solutions. We specialize in brand identity, Web Design Agency, SEO Agency, Creative Agency and Corporate Agency crafting strategies tailored to your goals. Our process blends innovation with data-driven insights to deliver measurable results. With a collaborative approach and cutting-edge tools, we bring your vision to life.Key features include customizable layouts, integrated Google Fonts, FontAwesome icons, cross-browser compatibility, and SEO-friendly code. Whether you need a homepage, about section, or contact page with a functional form, Delixa offers everything you need to create a professional online presence effortlessly.
Delixa - is highly customizable - looks awesome on tablets and mobile devices. We have included best web development practices - you can create a great website layout.
After purchasing Delixa template on themeforest.net with your Envato account, go to your Download page. You can choose to download Delixa template only or the entire Delixa template package which contains the following files:
Installing a Delixa template is not like WordPress or CMS theme installation, actually, installation keyword does not go with Delixa template. Why? because you don’t install anything, yes Delixa or HTML templates are automatically rendered by the browser.
Before all that you have to edit your template and place your own contents by replacing old demo contents, in this case, you will need a code editor such as - VScode, Sublime Text, etc. When template editing is done using editor, save the files and folder and go ahead to upload template files on live server.
First of all, If you don’t have your template on your computer, download Delixa template to get started, when download/purchase complete you will get a package like this screenshot (after unzip).
This template is a fixed layout with four columns. The main contents are inside the 'body' tag divided into different section (i.e. header, banner, services,... footer etc.). The general template structure is the same throughout the template. Here is the general structure.
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta 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="Delixa HTML5 Template">
<meta name="keywords" content="bootstrap, creative digital agency template, responsive website, creative studio, web design, seo design, corporate agency modern template, clean design, customizable, HTML5 template">
<meta name="author" content="ThemeArray">
<title>Web Design Agency - Delixa</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
<!-- Place favicon.ico in the root directory -->
<link rel="shortcut icon" href="assets/imgs/favicon.ico">
<!-- CSS here -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/swiper.min.css">
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<link rel="stylesheet" href="assets/css/fontawesome-pro.css">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<!-- JS here -->
<script src="assets/js/jquery-3.7.1.min.js"></script>
<script src="assets/js/waypoints.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/swiper.min.js"></script>
<script src="assets/js/counterup.js"></script>
<script src="assets/js/type.js"></script>
<script src="assets/js/magnific-popup.min.js"></script>
<script src="assets/js/jquery.appear.js"></script>
<!-- gsap -->
<script src="assets/js/gsap.js"></script>
<script src="assets/js/scroll-smoother.js"></script>
<script src="assets/js/ScrollToPlugin.min.js"></script>
<script src="assets/js/split-text.js"></script>
<!-- gsap -->
<script src="assets/js/tilt.jquery.js"></script>
<script src="assets/js/meanmenu.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
We are using one customed CSS files (style.css) and several vendor css files. CSS file structure is as follows:
/************ TABLE OF CONTENTS ***************
-----------------
01. THEME CSS
-----------------
1.1 Animate
1.2 Commmon
1.3 Theme
1.4 Typography
-----------------
02. utils CSS
-----------------
2.1 Breakpoint
2.2 Extends
2.3 Colors
2.4 Mixins
2.5 Root
-----------------
03. COMPONENTS CSS
-----------------
3.1 Back to top
3.2 Button
3.3 Offcanvas
3.4 Pagination
3.5 Prealoder
3.6 Section-title
-----------------
04. HEADER CSS
-----------------
4.1 Header 1
4.2 Header 2
4.3 Header 3
4.4 Header 4
---------------------------------
05. MENU CSS
---------------------------------
5.1 Meanmenu
5.2 Menu
---------------------------------
06. FOOTER CSS
---------------------------------
6.1 Footer 1
6.2 Footer 2
6.3 Footer 3
6.4 Footer 4
---------------------------------
07. BANNER CSS
---------------------------------
7.1 Banner Style 1
7.2 Banner Style 2
7.3 Banner Style 3
7.4 Banner Style 4
---------------------------------
08. PAGES CSS
---------------------------------
8.1 About css
8.2 Blog Details css
8.3 Blog css
8.4 Brand css
8.5 Capabilities css
8.6 Contact css
8.7 Counter css
8.8 Faq css
8.9 Feature css
8.10 Identity css
8.11 Pricing css
8.12 Project Details css
8.13 Service Details css
8.14 Service css
8.15 Team Details css
8.16 Team css
8.17 Testimonial css
8.16 Tools css
There is a custom .js file named main.js and are several vendor js files as plugins. We are using jQuery(a javascript library) instead of vanilla javascript. Our file structure is a follows:
To change any images of the website
Example: Suppose you want to change the following image file:
<div class="logo">
<a href="index.html">
<img src="assets/imgs/logo/logo.svg" alt="logo">
</a>
</div>
To change any images of the website
Example: Suppose you want to change the following image file:
<div class="logo">
<a href="index.html">
<img src="assets/imgs/logo/logo.svg" alt="logo">
</a>
</div>
We have used scss for this project to write css. If you are familiar with scss you should customize only the .scss files. Please make sure you compile the style.scss file after you have made changes in any of the .scss files.
Have a look at the following image for a visual description:
Welcome to Delixa Header Elements! You can choose 3 Types of header package for creating you website.
<!-- Header area start -->
<header class="header-area">
<div class="header-sticky">
<div class="container-fluid">
<div class="main-header">
<div class="logo">
<a href="index.html">
<img src="assets/imgs/logo/logo.svg" alt="logo">
</a>
</div>
<div class="main-menu">
<nav id="mobile-menu">
<ul>
<li class="has-mega-menu">
<a href="javascript:void(0)">Home</a>
<ul class="mega-menu">
<li>
<div class="home-menu-grid">
<div class="menu-item active">
<div class="menu-thumb">
<img src="assets/imgs/menu/home-menu1.png" alt="thumb not found">
</div>
<h6 class="menu-title">
<a class="stretched-link" href="index.html">Web Design Agency</a>
</h6>
</div>
<div class="menu-item">
<div class="menu-thumb">
<img src="assets/imgs/menu/home-menu2.png" alt="thumb not found">
</div>
<h6 class="menu-title">
<a class="stretched-link" href="index-2.html">SEO Agency</a>
</h6>
</div>
<div class="menu-item">
<div class="menu-thumb">
<img src="assets/imgs/menu/home-menu3.png" alt="thumb not found">
</div>
<h6 class="menu-title">
<a class="stretched-link" href="index-3.html">Creative Studio</a>
</h6>
</div>
<div class="menu-item">
<div class="menu-thumb">
<img src="assets/imgs/menu/home-menu4.png" alt="thumb not found">
</div>
<h6 class="menu-title">
<a class="stretched-link" href="index-4.html">Corporate Agency</a>
</h6>
</div>
</div>
</li>
</ul>
</li>
<li>
<a href="about-us.html">About Us</a>
</li>
<li>
<a href="javascript:void(0)">service</a>
<ul class="sub-menu">
<li>
<a href="service.html">service</a>
</li>
<li>
<a href="service-details.html">service Details</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0)"> Portfolio</a>
<ul class="sub-menu">
<li>
<a href="portfolio.html">Porrtfolio</a>
</li>
<li>
<a href="portfolio-details.html">Porrtfolio Details</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0)">Pages</a>
<ul class="sub-menu">
<li>
<a href="about-us.html">About Us</a>
</li>
<li>
<a href="team.html">Team</a>
</li>
<li>
<a href="team-details.html">Team Details</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
<li>
<a href="faq.html">Faq</a>
</li>
<li>
<a href="404.html">404</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0)"> Blog</a>
<ul class="sub-menu">
<li>
<a href="blog.html">Blog</a>
</li>
<li>
<a href="blog-details.html">Blog Details</a>
</li>
</ul>
</li>
<li>
<a href="contact.html"> contact</a>
</li>
</ul>
</nav>
</div>
<div class="header-right">
<a href="contact.html" class="theme-btn theme-btn-one d-none d-sm-block">
<span class="icon-box icon-box-1">
<i class="fa-solid fa-arrow-right"></i>
</span>
<span class="text-content">GET STARTED</span>
<span class="icon-box icon-box-2">
<i class="fa-solid fa-arrow-right"></i>
</span>
</a>
<div class="bars_icon d-lg-none">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Header area end -->
<!-- Header area start -->
<header class="header-area header-style-two">
<div class="header-sticky">
<div class="container container-large">
<div class="main-header">
<div class="logo">
<a href="index.html">
<img src="assets/imgs/logo/logo.svg" alt="logo">
</a>
</div>
<div class="main-menu">
<nav id="mobile-menu">
<ul>
<li class="has-mega-menu">
<a href="javascript:void(0)">Home</a>
<ul class="mega-menu">
<li>
<div class="home-menu-grid">
<div class="menu-item">
<div class="menu-thumb">
<img src="assets/imgs/menu/home-menu1.png" alt="thumb not found">
</div>
<h6 class="menu-title">
<a class="stretched-link" href="index.html">Web Design Agency</a>
</h6>
</div>
<div class="menu-item active">
<div class="menu-thumb">
<img src="assets/imgs/menu/home-menu2.png" alt="thumb not found">
</div>
<h6 class="menu-title">
<a class="stretched-link" href="index-2.html">SEO Agency</a>
</h6>
</div>
<div class="menu-item">
<div class="menu-thumb">
<img src="assets/imgs/menu/home-menu3.png" alt="thumb not found">
</div>
<h6 class="menu-title">
<a class="stretched-link" href="index-3.html">Creative Studio</a>
</h6>
</div>
<div class="menu-item">
<div class="menu-thumb">
<img src="assets/imgs/menu/home-menu4.png" alt="thumb not found">
</div>
<h6 class="menu-title">
<a class="stretched-link" href="index-4.html">Corporate Agency</a>
</h6>
</div>
</div>
</li>
</ul>
</li>
<li>
<a href="about-us.html">About Us</a>
</li>
<li>
<a href="javascript:void(0)">service</a>
<ul class="sub-menu">
<li>
<a href="service.html">service</a>
</li>
<li>
<a href="service-details.html">service Details</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0)"> Portfolio</a>
<ul class="sub-menu">
<li>
<a href="portfolio.html">Porrtfolio</a>
</li>
<li>
<a href="portfolio-details.html">Porrtfolio Details</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0)">Pages</a>
<ul class="sub-menu">
<li>
<a href="about-us.html">About Us</a>
</li>
<li>
<a href="team.html">Team</a>
</li>
<li>
<a href="team-details.html">Team Details</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
<li>
<a href="faq.html">Faq</a>
</li>
<li>
<a href="404.html">404</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0)"> Blog</a>
<ul class="sub-menu">
<li>
<a href="blog.html">Blog</a>
</li>
<li>
<a href="blog-details.html">Blog Details</a>
</li>
</ul>
</li>
<li>
<a href="contact.html"> contact</a>
</li>
</ul>
</nav>
</div>
<div class="header-right">
<a href="contact.html" class="header-btn d-none d-sm-block">get started </a>
<div class="bars_icon d-lg-none">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Header area end -->
<!-- Header area start -->
<header class="header-area transparent-header">
<div class="header-sticky">
<div class="container banner-three-container">
<div class="main-header">
<div class="logo">
<a href="index.html">
<img class="primary-logo" src="assets/imgs/logo/logo-white.svg" alt="logo">
<img class="secondary-logo" src="assets/imgs/logo/logo.svg" alt="logo">
</a>
</div>
<div class="header-nav-icon">
<button class="menu-button"></button>
</div>
<div class="header-right d-none d-md-block">
<a class="header-mail" href="mailto:mail@delixastudio.com">mail@delixastudio.com</a>
</div>
</div>
</div>
</div>
</header>
<!-- Header area end -->
<!-- Header area start -->
<header class="header-area header-style-four">
<div class="header-sticky">
<div class="container-fluid">
<div class="main-header">
<div class="logo">
<a href="index.html">
<img src="assets/imgs/logo/logo.svg" alt="logo">
</a>
</div>
<div class="main-menu">
<nav id="mobile-menu">
<ul>
<li class="has-mega-menu">
<a href="javascript:void(0)">Home</a>
<ul class="mega-menu">
<li>
<div class="home-menu-grid">
<div class="menu-item">
<div class="menu-thumb">
<img src="assets/imgs/menu/home-menu1.png" alt="thumb not found">
</div>
<h6 class="menu-title">
<a class="stretched-link" href="index.html">Web Design Agency</a>
</h6>
</div>
<div class="menu-item">
<div class="menu-thumb">
<img src="assets/imgs/menu/home-menu2.png" alt="thumb not found">
</div>
<h6 class="menu-title">
<a class="stretched-link" href="index-2.html">SEO Agency</a>
</h6>
</div>
<div class="menu-item">
<div class="menu-thumb">
<img src="assets/imgs/menu/home-menu3.png" alt="thumb not found">
</div>
<h6 class="menu-title">
<a class="stretched-link" href="index-3.html">Creative Studio</a>
</h6>
</div>
<div class="menu-item active">
<div class="menu-thumb">
<img src="assets/imgs/menu/home-menu4.png" alt="thumb not found">
</div>
<h6 class="menu-title">
<a class="stretched-link" href="index-4.html">Corporate Agency</a>
</h6>
</div>
</div>
</li>
</ul>
</li>
<li>
<a href="about-us.html">About Us</a>
</li>
<li>
<a href="javascript:void(0)">service</a>
<ul class="sub-menu">
<li>
<a href="service.html">service</a>
</li>
<li>
<a href="service-details.html">service Details</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0)"> Portfolio</a>
<ul class="sub-menu">
<li>
<a href="portfolio.html">Porrtfolio</a>
</li>
<li>
<a href="portfolio-details.html">Porrtfolio Details</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0)">Pages</a>
<ul class="sub-menu">
<li>
<a href="about-us.html">About Us</a>
</li>
<li>
<a href="team.html">Team</a>
</li>
<li>
<a href="team-details.html">Team Details</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
<li>
<a href="faq.html">Faq</a>
</li>
<li>
<a href="404.html">404</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0)"> Blog</a>
<ul class="sub-menu">
<li>
<a href="blog.html">Blog</a>
</li>
<li>
<a href="blog-details.html">Blog Details</a>
</li>
</ul>
</li>
<li>
<a href="contact.html"> contact</a>
</li>
</ul>
</nav>
</div>
<div class="header-right">
<a href="contact.html" class="fill_btn d-none d-sm-block">GET STARTED</a>
<div class="bars_icon d-lg-none">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Header area end -->
We've used the following fonts, free icons and plugins as listed:
Thank you for purchasing my template.
If you have any questions that are
beyond the scope of this help file, please feel free to open a new ticket at our
Support
forum
-----------------------------------------------------
Version 1.01
-----------------------------------------------------
- Upadate all plugins / Library
- Improve site speed and image optimization
- Improve Responsive issues
- Product design quality enhanced
If you need to theme customization or make custom theme or template. Please, you can contact us for this.
Contact UsIf you need to theme customization or make custom theme or template. Please, you can contact us for this.
Contact