set_bg_header

The Workflow:

  • Open a wireframe PSD template
  • Put graphics into the elements groups
  • Adjust elements’ position with the help of 960 grid

Final Product: Ready PSD Template

This PSD template is fully optimized for PSD to WordPress conversion.

Final Product

Difficulty: Advanced

Apps Used: Adobe Photoshop

Apps Used: Divine Elemente

Step 1. Set Layout Blocks

Divine Elemente uses slices to determine the layout grid blocks. So, in this step we will check slices of PSD template, that was created in the previous tutorial.

Select the Slice Select Tool

Slice Select Tool

Double-click on each slice, and make sure that each layout grid block has appropriate name: Side, Header, Footer, Sidebar, Post.

Grid block name

Step 2. Set Background Image, Color or Pattern

Create in the each layout grid block a new group called “bg” and place any graphics that will be rendered as the background of the theme.

Put graphics into the “Header” grid block

Put graphics into the 'Header' block

Repeat this action with other grid blocks.

Step 3. Design Header And Footer Elements

Place all items of Header and Footer grid block where they will appear in the theme.

Note: All Elements at the Header or Footer grid blocks are absolutely positioned.

Elements design

Set billboard widget elements.

Note: Billboard widget elements should not be overlapped in the PSD template.

Set billboard widget elements

Create slides for the Billboard widget slideshow. Place images into the Slides group (each slide as a separate layer).

Set billboard slides

Step 4. Design Sidebar And Post Elements

Put graphics and styles at appropriate elements’ groups.

Note: All Elements at the Sidebar or Post blocks are relatively positioned.

Set post elements

Note: Any content of elements placed here are not shown on the final WordPress theme. These elements only show what styles are used for the similar elements of the future content (texts, links, headings, etc.)

Step 5. Adjust Elements Using 960 Grid Tool

Open 960 Grid tool.

Open 960 Grid Tool

Create a grid overlay.

Create a grid overlay

Adjust elements to the grid.

Adjust elements to the grid

Read more about 960 grid tool.

Elements And Best Practices

PSD hints, elements and best practices

Read more at “PSD hints, elements and best practices” article.

In the next tutorial of this series you will know how to convert current PSD template into the ready WordPress theme.

Everything is OK? If not – tell us in the comments


Divine Elemente PSD to WordPress

Convert graphics from Adobe Photoshop to a working WordPress theme. No coding.


  • http://www.numero-uno-inc.com/ Sahil Patel
    We can easily apply properties of blog. When it create at the time we can easily customize and do its nice presentation. We can also use different style to different areas. Thanks. I got new idea.
  • guptaabhijit318
    Thank you so very much for this article. It helps a LOT! As a beginner, it is not really hard to make progress with these articles. We can easily apply properties of blog. Thanks for sharing.