Howdy!

First of all, Thank you so much for purchasing this template and for being my loyal customer. You are entitled to get free updates to this product + exceptional support (as per market policy) from us directly.

This documentation is to help you undesrstand the template's structure. Please go through the documentation carefully to understand how this template is made and how to edit this properly.

For simple customizations, the generator which comes with the download package is enough.

For advanced customizations, Basic HTML and CSS knowledge is required.

1. Getting Started


Unzip the package you have downloaded from themeforest. In extracted folder you can see following folders:

Package contents

  • HTML Template

    template - Contains all the original template files comprises of HTML, CSS, JS etc. This is the folder which you'll upload on your server after necessary modifications.
    generator - Contains the Stomp Intro Builder with basic options. Click on Generate and save the HTML file to the template folder.
  • documentation — Inside this folder you will find this same documentation updated with the latest changes.
  • For stomp.video

    upload - Contains all the original template files comprises of HTML, CSS, JS etc. This is the folder which you'll compress and upload it as ZIP file to stomp.video.
    generator - Contains the Stomp Intro Builder with basic options. Click on Generate and save the HTML file to the upload folder.

Requirements

  • Any browser (Preferably Chrome) — for the generator to work properly.

2. Stomp Intro Builder (for Website)


Just click here to open the stomp intro builder.

Enter 100 words and click generate. Save the HTML file to the template folder. Compress the files inside the folder to a ZIP file and upload it to the root directory of your website's server. That's it.

3. Stomp Intro Builder (for stomp.video)

Just click here to open the stomp intro builder.

Enter 100 words and click generate. Save the HTML file to the upload folder. Compress the upload folder to a ZIP file and upload it via Video Converter. Click Convert. Download the video once it's rendered. That's it.

4. Understanding Teaser Section

Just click here to understand the whole structure of the stomp so that you can make advanced edits, customizations. You can make a whole new intro if you understand the structure.

5. Stylesheet Files


All styling realted files of this template can be found in the folder named css.

css/
|
|-- combined/
|   -- page-essentials.min.css
|   -- sven-essentials.min.css
|-- custom/
|-- fonts/
|-- vendor/
|   -- bootstrap.min.css
|   -- font-awesome.min.css
|   -- bigvideo.css
|   -- jquery.mCustomScrollbar.min.css
|   -- photoswipe.min.css
|   -- default-skin.min.css
|-- sven-teaser.css
|-- main.css

vendor folder consists of styles of few third party plugins and libraries used in the production of this template (list of which can be found at the end of this documentation).

fonts folder consist of custom fonts.

combined folder consists of multiple stylesheets minified / compressed into a few css files for page optimization.

custom folder consists of custom styles associated with each demo variant.

sven-teaser.css file contains styles associated with Sven Teaser Plugin.

main.css is the primary file which comprises of all basic styles for this template.

6. Javascript Files


All client-side related javascript files can be found in the js folder.

js/
|
|-- combined/
|   -- page-essentials.min.js
|   -- sven-essentials.min.js
|   -- stomp-motion.min.js
|   -- html5-video.min.js
|-- backgrounds/
|-- vendor/
|   -- jquery.min.js
|   -- bootstrap.min.js
|   -- preloadjs-NEXT.min.js
|   -- soundjs-NEXT.min.js
|   -- video.js
|   -- bigvideo.js
|   -- jquery.mb.YTPlayer.min.js
|   -- sven-dependencies.js
|      and a lot more
|-- sven-teaser.min.js
|-- sven-animations.min.js
|-- sven-transitions.min.js
|-- stomp-animations.min.js
|-- main.js

combined folder consists of multiple js files minified and combined into a few JS files for page optimization.

backgrounds folder consists of canvas Animated Backgrounds written in JS.

vendor folder consists of third-party javascript libraries used in the template (list of which can be found at the end of this documentation).

sven-teaser.min.js - the sven Teaser plugin.

sven-animations.min.js - Basic Animations associated with Sven Teaser Plugin.

