Beldon Coming Soon & Landing Page Template Documentation

by: mix_design
version: 1.0.0
created: 26.11.2021
last update: 18.08.2022

Introduction

Thank you for choosing Beldon - coming soon and landing page HTML template. We have prepared detailed documentation to make Beldon 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 ! :)

Installation

Follow the steps below to setup your site template:

In order to start working with Beldon 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.

Files Structure

After downloading and extracting template package you will find 3 folders:

HTML: ready to use HTML template;
BeldonGULP: if you want to totally customize Beldon, you can use this template;
Documentation: this help file.

This section describes HTML folder structure. More about BeldonGULP folder structure you can find out in BeldonGULP section.

Beldon 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.

all HTML files are located in the root directory;
separate folders are created for CSS files, JavaScript files, fonts, images and video;
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.

Demo Pages

Beldon is one page HTML template and comes with 12 ready-to-use demo pages:

Dark Color Version

Slider Slide

Slider 3d

Single Image & Countdown

Self hosted video & countdown

Kenburns & countdown

Particles & Countdown

Light Color Version

Slider Slide

Slider 3d

Single Image & Countdown

Self hosted video & countdown

Kenburns & countdown

Triangles & Countdown

HTML structure

Beldon 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>

          <!-- Old Browsers Support Start -->
          ...
          <!-- Old Browsers Support End -->

          <!-- Loader Start -->
          <div class="loader">
            ...
          </div>
          <!-- Loader End -->

          <!-- Header Start -->
          <header id="header" class="header dark">
            ...
          </header>
          <!-- Header End -->

          <!-- Navigation Start -->
          <nav id="nav" class="nav">
            ...
          </nav>
          <!-- Navigation End -->

          <!-- Main Section Start -->
          <section id="main" class="main active-section">
            ...
          </section>
          <!-- Main Section End -->

          <!-- About Section Start -->
          <section id="about" class="inner about">
            ...
          </section>
          <!-- About Section End -->

          <!-- Works Section Start -->
          <section id="works" class="inner works">
            ...
          </section>
          <!-- Works Section End -->

          <!-- Contact Section Start -->
          <section id="contact" class="inner contact">
            ...
          </section>
          <!-- Contact Section End -->

          <!-- Root element of PhotoSwipe. Must have class pswp. -->
          <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
            ...
          </div>

          <!-- Custom Cursor -->
          <div class="cursor"></div>

          <!-- Load Scripts Start -->
          ...
          <!-- Load Scripts End -->

        </body>

      </html>

CSS Files

Beldon 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. Beldon uses uncompressed CSS files. If you want to improve Google PageSpeed Insights performance, you can use minificated files from source-files → beldon-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">
      <link rel="stylesheet" type="text/css" href="css/colors/color-*.css">
      <!-- Template Styles End -->

CSS files that have to be included in chosen .html file:

loader-*.css
plugins.css
main.css
color-*.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.

* - Color skin name

JavaScript Libraries

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 Beldon proper work, are сompiled in this file;
gallery-init.js - for photoswipe gallery initialization;
beldon-custom.js - includes other scripts calls and settings;
map-*.js - for Google Map.

    
      <!-- Load Scripts Start -->
      <script src="js/libs.min.js"></script>
      <script src="js/gallery-init.js"></script>
      <script src="js/beldon-custom.js"></script>
      <script src="js/maps/map-dark.js"></script>
      <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNMDtmEsvSevM4ztfsbhLfLNZhKHCvWXk"></script>
      <!-- Load Scripts End -->

We used minificated libs.min.js file to add all necessary JavaScript libraries to this template. The file contains:

jQuery
Modernizr
jQuery Transit
jQuery Mouse Wheel Plugin
KBW Countdown
AjaxChimp
Anime.js
Magnific Popup
PhotoSwipe JavaScript Gallery
Particles.js
Swiper Slider
Vegas
Beldon-app.js - Beldon template custom JavaScript file.

