Allurio Coming Soon and Portfolio Template Documentation
by:
mix_design
version: 2.0.0
created: 25.09.2019
last update: 03.05.2022
01
Thank you for choosing Allurio - coming soon and portfolio HTML template. We have prepared detailed documentation to make Allurio customization an easy task for you. If you have any questions that are beyond the scope of this help file, you can email us on support@mixdesign.club.
We would be very happy if you could rate this item here with 5 stars. Your feedback is very important so write us a line ! :)
02
Follow the steps below to setup your site template:
In order to start working with Allurio unzip the downloaded package and open HTML folder to find all ready-to-use template files. Choose one of the demo *.html files (any ready-to-use demo you like) and rename it to index.html.
Next you’ll need to prepare a project for customization. Below is a list of files and folders that are required in the root directory of your project:
index.html - your chosen *.html file (renamed already);css folder - stylesheet files;js folder - JavaScript files;fonts folder - icon and lining nums fonts files;img folder for project images and favicon;video folder - project video files;mail.php file for sending e-mails;.htaccess - this file contain rules for files caching on web server;The other files can be used according to your preferences.
Your project is ready to go! Now you can start adding your texts, images and video to your new awesome website.
After the customization is over, you’ll need to upload the project files to your hosting web server using FTP client or cPanel interface in order to use it on your website.
03
After downloading and extracting template package you will find 3 folders:
This section describes
HTML
folder structure. More about
AllurioGULP
folder structure you can find out in
AllurioGULP
section.
Allurio is one page HTML template. So, mostly you will need one
*.html
file and supporting
*.css,
*.js,
*.php
files with some images. All the directories and files are well organized as it shown on the image bellow.
source-files folder contains all expanded CSS files, expanded JavaScript files, plugins and components files;mail.php file for sending e-mails is located in the root directory;.htaccess file is located in the root directory. This file contain rules for files caching on web server.Allurio is one page HTML template and comes with 3 homescreen variations and 12 ready-to-use demo pages:
Main Home
Fullscreen Version
Split Home
Allurio has a simple and easy to customize structure based on Bootstrap 5 Grid. Here is a sample page structure:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
Meta tags, Title, Favicon and Icons, Facebook Metadata, CSS, Custom Browser Color
</head>
<body class="overflow-hidden dark">
<!-- Old Browsers Support Start -->
...
<!-- Old Browsers Support End -->
<!-- Loader Start -->
<div class="loader">
...
</div>
<!-- Loader End -->
<!-- Navigation Start -->
<nav id="menu" class="menu bg-dark">
...
</nav>
<!-- Navigation End -->
<!-- Header Start -->
<header id="header" class="header">
...
</header>
<!-- Header End -->
<!-- Main Section Start -->
<section id="main" class="main">
...
</section>
<!-- Main Section End -->
<!-- About Section Start -->
<section id="about" class="inner about">
...
</section>
<!-- About Section End -->
<!-- Portfolio Section Start -->
<section id="portfolio" class="inner portfolio">
...
</section>
<!-- Portfolio Section End -->
<!-- Services Section Start -->
<section id="services" class="inner services">
...
</section>
<!-- Services Section End -->
<!-- Contact Section Start -->
<section id="contact" class="inner contact">
...
</section>
<!-- Contact Section End -->
<!-- Footer Start -->
<footer class="footer bg-dark">
...
</footer>
<!-- Footer End -->
<!-- To-top Button Start -->
<a href="#main" class="to-top">
...
</a>
<!-- To-top Button End -->
<!-- Notify Popup Start -->
<div id="notify" class="popup notify bg-dark">
...
</div>
<!-- Notify Popup End -->
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
...
</div>
<!-- Load Scripts Start -->
...
<!-- Load Scripts End -->
</body>
</html>
Allurio template CSS files have a well-organized structure and a table of contents, as you can see on image below:
All CSS files are placed in
css
folder and have to be included in the
<head>
tag.
Allurio uses uncompressed CSS files.
If you want to improve Google PageSpeed Insights performance, you can use minificated files from
source-files → allurio-css-min-files.
<!-- Template Styles Start-->
<link rel="stylesheet" type="text/css" href="css/loaders/loader-*.css">
<link rel="stylesheet" type="text/css" href="css/plugins.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- Template Styles End-->
CSS files that have to be included in chosen .html file:
loader-*.css
plugins.css
main.css
If you want to customize CSS styles, We recommend to create your own
custom.css
file and include it to
Template Styles
section of the
HTML
file. This solution will help you in future updates.
* - Preloader color name
All JavaScript files are placed in
js
folder and have to be included before the
</body>
tag.
libs.min.js - all JavaScript libraries that are necessary for Allurio proper work, are сompiled in this file;gallery-init.js - for photoswipe gallery initialization;custom.js - includes other scripts calls and settings;
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
<script src="js/gallery-init.js"></script>
<script src="js/custom.js"></script>
<!-- Load Scripts End-->
We used minificated
libs.min.js
file to add all necessary JavaScript libraries to this template. The file contains:
All this uncompressed files you can find in the source-files folder.
04
In Allurio template we used Old Standard TT Font, Open Sans Font, Fontawesome 6.1.1 Free Iconic Font and Ionicons 2.0.1 Iconic Font.
In the Allurio template we used two fonts:
This fonts are embedded in the
main.css
file via
@font-face
rule:
/* ------------------------------------------------*/
/* Fonts Start */
/* ------------------------------------------------*/
@font-face {
font-family: "OpenSans";
font-style: normal;
font-weight: 300;
src: url("../fonts/OpenSans-Light/OpenSans-Light.eot?#iefix") format("embedded-opentype"),
url("../fonts/OpenSans-Light/OpenSans-Light.woff") format("woff"),
url("../fonts/OpenSans-Light/OpenSans-Light.ttf") format("truetype"),
url("../fonts/OpenSans-Light/OpenSans-Light.svg#OpenSans") format("svg");
}
...
/* ------------------------------------------------*/
/* Fonts End */
/* ------------------------------------------------*/
You can customize embedded fonts or embed another fonts for your project in the
Fonts
section of the
main.css
file.
Allurio uses free version of FontAwesome 6.1.1 iconic font. You can use fontawesome.com/icons page to easily find the icon you want to use. Solid, regular and brands icons are already compiled in the plugins.css file and ready for use.
To change icons, just change the class names: fa-solid fa-heart, fa-brands fa-instagram, fa-regular fa-address-book.
<li>
<a href="https://www.facebook.com/" target="_blank">
<i class="fa-brands fa-facebook"></i>
</a>
</li>More information about FontAwesome you can find on official documentation website - FontAwesome Docs.
Allurio uses Ionicons 2.0.1 iconic font. You can use ionicons/v2/cheatsheet page to easily find the icon you want to use. The font is already compiled in the plugins.css file and ready for use.
To change icons, just change the class names: ion-ionic, ion-arrow-up, ion-arrow-resize.
<li>
<a href="https://www.facebook.com/" target="_blank">
<i class="icon ion-social-facebook"></i>
</a>
</li>More information about Ionicons you can find on official website.
05
Allurio covers almost all platforms design requirements for favicon and icons:
Classic favicon:
<link rel="icon" href="img/favicon/favicon.ico" sizes="any">
Android Web App Manifest & Apple Touch Icon:
<link rel="apple-touch-icon" href="img/favicon/apple-touch-icon.png">
<link rel="manifest" href="img/favicon/manifest.webmanifest">
Universal SVG Icon for All Sizes ang Dark & Light Browser Color Themes:
<link rel="icon" href="img/favicon/icon.svg" type="image/svg+xml">
Facebook Metadata:
<!-- Facebook Metadata Start -->
<meta property="og:image:height" content="1200">
<meta property="og:image:width" content="1200">
<meta property="og:title" content="Allurio - Coming Soon & Portfolio Template">
<meta property="og:description" content="Allurio - versatile and trendy coming soon & portfolio template to kick-start your new project">
<meta property="og:url" content="http://mixdesign.club/themeforest/allurio/">
<meta property="og:image" content="http://mixdesign.club/themeforest/allurio/favicon/og-image.jpg">
<!-- Facebook Metadata End -->
You can use Allurio favicon as an example or generate new one with Favicon Generator or any other favicon generator by your needs.
06
Allurio template comes with easy-to-customize page elements. You can choose from 12 redy-to-use demo files, 2 countdown types, 3 homescreen versions, various backgrounds and much more.
Loader will hide contents of your site until it's fully loaded.
If you want to customize or remove loader, find this code in *.html file:
<!-- Loader Start -->
<div class="loader">
<div class="loader__content">
<div class="loader__logo">
<!-- Your Logo Here -->
<img src="img/logo-light.svg" alt="Allurio - Coming Soon & Portfolio Template">
</div>
</div>
</div>
<!-- Loader End -->Loader styles are included in the <head> tag:
<!-- Template Styles Start-->
<link rel="stylesheet" type="text/css" href="css/loaders/loader-*.css">
...
<!-- Template Styles End-->* - loader color name. You can choose between dark and light versions.
The logo container is located in the header of the template - header class="header".
<!-- Header Start -->
<header id="header" class="header">
<div class="header__content">
<!-- Logo Start -->
<div class="logo">
<!-- Your Logo Here -->
<img src="img/logo-light.svg" alt="Allurio - Coming Soon & Portfolio Template">
</div>
<!-- Logo End -->
...
</div>
</header>
<!-- Header End -->You can use SVG, PNG or JPG image for logo. If you are using SVG, create PNG fallback image for old browsers. It'll be replaced automatically if needed.
All images used in the Allurio template live demo are just for preview purpose only and they are not included in main download files. You easily can find all images on unsplash.com or pexels.com. We are using placeholders from placeholder.com instead of real images. You can easily replace placeholder URL with a path to your image like img/yourimage.jpg.
All tmplate background images you can replace in the main.css file:
/* ------------------------------------------------*/
/* Template Backgrounds Start */
/* ------------------------------------------------*/
.media-image-1 {
background-image: url("http://via.placeholder.com/1440x900");
}
...
/* ------------------------------------------------*/
/* Template Backgrounds End */
/* ------------------------------------------------*/Allurio template is provided with responsive navigation menu.
Mobile view:
Desktop view:
<!-- Navigation Start -->
<nav id="menu" class="menu bg-dark">
<!-- Menu Header Start -->
...
<!-- Menu Header End -->
<!-- Menu Content Start -->
<div class="menu__content">
<div class="container-fluid p-0 fullheight">
<div class="row g-0 fullheight">
<!-- Navigation Start -->
<div class="col-12 col-lg-4">
<div class="menu__navigation">
<!-- Navigation list -->
<div class="navigation-content">
<!-- Navigation links -->
<ul class="navigation column">
<li>
<a href="#main" id="home-trigger" class="light">Home</a>
</li>
<li>
<a href="#about" id="about-trigger" class="light">About us</a>
</li>
<li>
<a href="#portfolio" id="portfolio-trigger" class="light">Portfolio</a>
</li>
<li>
<a href="#services" id="services-trigger" class="light">Services</a>
</li>
<li>
<a href="#contact" id="contact-trigger" class="light">Contact</a>
</li>
</ul>
</div>
...
</div>
</div>
<!-- Navigation End -->
<!-- Menu Photo Start -->
...
<!-- Menu Photo End -->
<!-- Menu Contact Start -->
...
<!-- Menu Contact End -->
</div>
</div>
</div>
<!-- Menu Content End -->
</nav>
<!-- Navigation End -->
Allurio template comes with 1 header type with left aligned logo and right aligned menu button on mobile and desktop.
Desktop view:
Mobile view:
<!-- Header Start -->
<header id="header" class="header">
<div class="header__content">
<!-- Logo Start -->
<div class="logo">
<!-- Your Logo Here -->
<img src="img/logo-light.svg" alt="Allurio - Coming Soon & Portfolio Template">
</div>
<!-- Logo End -->
<!-- Menu Trigger Start -->
<div class="menu-button">
<a href="#0" id="menu-trigger" class="menu-trigger">
<span class="menu-caption">Menu</span>
<span class="menu-burger"></span>
</a>
</div>
<!-- Menu Trigger End -->
</div>
</header>
<!-- Header End -->Allurio template comes with 3 beautifully designed layouts with various animated backgrounds. Backgrouds settings you can find in the Plugins and Animated Backgrounds sections of this file.
1. Main layout with countdown and various backgrounds. Beautifully designed layout with middle size headline, slider and animated backgrounds. Represent your best works on the first screen! Slider settings you can find in the Slider section of this file. Animated backgrounds settings you can find in Animated Backgrounds section of this file.
Replace this headline demo text with your own:
<!-- Headline Start -->
<div id="headline" class="headline column">
<h1 class="headline__animate text-light">New project is coming</h1>
<p class="headline__text text-light-base">We are preparing something amazing and exciting for you. Special surprise for our subscribers only.</p>
<div class="headline__btnholder">
<a href="#" id="notify-trigger" class="btn btn-l btn-light">Notify me</a>
</div>
</div>
<!-- Headline End -->2. Fullscreen layout with large headline and various backgrounds. Animated backgrounds settings you can find in Animated Backgrounds section of this file.
Replace this headline demo text with your own:
<!-- Headline Start -->
<div id="headline" class="headline bottom column">
<h1 class="headline__animate large text-light">Nice to meet you</h1>
<div class="headline__btnholder bottom">
<a href="#0" id="notify-trigger" class="btn btn-s btn-s-light">
<span class="btn-caption">Subscribe</span>
<span class="icon ion-ios-arrow-right"></span>
</a>
<a href="#about" class="btn btn-s btn-s-light">
<span class="btn-caption">Explore</span>
<span class="icon ion-ios-arrow-down"></span>
</a>
</div>
</div>
<!-- Headline End -->3. Split layout with medium headline and various backgrounds. Slider settings you can find in the Slider section of this file. Animated backgrounds settings you can find in Animated Backgrounds section of this file.
Replace this headline demo text with your own:
<!-- Headline Start -->
<div id="headline" class="headline bottom column">
<h1 class="headline__animate small text-light">Nice to meet you</h1>
<p class="headline__text text-light-base small bottom">We are preparing something amazing and exciting for you. Special surprise for our subscribers only.</p>
<div class="headline__btnholder bottom">
<a href="#0" id="notify-trigger" class="btn btn-s btn-s-light">
<span class="btn-caption">Subscribe</span>
<span class="icon ion-ios-arrow-right"></span>
</a>
<a href="#about" class="btn btn-s btn-s-light">
<span class="btn-caption">Explore</span>
<span class="icon ion-ios-arrow-down"></span>
</a>
</div>
</div>
<!-- Headline End -->07
Allurio template comes with days only countdown, which is used on homescreen and in the services section:
#countdown
#countdown
Allurio template comes with KBW Countdown Plugin. This plugin can be tricky to set up, but it is very flexible and has a lot of features.
For more details you can see documentation reference page: keith-wood.name/countdownRef.html or see a minimal page with basic settings: keith-wood.name/countdownBasics.html. In our case we are using UTCDate function. (You can also find this function in documentation reference page):
$.countdown.UTCDate(tz, year, month, day, hours, mins, secs, ms)
tz
- timezone offset, either in hours or minutes, from GMT, for example, Brisbane, Australia, would be +10 or +600;
year
- local year;
month
- local month (0 to 11);
day
- local day in the month;
hours
- local hour;
mins
- local minute;
secs
- local second;
ms
- local millisecond.
So here: countdown.UTCDate(10, 2022, 11, 22)
Find the Load Scripts section at the end of <body> and make sure that all the necessary js files are added in the following order:
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/custom.js"></script>
...
<!-- Load Scripts End-->
Setting your own date for countdown script can be done in custom.js file in js folder:
$('#countdown').countdown({until: $.countdown.UTCDate(+10, 2022, 2, 19), format: 'D'});
Visit KBW Countdown site for more details and settings - keith-wood.name/countdown.html
Allurio uses Textillate.js plugin for animated headline on the main section of the template.
You can change the text in the headline section of the *.html file:
<h1 class="headline__animate text-light">New project is coming</h1>All plugin parameters you can change in custom.js file:
// --------------------------------------------- //
// Main Section Loading Animation Start
// --------------------------------------------- //
setTimeout(function(){
$('body').addClass('loaded');
$('.headline__animate').textillate({
in: {
effect: 'fadeInUp',
delayScale: 1.2,
delay: 40,
}
});
}, 600);
// --------------------------------------------- //
// Main Section Loading Animation End
// --------------------------------------------- //See Textillate.js plugin Github page for more settings.
Allurio uses Swiper Slider Plugin for:
Homescreen layout slider. It's a half-screen slider with slide effect:
<!-- Main Section Slider Start -->
<div class="main-slider">
<!-- slider main container -->
<div class="swiper-main">
<!-- additional required wrapper -->
<div class="swiper-wrapper">
<!-- slides -->
<div class="swiper-slide main-swiper-slide">
<div class="slide-image swiper-slide-image-1">
<div class="color-layer color-layer-black-06"></div>
</div>
</div>
...
</div>
<!-- navigation buttons -->
<div class="main-slider-controls">
<div class="swiper-button-prev main-swiper-button-prev"><span></span></div>
<div class="swiper-button-next main-swiper-button-next"><span></span></div>
</div>
</div>
</div>
<!-- Main Section Slider End -->
All slides background images you can replace in the main.css file:
/* ------------------------------------------------*/
/* Template Backgrounds Start */
/* ------------------------------------------------*/
...
.swiper-slide-image-1 {
background-image: url("http://via.placeholder.com/1440x900");
}
...
/* ------------------------------------------------*/
/* Template Backgrounds End */
/* ------------------------------------------------*/
Find the Load Scripts section at the end of <body> and make sure that all the necessary js files are added in the following order:
<!-- Load Scripts Start -->
<script src="js/libs.min.js"></script>
...
<script src="js/custom.js"></script>
<!-- Load Scripts End -->
If you want to change this slider settings, find the
custom.js
file in
js
folder and make the necessary changes to the swiper init lines:
if (mainSlider.length) {
var swiper = new Swiper('.swiper-main', {
grabCursor: true,
effect: "creative",
creativeEffect: {
prev: {
translate: ["-20%", 0, -1],
},
next: {
translate: ["100%", 0, 0],
},
},
autoplay: {
disableOnInteraction: true,
},
loop: true,
parallax: true,
speed: 1300,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
};
About section photo slider. It's a fullwidth photo slider with loop effect and navigation buttons:
<!-- About Section Slider Start -->
<div class="about-slider">
<!-- slider main container -->
<div class="swiper-about">
<!-- additional required wrapper -->
<div class="swiper-wrapper">
<!-- slides -->
<div class="swiper-slide">
<img src="http://via.placeholder.com/1024x1024" alt="Allurio Coming Soon & Portfolio Template About Slider Image">
</div>
...
</div>
<!-- navigation buttons -->
<div class="about-slider-controls">
<div class="controls-container">
<div class="swiper-button-prev about-swiper-button-prev">
<i class="icon ion-ios-arrow-left"></i>
<span class="controls-caption">Prev</span>
</div>
<div class="swiper-button-next about-swiper-button-next">
<span class="controls-caption">Next</span>
<i class="icon ion-ios-arrow-right"></i>
</div>
</div>
</div>
</div>
</div>
<!-- About Section Slider End -->
All slides you can replace in the *.html file:
<div class="swiper-slide">
<img src="http://via.placeholder.com/1024x1024" alt="Allurio Coming Soon & Portfolio Template About Slider Image">
</div>
Find the Load Scripts section at the end of <body> and make sure that all the necessary js files are added in the following order:
<!-- Load Scripts Start -->
<script src="js/libs.min.js"></script>
...
<script src="js/custom.js"></script>
<!-- Load Scripts End -->
If you want to change this slider settings, find the
custom.js
file in
js
folder and make the necessary changes to the swiper init lines:
if (aboutSlider.length) {
var swiper3 = new Swiper('.swiper-about', {
// Optional parameters
slidesPerView: 'auto',
speed: 1000,
loop: true,
autoplay: {
disableOnInteraction: true,
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
};
More information about Swiper settings you can find in the official documentation - swiperjs.com/get-started
Partners slider. It's a fullwidth slider with logos and loop effect:
<!-- Partners Slider Start -->
<div class="partners-slider">
<!-- slider main container -->
<div class="swiper-partners">
<!-- additional required wrapper -->
<div class="swiper-wrapper">
<!-- slides -->
<div class="swiper-slide">
<a href="#0" class="partner-link"><img src="http://via.placeholder.com/260x136" alt="Allurio Coming Soon & Portfolio Template Partner Logo"></a>
</div>
...
</div>
</div>
</div>
<!-- Partners Slider End -->
All slides you can replace in the *.html file:
<div class="swiper-slide">
<a href="#0" class="partner-link"><img src="http://via.placeholder.com/260x136" alt="Allurio Coming Soon & Portfolio Template Partner Logo"></a>
</div>
Find the Load Scripts section at the end of <body> and make sure that all the necessary js files are added in the following order:
<!-- Load Scripts Start -->
<script src="js/libs.min.js"></script>
...
<script src="js/custom.js"></script>
<!-- Load Scripts End -->
If you want to change this slider settings, find the
custom.js
file in
js
folder and make the necessary changes to the swiper init lines:
if (partnersSlider.length) {
var swiper4 = new Swiper('.swiper-partners', {
slidesPerView: 5,
spaceBetween: 30,
autoplay: true,
loop: true,
breakpoints: {
1600: {
slidesPerView: 5,
},
1200: {
slidesPerView: 4,
},
768: {
slidesPerView: 3,
},
576: {
slidesPerView: 2,
},
0: {
slidesPerView: 1,
}
}
});
};
More information about Swiper settings you can find in the official documentation - swiperjs.com/get-started
Allurio uses jQuery CSS Skills Bar Plugin to show he skill set.
You can change percent parameter in the HTML file:
<!-- Skillbar single item -->
<div class="show-skillbar">
<div class="skillbar light" data-percent="96">
<span class="skillbar-title text-light">Design</span>
<p class="skillbar-bar light"></p>
<span class="skill-bar-percent text-light"></span>
</div>
</div>All other parameters you can change in custom.js file:
$('.skillbar').skillBars({
from: 0,
speed: 4000,
interval: 100,
decimals: 0
});See jQuery CSS Skills Bar Plugin page for more settings.
Allurio uses Magnific Popup for video showreel in the Services section of the template.
You can change a link to the video in your *.html file:
<div class="inner-video__button">
<!-- video trigger -->
<a href="https://vimeo.com/65036292" id="inner-video-trigger" class="inner-video-trigger link-l">Play</a>
</div>All popup parameters you can change in custom.js file:
$('#inner-video-trigger').magnificPopup({
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false,
callbacks: {
beforeOpen: function() { $('body').addClass('overflow-hidden'); },
close: function() { $('body').removeClass('overflow-hidden'); }
}
});See dimsemenov.com/plugins/magnific-popup page for more settings.
Portfolio gallery is made using PhotoSwipe JavaScript Gallery.
This is an example for one portfolio item, just duplicate it to add new pictures or fill it with your content:
<!-- gallery single item -->
<figure class="col-12 col-sm-6 col-xl-4 column my-gallery__item" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="http://via.placeholder.com/1000x1300" data-image="http://via.placeholder.com/1000x1300" class="my-gallery__link" itemprop="contentUrl" data-size="1000x1300">
<img src="http://via.placeholder.com/1000x1300" class="my-gallery__image" itemprop="thumbnail" alt="Image description" />
</a>
<figcaption class="my-gallery__description" itemprop="caption description">
<h3 class="text-light">
<small class="text-light-base">Photography</small>
Marble edges
</h3>
<p class="text-light-base">Mauris porttitor lobortis ligula, quis molestie lorem scelerisque eu. Morbi aliquam enim odio, a mollis ipsum tristique eu.</p>
</figcaption>
</figure>
JavaScript files that have to be included:
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
<script src="js/gallery-init.js"></script>
...
<!-- Load Scripts End-->More information about PhotoSwipe Gallery you can find in PhotoSwipe Documentation.
08
All backgrounds CSS styles are сompiled in plugins.css file so you don't need to add any CSS files.
This background effect is based on the Particles.js plugin.
Make sure you have <div id="particles-js"> in *.html file:
<!-- Background Effect Start-->
<div id="particles-js"></div>
<!-- Background Effect End-->Find the Load Scripts section at the end of <body>and make sure that all the necessary js files are added in the following order:
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/custom.js"></script>
<!-- Load Scripts End-->Done! More information about particles.js configuration you can find on official website.
This background effect is based on the Particles.js plugin.
Make sure you have <div id="nightsky-js"> in *.html file:
<!-- Background Effect Start-->
<div id="nightsky-js"></div>
<!-- Background Effect End-->Find the Load Scripts section at the end of <body>and make sure that all the necessary js files are added in the following order:
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/custom.js"></script>
<!-- Load Scripts End-->Done! More information about particles.js configuration you can find on official website.
To provide this effect we use Vegas jQuery Plugin . Make sure you have <div id="bgndKenburns"> or <div id="bgndKenburnsFull"> in *.html file:
<!-- Background Effects Start -->
<div id="bgndKenburns"></div>
<!-- Background Effects End -->Find the Load Scripts section at the end of <body> and make sure that all the necessary js files are added in the following order:
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/custom.js"></script>
...
<!-- Load Scripts End-->To replace or add images to the slideshow, find the custom.js file in js folder and make the necessary changes to the slides array:
$('#bgndKenburns').vegas({
...
slides: [
{ src: '../img/example-slide-1.jpg' },
{ src: '../img/example-slide-2.jpg' },
{ src: '../img/example-slide-3.jpg' }
],
...
});More information about Vegas settings you can find in the official documentation - vegas.jaysalvat.com/documentation
To provide self-hosted (local) video background feature we use HTML5 <video> tag. Aso we used <source> property with 3 video formats to maximize browser support:
<!-- Background Effect Start -->
<!-- local video background -->
<div class="video-background">
<video id="main-video" preload="auto" autoplay="autoplay" loop="loop" muted="muted" poster="http://via.placeholder.com/1920x1280">
<source type="video/mp4" src="video/video.mp4">
<source type="video/webm" src="video/video.webm">
<source type="video/ogv" src="video/video.ogv">
</video>
</div>
<!-- Background Effect End -->You can use online service to convert your video: Online Uniconverter or any other similar applicaton.
Please note, if you'll not use muted property of the <video> tag, your video will not start automatically in some browsers.
09
Allurio template is provided with 2 form types:
This active subscribe form will save emails to MailChimp list.
<!-- Notify Contact Form Start-->
<form class="form notify-form form-light">
<input class="" type="email" placeholder="Email Adress*" required>
<span class="inputs-description">*Required field</span>
<button class="btn btn-l btn-light" type="submit">Send</button>
</form>
<!-- Notify Contact Form End-->JavaScript files that have to be included:
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/custom.js"></script>
<!-- Load Scripts End-->Follow these steps to get Mailchimp list URL:
Audience section.
https:// if it is not included with MailChimp list URL.Open custom.js file from js folder. Just replace our Mailchimp form action URL with your Mailchimp list URL:
$('.notify-form').ajaxChimp({
callback: mailchimpCallback,
// Replace this Mailchimp form action URL with your Mailchimp list URL
url: 'https://besaba.us10.list-manage.com/subscribe/post?u=e8d650c0df90e716c22ae4778&id=54a7906900'
});Done! Now you can save emails to your MailChimp Audience List!
Allurio template has integrated ajax contact form.
It's very easy to set up this forms to receive feedback on your e-mail:
mail.php file is added to the root directory of your project.<form> tag with id="contact-form" in the *.html file. <!-- Contact Form Start -->
<form class="form contact-form form-dark" id="contact-form">
<!-- Hidden Required Fields -->
<input type="hidden" name="project_name" value="Allurio - Coming Soon & Portfolio Template">
<input type="hidden" name="admin_email" value="support@mixdesign.club">
<input type="hidden" name="form_subject" value="Contact Form Message">
<!-- END Hidden Required Fields-->
...
</form>
<!-- Contact Form End -->JavaScript files that have to be included:
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/custom.js"></script>
...
<!-- Load Scripts End-->Done! Now you can receive messages on your e-mail.
10
If you want to totally customize Allurio, you can use our all-inclusive AllurioGULP template. AllurioGULP includes Bootstrap 5 Grid, Gulp, Sass, Bourbon, Autoprefixer, Browsersync, Clean-CSS, CSS Beautify, Uglify, and other packages for efficient and comfortable work.
AllurioGULP requires node, npm and git.
Install Node Modules: npm i
Run AllurioGULP: gulp
app directory;sass directory;dist folder is a production folder. It contains ready project with optimized HTML, CSS, JS and images.gulp: run default gulp task for web development;
build: build project to dist folder;
clearcache: clear all gulp cache.
If you have any questions about AllurioGULP, you can email us on support@mixdesign.club.
11
12