Let’s practicing. Have you downloaded the Divine Elemente?

DOWNLOAD NOW »

At this tutorial we will review the both methods of publishing with Elemente:

How To: Start From a Predefined Template

Step 1. Open a PSD Template

Photoshop is running?

  • Photoshop’s top menu > Click on ‘Elemente
  • ‘Quick launch’ > ‘Create a blog layout

Photoshop isn’t opened?

  • Click on Windows ‘Start‘ button
  • Find ‘Divine Elemente’ > ‘Launch Divine Elemente (CS-CC)’
  • ‘Quick launch’ > ‘Open sample template’

HINT: If you don’t see an ‘Elemente’ item – just click on ‘Help’ menu item in Photoshop’s top menu. This weird behaviour can happen sometimes and can’t be managed because of restrictions of Photoshop’s API.

Divine quick launch

Then press on the “Open sample template” button.

Sample psd template

Step 2. Set / Edit a Layout Grid and Assign Elements

  • Photoshop’s top menu > Click on ‘Elemente
  • ‘Quick launch’ > ‘Publish and Upload current PSD

To see all assigned elements:
display all the elements (‘View‘ > ‘Show Elements‘)

Publish editor psd hints

More information about the elements and methods of their use.

Step 3. Edit FTP Settings For Theme Uploading

With the help of Divine Elemente you can publish your theme directly to your hosting server. To do this, you should create an account and specify the connection parameters. Select Settings> Accounts.

Elemente settings accounts
  • (A) server address and a port if required,
  • (B) path on server for the theme uploading,
  • (C) authorization data on server.

In the Accounts window press on “Add a new account”. Fill in the necessary fields to connect and specify the root directory of your WordPress blog. Click on “Ok”.

More details can be found in the “Publish Editor” guide.

Step 4. Preview / Publish the WordPress Theme

After your account has been created, you can select it in the right panel. Select it and press on “Publish” or “Live Preview”.

Elemente publishing account

Select “Upload to ” (A)(B) and click the ‘Upload to ’ button (C).

In the case of any errors exist, you will receive corresponding messages in the publising window. You can always get back to the layout and fix them.

Step 5. Install and Activate the WordPress Theme

After your ready-made theme is uploaded to a server, it must be activated for you to start using it.

In the WordPress CMS backend, move to the ‘Appearance > Themes’ section, select a new theme uploaded and activate it as a current theme.

 Activate new WordPress CMS theme

After the theme is activated, move to the website and enjoy your new blog design.


How To: Create a wireframe PSD with the Layout editor

Step 1. Layout Editor > Create a Wireframe PSD Template

Photoshop is running?

  • Photoshop’s top menu > Click on ‘Elemente
  • ‘Quick launch’ > ‘Create a blog layout

Photoshop isn’t opened?

  • Click on Windows ‘Start‘ button
  • Find ‘Divine Elemente’ > ‘Launch Divine Elemente (CS-CC)’
  • ‘Quick launch’ > ‘Create a blog layout’

HINT: If you don’t see an ‘Elemente’ item – just click on ‘Help’ menu item in Photoshop’s top menu. This weird behaviour can happen sometimes and can’t be managed because of restrictions of Photoshop’s API.

Divine quick launch

Step 2. Check or Uncheck Necessary Elements

To do this in the right panel choose the layout type. Set parameters for each grid block. Uncheck the elements to be located in the layout.

Layout editor overview

More detailed on Layout Editor

Step 3. Create a PSD Wireframe Template

Press on “Create PSD” button. After a short process of creating a PSD layout, a window will pop up inviting to enter the PS and design a new PSD layout. Click “Yes”.

Layout editor overview

That is all, a draft PSD layout is ready. You just have to design your page and elements and move on to the next “Quick start guide” section – How to convert PSD template to WordPress CMS theme.


PSD Hints, Elements And Best Practices

PSD hints, elements and best practices

