Divine Elemente user interface description: tab description and function. Learn the working area of Divine Elemente: top menu, canvas, and the right panel in details.

Related: Layout Editor, Publish Editor, Quick start guide
[divineAds]

Divine Elemente working area consists of the following main parts: (A) Canvas, (B) Top Menu and (C) Side panel.


Interface of Divine Elemente

Interface of Divine Elemente

We’d like to offer you Divine Elemente’s interface description in details in the following guide.


Top menu

The top menu of Divine Elemente v0.9 consists of the following items:

Interface of Divine Elemente. Top menu

Interface of Divine Elemente: Top menu

(A) File

Item Shortcut Description
Save to Ctrl + S Saves a current open document It’s inaccessible at new layout’s creation
Save as Ctrl + Shift + S Saves a PSD document, allows to choose a file’s name and path
Quit Alt + F4 Closes Divine Elemente and opens Adobe Photoshop

(B) Settings

Item Shortcut Description
General Backup and language settings
Publish Editor Publishing settings and ‘Theme author’ properties
Accounts Accounts’ parameters for publishing on web server
Language Allows to select an interface language from the list given (The restart of Divine Elemente is required)

(C) View

Item Shortcut Description
Layout Editor Switch to the editor responsible for page layout setting
Publish Editor Switch to the editor responsible for elements assignment and theme publishing
Show Elements G, Ctrl + H Publish Editor: - Layout grid display Layout Editor: - Display of a current template on the background - Display of a new template’s structure
Show side panel Tab Shows / hides a side panel

(D) Help

Item Shortcut Description
Getting started Links to the most required tutorials and guides for getting started to work with Divine Elemente (Quick Start Guide, Interface, Elements)
Docs & Tutorials Link to the documentation section for Divine Elemente
About Divine Elemente… Information on the current version of Divine Elemente v0.9
Submit feedback Link to the online service for your ideas about Divine Elemente, or your voting for other users’ ideas
Send a Bug Report In case you found any bug, you can send us a bug report

Canvas

Canvas is a main part of the interface of Divine Elemente v0.9. All basic activities with a template can be made just in canvas.

Publish Editor is used for:

  • display of a page and template’s layout grid,
  • selection and assignment of theme elements required.

Layout Editor is used for:

  • display / editing of page’s layout grid,
  • schematic display of elements of a new PSD template,
  • display of a list of elements that are in use for editable PSD template
Canvas. Main part of Divine Elementе's interface

Canvas: Main part of Divine Elementе’s interface.

More details on work with Divine Elemente v0.9 can be found in the Quick start guide.


Side panel

The next item of interface description is a Side panel. This panel consists of several functional parts. And composing parts of the Side panel in the Layout Editor differ from the being used ones in the Publish Editor at that.

More details on differences in Layout Editor’ interface can be found in the Layout Editor guide.

The side panel in the Publish Editor consists of three parts (Command panel, Elements panel and Properties) and they are considered in the current guide.

Command panel

Command panel consists of three parts:


Side panel. Command panel

Side panel: Command panel.

(A) The ‘Publish’ button carries out the specified in the list action (that’s why, you can see an example of ‘HTML preview’ in the above image). (B) The ‘Layout’, ‘Publish’ tabs are used to switch between the two editors (the Layout Editor or the Publish Editor) in Divine Elemente v0.9. (C) A list of general actions used during the publishing process is located on the ‘Publish’ tab:

  • HTML preview ( Creation of HTML / CSS );
  • Save to folder ( creation of a CMS theme for the local server );
  • Upload to <website> ( creation of CMS and upload on FTP server according to the account mentioned ).

Elements panel

This panel consists of 2 tabs (A):

  1. Elements – it displays a list of all elements (B) and their types or variations too. Highlighting any element, you can set appropriate properties of this element in the Properties panel.
  2. Layers – All layers and groups of layers, created previously in Adobe Photoshop, are displayed in this tab. Elements, while being chosen in this panel, get highlighted on the canvas at once, what simplifies work with Divine Elemente greatly.
Side panel. Elements’ panel usage

Side panel: Elements’ panel usage.

More details on elements can be found in the “Elements” guide.

Properties panel

This panel allows to set properties for an entire theme (‘Theme’ element) or adjust them for each theme element separately.


Side panel. Properties panel description

Side panel: Properties panel description.

