Interface description

Divine plugin was developed as a tool for converting patterns (graphic templates) to HTML pages that any user can work with, even if he’s not acquainted with the HTML language. That’s why the interface was optimized as much as possible for the user’s needs.

Divine plug-in work screen

As you see from the screenshot, plugin working area consists of the following elements:

• Menu – Control menu
• Canvas – considerable part of the working area that the template of the future HTML page is displayed at. Additional panels lie on the right of the canvas:
  • Element panel
  • Layer panel

Program menu

Program menu consists of several points.

System menu

“Interface. Menu” section describes all menu items and program settings in details.

The canvas

The main plugin element is, certainly, the canvas that the main editing work takes place at, notably – new groups, forms and active elements creation, links assignment etc. “Interface. Elements” tells about the program work in details.

Element assignment (WordPress theme example)

Additional panels. Elements panel

“Element properties” panel. Panels are assigned to display all elements that were created in Photoshop. Elements and groups of elements available to be edited in the program are displayed in the “Elements” tab. All layers and groups of layers that were created in Photoshop are displayed in the “Layers” tab. While choosing elements in this panel, they get highlighted on the canvas at once, which greatly simplifies work with the program. I. e. you don’t have to guess which layer corresponds a certain name – you just pick out one from the list and view it on the canvas. While choosing elements in the “Elements” tab of the “Element properties” panel, possible parameters of the chosen element are displayed.

Additional panels usage

This way you can assign the link to the element chosen and set definite id-index for more convenient search in the page code.