How to Convert PSD to WordPress with Divine Elemente
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?
AlisdairSmith Hello. Could you please send us your PSD template (support@divine-project.com), so we could check it?
HI .. when i upload theme into wordpress it says css file is missing..uploading failed. can any one help me??
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).
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
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
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
Hi I want to have my side bar on the right hand side but the grid does not show one
Giving it another try now after having trouble with it a long while ago. See if it has improved. :)
DEPOSIT NOW CANCEL
When following the above guide I go to layout editor and the PSD is not visible, any ideas why?
- spam
- offensive
- disagree
- off topic
Like