More details on theme elements’ properties and this part of interface description are considered in the Properties guide.


Divine Elemente allows to set the most necessary parameters of the application for more convenient work. You can call in the window with parameters from the “Settings” top menu.

All options are divided into the following tabs: General, Publish Editor, Accounts.

Let’s consider parameters of each tab in details.

General tab

General tab includes the following settings:


Divine Elemente 0.9 settings. General tab.

Divine Elemente 0.9 settings: ‘General’ tab.

  • Language – language selection for the interface of Divine Elemente v0.9. English language is used by default. A user may select and download an additional language package – use “More language” button.
  • Backup folder – selection of the way for saving of PSD template’s backup copies.
  • Autosave backup each ‘N’ minutes – selection of time span that will be used for saving of backup copy of your work.
  • Restart Photoshop after crash of Divine Elemente – if you check this checkbox, than, in case of Divine Elemente’s crash, the work will be restored completely from the moment of the last autosaving.

Publish Editor tab

‘Publish Editor’ tab includes the following settings:


Divine Elemente 0.9 settings. ‘Publish Editor’ tab.

Divine Elemente 0.9 settings: ‘Publish Editor’ tab.

  • Theme author properties – you may indicate all data of the theme author in this section. This data will be displayed at selection and theme’s activation in WordPress CMS and in source code (HTML).
  • Path for HTML Preview – selection of the way for saving of prepared files of HTML page preview.
  • Publish Theme style fonts with ‘EM’ instead of ‘PX’ – if you check this checkbox, than Divine Elemente v0.9 will show a font size in ‘EM’ during publishing.
  • Use PNG24 fix – if you check this checkbox, you fix PNG 24 alpha transparency support in IE browsers
  • Use custom (unsafe) web fonts – if you check this checkbox, Divine Elemente v0.9 will download the additional fonts to the website and enable them in your theme. If you don’t select this option, all unsafe fonts will be replaced by the fonts from the Safe fonts list.

Accounts tab


Divine Elemente 0.9 settings. ‘Accounts’ tab.

Divine Elemente 0.9 settings: ‘Accounts’ tab.

  • Add new account – creation of a new account for theme’s publish using FTP client.

Selecting any account from the list, you may set parameters required for publishing on the right side of the window:

  • FTP Host (Website URL) – you may set server address in this field. You may also indicate a port number in this field if it’s required (for example, www.mywebsite.com:2121)
  • Remote theme folder – you may show the path on the server of your CMS directory.
  • Login / Password – authorization* data of the server are filled out in these fields.

Change proxy settings – at this option selection, additional fields, which proxy server’s data are inserted in, appear. In case you use proxy server, these fields are to be filled in.

  • Proxy server (Wikipedia: Proxy server) – you are to insert proxy server’s address in this field. You may point a port number (Wikipedia: Server port) if it’s required (for example. SomeProxy:2121).
  • Login / Password – authorization** data of the server are filled out in these fields.

* ** This data is used for authorization on the server only and are not transferred to anywhere.

Conclusion

So, you have just learned details of Divine Elemente interface and its tabs and panels, thus knowing well the whole working area of our software.


Related guides and tutorials

  1. Publish Editor
  2. Layout Editor
  3. Quick Start Guide
  4. Elements
  5. Properties

External links

  1. Wikipedia: Proxy server
  2. Wikipedia: Server port


Divine Elemente PSD to WordPress

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


  • http://dailytradingsystem.com/ Loz
    I’m unable to change the footer depth, it keeps changing to 960px and when moving the slider to 200px, it reverts back… now no matter what i do, change layout for the blog, those 960px footer settings are stuck…
  • Rick
    Nice looking software, works well, congrat… but- It won’t upload correctly to /wp-content/themes and I can’t figure out how to publish to local folder I have been a designer for 10+ years so it’s not my stupidity, is it?
  • Sergey, Divine Elemente Team
    Thank you for your warm words. >>> It won’t upload correctly to /wp-content/themes You need to indicate the WordPress root directory, “/wp-content/themes” is added automatically. >>> I can’t figure out how to publish to local folder In order to publish to local folder, you need: - to indicate the path to local folder in the settings; - to choose Local folder at publishing.
  • Alex
    Hello, Clearly, if your product can take into account in an upcoming release one of the 2 following drag&drop wordpress frameworks, i’m among the immediate buyers : Ultimatum or Headway. Regards