Ackley Coming Soon and Landing Page Template Documentation

by: mix_design
version: 1.0.0
created: 19.06.2023
last update: 19.06.2023

Introduction

Thank you for choosing Ackley - coming soon and landing page template. We have prepared detailed documentation to make Ackley 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 Ackley 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;
AckleyGULP: if you want to totally customize Ackley, you can use this template;
Documentation: this help file.

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

Ackley 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

Ackley is one page HTML template and comes with 2 homescreen variations and 6 ready-to-use demo pages:

Agency & Image Background

Agency & Carousel

Coming Soon & Slider

Coming Soon & Video Background

Agency & Image Background

Portfolio & Image Background

Portfolio & Carousel

Portfolio & Video Background

HTML structure

Ackley has a simple and easy to customize structure based on Bootstrap 5.2.3 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>

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

          <!-- Header Start -->
          <header id="header" class="header header-transparent d-flex align-items-center justify-content-between">
            ...
          </header>
          <!-- Header End -->

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

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

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

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

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

          <!-- Notify Popup Start -->
          <div id="notify" class="popup notify d-md-flex align-items-md-center">
            ...
          </div>
          <!-- Notify Popup End -->

          <!-- Say Hello Popup Start -->
          <div id="sayhello" class="popup sayhello d-md-flex align-items-md-center">
            ...
          </div>
          <!-- Say Hello Popup 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 -->
          <script src="js/libs.min.js"></script>
          <script src="js/gallery-init.js"></script>
          <script src="js/custom.js"></script>
          <!-- Load Scripts End -->
          
        </body>

      </html>

CSS Files

Ackley 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. Ackley uses uncompressed CSS files. If you want to improve Google PageSpeed Insights performance, you can use minificated files from source-files → ackley-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.

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 Ackley proper work, are compiled 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:

jQuery
Modernizr
Typed.js
KBW Countdown
Jquery CSS Skills Bar
Magnific Popup
Swiper Slider
PhotoSwipe JavaScript Gallery
AjaxChimp
Anime.js
app.js - Ackley template custom JavaScript file.

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

Fonts

In the Ackley template we used Space Grotesk and Fontawesome 6.4.0 Free Iconic Font.

Google Fonts

Ackley uses

Space Grotesk font for titles, basic text content and additional text.

The font is embedded in the main.css file:

@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Space+Grotesk:wght@300;400;500;600;700&display=swap");

You can customize this font or embed another fonts for your project with Google Fonts. In this case, you'll also need to change the fonts in the css files per your fonts used.

Fontawesome free

Ackley uses free version of FontAwesome 6.4.0 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

Ackley 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="Ackley - Coming Soon and Landing Page Template">
        <meta property="og:description" content="Ackley - bold and clean coming soon and landing page template to kick-start your project">
        <meta property="og:url" content="http://mixdesign.club/themeforest/ackley/">
        <meta property="og:image" content="http://mixdesign.club/themeforest/ackley/favicon/og-image.jpg">
        <!-- Facebook Metadata End -->

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

Customization

Ackley template comes with easy-to-customize page elements. You can choose from 8 ready-to-use demo files, 4 homescreen versions, 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__container">
    <div class="loader__circle">
      <img src="img/loader.svg" alt="Ackley Template Loader Logo">
    </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-->

Logo

The logo container is located in the header of the template - header class="header".

<!-- Header Start -->
<header id="header" class="header header-transparent d-flex align-items-center justify-content-between">
 
  <!-- Logo Start -->
  <div class="header__logo">
    <!-- Your Logo Here -->
    <img src="img/logo.svg" alt="Ackley - Coming Soon and Landing Page Template">
  </div>
  <!-- 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 the Ackley 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 dummyimage.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-main {
  background-image: url("https://dummyimage.com/1920x1080/424242/636363");
}
...
/* ------------------------------------------------*/
/* Template Backgrounds End */
/* ------------------------------------------------*/

Rotating objects

Ackley template is provided with filled and outlined rotating SVG animated objects. You can use this objects for:

Notify Me popup trigger
Showreel trigger
Download CV button
Coming Soon decorative object

The template has a list of predefined animated objects for 3 screen types:

Mobile screens - 110x110px
Medium screens - 160x160px
Large screens - 210x210px

You can change or replace objects in the Main Section:

    
      <!-- Main Section Media Start -->
      <div class="col-12 main__media media-bottom media-padding">
        
        ...

        <!-- Rotate Object Start -->
        <div class="rotate-object">
          <a href="https://vimeo.com/65036292" id="showreel-trigger" class="large-trigger showreel-trigger link-xl">
            <img class="rotate-img rotate-img-s" src="img/svg/110x110-showreel-outline.svg" alt="Ackley - Coming Soon and Landing Page Template">
            <img class="rotate-img rotate-img-m" src="img/svg/160x160-showreel-outline.svg" alt="Ackley - Coming Soon and Landing Page Template">
            <img class="rotate-img rotate-img-xxl" src="img/svg/210x210-showreel-outline.svg" alt="Ackley - Coming Soon and Landing Page Template">
          </a>
        </div>
        <!-- Rotate Object End -->

      </div>
      <!-- Main Section Media End -->

    
      <!-- Menu Start -->
      <nav id="menu" class="menu">
        <div class="menu__content">
          <!-- SVG gradient background -->
          <div class="svg-layer svg-layer-menu"></div>
          <div class="container-fluid p-0 fullheight-mobile">
            <div class="row g-0 fullheight-mobile">

              <!--Menu Data Block Start -->
              <div class="col-12 menu__data">

                <!-- Menu Links Start -->
                <div class="menudata__links">
                  <div class="container-fluid p-0">
                    <div class="row g-0">
                      <div class="col-12">

                        <!-- Navigation Start -->
                        <ul class="navigation">
                          <li>
                            <a class="navigation__link link-l-arrow" href="#0" id="home-trigger">Home</a>
                            <div id="home-trigger-marquee" class="marquee-link">
                              <div class="marquee-link-content scroll-x2">
                                <span>Home</span>
                                <span>Home</span>
                                <span>Home</span>
                                <span>Home</span>
                              </div>
                              <div class="marquee-link-content scroll-x2">
                                <span>Home</span>
                                <span>Home</span>
                                <span>Home</span>
                                <span>Home</span>
                              </div>
                              <div class="marquee-link-content scroll-x2">
                                <span>Home</span>
                                <span>Home</span>
                                <span>Home</span>
                                <span>Home</span>
                              </div>
                            </div>
                          </li>
                          <li>
                            <a class="navigation__link link-l-arrow" href="#0" id="about-trigger">About Us</a>
                            <div class="marquee-link">
                              <div class="marquee-link-content scroll-x2">
                                <span>About Us</span>
                                <span>About Us</span>
                                <span>About Us</span>
                              </div>
                              <div class="marquee-link-content scroll-x2">
                                <span>About Us</span>
                                <span>About Us</span>
                                <span>About Us</span>
                              </div>
                              <div class="marquee-link-content scroll-x2">
                                <span>About Us</span>
                                <span>About Us</span>
                                <span>About Us</span>
                              </div>
                            </div>
                          </li>
                          <li>
                            <a class="navigation__link link-l-arrow" href="#0" id="works-trigger">Portfolio</a>
                            <div class="marquee-link">
                              <div class="marquee-link-content scroll-x2">
                                <span>Portfolio</span>
                                <span>Portfolio</span>
                                <span>Portfolio</span>
                              </div>
                              <div class="marquee-link-content scroll-x2">
                                <span>Portfolio</span>
                                <span>Portfolio</span>
                                <span>Portfolio</span>
                              </div>
                              <div class="marquee-link-content scroll-x2">
                                <span>Portfolio</span>
                                <span>Portfolio</span>
                                <span>Portfolio</span>
                              </div>
                            </div>
                          </li>
                          <li>
                            <a class="navigation__link link-l-arrow" href="#0" id="contact-trigger">Contact</a>
                            <div class="marquee-link">
                              <div class="marquee-link-content scroll-x2">
                                <span>Contact</span>
                                <span>Contact</span>
                                <span>Contact</span>
                              </div>
                              <div class="marquee-link-content scroll-x2">
                                <span>Contact</span>
                                <span>Contact</span>
                                <span>Contact</span>
                              </div>
                              <div class="marquee-link-content scroll-x2">
                                <span>Contact</span>
                                <span>Contact</span>
                                <span>Contact</span>
                              </div>
                            </div>
                          </li>
                        </ul>
                        <!-- Navigation End -->

                      </div>
                    </div>
                  </div>
                </div>
                <!-- Menu Links End -->

                <!-- Menu Footer Start -->
                <div class="menudata__footer d-md-flex align-items-md-center justify-content-md-between">
                  <div class="container-fluid p-0">
                    <div class="row g-0 d-flex flex-column flex-md-row">
                      <div class="col-12 col-md-6 text-start">
                        <div class="content-block">
                          <p class="additional-text"><a class="link-s" href="mailto:example@example.com?subject=Message%20from%20your%20site">hello@yourdomain.com</a></p>
                        </div>
                      </div>
                      <div class="col-12 col-md-6 text-start text-md-end">
                        <div class="content-block">
                          <p class="copyright additional-text"><a class="link-s" href="https://themeforest.net/user/mix_design/portfolio" target="_blank">Mix_Design</a>, 2023</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Menu Footer End -->

              </div>
              <!--Menu Data Block End -->

            </div>
          </div>
        </div>
      </nav>
      <!-- Menu End -->

