Important


The website loads pages via Ajax and use WebGL for motion effects. You need to upload it on your server and will work perfectly. Also you can use firefox on local. This browser emulate it as a server an run ajax properly on local host.

Installation

After unzip template Files, you will found www folder that include all the temeplate files.

You can view this template in any web browser from your desktop computer. Because some js files are external, you need an internet connection to display correctly the template.

Start your FTP client (I persoanlly use Total Commander) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.

Locate the domain folder you wish to upload your Theme files to on your server. You are going to want to click and drag every file into your FTP client.

Smooth Scroll


How to eanble the smooth scroll and drag content on your website

On each page you need to add the .smooth-scroll class to body

Google Analytics


How to set up your google tracking code

                    
               	
                
                	ga('create', 'code_here', 'auto');

On each page you need to replace code_here with your tracking code generated by Google.

Important: If you do not want to use, leave it as it is. Do not remove it because will generate an error into javascript.

Menu Type


01. How to set up the Classic Menu

                    
               	
                	

                    	
                        ... Logo Here ...
                        
                    	
    
                        
                        	... Nav Here ...
                        
                        

                        
                        ... Menu Burger Here ...

Header need to have this class:

.classic-menu

Set data breakpoint for .flexnav to:

data-breakpoint="1025"

01. How to set up the Fullscreen Menu

                    
               	
                	

                    	
                        ... Logo Here ...
                        
                    	
    
                        
                        	... Nav Here ...
                        
                        

                        
                        ... Menu Burger Here ...

Header need to have this class:

.fullscreen-menu

Set data breakpoint for .flexnav to:

data-breakpoint="10000"

The Logo


This template require 2 logo images. Negative and positive versions

The negative version will appear on darker page background.

Showcase Slider Options


You can have two portfolio hover types

                    
               	
                	
                                                            
                        

                            

                    
                    				... Slides Here ...

For data-pattern-img set your image for displacement effect. Inside our template you will find a folder named Displacement which contain many image type effects

Slide Section


Add this inside Showcase slider Structure

                    
               	
                	

                        

                        

                            

                                

                                    
Opulence

                                    
                                

                                
Subtitle Here

data-slide="0"

Your slide number here need to be the same as the slide image which is located into #canvas-slider



Slide Canvas Image Section


Add this inside Showcase slider Structure

Portfolio Options


Here is the Portfolio structure
.metro-grid

.spaced-grid

Add one of this classe to #itemsWrapperLinks div to change the portfolio items grid layout


.fade-scalein-effect

.fade-scaleout-effect

.width-scale-effect

.height-scale-effect

Add one of this classe to #itemsWrapperLinks div to change the portfolio items appear effect


Page Hero section without image


Here is the Hero structure

                    
               		

                        

                            

                                
                                	
                                    
ABOUT US
                                                                  
                                    
Creative Digital Studio
.hero-title

Add your page title inside span. This is mandatory

.hero-subtitle

Add your page subtitle inside span. This is mandatory

Next Page Navigation


Here is the Page Navigation structure

                    
               	

                    

                        
                                 
                            

                                
                                    
CONTACT US

                                    
More Questions?
.next-hero-title

Add your page next title inside span. This is mandatory

.next-hero-subtitle

Add your page next subtitle inside span. This is mandatory

Project Hero section with image


Here is the Hero structure

                    
               		

                        

                            

                                

                                    
Opulence
                                    
                                    
Subtitle Here
.autoscroll

Adding this class will slightly scroll down the page once you load it.

.hero-title

Add your page title inside span. This is mandatory

.hero-subtitle

Add your page subtitle here

#hero-bg-image

Add your image url here

Next Project Navigation


Here is the Project Navigation structure

 
                	

                            

                                

                                    

                                    	

                                            
                                            
                                            
                                                
Next Case
  
                                                
Sound Blaster
                                  
                                                
Subtitle Here
.next-temp-hero-title

Add your next project info text here.


.next-hero-title

Add your next project title here.


.next-hero-subtitle

Add your next project subtitle here.

Here is the Project Navigation Image located below #content-scroll div
.next-project-image-bg

Add your image url here


Page Row Section


Below you will find the vc_row extra classes and options

                    
               	

                	
                    ...
                          
                

                
                

                	
                    ...
.light-secion

Will add the background color form data atribute and all content will be dark

.dark-secion

Will add the background color form data atribute and all content will be light

.change-header-color

Will change the header color when entering on section

.small

Will decrease the container width

.full

Will make the container full width

.row_padding_top

Add padding to top

.row_padding_bottom

Add padding to bottom

.row_padding_left

Add padding to left

.row_padding_right

Add padding to right

.row_padding_all

Add padding to all sides