Loading...

Using Margins and Fix with Web Outputs

Clear fix and margins are common in every website design. The nature of HTML forces us to clear our content or use margins for spaces, to prevent clipping. Export Kit will output your designs as-is, so there are cases where what you see – is not what you expect! Export Kit will measure the contents of a folder based on the children layers.

NOTE: This mainly affects Dynamic Height and Responsive Designs (not including Android).
NOTE: Export Kit will calculate the position and size of a container based on its child-elements.  If you expect the container to have padding and marings with elements, then you must use a shape background or skip margin to define the area. 

In the image above – assume we are working on the “Our Process” content block. You’ll note that we show where the content "starts" and "stops" in the design area with the red squares. This is where Export Kit will measure the region of the content block.

IMPORTANT: If you do not set the area of the folder container with a background shape - your content position and size may have unexpected display errors.

Step 1: Note The Margins You Need

You will need to specify the space or area of your design blocks. Because Export Kit will measure your folders as-is, you need to add elements to each section to state the true size of the design.

Eg. If the "Our Process" area design includes the margins around the text to create the "box", then we need to tell Export Kit that using a shape background or skip margin.
NOTE: If you do not specify the true content area, the output will clip the excess space.

Step 2: Fix Your Margins

The best way to solve this issue is to:

1: Add a background shape so the content area has a background and natural margin
IMPORTANT: Using a shape background will mimic natural padding and margins as your content will remain in its visual position.

— or —

2: Add custom fix elements to state the output margins.

Both methods will tell Export Kit that your “Our Process” area fills the region of the box, and your text starts and stops inside that area – rather than the text clipping in the output.

The ${skip} Fix Margin

A skip fix margin is a shape layer with a ${skip} tag applied so it is not included in the output. Fix margins are an easy way to denote content areas and margins in the output.

NOTE: Only the y and the height of the fix margin is calculated in the output.
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


One Pager Website

A clean professional single page website design.

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