Header

Ackley template comes with 1 header type with left aligned logo and right aligned controls on mobile and desktop.

Desktop view:

Mobile view:

<!-- Header Start -->
<header id="header" class="header d-flex align-items-center justify-content-between inner-is-visible">
 
  <!-- Logo Start -->
  <div class="header__logo">
    ...
  </div>
  <!-- Logo End -->
 
  <!-- Header Controls Start -->
  <div class="header__controls d-flex justify-content-start">
    ...
  </div>
  <!-- Header Controls End -->
 
</header>
<!-- Header End -->

Homescreen Layouts

Ackley template comes with 4 creative layouts with various sliders, image and video backgrounds. You can choose between horizontal split and fullscreen layouts and 3 headline types. Backgrouds settings you can find in the Plugins and Animated Backgrounds sections of this file.

1. Large headline with image and video background. Beautifully designed layout with large animated and static headline, image and video background. Video background 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">
  <h1 class="headline__title large">Cool branding<br>for talanted people</h1>
  <div class="headline__btnholder d-flex flex-column flex-md-row">
    <a href="#" id="menu-tigger-headline" class="d-flex justify-content-center justify-content-md-start btn btn-s btn-icon-left btn-light link-s">
      <span class="btn-title">Know more</span>
      <span class="btn-icon-anim"><i class="fa-solid fa-arrow-right"></i></span>
    </a>
    <a href="#" id="notify-trigger" class="d-flex justify-content-center justify-content-md-start btn btn-s btn-icon-left btn-mute link-s">
      <span class="btn-title">Subscribe to our updates</span>
      <span class="btn-icon-anim"><i class="fa-solid fa-hand-point-right"></i></span>
      
    </a>
  </div>
</div>
<!-- Headline End -->

2. Horizontal split demo with medium headline, image and carousel backgrounds. Carousel settings you can find in Homescreen layout carousel section of this file.

Replace this headline demo text with your own:

<!-- Headline Start -->
<div id="headline" class="headline">
  <span class="headline__subtitle">
    <i class="fa-solid fa-heart"></i>
    See you soon
  </span>
  <h1 class="headline__title">Stay tuned for<br>something awesome</h1>
</div>
<!-- Headline End -->

3. Horizontal split demo with top aligned medium headline, carousel and slider backgrounds. Carousel and slider settings you can find in Swiper Slider section of this file.

Replace this headline demo text with your own:

