Related: Layout Editor, Publish Editor, Quick start guide
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 menuThe top menu of Divine Elemente v0.9 consists of the following items:
Interface of Divine Elemente: Top menu
|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|
|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)|
|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|
|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|
CanvasCanvas 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 panelThe 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 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 ).
This panel consists of 2 tabs (A):
- 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.
- 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.
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 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.
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.
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.