sven-transitions.min.js - Basic Transitions associated with Sven Teaser Plugin.

stomp-animations.min.js - Animations associated with Stomp Intro

7. PHP Files


All PHP files can be found in the php folder.

php/
|
|-- class.simple_mail.php
|-- contact.php
|-- MailChimp.php
|-- subscribe.php

As it can be seen, In this folder there are 4 .php files

MailChimp.php contains Super-simple, minimum abstraction MailChimp API v3 wrapper.

subscribe.php file contains code to handle mailchimp subscription through subscription form in this template.

class.simple_mail.php - A simple PHP wrapper class for sending email using the mail() method.

contact.php file contains code to handle contact form in this template.

8. Files & Resources


The template uses following resources by third parties.

9. Simple Customizations(FAQs)


Here is the list of few simple customizations which are frequently asked in support forum. Advanced customizations can be found here.

9.0. Preload All Scenes


preloadScenes - If set to true, all the scenes in the teaser are preloaded before started playing. In Internet explorer & mobile browsers, it takes more than a few seconds to preload all scenes as it involves heavy JS processing.
If set to false, only the first scene is preloaded and the teaser starts playing. Other scenes will be processed in a queue by a delay.

By default, preloadScenes is set to false.

Locate main.js file in the js folder and find the following property(go to line 189) and change the value to true.


preloadScenes: false,

9.1. Add / Change music on the teaser


Choose the demo variant(html file). Add (or) Replace data-enable-sound attribute with your own sound url in the teaser element like the following.

IMPORTANT!!! Please make sure to include / upload the ogg format of the audio to the same folder as the mp3 file (for supporting Android Native Browser) with the same file name.


9.2. Add / Change Video to any of the scenes


You could add local / youtube video to any of the scenes in the teaser.

Choose the demo variant(html file). Add (or) Replace data-scene-video="video/Particles.mp4" data-video-type="html5" attribute with your own local / youtube video url to any of the scenes like the following.

9.2.1 ADD LOCAL VIDEO


Hello and welcome to


9.2.2 ADD YOUTUBE VIDEO


Hello and welcome to

9.2. Contact Form Configuration


Locate contact.php file in the php folder and find the following lines and change the values accordingly.


// Contact Configuration
$yourMail = "YOUR_MAIL_HERE";
$yourName = "YOUR_NAME_HERE";
$subject = "Inquiry from website";

9.3. MailChimp integration


Locate subscribe.php file in the php folder and find the following lines and change the values accordingly.


// MailChimp Configuration
$api_key = "YOUR_API_KEY"; // ENTER YOUR API KEY HERE
$list_id = "YOUR_LIST_ID"; // ENTER YOUR LIST ID HERE

9.4. Add Image to any of the scenes


You could add image to any of the scenes in the teaser.

Choose the demo variant(html file). Add (or) Replace data-scene-image="images/backgrounds/slide-5.jpg" attribute with your own image url to any of the scenes like the following.


images


IMPORTANT!!! Note the use of data-pursue-video="yes" otherwise the video won't show in other successor scenes. Advanced data-* attributes that can added to configure each scene on your teaser can be found here...

9.5. Set Launch Date(Countdown)


Locate main.js file in the js folder and find the following lines(Starting from line 149) and change the date accordingly.


/* ==================================================================
5.0 Initialize Countdown
TTBD : Revert to previous version as in Sven
================================================================== */
$(".st-countdown").countdown("2017/12/01", function(event) {
    $(this).text(
        event.strftime('%D Days %H:%M:%S')
    );
});

9.6. Set / Change font for the teaser


You could add custom (or) google font to your teaser.

9.6.1 SET CUSTOM FONT

Step 1: Locate the custom css file (index-local.css in our case) associated with the selected demo variant(index-local.html) and find the following lines and Replace the font files and other declarations with your custom font


