Add / Remove text to rotator

Choose the demo variant you wish to use for your website. Let's take index-main.html in our case.

scene-1 uses rotator animation named fx9-mod1 which rotates the text separated by
. You can add / remove text as per your wish.

  

      

          DRESSES
TOPS
SWEATERS
BOTTOMS
JEANS
LEGGINGS
SHOES
OUTERWEAR
ACTIVEWEAR
SWIMSUITS
HANDBAGS
SUNGLASSES
WATCHES
JEWELRY
FURNITURE
      
  

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.

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 index-main.js file in the js folder and find the following property(go to line 189) and change the value to true.

preloadScenes: false,

Add / Replace 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. Know more about the data-scene-dur, data-freeze-time by clicking here

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-main.css in our case) associated with the selected demo variant(index-main.html, index-main-logo.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, .splash-page, .pl-wrapper { /* Teaser Font */
    font-family: 'TeXGyreHeros', sans-serif;
}

Step 2: Locate the index-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' ]
		 },
		classes: false,
		timeout: 5000,
		active: function() {
			document.documentElement.className += " fontLoaded";
			isFontActive = true;
			$(document).trigger("fontActive");
		},
		fontinactive: function(familyName, fvd) {
			isFontActive = true;
			$(document).trigger("fontActive");
		}
	});

9.6.2 ADD GOOGLE FONT

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

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

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

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

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

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