Exort Kit allows you to create pages with dynamic height to ensure your page outputs maintain their individual designs. Its common in multiple page PSD designs to have pages that are not the same size, Export Kit makes this an easy fix – with no effort.

IMPORTANT: Dynamic Height will stack your content similar to a VBox or Table Row in other environments.

Once you have an idea of the page contents, we recommend you wrap the page contents in a folder, eg. “content”. This will allow Dynamic Height to use the “content” folder size in the output.

Dynamic Page Concept

Adding your page contents to a group/folder, eg. Content will allow you to have pages which are unique in size. You will have different page designs that may have different heights – this is normal.

Export Kit will remove the extra space in the Output.

Dynamic Pages Layout

Its very common to have Dynamic Page designs that are “miss-leading” in deisgn. You will have extra space with some page folders, but Export Kit will remove this in the Output.

IMPORTANT: Your PSD should contain a [header], [content] (per page) and [footer] folders.

You should try to make your PSD document large enough to accomodate for the full height of all pages. This will make your design easier to edit.

Step 1: Adding Dynamic Page Content

Group all your content layers and call the folder “content”. Then add the folder group to your ${page:index} index folder. The index page will now calculate its size using the “content” folder.

IMPORTANT: The fastest way to create Dynamic Pages is to group all your page folder layers - call the folder group content (See image above).

Repeat Step 1 *PER* Page

Repeat this step when adding dynamic content to other pages, eg. Servcies:

• Create the ${page:services} folder
• Group the layer(s) you want to include – select the layers and press ctrl+g
• Name the folder group “content“
• Add the “content” folder to the ${page:services} folder

What Dynamic Pages Do

Once you add your individual page content folders, Export Kit will position your [header] and [footer] folder accordingly with your content folders. This will allow you to create page designs of any size.

NOTE: Each page design can have an individual size which will render in the Output.

How Dynamic Pages Work

Export Kit will process and resize each individual page based on the page content folders and the general [header] and [footer] content folders.

When using Dynamic Height you have to consider the following:

• You MUST use many layer folders
• You MUST have a [header], [content] and [footer] or similar folder structure
• You MUST ONLY add the resizable content in the [content] folder

Dynamic height will calculate the size of each view, based on the size of the elements. When you use a [header], [content] and [footer] folder structure – Export Kit will measure in the same way:

Where To Add Dynamic Content

Once you create a [content] folder (or similar), you can add any layer structure within the [content] folder and Export Kit will measure the size of the [content] folder when calculating the document height.

NOTE: If you do not create individual backgrounds for dynamic content, you may need to add ${skip} margins to correctly position elements.

Custom Dynamic Content

You can add unlimited [container] folders with your PSD design to better control both content and backgrounds, eg:

*FOLDERS ONLY*

Dynamic Height calculates each Level 1 Layers (see below) depending on pages and css screens. To get the correct height settings, you should always use folders to organize your Level 1 content.

Once you have your folder structure, you can add unlimited layer elements within each folder.

NOTE: Dynamic Height will stack your content similar to a VBox or Table Row in other environments, so use folders and not layers.

Only Add FOLDERS To Level 1 Layers

You should only add folders to Level 1 layers (or the first level within a Page/CSS Screen folder). All layers are stacked with Dynamic Height, so if you add individual layer items to Level 1 – you may get unexpected output results!