Menu
Welcome to Zeplin Documentation

Zeplin Creative Template Documentation

You can find examples and descriptions about all theme in this page.

Also you can contact with us if you having problems.

Installation

  • Unzip the downloaded zip file and extract Zeplin files. You will see all html, css, javascript and php files in Zeplin folder. We recommend you work on localhost with these files.
  • You can edit your tags at the top of your HTML file. For example;
    • <title> Your Title </title> Your Page Title
    • <meta name="description" content="Your description" /> - Your Website's Description
    • <meta name="keywords" content="example, example" /> - Your Website's Keywords
    • <link rel="icon" type="image/png" href="images/favicon.png" /> - Your Website's Favicon
    • <link rel="apple-touch-icon" href="images/apple-touch-icon.png"/> - Apple Touch Icon
    • <link rel="stylesheet" href="css/plugins.css" /> - CSS Files
    • <link rel="stylesheet" href="css/style.css" /> - Styles
  • You can edit your tags at the top of your HTML file. For example;
    • zeplin/css - CSS files and fonts of all theme.
    • zeplin/images - All assets. Images, backgrounds, icons, videos, and sound files.
    • zeplin/js - All javascript files, theme panel files, ajax files and extra components.
    • zeplin/php - PHP support for social modules, contact form types and mailchimp.
  • You should use an editor for customize theme and add your contents, images .etc.
  • You should use an application for upload your website to server.

Example html page

    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta charset="utf-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <!-- Title, description, keywords -->
            <title>Your Title</title>
            <meta name="description" content="Your description" />
            <meta name="keywords" content="example, example" />
            <!-- Favicon, Touch icon -->
            <link rel="icon" type="image/png" href="images/favicon.png" />
            <link rel="apple-touch-icon" href="images/apple-touch-icon.png"/>

            <!-- CSS Files -->
        </head>
        <!-- BODY START -->
        <body>

            <!-- NAVIGATION -->
            <nav id="navigation" class="navigation fixed hover-dark nav-dark" data-offset="0">
                ...
            </nav>
            <!-- END NAVIGATION -->
            <!-- NAVIGATION -->

            <!-- Home -->
            <section id="home" class="home version1 fullscreen">
                <!-- Background image - you can choose parallax ratio and offset -->
                <div class="bg-parallax" data-anchor-target="#home" data-0="transform:translate3d(0, 0px, 0px);" data-500="transform:translate3d(0px, 200px, 0px);" data-background="image path"></div>
                <!-- home-inner -->
                <div class="home-inner">
                   ...
                </div>
                <!-- End Container -->
            </section>
            <!-- End Home -->

            <!-- Page Details -->
            <section>
                ...
            </section>

            <!-- FOOTER -->
            <footer id="footer" class="bg-dark-gradient">
                ...
            </footer>
            <!-- END FOOTER -->

            <!-- SEARCH FORM FOR NAV -->
            <div class="fs-searchform">
                ...
            </div>
            <!-- END SEARCH FORM -->


            <!-- JS Files -->

        </body>
        <!-- Body End -->
    </html>
                    

You can find a lot of example pages in the Zeplin.

Skins and Colors

  • All demos and variations have their own skins in the content/yourDemo/css/ folder. Those files have color styles and .coloredX classes for the demos. You can give different colors/styles to each demos.
  • You can find default.css file in the css/skins/ path for subpages. You can edit the colors and another options for only subpages.
  • You can get jQuery support for this case. You can add data-color="#000" or data-color="purple" codes for text colors. There is support for background colors too. For example; data-bgcolor="#4b4b4b" or data-bgcolor="red" .etc
  • You can use Bootstrap or zeplin colors for elements like .bg-warning - .bg-secondary - .bg-colored - .bg-colored2 - .bg-dark4 - .bg-gray7 - .bg-gradient3 .etc

A Few Examples:

.bg-colored
.bg-colored1
.bg-dark
.bg-white .text-dark .border
.bg-warning
.bg-danger
.bg-success
.bg-secondary
.bg-info
.bg-primary
.bg-dark-gradient
data-bgcolor="#e74c3c"
.bg-warning - data-color="#222"
data-bgcolor="#3498db" - data-color="#fff"

