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.




–       Folders
–       Shapes
–       Images with CSS Images enabled


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


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


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


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


(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.




${class|div: }


${class|img: }


${class|span: }






${class|p: }


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




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


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


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


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






${class|script: }


${class|style: }
LOGIN NOW: Get instant access to our free Online Training - click here.

02. Using The Plugin

03. Layer Support

04. Basic Exports

05. Layer Tags

06. Optimization Tips

07. Complete Exports

🚀 Start saving time and money!