Splitex - Creative Coming Soon Template

Documentation v1.0


1. Home

To edit the 'Home' section, simply find the appropriate label in the body of the HTML file.

Part to edit:

                            
        [...]
        
                [...]
                                
                                
                            [...]
                            
                            

Creative
Experience.

[...]

Style is everything

[...] [...] [...]

We're Working On It

[...] 00 Days [...]

Till Launch

[...] [...]

You can edit the 'Home' section images according to the documentation bellow (please read Background Images section). You can also edit the 'Home' section images by following its URL path: 'img/background/', and replace existing image files with your own images.

2. Menu

To edit the 'Menu', simply find the appropriate label in the body of the HTML file.

Part to edit:

                            
        [...]
        
            [...]
                
                [...]
                    
                [...]
                [...]
            
            [...]
                        
                        [...]
                            
                        [...]
                    [...]
        [...]
                            
                            

Furthermore, simply find and open the file named 'splitex.js' placed in the folder named 'js'.

Part to edit:

                            
[...]
//  multiScroll
    [...]
		anchors: ['home', 'about', 'works', 'contact'],
		[...]
        navigationTooltips: ['Home', 'About', 'Works', 'Contact'],
        [...]
    [...]
[...]
                            
                            

3. Logo

To edit the 'Logo', simply find the appropriate label in the body of the HTML file.

Part to edit:

                            
        [...]
        
                    
        [...]
                            
                            

You can edit the 'Logo' images via CSS file (e.g. style.css).

Part to edit:

                            
[...]
/* logo */
[...]
.logo-img:before {
[...]
background: url(../img/logo.png) no-repeat;
[...]
width: 57px;
height: 34px;
line-height: 34px;
[...]
}
[...]
                            
                            

You can also edit the 'Logo' images by following its URL path: 'img/', and replace existing image files with your own images.

4. About

To edit the 'About' section, simply find the appropriate label in the body of the HTML file.

Part to edit:

                            
[...]
        
                [...]
                        
                        

About

[...]

01. Who we are

[...]

shooting fashion & portraits photos.
editing selected wedding photos.
delivering high-resolution image files.

[...] [...] [...] [...]

Creating Powerful Brands

[...]

Brand
Identity

[...]
Since 1976
[...] [...]

Crafting legendary logos

[...]

Logo
Design

[...]
Since 1976
[...] [...]

Building the web

[...]

Web
Design

[...]
Since 1976
[...] [...] [...]

You can edit the 'About' section images according to the documentation bellow (please read Background Images section). You can also edit the 'About' section images by following its URL path: 'img/background/', and replace existing image files with your own images.

5. Works

To edit the 'Works' section, simply find the appropriate label in the body of the HTML file.

Part to edit:

                            
[...]
        
                [...]
                        
                        

Works

[...]

02. What it look like

[...]

simplicity is not a style, it is more a philosophy about how to design something more effectively.

[...] [...] [...] [...] [...]

Works

[...]
Single image
[...] [...] [...] [...]

Works

[...]
YouTube Video
[...] [...] [...] [...] [...] [...]

Works

[...]
Image gallery
[...] [...] [...] [...]

Works

[...]
Vimeo Video
[...] [...] [...]

You can edit the 'Works' section images according to the documentation bellow (please read Background Images section). You can also edit the 'Works' section images by following its URL path: 'img/background/', and replace existing image files with your own images. You can edit the 'Works' gallery images via CSS file (e.g. style.css).

Part to edit:

                            
[...]
/* 1.1. works IMG gallery carousel IMG BACKGROUND */
.works-page-carousel-item-1 {	
background-image: url(../img/works/works-page-img-carousel-item-1.jpg);
}
.works-page-carousel-item-2 {
background-image: url(../img/works/works-page-img-carousel-item-2.jpg);
}
.works-page-carousel-item-3 {
background-image: url(../img/works/works-page-img-carousel-item-3.jpg);
}
.works-page-carousel-item-4 {
background-image: url(../img/works/works-page-img-carousel-item-4.jpg);
}
[...]
                            
                            

You can also edit the 'Works' gallery images by following its URL path: 'img/works/', and replace existing image files with your own images.

6. Contact

To edit the 'Contact' section, simply find the appropriate label in the body of the HTML file.

Part to edit:

                            
[...]
        
                [...]
                        
                        

Contact

[...]

03. Get in touch

[...]

ex Inc. Touchdown Dr 1176, +123 456 7890.

[...] [...] [...] [...] [...]

You can edit the 'Contact' section images according to the documentation bellow (please read Background Images section). You can also edit the 'Contact' section images by following its URL path: 'img/background/', and replace existing image files with your own images.

7. Form

To send the contents of your 'Contact Form' to your email, simply open the file named 'contact.php'.

Your email address goes here:

                            
                            $myemail = 'you@yoursite.com';
                            
                            

8. Subscription

To add form submissions to a subscriber list in your MailChimp account, simply open the file named 'subscribe.php' and configure it with your MailChimp credentials in the assigned slots below:

                            
$api_key = 'YOUR_API_KEY';
[...]
$list_id = 'YOUR_LIST_ID';
                            
                            

Please make sure you have generated your MailChimp API Key and copied your MailChimp List ID.

- MailChimp API Key ARTICLE as available at: http://kb.mailchimp.com/accounts/management/about-api-keys#Finding-or-generating-your-API-key
- MailChimp List ID ARTICLE as available at: http://kb.mailchimp.com/lists/managing-subscribers/find-your-list-id

9. Countdown

To setup the 'Countdown' target date, simply find and open the file named 'splitex.js' placed in the folder named 'js'. Open the file and find the appropriate label.

// countdown setup start

Part to edit:

                            
[...]
// countdown setup start
    [...]
            date: "05 May 2025 12:00:00", // countdown target date settings
            [...]
[...]
                            
                            

10. Backgrounds

To add images in the background of the template, simply find the appropriate JS file placed in the folder named 'js' (splitex.js). Open the file and find the appropriate label.

// vegas backgrounds

Part to edit:

                            
[...]
// vegas backgrounds
    // home IMG left
    [...]
            src: "img/background/home-bg-left.jpg"
        [...]
    // about IMG left
    [...]
            src: "img/background/about-bg-left.jpg"
        [...]
    // works IMG left
    [...]
            src: "img/background/works-bg-left.jpg"
        [...]
    // contact IMG left
    [...]
            src: "img/background/contact-bg-left.jpg"
        [...]
    // home IMG right
    [...]
            src: "img/background/home-bg-right.jpg"
        [...]
    // about IMG right
    [...]
            src: "img/background/about-bg-right.jpg"
        [...]
    // works IMG right
    [...]
            src: "img/background/works-bg-right.jpg"
        [...]
    // contact IMG right
    [...]
            src: "img/background/contact-bg-right.jpg"
        [...]
    // slider IMG left
    [...]
            src: "img/background/slide-left-1.jpg"
        }, {
            src: "img/background/slide-left-2.jpg"
        }, {
            src: "img/background/slide-left-3.jpg"
        }, {
            src: "img/background/slide-left-4.jpg"
        [...]
    // slider IMG right
    [...]
            src: "img/background/slide-right-1.jpg"
        }, {
            src: "img/background/slide-right-2.jpg"
        }, {
            src: "img/background/slide-right-3.jpg"
        }, {
            src: "img/background/slide-right-4.jpg"
        [...]
[...]
                            
                            

You can also edit the images by following its URL path: '/img/background/', and replace existing image files with your own images.