Code example of this page

    <div class="row text-white">
        <div class="col-sm-3 col-6"><div class="bg-colored px-4 py-3 mt-4">.bg-colored</div></div>
        <div class="col-sm-3 col-6"><div class="bg-colored1 px-4 py-3 mt-4">.bg-colored1</div></div>
        <div class="col-sm-3 col-6"><div class="bg-dark px-4 py-3 mt-4">.bg-dark</div></div>
        <div class="col-sm-3 col-6"><div class="bg-info px-4 py-3 mt-4">.bg-info</div></div>
        <div class="col-sm-3 col-6"><div class="bg-dark-gradient px-4 py-3 mt-4">.bg-dark-gradient</div></div>
        ...
    </div>

Responsive Options

You can use Bootstrap 4x columns for responsive options directly. Please follow for examples:

How it works:

One of three columns

One of three columns

One of three columns

Code example of this page

    <div class="row">
        <div class="col-sm border">
            <p class="p-4"><One of three columns</p>
        </div>
        <div class="col-sm border">
            <p class="p-4"><One of three columns</p>
        </div>
        <div class="col-sm border">
            <p class="p-4"><One of three columns</p>
        </div>
    </div>
You can see documentation on here for bootstrap columns; Bootstrap Grid System. Or you can check using examples.

Grid Options:

Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Column ordering Yes

Equal Width:

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

    <div class="container-fluid mt-3">
        <div class="row">
            <div class="col">
                <p class="p-4">1 of 2</p>
            </div>
            <div class="col">
                <p class="p-4">2 of 2</p>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <p class="p-4">1 of 3</p>
            </div>
            <div class="col">
                <p class="p-4">2 of 3</p>
            </div>
            <div class="col">
                <p class="p-4">3 of 3</p>
            </div>
        </div>
    </div>
                    

Equal width system will calculate widths of items automatically.

Vertical alignment:

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

Code example of this page

    <div class="row align-items-start">
        <div class="col-sm border">
            <p class="p-4"><One of three columns</p>
        </div>
        <div class="col-sm border">
            <p class="p-4"><One of three columns</p>
        </div>
        <div class="col-sm border">
            <p class="p-4"><One of three columns</p>
        </div>
    </div>

    <div class="row align-items-center">
        <div class="col-sm border">
            <p class="p-4"><One of three columns</p>
        </div>
        <div class="col-sm border">
            <p class="p-4"><One of three columns</p>
        </div>
        <div class="col-sm border">
            <p class="p-4"><One of three columns</p>
        </div>
    </div>

    <div class="row align-items-end">
        <div class="col-sm border">
            <p class="p-4"><One of three columns</p>
        </div>
        <div class="col-sm border">
            <p class="p-4"><One of three columns</p>
        </div>
        <div class="col-sm border">
            <p class="p-4"><One of three columns</p>
        </div>
    </div>

You can align the cols equal to row class. You can move them with .align-items-start, .align-items-center and .align-items-end classes.

Self align:

One of three columns

One of three columns

One of three columns

    <div class="row">
        <div class="col-sm align-self-start">
            <p class="p-4"><One of three columns</p>
        </div>
        <div class="col-sm align-self-center">
            <p class="p-4"><One of three columns</p>
        </div>
        <div class="col-sm align-self-end">
            <p class="p-4"><One of three columns</p>
        </div>
    </div>

You can align the cols with adding .align-self-start, .align-self-center and .align-self-end classes.

Horizontal alignment:

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

Code example of this page

    <div class="row justify-content-start">
        <div class="col-4">
            <p class="p-4"><One of two columns</p>
        </div>
        <div class="col-4">
            <p class="p-4"><One of two columns</p>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-4">
            <p class="p-4"><One of two columns</p>
        </div>
        <div class="col-4">
            <p class="p-4"><One of two columns</p>
        </div>
    </div>
        <div class="row justify-content-end">
        <div class="col-4">
            <p class="p-4"><One of two columns</p>
        </div>
        <div class="col-4">
            <p class="p-4"><One of two columns</p>
        </div>
    </div>
    <div class="row justify-content-around">
        <div class="col-4">
            <p class="p-4"><One of two columns</p>
        </div>
        <div class="col-4">
            <p class="p-4"><One of two columns</p>
        </div>
    </div>
        <div class="row justify-content-between">
        <div class="col-4">
            <p class="p-4"><One of two columns</p>
        </div>
        <div class="col-4">
            <p class="p-4"><One of two columns</p>
        </div>
    </div>
You can see documentation on here for bootstrap columns; Bootstrap Grid System.

Sliders and Carousels

Zeplin is comes with 2 beautiful slider plugins. You can see extra documentations of them in the downloaded files.

Revolution Slider:

white nav

You can use Revolution slider examples on demos or create your own beautiful sldiers. You can see super detailed documentation for Revolution slider on here: Revolution Slider Documentation

