Interface of Divine Elemente

• Tweet

• Tweet

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

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

(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.

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.

(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.

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.

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.

• 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.

• 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.

• 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