/* ==================================================================
1.0 Custom Font Declarations(if any)
================================================================== */
@font-face {
    font-family:'TeXGyreHeros';
    src: url('../fonts/TeXGyreHeros-Bold.eot');
	src: url('../fonts/TeXGyreHeros-Bold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/TeXGyreHeros-Bold.woff2') format('woff2'),
		url('../fonts/TeXGyreHeros-Bold.woff') format('woff'),
		url('../fonts/TeXGyreHeros-Bold.svg#TeXGyreHeros-Bold') format('svg');
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0-10FFFF;
}

/* 2.1 Font Style Declarations and Other Fixes
-------------------------------------------------------------- */
.fontLoaded .sven-container { /* Teaser Font */
    font-family: 'TeXGyreHeros', sans-serif;
}


Step 2: Locate the main.js file and find the following lines and replace the font-family with your custom font family


    /* ==================================================================
    1.0 Load Custom, Google Fonts
    ================================================================== */
    WebFont.load({
        custom: {
            families: [ 'TeXGyreHeros' ]
        },
        google: {
            families: ['Poppins:300,400,500,600']
        },
        classes: false,
        timeout: 5000,
        fontactive: function(familyName, fvd) {
            if(familyName == "TeXGyreHeros") {
                document.documentElement.className += " fontLoaded";
                isFontActive = true;
                $(document).trigger("fontActive");
            }
        },
        fontinactive: function(familyName, fvd) {
            if(familyName == "TeXGyreHeros") {
                isFontActive = true;
                $(document).trigger("fontActive");
            }
        }
    });

9.6.2 ADD GOOGLE FONT

Step 1: Locate the custom css file (index-local.css in our case) associated with the selected demo variant(index-local.html) and find the following lines and Replace the font name with your google font. Replace "TeXGyreHeros" with the google font you wish to use.


    /* 2.1 Font Style Declarations and Other Fixes
    -------------------------------------------------------------- */
    .fontLoaded .sven-container { /* Teaser Font */
        font-family: 'TeXGyreHeros', sans-serif;
    }

    /* Could be replaced with the "Ralway" google font like below*/

    /* 2.1 Font Style Declarations and Other Fixes
    -------------------------------------------------------------- */
    .fontLoaded .sven-container { /* Teaser Font */
        font-family: 'Raleway', sans-serif;
    }

Step 2: Locate the main.js file and load your google font like the following.


    /* ==================================================================
    1.0 Load Custom, Google Fonts
    ================================================================== */
    WebFont.load({
        google: {
            families: ['Raleway:300,400,500,600']
        },
        classes: false,
        timeout: 5000,
        fontactive: function(familyName, fvd) {
            if(familyName == "Raleway") {
                document.documentElement.className += " fontLoaded";
                isFontActive = true;
                $(document).trigger("fontActive");
            }
        },
        fontinactive: function(familyName, fvd) {
            if(familyName == "Raleway") {
                isFontActive = true;
                $(document).trigger("fontActive");
            }
        }
    });

10. Sync Words


The words used in the demo teaser follows a pattern which could help you to write your own easily. The number enclosed in bracket denotes the number of words in the sentence.

(5) Hello and welcome to Stomp
(5) Stomp is a typographic intro
(4) for your great product
(11) Now just look how cool these words fall into the rhythm
(1) Amazing
(3) So let’s begin
(1) Ready?
(14) You can use images like… stop, text is not too fast? Anyway use images
(8) or do not use=) without they even better
(3) Black and White.
(2) Only typography.
(3) Minimalist, simple, clear.
(8) It’s just a~stylish text for a good rhythm
(1) Clap
(1) Clap=)
(1) Stylish
(1) Unique
(1) Creative
(3) Easy to use
(2) modular system
(1) Yes!
(2) includes a~generator
(3) everything can change
(1) Flexible
(3) Replace text and
(1) Boom!
(5) You have a cool intro
(6) Buy it now only on themeforest

11. Page Speed Insights


1) Please use CDNs for third party libraries wherever possible instead of serving it from your own server. It helps loading the page faster.

2) Better use guetzli for compressing JPEG images.


For more info about page speed optimization, go here


https://developers.google.com/speed/pagespeed/insights/