How to Convert PSD to WordPress with Divine Elemente
This simple PSD to WordPress tutorial explains how easy it is to create a ready theme for WordPress CMS with Divine Elemente having your favorite PSD. Convert PSD to WordPress with no coding.
Also recomended to read: How to create WordPress themes, Layout Editor, Publish Editor
Also recomended to read: How to create WordPress themes, Layout Editor, Publish Editor
Conversion of a PSD template to WordPress CMS with Divine Elemente is an easy-to-use, efficient, and powerful tool that empowers you to produce high-quality custom web pages on your own. Check it out for yourself:
Final Product
What you’ll be creating while learning how to convert PSD to WordPress CMS.
Final Product: Functioning theme for WordPress CMS.
Prerequisites for this guide:
- Install Adobe Photoshop CSx. - Install Divine Elemente. You can download photoshop plugin from our site. - Download PSD template from the Themes Marketplace
Step 1. Open a PSD template in the Layout Editor.
First, open a PSD template “Template’s name” in Adobe Photoshop and launch the Layout Editor (the ‘Elemente > Layout Editor’ menu).
Layout Editor launch.
More details on the Layout Editor.
Step 2. Layout grid setting.
The next step is to show the Divine Elemente plugin how your page looksby selecting a basic layout of the grid on the side panel.
The Layout Editor. Selection of the layout grid’s type.
Then adjust the grid’s parameters according to your template.
To adjust the grid, display the grid (‘View > Show grid’ menu or by pressing Ctrl + H), and drag grid blocks’ boundaries on the canvas, and adjust them according to the template’s grid.
The Layout Editor: Layout grid’s adjustment.
After the layout grid is set to your parameters, you are ready to move on to the next step of the PSD to WordPress tutorial.
Step 3. Switch to the Publish Editor and elements assignment.
The next step is to switch to the Publish Editor (press the ‘Publish’ button on the side panel).
Switch to the Publish Editor (press the ‘Publish’ button on the side panel).
Then, check the assigned theme elements ( the ‘View > Show Elements’ menu or Ctrl + H ), which were defined by Divine Elemente plugin.
The Publish Editor: Check all of the theme elements assigned.
If you need additional elements, assign the required elements by following these simple steps:
The Publish Editor: Elements assignment.
- highlight an element on the canvas,
- call for the context menu by right-clicking with your mouse,
- select the required element in the dropdown list.
More details on PSD hints – Speeding up publishing time or Elements.
After all elements have been assigned, you can move to the next step – Publishing.
Step 4. Publishing.
The last step of work with Divine Elemente is to publish your theme. Instead of publishing the theme to the web server, let’s create it on the local computer. To do that, you are to:- select the ‘Save to folder’ item in the command panel,
- and just click the large ‘Save to folder’ button.
Publishing. Selection of the publishing mode.
Now, after a short conversion process of PSD to WordPress, we’ve got a ready working theme for WordPress CMS
More details on how to create a template for WordPress with Divine Elemente.
Related Guides and Tutorials:
External
Let’s talk a little
PSD to WordPress tutorial we presented you the process of quickly converting a PSD template into a working theme for WordPress CMS. Now that you have done it on your own, we are interested to know:- How much faster for you is it to create a WP theme now? - Is it difficult to work with the plugin as a beginner? - What would you like to add to the functionality?
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
* Your e-mail address will only be used for our newsletter.
14 Comments
Giving it another try now after having trouble with it a long while ago. See if it has improved. :)
Trunkneck July 26, 2011 @ 10:40 am
Hi I want to have my side bar on the right hand side but the grid does not show one
Louis October 18, 2011 @ 9:10 pm
Can you change the languaje on templates exemples, I don’t understand… it’s Rusian? whatever, I think I need more help, I used your templates and when I try to publish it, there is nothing, info, logo, billboard everything disappear, there is just my background, help please
ernesto November 5, 2011 @ 6:42 am
Hi Ernesto,
Could you pls send to us a screenshot(s) with issues you have mentioned above?
Regarding “just my background” – pls try to check your layout grid sizes / and layout grid block sizes
you can do that in a ‘Layout’ tab in ‘Publish editor’ (Photoshop menu > Elemente > Pubish & upload ) or by launching a ‘Layout Editor’ (Photoshop menu > Elemente > Layout editor).
And in the ‘Layout’ tab try to fit a layout grid to your template.
More details:
http://www.divine-project.com/psd-template-modify
http://www.divine-project.com/psd-template-creation
Dmitriy, Divine Elemente Team November 5, 2011 @ 7:22 am
Hello Louis,
to do that, you need to move to Layout Editor, and change blocks position.
You can learn more details from the tutorial: http://www.divine-project.com/doc-layout-editor#upload_psd_template
Sergey, Divine Elemente team November 7, 2011 @ 7:18 pm
HI .. when i upload theme into wordpress it says css file is missing..uploading failed. can any one help me??
zunish April 17, 2012 @ 3:43 pm
@zunish Hi Zunish
Themes made with Divine Elemente contain additional WordPress plugins: that’s why it is impossible to upload them using standard Worpdress uploading feature.
You need to upload your theme with Divine Elemente uploading function, or using third-party FTP client (you need to copy content of the local “/wp-content” folder into the “/wp-content” folder at your server).
DivineElemente April 17, 2012 @ 5:11 pm
When following the above guide I go to layout editor and the PSD is not visible, any ideas why?
AlisdairSmith May 3, 2012 @ 5:57 pm
@AlisdairSmith Hello. Could you please send us your PSD template (support@divine-project.com), so we could check it?
DivineElemente May 4, 2012 @ 10:56 am
Dear Divine people,
what do you mean by upload the whole wp-content folder? Are you serious? What folders inside are changed. Please advise because I will NOT overwrite my whole wp-content folder risking massive loss of content. Please advise exactly which folders are overwritten and adjusted.
Phil
phil November 2, 2012 @ 10:10 pm
By the way, where is the template you mentioned? You said it’s in the market, but looking at the freebies I can’t find it. Or do you expect me to spend extra money to get the files to follow along with the tutorials?
Phil November 2, 2012 @ 10:12 pm
Hi Phil, you will not lose content of directories. In WP-content of the folder, you can only find “themes” and “plugins” directory. “Theme” includes your theme files and “plug-ins” include only the necessary plugins for the theme (Billboard / Admin / Shortcodes) that do not conflict with other installed plugins.
Dmitriy, Divine Elemente Team November 2, 2012 @ 11:02 pm
To download free WordPress themes for this tutorial, please, follow this link: Free WordPress Themes
Dmitriy, Divine Elemente Team November 2, 2012 @ 11:08 pm
I am creating a WordPress template, but I dont seem to be able to create a menu from within WordPress once the theme is uploaded – only the original button/menu links that were added to the design – so am i missing something? I want to create my own navigational menu from within WordPress.
Is it possible to set up different page templates for wordpress when creating themes – as in a full width one column along with the usual left sidebar split?
RR March 11, 2013 @ 6:34 pm