PSD hints, elements and best practices

  • PeiJung
    hi, I got trail expired right after I download the software and used for only 10 mins. I thought the trail is up to 60 days! Can I know what happend?
  • http://www.divine-project.com Ivan, Divine Team
    Sorry for the inconvenience. We’re investigating this issue at the moment, and it’ll be fixed as soon as possible.
  • http://www.divine-project.com Nina, Divine Elemente Team
    Please check, if there is a License.dat file in the folder (win7) “C:\ProgramData\Divine Elemente\”, (winXP) “C:\Documents and Settings\All users\Application data\Divine Elemente\”. If you find it, you are to remove it and press “Continue trial” at launching the software.
  • http://www.divine-project.com Nina, Divine Elemente Team
    Sorry for this inconvenience. Please send us a bug report in order we can reproduce and fix the problem. To do that, you are to: 1. Launch the ‘Start [Windows XP, Vista, 7 button] > Divine > More > Report a Bug’ menu. 2. Describe the problem in details. 3. Select Test003 > send.
  • Beta Tester
    How do you create a login form using elemente?
  • http://www.divine-project.com Kirill, Divine Elemente Team
    Unfortunately, there is no such option in Divine Elemente. However, you can use Editable Content feature to paste your page/form code, etc.
  • Pingback: Photoshop to WordPress | The Revolution Hour

  • Pingback: Photoshop to WordPress | The Revolution Hour – psd to wordpress

  • Pingback: Top 100 Simple WordPress Themes

  • http://www.crazyanimals.net Linda P
    I have tried and tried and cannot get this to work. It is very frustrating. Why does everything have to be so complicated? Cannot figure out how to upload my theme. Hours and hours of total frustration. Ready to throw the computer off a cliff.
  • http://www.divine-project.com Sergey, Divine Elemente team
    Linda P, please don’t throw your PC off a cliff. We will try to simplify this document or add video and description for every item.
  • haim
    does this support hebrew themes?
  • Tutograf
    No me vale en photoshop cs3 me e bajado la versión de prueba
  • http://www.divine-project.com Sergey, Divine Elemente Team
    Could you please provide us with more details about the issue you are experiencing? If you did not buy the application, then it is normal that it says you are using it in trial mode. If there are any issues – you can always write us: support@divine-project.com
  • CristianoNascimento
    Ola, fiz tudo certo, mas quando vou “fazer o upload” ele da um erro user logged in, proceed.
  • http://www.divine-project.com DivineElemente
     @CristianoNascimento Hi. Please check your account authorization data. You can do it by clicking “Test” after entering your data in Settings > Accounts.   If something goes wrong – please contact our support via support@divine-project.com, or divine_project Skype.
  • Nicholas
    I installed this program, and nothing happend. Not even .exe for starting this program. What should i do?
  • Dmitriy, Divine Elemente Team
    Hello Nicholas Please, try to launch Photoshop at first, and then start the Divine Elemente plugin from the main menu “Elemente > Quick launch”. The system requirements of Divine Elemente are: Photoshop CS3-6 (32 bit), Windows XP-7
  • http://www.lifeheartbeat.com osama
    i just love it but please how possible to add my own psd instead of default one i need to create new theme with my custom layout Thanks
  • http://www.besttechnologies.comoj.com Avi Chitranshu
    sir …. when i open divine elemente in adobe CS2 version 9. My pc always restarted automatically .Where is a problems? Can any one suggest me ? Thanks and Regards Rohit Srivastava
  • Qadir Houchens
    I have Adobe Photoshop CS5 (64 Bit) and it’s not supporting Divine Elemente. Will there be a fix for this any time soon?
  • Shoaib Rafique
    Does Divine works with Photoshop portable or I need to install full version. Thanks
  • Pingback: TechnoLion » How to Create your Own Custom WordPress Theme Easily

  • Dmitriy, Divine Elemente Team
    Sure, it works. When installing, select the custom directory with the Photoshop plugins.
  • Edon
    Is there an update where i can make main page and other pages (different from first page) without adding some codes manually?
  • Denver Stawicki
    One very popular feature of WordPress is its rich plugin architecture which allows users and developers to extend its abilities beyond the core installation. WordPress has a database of over 24,000 plugins[11], each of which offer custom functions and features enabling users to tailor their site to their specific needs. These customizations range from SEO (Search Engine Optimization) enhancers to content displaying features, such as the addition of widgets and navigation bars.”
  • Jennifer
    What if you don’t want to upload to your own WordPress account and you are creating the theme for someone else. Can you export the theme somehow that would make it easy for the other person to upload on their own?
  • http://www.papumm.blogspot.com Arnaldo
    I installed the program with success, but its not works, the option “Elemente” don’t appear in my photoshop (CS6).
  • Dmitriy, Divine Elemente Team
    Arnaldo, what PS version are you using (32 or 64 bit)? It works only with 32 bit version.
  • Dmitriy, Divine Elemente Team
    Jennifer, sure, you could export theme to a local folder and send it to your server or server of your client manually.
  • Ufuoma
    I installed the trial version but when I try to publish and upload the sample psd, it says 0 days left for trial but I have only just installed it today. Please can you help?
  • JP
    Hi. I’m testing the divine elemente plugin and I have a question. If I want to suppress the post and the sidebar from a template, how can do that ?. I tried turning off the layers, deleting the layers that I don’t need, etc, and I can’t obtain the template that I want. I really appreciate if someone can answer my questions. Thanks in advance.
  • http://www.divine-project.com Ivan, Divine Elemente Team
    Hey, quick answer – you can’t remove them (regulated by WordPress codex) , but you can cheat. Long: These elements are neccessary for the WordPress theme and this is regulated by WordPress codex. But here is a cheat: http://www.divine-project.com/howto-create-wordpress-template (Look at the ‘Final Product’)
  • JP
    Hi Ivan. Thanks for your prompt response. I know that the posts and the sidebar ar neccessary for the WP theme, but I need suppress this items for the front page of my template. The explanation that you suggest me don’t say nothing about this. Could you give me another idea ?. Thanks.
  • http://www.divine-project.com Ivan, Divine Elemente Team
    This video explains the whole process: http://www.youtube.com/watch?feature=player_embedded&v=cYZIcQaE9Lg#at=226 Litterally, you need to follow video instructions: prepare 2 PSD templates, publish both of them with Elemente, and later add small corrections to the code and file names.
  • http://ferdesign.nl Ferdinand
    Hi, I want the sidebar on the right, instead of on the left of the Posts. But how?
  • Dmitriy, Divine Elemente Team
    Hello Ferdinand, please use the layout editor to swap the post and sidebar columns. Here is a tutorial: http://www.divine-project.com/doc-layout-editor#swap_grid_blocks
  • jahanzaib ahmed
    hi, can’t see the elemente button in photoshop. i have cs6 , 64 bit photoshop
  • Divine Elemente
    At this moment we are working on the new version, but current version of Divine Elemente works with PS (32 bit only), so you may install additional PS (with the same license as 64 bit) and use it right now. Any updates for the current clients are free.
  • Shaikh Rafik
    Hello I am download a divine software & install it but on start menu it not display also in the program files i can see here divine but when i am click on it. it show me error==”please reinstall divine plugin not found”… so please help me
  • Bien
    Do you make in the future a translation into Spanish?
  • keith
    Looks great. Is there a template available with a picture gallery-portfolio?