Free Premium WordPress Themes Contest  Click here

Remember Me
SEND

960 Grid Tool

960 Grid tool designed to streamline web development workflow in Divine Elemente: definition, rules of usage and 960 Grid examples are considered in this tutorial.

Related: Best practices

960 Grid tool represents universal dimensions to arrange web page elements in the most consistent way, and it gives your web pages a professional look & feel. The 960 Grid PSD template is used more and more often in the web development as a standard.

Use: 960 Grid examples

Use: 960 Grid examples

960 px width is universal solution for setting a web page width that all modern devices and browsers available on the market can display correctly.


How to use 960 Grid tool in Divine Elemente

As mentioned above the 960 Grid is a template tool to aid aligning and arranging elements in Divine Elemente. Since it is a tool, it was decided to place it as a separate item in PS menu (“Elemente > 960 Grid tool”). The basic steps of working with the 960 Grid tool are shown below.

Step 1. Launch 960 Grid tool.

Open a PSD template and select the “960 Grid Tool” item in Divine Elemente menu.

Launch of 960 Grid tool

Launch of 960 Grid tool

Step 2. Set layout grid parameters.

In most cases, enter 12 or 16 or 24 columns to suit your design tasks, or in few cases, change column or gutter’s width if required, and press “Apply”.

Selection of layout grid parameters

Selection of layout grid parameters

Step 3. Arrange all elements in the layout grid.

Elements arrangement

Elements arrangement

Note: Additional layers created are not taken into account when the theme is being published because Divine Elemente switches them off when analyzing the document.


Conclusion

As this tutorial shows, the use of 960 Grid tool is easy to use in Divine Elemente and hopefully will be useful for creating a design and making 960 Grid PSD as it helps a lot with headaches regarding layouts and their structure.

External links

  1. 960 Grid
Subscribe to Our Newsletter
Success! You`ve been signed up. Please check your e-mail for our confirmation message.
"" is already subscribed to list Divine Project Newsletters
Invalid email
JOIN!
* Your e-mail address will only be used for our newsletter.
Get your social on
Subscribe to Divine Elemente
Post comment as twitter logo facebook logo
Sort: Newest | Oldest
SHOPPING CART
Product Quantity Total
Your Basket Is Empty
CONTINUE
Your Prepay Account
Current Balance: $
Enter a deposit amount in the field above and make it now. And the use of prepaid deposits will save your time and give you a $2-discount purchasing any item at our website next time. More details on Prepay use.
DEPOSIT NOW
CANCEL
Loading
"" is already subscribed to Divine Project Newsletter.
Invalid email
Success! You`ve been signed up. Please check your e-mail for our confirmation letter.
FREE UPDATES Enter your E-mail: JOIN US Privacy
8807 subscribers Divine Project RSS
Powered by Google
Help translate Elemente GUI

Adobe®, Photoshop®, Fireworks®, Illustrator®, Flash® are registered trademarks of Adobe Systems Incorporated.


How to make WordPress theme from PSD template | How to Create Basic PSD template | How to Upload WordPress Theme to Internet | How to Change WordPress Themes | Sell / Buy WordPress Themes

© 2012 Divine Elemente. All Rights Reserved. Design by Ivan Sulimenko