Loading...

Using External Files with HTML5

Because Export Kit allows you to customize your HTML5 Content before export, you can add both custom CSS and JavaScript. This can further enhance your Output to incorporate your existing code.

NOTE: All layer names will follow the Layer Naming Rules:

PSD layer name: My Layer Name
JS/CSS element name: my_layer_name

Step-By-Step Video


Need a visual? Watch our step-by-step tutorial!

Watch more video tutorials.

External Javascript

You can add external JavaScript to your Custom HEAD by using the HTML script tag.

Eg: <script src="myscripts.js"></script>

Once you add the script tag to your Custom HEAD, the Output will process the external JavaScript as normal in any website.

Using External JavaScript

Your JavaScript files can take-over any layer element in your PSD file. You can use JavaScript to control all aspects of your Output including button actions, events and animation.

Eg. Assume you have a layer in your PSD named “Custom Gallery”, you can use external JavaScript to take over the PSD element by using:

JavaScript: document.getElementsByName('custom_gallery')
jQuery: $('#custom_gallery')

External CSS

You can add external JavaScript to your Custom HEAD by using the HTML link tag.

Eg: <link rel="stylesheet" type="text/css" href="mystyles.css" />

Once you add the link tag to your Custom HEAD, the Output will process the external CSS as normal in any website.

Using External CSS

Your CSS files can take-over any layer element in your PSD file. You can use CSS to control all visual aspects of your Output.

Eg. Assume you have a layer in your PSD named “Home Button”, you can use external CSS to take over the PSD element by using:

#home_button{}

Virtual Scripts (Advanced)

You can add any custom HTML, CSS, JavaScript or PHP code to this folder and Export Kit will auto-load the content into Virtual Scripts. You can copy any external file into your web-templates, add a few Script Tags, and modify the code directly in Photoshop – for any project without linking additional files.

Learn more about Creating Virtual Scripts.
LOGIN NOW: Get instant access to our free Online Training - click here.

Using the Plugin

How To Guides

Help Us Improve


We aim to keep our content relevant with useful information, examples, samples and links. Tell us what you think!

I found the content:

Helpful
Confusing
Outdated
Broken Links
Bad Spelling
Too Short
Too Long

This page needs:

Nothing
Better Content
Links
Examples
Videos

Free Download


Cheat Sheet

A full sample of our support for text, shapes, images and effects.

Start Your 14 Day Free Trial

Get instant access to your 14 Day Free Trial and Free Online Training. We guarantee your first conversion will 100% work - we work with you to ensure this, Contact Us or check the Community FAQs for assistance.

Connect With Us

Top