Swiper Slider:

white nav

You can use Swiper slider examples on demos and elements or create your own beautiful sldiers/carousels. You can see detailed documentation for Swiper slider on here: Swiper Slider Documentation

You will see examples on demos and elements for this slider. There is all codes described for how you use/customize them. You can see the templates on here: Sliders You can see these slider's css codes in elements.css file and js codes on the html file's bottom.

Here is an example slider:

Code example of this page

<!-- Col -->
<div class="col-lg-7 col-12 pt-5">
    <!-- Custom Slider -->
    <div class="custom-slider flip">
        <div class="swiper-wrapper">
            <!-- Slide -->
            <div class="swiper-slide">
                <img src="images/single-project2/slider_01.jpg" alt="blog post image">
            </div>
            <!-- End Slide -->
            <!-- Slide -->
            <div class="swiper-slide">
                <img src="images/single-project2/slider_02.jpg" alt="blog post image">
            </div>
            <!-- End Slide -->
            <!-- Slide -->
            <div class="swiper-slide">
                <img src="images/single-project2/slider_03.jpg" alt="blog post image">
            </div>
            <!-- End Slide -->
        </div>
        <!-- Arrows -->
        <div class="custom-slider-arrows">
            <div class="slider-prev">
                <svg width="59px" height="59px" viewBox="0 0 59 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <g stroke-width="1" fill="none" fill-rule="evenodd">
                        <g transform="translate(-1456.000000, -511.000000)">
                            <polyline points="1488.53604 530 1477.97712 540.172402 1488.53604 550.344804"></polyline>
                            <circle cx="1485.5" cy="540.5" r="28.5"></circle>
                        </g>
                    </g>
                </svg>
            </div>
            <div class="slider-next">
                <svg width="59px" height="59px" viewBox="0 0 59 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <g stroke-width="1" fill="none" fill-rule="evenodd">
                        <g id="WEB-DESIGN-1920" transform="translate(-1456.000000, -511.000000)">
                            <polyline points="1480 530 1490.54404 540.384763 1480 550.344804"></polyline>
                            <circle cx="1485.5" cy="540.5" r="28.5"></circle>
                        </g>
                    </g>
                </svg>
            </div>
        </div>
        <!-- End Arrows -->
        <!-- Pagination -->
        <div class="custom-slider-pagination bg-colored-active-bullets"></div>
    </div>
    <!-- End Post Slider -->
</div>
<!-- End Col -->

Javascript code example of this page:

    //*********************************************
    //  CUSTOM SLIDER FLIP
    //*********************************************

        //Call Swiper Slider
        $('.custom-slider.flip').each(function(){
            var swiperCustomFlip = $(this),
                nextNav = $(this).find(".slider-next"),
                prevNav = $(this).find(".slider-prev"),
                customPag = $(this).find(".custom-slider-pagination");

            var swiperCustomFlip = new Swiper(swiperCustomFlip, {
                effect: 'flip', // 'slide' or 'fade' or 'cube' or 'coverflow' or 'flip'
                cubeEffect: {
                    shadow: false,
                },
                speed: 600,
                loop: true,
                touchRatio: 1,
                autoHeight: true,
                followFinger: true,
                autoplay: {
                    delay: 2000,
                },
                navigation: {
                    nextEl: nextNav,
                    prevEl: prevNav,
                },
                pagination: {
                    el: customPag,
                    clickable: true,
                }
            });
        });

You can see more examples on this page and find css codes in elements.css file. If you want use them you can copy these codes to your own files.

Background color and images

You can use data attributes for background colors, text colors and background images. Please follow for the examples;

Background Images:

Here is example for cover sized and right-top aligned background image;

<div class="bg-cover bg-top bg-right" data-background="your-background-image-path.jpg"></div>

And customized mobile and desktops;

<div class="bg-cover bg-top bg-right bg-mobile-center" data-background="your-background-image-path.jpg" data-mobile-background="your-mobile-background-image-path.jpg"></div>

Background Colors:

data-bgcolor="#f90000"
<div class="text-white" data-bgcolor="#f90000">data-bgcolor="#f90000"</div>

You can add a background color with data-bgcolor attribute directly.

Text Colors:

data-color="#f90000"
<div class="bg-primary" data-color="#f2f2f2">data-color="#f90000"</div>

You can customize text color with data-color attributes.

Use Together:

Custom background and text color
<div class="bg-primary" data-bgcolor="#C31F1F" data-color="#231616">Custom background and text color</div>

