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: 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


One Pager Website

A clean professional single page website design.

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