Loading...

Create Custom HTML Elements

There are many situations where you may need specific HTML elements based on your project or business requirements. You can further customize your output with any HTML element using our Class Tag with your folders, or Code Tag with your text layers.

We will take a look at several ways to create custom HTML elements using your PSD layers.

Group Containers

These elements are used in HTML to store child elements or sub groups. An example of a group container is a <section/> or a <ul/>. On their own, each element does not do much, but when child elements are added – each can render content differently.

RECOMMENED: You should use Class Tag with group containers.  Export Kit will map folder layers similar to the behavior of common HTML group containers.

Hybrid Containers

These elements have dual capabilities to allow both multiple child elements, or a single element for rendering. An example of a hybrid container is an <a/>, <p/>, or <li/>. These elements allows for a single text child or dynamic sub content with multiple layers.

MULTIPLE CHILDREN: Use Class Tag if your list has complex or dynamic content.
SINGLE CHILD: Use Code Tag if you have a single child, and wrap your text layer with the element.

Element Conversion Tables

This will provide you with a quick reference to many common HTML, CSS, JavaScript and PHP elements which you can create with Export Kit.  You can further customize your output with any HTML5 element using our Class Tag with your folders. All elements support custom properties so you can map them any way you like.

HTML Tag

Usage

<div>

(natural)
–       Folders
–       Shapes
–       Images with CSS Images enabled

<img>

(natural)
–       Images (+rasterize)
–       Smart Objects
(layer tag)
–       Any Layer
–       ${img} or ${image}

<a>

(layer tag)
–       Layers Only
–       ${link:http://google.com}

<span>

(layer tag)
–       Paragraph Text Layers Only
–       ${p}

<form>

(layer tag)
–       Folders Only
–       ${form|get:http://yourserver.com/path/to/script.php}

<input>

(layer tag)
–       Text Layers Only
–       ${input:textarea}

 

Custom HTML Class Elements

You can create ANY element including iframe, canvas and object, the following are just examples.  Note that Class tag only works with Folders.

HTML Tag

Usage

<div>

${class|div: }

<img>

${class|img: }

<span>

${class|span: }

<form>

${class|form:action=”/path/to/script.php”}

<input>

${class|input:type=”textarea”}

<p>

${class|p: }

<a>

${class|a:href=”http://google.com” title=”google link”}

<textarea>

${class|textarea:rows=”5″}

<ul>

${class|ul:class=”menu nav”}

<ol>

${class|ol:class=”menu footer”}

<li>

${class|li:class=”nav nav-item”}

<section>

${class|section:role=”content” data=”val1″}

<header>

${class|header:id=”page_content_header”}

<footer>

${class|header:id=”page_content_footer”}

<script>

${class|script: }

<style>

${class|style: }
LOGIN NOW: You need to login so your progress is tracked with Online Training - click here.

Products For Smart Professionals


smart_images_base_set

Smart Images Base Set

smart_psd

Smart PSD Batch

smart_images

Smart Images

Need a custom solution?

Try our Shop!

Using the Plugin

Layer Support

Layer Tags

How To Guides

Optimization Tips

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


Responsive Multi-Page Website

A clean responsive website with multiple pages +target screens.

Start Your 14 Day Free Trial

New users get instant access to the 14 Day Free Trial with all features enabled, and Free Online Training. We guarantee your first conversion will 100% work - we work with you to ensure this, contact us or check our FAQs for assistance.

Connect With Us

Top
Lightning Storm version v17.0216.05 releasedLearn More