You can use background and text color selectors together.

Parallax animations

You can give horizontal, vertical or diagonal parallax effects and all css animations to elements with scroll. Here is how to use them:

Skrollr animations:

This parallax plugin is making possible unlimited animations with scroll. You can change all css options of an element with scroll. skrollr.js by Prinzhorn

For parallax image on home page;

<div class="bg-parallax" data-background="images/backgrounds/background_01.jpg" data-anchor-target="#home" data-0="transform:translate3d(0, 0px, 0px);" data-900="transform:translate3d(0px, 250px, 0px);"></div>

And for elements;

<div class="some-element" data-0="transform:translate3d(0, 0px, 0px); opacity: 1;" data-450="transform:translate3d(0px, 125px, 0px); opacity: 0;">

According to parent section;

<section id="parallax-section">
    <div class="some-element" data-anchor-target="#parallax-section" data-bottom-top="transform:translate3d(0, -50px, 0px);" data-top-bottom="transform:translate3d(0px, 100px, 0px);">Some element</div>
</section>

NOTEYou can use this plugin on slider layers. An example is here Zeplin Demo 04

Contact Forms

Zeplin is comes with working beautiful contact form, 2 type validation systems and mailchimp system. You can use math or Google Re-Captcha on your forms. You can see validations on here: Zeplin Validation Systems

Contact form:

Example contact form is here;

<!-- Start contact form -->
<form id="contact-form" name="contact-form" class="contact-form" method="post" action="php/mail.php" autocomplete="off">

    <!-- Row for inputs -->
    <div class="row">
        
        <!-- Name -->
        <div class="input-wrapper col-md-6 col-12 ml-0 animated" data-animation="fadeInUp" data-animation-delay="0">
            <input type="text" name="name" id="name" required class="contact-input">
            <label for="name"><span>Name*</span></label>
        </div>

        <!-- E-mail address -->
        <div class="input-wrapper col-md-6 col-12 mr-0 animated" data-animation="fadeInUp" data-animation-delay="0">
            <input type="email" name="email" id="email" required class="contact-input">
            <label for="email"><span>E-Mail*</span></label>
        </div>

        <!-- Subject -->
        <div class="input-wrapper col-md-6 col-12 ml-0 animated" data-animation="fadeInUp" data-animation-delay="100">
            <input type="text" name="subject" id="subject" class="contact-input">
            <label for="subject"><span>Subject*</span></label>
        </div>

        <!-- Verify -->
        <div class="input-wrapper col-md-6 col-12 mr-0 animated" data-animation="fadeInUp" data-animation-delay="100">
            <input type="text" name="verify" id="verify" required class="contact-input">
            <label id="verify-label" for="verify"><span></span></label>
        </div>

        <!-- Message -->
        <div class="input-wrapper textarea-wrapper col-12 mr-0 ml-0 animated" data-animation="fadeInUp" data-animation-delay="200">
            <textarea name="message" id="message" class="contact-input"></textarea>
            <label for="message"><span>Your Message</span></label>
        </div>

        <!-- Send Button -->
        <div class="col-12 text-center animated" data-animation="fadeInUp" data-animation-delay="300">
            <button type="submit" id="submit" class="send-button">SEND MESSAGE</button>
        </div>

    </div>
    <!-- End Row for inputs -->
</form>
<!-- End contact form -->

Google Re-Captcha:

captcha

Re-captcha code with animation

<!-- Re-Captcha -->
<div class="col-md col-12 text-center text-md-left animated" data-animation="fadeInUp" data-animation-delay="300">
    <!-- Captcha Script -->
    <script src='https://www.google.com/recaptcha/api.js'></script>
    <!-- You can get a site key from here; https://www.google.com/recaptcha/admin?pli=1#list -->
    <div class="g-recaptcha" data-sitekey="your_site_key"></div>
    <input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
</div>
<!-- End Re-Captcha -->

There is no need another options for work Re-Captcha. You just need get site key from Google. If you use Google Re-Captcha to your form, it'll work automatically.

Customize Contact Forms

Zeplin is comes with working beautiful contact form, 2 type validation systems and mailchimp system. You can use math or Google Re-Captcha on your forms. You can see validations on here: Zeplin Validation Systems

Contact form:

Example contact form is here;