<!-- Headline Start -->
<div id="headline" class="headline">
  <span class="headline__subtitle">
    <i class="fa-solid fa-hand-spock"></i>
    Let's meet
  </span>
  <h1 class="headline__title animated-headline">
    I'm Alex Walker
    <br>
    <span id="typed-strings">
      <b>Web Designer</b>
      <b>3D Artist</b>
      <b>Illustrator</b>
    </span>
    <span id="typed"></span>
  </h1>
</div>
<!-- Headline End -->

4. Fullscreen demo with large headline, image and video backgrounds. Video background 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 centered-mobile">
  <h1 class="headline__title large">Next Gen<br>
    <span class="headline__decorated outline-object-hello">creative</span><br>
    agency
  </h1>
  <div class="headline__btnholder d-flex flex-column flex-md-row">
    <a href="#" id="menu-tigger-headline" class="d-flex justify-content-center justify-content-md-start btn btn-s btn-icon-left btn-light link-s">
      <span class="btn-title">Know more</span>
      <span class="btn-icon-anim"><i class="fa-solid fa-arrow-right"></i></span>
    </a>
    <a href="#" id="notify-trigger" class="d-flex justify-content-center justify-content-md-start btn btn-s btn-icon-left btn-mute link-s">
      <span class="btn-title">Subscribe to our updates</span>
      <span class="btn-icon-anim"><i class="fa-solid fa-hand-point-right"></i></span>
    </a>
  </div>
</div>
<!-- Headline End -->

Plugins

Countdown

Ackley template comes with days only countdown, which is used on medium size headline and fullscreen layout:

Medium headline countdown #countdown
Fullscreen layout countdown #countdown

Ackley 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
custom.js

    
      <!-- 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, 2023, 9, 9), format: 'D'});

Visit KBW Countdown site for more details and settings - keith-wood.name/countdown.html

Animated Headline

We used Typed.js plugin for animated headline feature. To customize an animated headline, you need to find the following markup in the main section of the *.html file and change the content of <b> tags:

<h1 class="headline__title animated-headline">
  I'm Alex Walker
  <br>
  <span id="typed-strings">
    <b>Web Designer</b>
    <b>3D Artist</b>
    <b>Illustrator</b>
  </span>
  <span id="typed"></span>
</h1>

You can find headline settings (like type speed) in custom.js file:

if(animatedHeadline.length){
    var typed = new Typed('#typed', {
        stringsElement: '#typed-strings',
        loop: true,
        typeSpeed: 80,
        backSpeed: 30,
        backDelay: 2500
    });
}

Visit Typed.js plugin website for more details and settings - mattboldt.com/demos/typed-js

Swiper Slider

Ackley uses newest Swiper 9.3.2 Slider Plugin for:

Homescreen layout slider
Homescreen layout carousel
Inner section aside block