All this uncompressed files you can find in the source-files folder.

* - color skin name

Fonts

In the Beldon template we used FogtwoNo5 Font, Lato Font and Fontawesome Free Iconic Font.

Custom Fonts

In the Beldon template we used two fonts:

FogtwoNo5 font is used for headlines;
Lato - is used for basic text content and additional text.

This fonts are embedded in the main.css file via @font-face rule:

    
      /* ------------------------------------------------*/
      /* Fonts Start */
      /* ------------------------------------------------*/
      /* Poppins Font */
      @font-face {
        font-family: "FogtwoNo5";
        font-style: normal;
        font-weight: 400;
        src: url("../fonts/FogtwoNo5/FogtwoNo5.eot?#iefix") format("embedded-opentype"),
             url("../fonts/FogtwoNo5/FogtwoNo5.woff2") format("woff2"),
             url("../fonts/FogtwoNo5/FogtwoNo5.woff") format("woff"),
             url("../fonts/FogtwoNo5/FogtwoNo5.ttf") format("truetype"),
             url("../fonts/FogtwoNo5/FogtwoNo5.svg#FogtwoNo5") 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.

Fontawesome free

Beldon uses free version of FontAwesome 6.1.2 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.

Favicon and Apple touch icons

Beldon 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:

      
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
        	<style type="text/css">
        		.st0 {
        			fill: #000000;
        		}
        		@media (prefers-color-scheme: dark) {
        			.st0 {
        				fill: #ffffff;
        			}
        		}
        	</style>
        <path class="st0" d="M94.5,37.6H68.1v-4.7h31.8c23,0,50.8-7.5,50.8-30.5v-2h4.7v228.9c25.6-44.1,65.5-71.1,122.6-71.1
        	c92.1,0,154.5,68.4,154.5,171.4c0,94.2-69.8,170.7-154.5,170.7c-52.2,0-101.6-27.1-120.6-79.3c-4.2-11.5-10.4-18.6-16.6-18.6
        	c-10.8,0-21.8,21.2-24.1,77.7l-0.7,16.8l-7.5,2l2.7-69.8V54.5C111.4,43.7,105.3,37.6,94.5,37.6z M267.3,484.7
        	c70.5,0,117.2-58.3,117.2-145c0-97.6-45.4-163.3-114.5-163.3c-45,0-88.8,22.6-114.5,76.2V352C155.5,440.7,211,484.7,267.3,484.7z"/>
        </svg>

Facebook Metadata:

      
        <!-- Facebook Metadata Start -->
        <meta property="og:image:height" content="1200">
        <meta property="og:image:width" content="1200">
        <meta property="og:title" content="Beldon - Coming Soon and Landing Page Template">
        <meta property="og:description" content="Beldon - awesome coming soon template to kick-start your project">
        <meta property="og:url" content="http://mixdesign.club/themeforest/beldon/">
        <meta property="og:image" content="http://mixdesign.club/themeforest/beldon/img/favicon/og-image.jpg">
        <!-- Facebook Metadata End -->

You can use Beldon favicon as an example or generate new one with Favicon Generator or any other favicon generator by your needs.

Customization

Beldon template comes with easy-to-customize page elements. You can choose from 2 color skins, various backgrounds and much more.

Preloader

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 fadeIn">
      <!-- Your Logo Here -->
      <img src="img/logo-light.svg" alt="Beldon - Coming Soon and Landing Page 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-->

* - color skin name

Colors

Beldon provided with 2 color skins and 12 ready-to-use demo pages. Each color skin has its own CSS file. You can find all of them in the css → colors folder.

To make sure that the desired color skin is applied, find Template Styles section in the head tag and make sure that the file color-*.css is added:

<!-- Template Styles Start -->
...
<link rel="stylesheet" type="text/css" href="css/colors/color-dark.css">
<!-- Template Styles End -->

More beauriful color skins are coming soon in the next update.

Logo

The logo container is located in the template's header -div class="header".

<!-- Header Start -->
<header id="header" class="header dark">
 
  <!-- Template Logo Start -->
  <div class="header__logo">
    <!-- Your Logo Here -->
    <img src="img/logo-light.svg" alt="Beldon Template Logo">
  </div>
  <!-- Template Logo End -->
  ...
</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.

Images

All images used in Beldon 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 template background images you can replace in the main.css file:

/* ------------------------------------------------*/
/* Template Backgrounds Start */
/* ------------------------------------------------*/
...
.media-bg-1 {
  background-image: url("http://via.placeholder.com/1000x1500");
}
...
/* ------------------------------------------------*/
/* Template Backgrounds End */
/* ------------------------------------------------*/

<!-- Navigation Start -->
<nav id="nav" class="nav">
  <!-- navigation color background -->
  <div class="color-layer color-layer-svg color-layer-svg-menu"></div>
  <div class="container-fluid p-0 fullheight">
    <div class="row g-0 fullheight">
      <div class="col-12 col-xl-6 nav__menu">
 
        <!-- Menu Start -->
        <ul class="menu">
          <!-- menu single item -->
          <li class="menu__item">
            <a href="#0" id="main-trigger" class="menu__link active-trigger link-l" data-ref="home">
              <span class="link__number">01.</span>
              <span class="link__caption">Home</span>
            </a>
          </li>
          <!-- menu single item -->
          <li class="menu__item">
            <a href="#0" id="about-trigger" class="menu__link link-l" data-ref="about">
              <span class="link__number">02.</span>
              <span class="link__caption">About us</span>
            </a>
          </li>
          <!-- menu single item -->
          <li class="menu__item">
            <a href="#0" id="works-trigger" class="menu__link link-l" data-ref="works">
              <span class="link__number">03.</span>
              <span class="link__caption">Our works</span>
            </a>
          </li>
          <!-- menu single item -->
          <li class="menu__item">
            <a href="#0" id="contact-trigger" class="menu__link link-l" data-ref="contact">
              <span class="link__number">04.</span>
              <span class="link__caption">Contact</span>
            </a>
          </li>
        </ul>
        <!-- Menu Start -->
 
      </div>
    </div>
  </div>
</nav>
<!-- Navigation End -->

Homescreen Layout and Headline

Beldon is provided with beautifully designed split layout with large headline and various backgrounds.Represent your best works on the first screen! Animated backgrounds settings you can find in the Animated Backgrounds section of this file. Countdown ad Slider settings you can find in the Plugins section.

To customize a headline, you need to find the following markup in the main section of the *.html file:

<!-- Headline Start -->
<div class="intro__headline">
  <span class="headline__subtitle">Creative agency</span>
  <h1 class="headline__title">The new start<br>is coming</h1>
  <p class="headline__descr">
    We are preparing something amazing and exciting for you. Special surprise for our subscribers only.
  </p>
  <div class="headline__btnholder">
    <a href="#0" id="notify-trigger" class="button round-button link-l">
      <span class="button__caption">Notify me</span>
      <span class="button__icon"><span class="material-icons">chevron_right</span></span>
    </a>
  </div>
</div>
<!-- Headline End -->

Header

Beldon 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 dark">
 
  <!-- Template Logo Start -->
  <div class="header__logo">
    <!-- Your Logo Here -->
    <img src="img/logo-light.svg" alt="Beldon Template Logo">
  </div>
  <!-- Template Logo End -->
 
  <!-- Header Controls Start -->
  <div class="header__controls">
    <!-- menu trigger -->
    <div class="menu-button">
      <a href="#0" id="menu-trigger" class="menu-trigger link-s">
        <span class="menu-trigger__caption">
          <em class="menu-trigger__hover">Menu</em>
          <em class="menu-trigger__close">Close</em>
        </span>
        <span class="menu-trigger__icon">
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
          <path d="M22.8,9.2c1.5,1.5,1.5,4,0,5.6c-1.5,1.5-4,1.5-5.6,0c-1.5-1.5-1.5-4,0-5.6C18.8,7.7,21.3,7.7,22.8,9.2z M9.2,1.2
            c-1.5,1.5-1.5,4,0,5.6s4,1.5,5.6,0s1.5-4,0-5.6S10.7-0.4,9.2,1.2z M9.2,17.3c-1.5,1.5-1.5,4,0,5.6c1.5,1.5,4,1.5,5.6,0
            c1.5-1.5,1.5-4,0-5.6C13.3,15.7,10.7,15.7,9.2,17.3z M1.2,9.2c-1.5,1.5-1.5,4,0,5.6s4,1.5,5.6,0s1.5-4,0-5.6S2.7,7.7,1.2,9.2z"></path>
          </svg>
        </span>
      </a>
    </div>
  </div>
  <!-- Header Controls Start -->
 
  <!-- Header Underlines Start -->
  <div class="header__underline underline-1"></div>
  <div class="header__underline underline-2"></div>
  <!-- Header Underlines End -->
 
</header>
<!-- Header End -->

Plugins

Countdown

Beldon template comes with one countdown type:

#countdown

Beldon 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)