<!-- Start contact form -->
<form id="contact-form" name="contact-form" class="contact-form" method="post" 1 action="php/mail.php" autocomplete="off">

    <!-- Row for inputs -->
    <div class="row">
        
        <!-- Name -->
        <div class="input-wrapper col-md-6 col-12 ml-0 animated" data-animation="fadeInUp" data-animation-delay="0">
            <input type="text" 2 name="name" id="name" required class="contact-input">
            <label for="name"><span>Name*</span></label>
        </div>

        <!-- E-mail address -->
        <div class="input-wrapper col-md-6 col-12 mr-0 animated" data-animation="fadeInUp" data-animation-delay="0">
            <input type="email" name="email" id="email" 3 required class="contact-input">
            <label for="email"><span>E-Mail*</span></label>
        </div>

        <!-- Subject -->
        <div class="input-wrapper col-md-6 col-12 ml-0 animated" data-animation="fadeInUp" data-animation-delay="100">
            <input 4 type="text" name="subject" id="subject" class="contact-input">
            <label for="subject"><span>Subject*</span></label>
        </div>

        <!-- Message -->
        <div class="input-wrapper textarea-wrapper col-12 mr-0 ml-0 animated" data-animation="fadeInUp" data-animation-delay="200">
            <textarea name="message" id="message" class="contact-input"></textarea>
            5 <label for="message"><span>Your Message</span></label>
        </div>

        <!-- Send Button -->
        <div class="col-12 text-center animated" data-animation="fadeInUp" data-animation-delay="300">
            <button type="submit" id="submit" class="send-button">SEND MESSAGE</button>
        </div>

    </div>
    <!-- End Row for inputs -->
</form>
<!-- End contact form -->

Important and selected points:

  • Action You should point to your contact form is where to transfers the form datas. Classic forms transfers to php/mail.php file, but there is more ready to use php files for use another form types like anvanced.
  • Name Php scripts getting datas from name areas. So, if you add more inputs, you should give new names to them and add this names to php script. For example:
    <!-- Address -->
    <input type="text" name="address" id="address" required class="contact-input">

    You should add $address = $_POST['address']; code to your mail php file, line 17. Also you should add this input to your mail body. For example;

    <p><strong>Phone: </strong> {$phone} </p>
    
    <p><strong>Address: </strong> {$address} </p>
    <p><strong>Subject: </strong> {$subject} </p>

    You can add or remove a lot of form elements to your contact form.

  • Required You can add required attribute to important inputs. Forms can not be submitted without filling correct them.
  • Type If you use correct type for inputs, your form is works better on mobile and large devices. For example, email type for E-mail inputs, or numbers type for number inputs.
  • Labels These elements for the functions that appear on the inputs and animates with focus in/out.

How to work contact forms:

PHP You need add your smtp address, a mailer (noreply) address, password of mailer address and your own address. Please follow:

  • $mail->Host = "smtp.example.com"; - Set the hostname of the mail server.
  • $mail->Port = 587; - Set the SMTP port number - likely to be 25, 465 or 587
  • $mail->Username = "noreply@example.com"; - Username to use for SMTP authentication, your noreply address.
  • $mail->Password = "noreplyPassword"; - Password to use for SMTP authentication. Password of noreply address, not your address.
  • $mail->addAddress('whoto@example.com', 'John Doe'); - Set who the message is to be sent to - Your Address

Note All codes have detailed descriptions in the php files.

Mailchimp:

You can use MailChimp With Zeplin, on the footer. Example MailChimp form is here:

<div id="footer-newsletter" class="footer-newsletter">
    <form id="newsletter-form" name="newsletter-form" class="newsletter-form" method="post" action="php/newsletter.php">
        <input type="email" name="n-email" id="n-email" required placeholder="Add your E-Mail address">
        <button type="submit" id="n-submit" name="submit" class="send-button">SUBSCRIBE</button>
    </form>
    <div class="success-message">
        <h4 class="title font-secondary">Thank you!</h4>
        <p class="desc">
            Your subscription is successfully! <br>
            Thanks for being part of the community.
        </p>
    </div>
</div>

PHP editings - Open php/newsletter.php file and please follow:

Step 1 - Put your MailChimp API - How get your Mailchimp API KEY - Gen an API Key

$api_key = 'your_api_key_goes_here';

Step 2 - Put your list Id here - How get your Mailchimp LIST ID - Get Your Lis ID

$list_id = 'your_list_ID_goes_here';

You can also edit your success message on line 22 - newsletter.php file.

Credits And Sources

We would love to thank the guys who helped make the Zeplin creative template. We really appreciate that. Big thanks to those guys:

PSD You can find beautiful Sketch version of Zeplin on here: Zeplin Creative Template | SKetch Version