Homescreen layout slider. It's a half-screen top and bottom located slider with slide effect:

    
      <!-- Main Section Split Swiper Slider Start -->
      <!-- Slider main container -->
      <div class="swiper">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
          <!-- Slides -->
          <div class="swiper-slide split-slide slide-1"></div>
          <div class="swiper-slide split-slide slide-2"></div>
          <div class="swiper-slide split-slide slide-3"></div>
        </div>
        <div class="swiper-dataline"></div>

        <!-- If we need navigation buttons -->
        <div class="swiper-nav-block-ackley">
          <div class="swiper-button-prev split-slider-btn-ackley split-slider-btn-ackley-prev link-s"><i class="fa-solid fa-chevron-down"></i></div>
          <div class="swiper-button-next split-slider-btn-ackley split-slider-btn-ackley-next link-s"><i class="fa-solid fa-chevron-up"></i></div>
        </div>
        <div class="swiper-border-ackley"></div>
          
      </div>
      <!-- Main Section Split Swiper Slider End -->

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

    
      /* ------------------------------------------------*/
      /* Template Backgrounds Start */
      /* ------------------------------------------------*/
      ...
      .slide-1 {
        background-image: url("https://dummyimage.com/1920x800/666694/8281c4");
      }
      ...
      /* ------------------------------------------------*/
      /* 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
custom.js

    
      <!-- 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 swiper1 = new Swiper('.swiper', {
          grabCursor: true,
          effect: "creative",
          creativeEffect: {
            prev: {
              translate: [0, "-20%", -1],
            },
            next: {
              translate: [0, "100%", 0],
            },
          },
          parallax: true,
          speed: 1600,
          loop: true,
          autoplay: {
            delay: 3000,
            disableOnInteraction: false,
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        });
      };

Homescreen layout carousel. It's a half-screen horizontal carousel:

    
      <!-- Main Section Swiper Carousel Start -->
      <!-- Slider main container -->
      <div class="swiper-carousel">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
          <!-- Slides -->
          <div class="swiper-slide">
            <img src="https://dummyimage.com/1200x900/666694/8281c4" alt="Ackley Coming Soon & Landing Page Template Main Carousel Image">
          </div>
          ...
        </div>
        <!-- If we need navigation buttons -->
        <div class="swiper-nav-block-ackley">
          <div class="swiper-button-prev split-slider-btn-ackley split-slider-btn-ackley-prev anim-left link-s"><i class="fa-solid fa-chevron-left"></i></div>
          <div class="swiper-button-next split-slider-btn-ackley split-slider-btn-ackley-next anim-right link-s"><i class="fa-solid fa-chevron-right"></i></div>
        </div>
        <div class="swiper-border-ackley"></div>
      </div>
      <!-- Main Section Swiper Carousel End -->

All images you can replace directly in the slide.

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
custom.js

    
      <!-- 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 (mainCarousel.length) {
        var swiper2 = new Swiper('.swiper-carousel', {
          // Optional parameters
          grabCursor: true,
          slidesPerView: "auto",
          spaceBetween: 0,
          speed: 1600,
          loop: true,
          autoplay: {
            delay: 2500,
            disableOnInteraction: false,
          },
          // Navigation arrows
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        });
      };

Inner section aside block. It's a decorative aside block with fade effect:

    
      <!-- Inner Swiper Carousel Start -->
      <!-- Slider main container -->
      <div class="swiper-inner">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
          <!-- Slides -->
          <div class="swiper-slide inner-slide inner-slide-1"></div>
          <div class="swiper-slide inner-slide inner-slide-2"></div>
        </div>
        <!-- If we need navigation buttons -->
        <div class="swiper-nav-block-ackley">
          <div class="swiper-button-prev split-slider-btn-ackley split-slider-btn-ackley-prev anim-left link-s"><i class="fa-solid fa-chevron-left"></i></div>
          <div class="swiper-button-next split-slider-btn-ackley split-slider-btn-ackley-next anim-right link-s"><i class="fa-solid fa-chevron-right"></i></div>
        </div>
      </div>
      <!-- Inner Swiper Carousel End -->

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

    
      /* ------------------------------------------------*/
      /* Template Backgrounds Start */
      /* ------------------------------------------------*/
      ...
      .inner-slide-1 {
        background-image: url("https://dummyimage.com/1200x1400/545478/8281c4");
      }
      @media only screen and (min-width: 1200px) {
        .inner-slide-1 {
          background-image: url("https://dummyimage.com/500x1400/545478/8281c4");
        }
      }
      ...
      /* ------------------------------------------------*/
      /* 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
custom.js

    
      <!-- 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 (innerSlider.length) {
        var swiper3 = new Swiper('.swiper-inner', {
          grabCursor: true,
          effect: "fade",
          parallax: true,
          speed: 1600,
          loop: true,
          autoplay: {
            delay: 3000,
            disableOnInteraction: false,
          },
          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

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

Magnific Popup

Ackley uses Magnific Popup for video showreel in the Main and About sections of the template.

You can change a link to the video in your *.html file:

<div class="showreel__button">
  <!-- video trigger -->
  <a href="https://vimeo.com/65036292" id="inner-video-trigger" class="inner-video-trigger link-l-opposite">
    <img src="img/svg/110x110-showreel-filled.svg" alt="Ackley - Coming Soon and Landing Page Template">
  </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'); }
  }
});

$('#showreel-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 d-flex align-items-center" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
  <a href="img/works/900x1200-portfolio-1.webp" data-image="img/works/900x1200-portfolio-1.webp" class="my-gallery__link link-l-arrow" itemprop="contentUrl" data-size="900x1200">
    <img src="img/works/900x1200-portfolio-1.webp" class="my-gallery__image" itemprop="thumbnail" alt="Image description">
  </a>
  <figcaption class="my-gallery__description" itemprop="caption description">
    <h4>Cute character
      <small>3d render</small>
    </h4>
    <p>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:

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.

HTML5 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 -->
<!-- local video background -->
<div class="video-background">
  <video id="main-video" preload="auto" autoplay="autoplay" loop="loop" muted="muted" poster="https://dummyimage.com/1920x1080/4d4d4d/636363">
    <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

Ackley template is provided with 2 form types:

Mailchimp Subscription Form
AJAX Contact Form.

Mailchimp Subscription Form

This active subscribe form will save emails to MailChimp list.

<!-- Notify Contact Form Start-->
<form class="form notify-form form-light">
  <input class="block-rounded-s" type="email" placeholder="Your Email" required>
  <button class="btn btn-l btn-light link-m-opposite" type="submit">
    <span class="btn-caption">Submit</span>
  </button>
</form>
<!-- Notify Contact Form End-->

JavaScript files that have to be included:

libs.min.js
custom.js

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

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 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=YOUR_LIST_ID'
});

Done! Now you can save emails to your MailChimp Audience List!

Contact Forms

Ackley has 2 integrated ajax contact forms.

Contact form:

Say Hello 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" or id="sayhello-form" in the *.html file.

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

<!-- Contact Form Start -->
<form class="form form-light contact-form" id="contact-form">
  <!-- Hidden Required Fields -->
  <input type="hidden" name="project_name" value="Ackley - Coming Soon & Landing Page 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  -->

Check JavaScript files connection.

JavaScript files that have to be included:

libs.min.js
custom.js

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

AckleyGULP

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

AckleyGULP requires node, npm and git.

Getting started

Install Node Modules: npm i
Run AckleyGULP: 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 AckleyGULP, you can email us on support@mixdesign.club.

Changelog

Version 1.0.0 19.06.2023

Initial release

Credits

CSS and JavaScript files

jQuery - jquery.com
Modernizr - modernizr.com
Bootstrap 5 grid - getbootstrap.com
KBW Countdown - keith-wood.name/countdown.html
Typed.js - mattboldt.com/demos/typed-js
Magnific Popup - dimsemenov.com/plugins/magnific-popup
Swiper Slider - swiperjs.com
PhotoSwipe JavaScript Gallery - photoswipe.com
jQuery CSS Skills Bar - github.com/umarwebdeveloper/jquery-css-skills-bar
AjaxChimp - github.com/scdoshi/jquery-ajaxchimp
UniMail - github.com/agragregra/uniMail
Anime.js - animejs.com

Icons and images

Icons - Fontawesome.com
Images - Unsplash.com, Pexels.com and Freepik.com
Mockups - Anthonyboyd.graphics

Ackley Coming Soon and Landing Page Template Documentation

Introduction

Installation

Files Structure

Demo Pages

HTML structure

CSS Files

JavaScript Libraries

Fonts

Google Fonts

Fontawesome free

Favicon and Apple touch icons

Customization

Preloader

Logo

Images

Rotating objects

Navigation Menu

Header

Homescreen Layouts

Plugins

Countdown

Animated Headline

Swiper Slider

Skillbars

Magnific Popup

Photoswipe Gallery

Animated Backgrounds

HTML5 Video

Forms

Mailchimp Subscription Form

Contact Forms

AckleyGULP

Getting started

Project structure

Gulp tasks

Changelog

Version 1.0.0 19.06.2023

Credits

CSS and JavaScript files

Icons and images