One of the greatest benefits of using WebStarts is the true "What you see is what you get" experience. The creative freedom enables you to create a truly unique design that conveys the value of your products and services.

Many competitors say they're drag and drop but in reality they're really little more than glorified template editors. Who limit you to editing a few lines of text and a couple of images on the same design that's already being used by hundreds, if not thousands of others on the web.

Here are 10 ways to create a pixel perfect web design using WebStarts.

1. Guidelines

By default we've enabled guidelines to suggest where you might place an elements in relation to each other. While dragging and element across the screen you'll notice subtile pink lines. These lines are suggesting places where you might like to align elements with each other. It works by detecting the boundaries of other elements. This feature is particularly helpful when trying to center an element on a page or with another element.

2. Snap to

Rather than dragging a text box or image anywhere on the page WebStarts further suggests where you might like to place page elements by snapping into place. This makes it so you'll have to use the next feature less often.

3. Arrow keys

There are some times where dragging is too difficult to place an element in a specific sport. We've addressed this by allowing you to use the arrow keys to move elements one pixel at a time up and down as well as left and right. Sometimes those moves are a little too small, so we've also included the ability to move elements ten pixels at a time by pressing the arrow keys while holding down the shift key on your keyboard.

4. Header

The header is the top section of a web page. Things included within the dotted green boundary of the header appear on every page of your site. It's common to put your logo, business name, and website navigation in the header. This is done to provide a consistent look and navigation for your site visitors. You don't want them feeling like they may have left your site by accident. You also don't want them hunting for a way to navigate to another page.

5. Footer

Just like the header, anything you add to the footer will appear on every page. Only the elements in the footer are at the bottom of the page instead of the top. To drag elements into the footer you must first hold the shift key. Otherwise dragging elements against the footer will simply push it down the page. It's common to include things in the footer like less important navigation, and icons that link to your social network profiles.

6. Element position

Sometimes it's hard to gauge the exact position of an element on a page with the naked eye. For that reason we allow you to view the exact coordinates of an element. Simply click on View > and make sure Element Position is checked.

7. Resize by value

If you ever want to create a box, text box, or image a very specific size you can do it by clicking to select the element and the clicking on the resize by value icon. Resize by value allows you to enter the exact height and width of an element in pixels.

8. Duplicate

Once you've created a bunch of elements that you've sized perfectly you can use the duplicate function to easily make copies. Click on the element to select it and then choose the duplicate icon on the toolbar.

9. Undo/Redo

We all make mistakes but when you make a mistake in WebStarts it's no big deal. Click the undo icon on the toolbar and you'll be able to revert to your last move. Click the redo icon to reinstate the change you'd previously undone.

10.  Text box padding

There are times when you'd like to increase the white space around a text box. To do this click on the text box, then click on the padding icon. Increase the padding and the distance between the container edge and text will increase.