Hi Omaticx,

Sorry for the delay, but long weekends are what they are.

There are a few steps you have to do to accomplish this, but you must also keep in mind that you are breaking the Photoshop logic of design (x,y,z) to match HTML – impossible.

Step 1: Reset Your Parent Div CSS

Follow the instructions on this post: //exportkit.com/answers/how-do-i-add-content-after-the-html-export – to reset your target Div based on your requirements.

Step 2: Use Class Tag to Create Divs

Class Tag: //exportkit.com/plugin/layer-tags/advanced-layer-tags/class-tag only works with folders and not with layers. If you use Class Tag with a layer it will have no effect. When using Class Tag, you must follow the rules (eg. there are no styles, you must define them).

IMPORTANT:

What you are attempting to do is considered advanced for a new user because you are breaking the logic of Photoshop to match HTML = never what you expect. There are a lot of things to consider when doing something like this – and you should start with a few other basic things first.

1. When using Class Tag – NO PROPERTIES are stored. So if you set a background color to the div – it may render blank because you did not assign a width and height to it – HTML rule
2. When using Class Tag – you must manually assign an external style to the element

Start With Our PSD Templates

Please download our PSD templates: //exportkit.com/resources/learn/psd-templates – there are a lot of examples to get you started. Check the layer tag folder.

Adding External CSS

If you plan to add external styles to Class Tags (advanced) you will need to use Code Tag: //exportkit.com/plugin/layer-tags/basic-layer-tags/code-tag or link the files externally: //exportkit.com/plugin/environments/html5/using-external-files-with-html5.

Caution

We DO NOT advice you do this for your first few projects. You are diving head-first into the “virtualization” side of Export Kit and Photoshop (advanced) – without understanding the basics. Please start with our PSD templates then go from there.