10 – timezone;
2022 – local year;
11 – local month;
22 – local day.

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:

libs.min.js
beldon-custom.js

    
      <!-- Load Scripts Start-->
      <script src="js/libs.min.js"></script>
      ...
      <script src="js/beldon-custom.js"></script>
      ...
      <!-- Load Scripts End-->

Setting your own date for countdown script can be done in beldon-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

Swiper Slider

Beldon uses Swiper Slider 8.3.2 Plugin for:

Homescreen layout slide slider
Homescreen layout 3d slider
Works section image slider

Homescreen layout slide slider:

It's a half-screen slider with captions and a slide effect:

<!-- Main Section Swiper Slider Start -->
<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <!-- slide single -->
    <div class="swiper-slide">
      <div class="slide-image swiper-image-1">
        <div class="color-layer color-layer-black"></div>
      </div>
      <span class="slide-caption" data-swiper-parallax="150" data-swiper-parallax-opacity="0.5">01/05</span>
    </div>
    ...
  </div>
  <!-- Navigation buttons -->
  <div class="swiper-button-prev main-swiper-controls main-prev link-s">Prew</div>
  <div class="swiper-button-next main-swiper-controls main-next link-s">Next</div>
</div>
<!-- Main Section Swiper Slider End -->

All slides background images you can replace in the main.css file:

/* ------------------------------------------------*/
/* Template Backgrounds Start */
/* ------------------------------------------------*/
...
.swiper-image-1 {
  background-image: url("http://via.placeholder.com/1000x1500");
}
...
/* ------------------------------------------------*/
/* 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:

libs.min.js
beldon-custom.js

<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/beldon-custom.js"></script>
...
<!-- Load Scripts End-->

If you want to change this slider settings, find the beldon-custom.js file in js folder and make the necessary changes to the swiper init lines:

if (mainSlider.length) {
  var swiper1 = new Swiper('.swiper', {
    grabCursor: true,
    effect: "creative",
    creativeEffect: {
      prev: {
        translate: ["-20%", 0, -1],
      },
      next: {
        translate: ["100%", 0, 0],
      },
    },
    parallax: true,
    speed: 1300,
    loop: true,
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
};

Homescreen layout 3d slider:

It's a half-screen slider with captions and a slide effect:

<!-- Main Section Swiper Slider Start -->
<!-- Slider main container -->
<div class="swiper-2">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <!-- slide single -->
    <div class="swiper-slide">
      <div class="slide-image swiper-image-1">
        <div class="color-layer color-layer-black"></div>
      </div>
      <span class="slide-caption" data-swiper-parallax="150" data-swiper-parallax-opacity="0.5">01/05</span>
    </div>
    ...
  </div>
  <!-- Navigation buttons -->
  <div class="swiper-button-prev main-swiper-controls main-prev link-s">Prew</div>
  <div class="swiper-button-next main-swiper-controls main-next link-s">Next</div>
</div>
<!-- Main Section Swiper Slider End -->

All slides background images you can replace in the main.css file:

/* ------------------------------------------------*/
/* Template Backgrounds Start */
/* ------------------------------------------------*/
...
.swiper-image-1 {
  background-image: url("http://via.placeholder.com/1000x1500");
}
...
/* ------------------------------------------------*/
/* 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:

libs.min.js
beldon-custom.js

<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/beldon-custom.js"></script>
...
<!-- Load Scripts End-->

If you want to change this slider settings, find the beldon-custom.js file in js folder and make the necessary changes to the swiper init lines:

if (mainSlider.length) {
  var swiper2 = new Swiper('.swiper-2', {
    grabCursor: true,
    effect: "creative",
    creativeEffect: {
      prev: {
        translate: [0, 0, -200],
      },
      next: {
        translate: ["100%", 0, 0],
      },
    },
    parallax: true,
    speed: 1300,
    loop: true,
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
};

Works section image slider:

It's an inner section slider with pagination and navigation buttons:

<div class="swiper-works">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide works-slide-1"></div>
    <div class="swiper-slide works-slide-2"></div>
    <div class="swiper-slide works-slide-3"></div>
  </div>
  <!-- Pagination -->
  <div class="swiper-pagination works-pagination"></div>
  <!-- Navigation buttons -->
  <div class="swiper-button-prev works-swiper-controls works-prev link-l">
    <span class="material-icons">chevron_left</span>
  </div>
  <div class="swiper-button-next works-swiper-controls works-next link-l">
    <span class="material-icons">chevron_right</span>
  </div>
</div>

All slides background images you can replace in the main.css file:

/* ------------------------------------------------*/
/* Template Backgrounds Start */
/* ------------------------------------------------*/
...
.works-slide-1 {
  background-image: url("http://via.placeholder.com/1920x1080");
}
...
/* ------------------------------------------------*/
/* 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:

libs.min.js
beldon-custom.js

<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/beldon-custom.js"></script>
...
<!-- Load Scripts End-->

If you want to change this slider settings, find the beldon-custom.js file in js folder and make the necessary changes to the swiper init lines:

var swiper3 = new Swiper('.swiper-works', {
  // Optional parameters
  parallax: true,
  speed: 1000,
  loop: true,
  autoplay: {
    delay: 4000,
    disableOnInteraction: true,
  },
  // Pagination
  pagination: {
    el: '.swiper-pagination',
  },
  // 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

Skillbars

Beldon uses jQuery CSS Skills Bar Plugin to show the skill set.

You can change percent parameter in the HTML file:

<!-- Skillbar single item -->
<div class="show-skillbar">
    <div class="skillbar" data-percent="96">
        <span class="skillbar-title">Design</span>
        <p class="skillbar-bar"></p>
        <span class="skill-bar-percent"></span>
    </div>
</div>

All other parameters you can change in beldon-custom.js file:

$('.skillbar').skillBars({
  from: 0,
  speed: 4000,
  interval: 100,
});

See jQuery CSS Skills Bar Plugin page for more settings.

Magnific Popup

Beldon uses Magnific Popup for video showreel in About 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 beldon-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.

Photoswipe Gallery

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-md-6 col-xl-4 my-gallery__item link-l"  itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
  <a href="img/works/1200x800-works-image-1.jpg" data-image="img/works/1200x800-works-image-1.jpg" class="works-link" itemprop="contentUrl" data-size="1200x800">
    <img src="img/works/1200x800-works-image-1.jpg" class="works-image" itemprop="thumbnail" alt="Image description" />
  </a>
  <figcaption class="my-gallery__descr" itemprop="caption description">
    <h3>
      New style brand
      <small>Art / Photography</small>
    </h3>
    <p class="light">Have i gone mad? Im afraid so, but let me tell you something, the best people usualy are.</p>
  </figcaption>
</figure>

JavaScript files that have to be included:

libs.min.js
gallery-init.js

<!-- 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.

Animated Backgrounds

All backgrounds CSS styles are compiled in plugins.css file so you don't need to add any CSS files.

Particles

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:

libs.min.js
beldon-custom.js

<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/beldon-custom.js"></script>
<!-- Load Scripts End-->

Done! More information about particles.js configuration you can find on official website.

Triangles

This background effect is based on the Particles.js plugin. Make sure you have <div id="triangles-js"> in *.html file:

<!-- Background Effect Start-->
<div id="triangles-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:

libs.min.js
beldon-custom.js

<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/beldon-custom.js"></script>
<!-- Load Scripts End-->

Done! More information about particles.js configuration you can find on official website.

Ken Burns

To provide this effect we use Vegas jQuery Plugin . Make sure you have <div id="bgndKenburns"> in *.html file:

<!-- Background Effect Start -->
<div class="fullscreen">
  <div id="bgndKenburns"></div>
</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:

libs.min.js
beldon-custom.js

<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/beldon-custom.js"></script>
...
<!-- Load Scripts End-->

To replace or add images to the slideshow, find the beldon-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

Self Hosted Video

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 -->
<div class="video-background">
  <video id="main-video" preload="auto" autoplay="autoplay" loop="loop" muted="muted" poster="img/backgrounds/poster.jpg">
    <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.

Forms

Beldon template is provided with 2 form types:

Mailchimp Subscription Form
AJAX Contact Form.

Mailchimp Subscription Form

This active subscribe form will save e-mails to Mailchimp list.

<!-- Notify Contact Form Start-->
<form class="form notify-form">
  <input class="margin-s" type="email" placeholder="Email Adress*" required="" name="EMAIL">
  <span class="inputs-description">*Required fields</span>
  <button class="btn btn-solid link-l" type="submit">
    <span>Send</span>
  </button>
</form>
<!-- Notify Contact Form End-->

JavaScript files that have to be included:

libs.min.js
beldon-custom.js

<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/beldon-custom.js"></script>
...
<!-- Load Scripts End-->

Follow these steps to get Mailchimp list URL:

Login or create an account on mailchimp.com and go to the Audience section.
Choose "Signup Forms" from the list:
Find "Embedded forms" and click "Select":
The form, you'll see on the next screen fits for our "Notify Me" form, so click "Continue":
Now the form is ready and you need to copy action URL from the form - highlighted in pink:
Add https:// if it is not included with MailChimp list URL.

Open beldon-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!

Contact Forms

Beldon has 1 integrated ajax contact form:

All these forms have the same settings. It's very easy to set up this forms to receive feedback on your e-mail:

First of all you need to make sure that mail.php file is added to the root directory of your project.
Then find <form> tag with id="contact-form" in the *.html file.

This form contains 3 hidden required inputs. Replace data in the value parameter of these hidden fields:

<form class="form contact-form" id="contact-form">
    <!-- Hidden Required Fields-->
    <input type="hidden" name="project_name" value="Beldon - Coming Soon and Landing Page Template">
    <input type="hidden" name="admin_email" value="example@yourdomain.com"> <!-- Your E-mail Here-->
    <input type="hidden" name="form_subject" value="Contact Form Message">
    <!-- END Hidden Required Fields-->
    ...
</form>

Check JavaScript files connection.

JavaScript files that have to be included:

libs.min.js
beldon-custom.js

<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/beldon-custom.js"></script>
...
<!-- Load Scripts End-->

Done! Now you can receive messages on your e-mail.

Google Maps

Beldon provides custom Google Maps for each color skin. All Google Maps JavaScript files you can find in the js → maps folder.

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:

libs.min.js
beldon-custom.js
map-*.js

* - color skin name

For example:

<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/beldon-custom.js"></script>
<script src="js/maps/map-dark.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNMDtmEsvSevM4ztfsbhLfLNZhKHCvWXk "></script>
<!-- Load Scripts End-->

Change the Google Map parameters in map-color-*.js file:

$(function() {
    // Insert Your Google Map Parameters:
    var latitude = 40.761425,
        longitude = -73.977643,
        map_zoom = 14;
    ...
});

For Google Map proper work you need to get Google Map API key and insert it in your chosen .html file. At first get API key. Google has detailed instructions for this process: Get API key.

Find “Load Scripts” section of the .html file and replace demo API key with your new key. You’ll need to wait some time for the changes to take effect:

<!-- Load Scripts Start-->
...
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY "></script>
<!-- Load Scripts End-->

Done! More information about Google Maps styling you can find on the Google Maps API tutorial page.

BeldonGULP

If you want to totally customize Beldon template, you can use our all-inclusive BeldonGULP template. BeldonGULP includes Bootstrap Grid, Gulp, Sass, Bourbon, Autoprefixer, Browsersync, Clean-CSS, CSS Beautify, Uglify, and other packages for efficient and comfortable work.

BeldonGULP requires node, npm and git.

Getting started

Install Node Modules: npm i
Run BeldonGULP: gulp

Project structure

The source code is located in the app directory;
SASS files are located in the sass directory;
The dist folder is a production folder. It contains ready project with optimized HTML, CSS, JS and images.

Gulp tasks

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 BeldonGULP, you can email us on support@mixdesign.club.

Changelog

Version 1.0.0 26.11.2021

Initial release

Version 1.0.0 18.04.2022

Documentation update

Version 1.0.0 18.08.2022

Swiper plugin updated to 8.3.2;
Fontawesome updated to 6.1.2;
Material Design iconic font replaced with SVG icons;
Documentation update.

Credits

CSS and JavaScript files

jQuery - jquery.com
jQuery Transit - github.com/rstacruz/jquery.transit
jQuery Mousewheel - github.com/jquery/jquery-mousewheel
Modernizr - modernizr.com
Bootstrap grid - getbootstrap.com
KBW Countdown - keith-wood.name/countdown.html
Anime.js - animejs.com
Magnific Popup - dimsemenov.com/plugins/magnific-popup
Swiper Slider - idangero.us/swiper
Vegas - vegas.jaysalvat.com
Particles JS - vincentgarreau.com/particles.js
PhotoSwipe JavaScript Gallery - photoswipe.com
Google Maps - developers.google.com/maps/web
AjaxChimp - github.com/scdoshi/jquery-ajaxchimp
UniMail - github.com/agragregra/uniMail

Icons and images

Icons - fontawesome.com and fonts.google.com/icons
Images - unsplash.com and www.pexels.com
Mockups - psd.graphics and www.mockupworld.co

Beldon Coming Soon & Landing Page Template Documentation

Introduction

Installation

Files Structure

Demo Pages

HTML structure

CSS Files

JavaScript Libraries

Fonts

Custom Fonts

Fontawesome free

Favicon and Apple touch icons

Customization

Preloader

Colors

Logo

Images

Navigation Menu

Homescreen Layout and Headline

Header

Plugins

Countdown

Swiper Slider

Skillbars

Magnific Popup

Photoswipe Gallery

Animated Backgrounds

Particles

Triangles

Ken Burns

Self Hosted Video

Forms

Mailchimp Subscription Form

Contact Forms

Google Maps

BeldonGULP

Getting started

Project structure

Gulp tasks

Changelog

Version 1.0.0 26.11.2021

Version 1.0.0 18.04.2022

Version 1.0.0 18.08.2022

Credits

CSS and JavaScript files

Icons and images