Divine menu
The plugin’s main menu.
You may save changes, show / hide a layout grid, set parameters, etc.
The plugin’s main menu.
You may save changes, show / hide a layout grid, set parameters, etc.
Lorem ipsum dolor sit amet
consectetur adipiscing elit. Ut vitae nisl mauris, pellentesque luctus dui. Mauris sit amet ornare augue. Duis malesuada accumsan mauris, vitae vehicula lacus facilisis in.
consectetur adipiscing elit. Ut vitae nisl mauris, pellentesque luctus dui. Mauris sit amet ornare augue. Duis malesuada accumsan mauris, vitae vehicula lacus facilisis in.
Command panel
sets general layout settings and a ready theme export
You may create a HTML preview, publish to the local folder or upload theme to the Internet
Choose an appropriate export mode and press “Publish”. E.g. "HTML preview" > "Publish"
sets general layout settings and a ready theme export
You may create a HTML preview, publish to the local folder or upload theme to the Internet
Choose an appropriate export mode and press “Publish”. E.g. "HTML preview" > "Publish"
Layers / Elements panel
is intended for work with page’s elements
It displays a list of elements available, allows to select and assign certain properties to them.
You need to mark an element and change the properties at the “Properties” panel.
is intended for work with page’s elements
It displays a list of elements available, allows to select and assign certain properties to them.
You need to mark an element and change the properties at the “Properties” panel.
Properties panel
Elements’ parameters are pointed here
You may adjust installation-specific settings of JPG/GIF pictures, CSS classes, website links, etc.
You need to choose an element and set parameters’ values of export at the "Properties" panel.
Elements’ parameters are pointed here
You may adjust installation-specific settings of JPG/GIF pictures, CSS classes, website links, etc.
You need to choose an element and set parameters’ values of export at the "Properties" panel.
Publish Editor
Publish Editor is a part of Divine Elemente that can help to assign elements, adjust their properties and publish a web page or a working theme for CMS.
Originally, the interface was designed to make this product as easy and convenient to use as possible. So, you can see that plugin's working area consists of the following elements: Menu - plugin’s main menu. You may save changes, show / hide a layout grid, set parameters, etc. Canvas - a main part of the plugin's interface. You may work with all elements of your PSD template there. Side panel - are to the right of the canvas. You may adjust properties of your PSD template and all its elements here, and also publish a ready page.
Read more
Originally, the interface was designed to make this product as easy and convenient to use as possible. So, you can see that plugin's working area consists of the following elements: Menu - plugin’s main menu. You may save changes, show / hide a layout grid, set parameters, etc. Canvas - a main part of the plugin's interface. You may work with all elements of your PSD template there. Side panel - are to the right of the canvas. You may adjust properties of your PSD template and all its elements here, and also publish a ready page.
Read more
Canvas
Canvas is a main part of the plugin's interface.
All basic steps with a PSD template can be made right in canvas.
Namely:
- is used for display of a page and a layout grid.
- is used for selection and assignment of theme elements required.
Also you may look through / assign theme's main elements here. Read more
Menu
"File" menu:
Allows to save a PSD document (its copy) with the current page settings and quit the plugin.
"Settings" menu:
Allows to change interface language, adjust main parameters of plugin's work.
"View" menu:
Allows to display a layout grid and the elements assigned.
"Help" menu:
Allows to look through documentation/video, product's license, and also learn about a new version release of the current edition.
Read more
Allows to save a PSD document (its copy) with the current page settings and quit the plugin.
"Settings" menu:
Allows to change interface language, adjust main parameters of plugin's work.
"View" menu:
Allows to display a layout grid and the elements assigned.
"Help" menu:
Allows to look through documentation/video, product's license, and also learn about a new version release of the current edition.
Read more
Command panel
Command panel consists of three parts:
Layout Editor, Publish Editor buttons are used to switch to other working editor in Divine Elemente v0.9 and vice versa
"Publish" button. It carries out the specified in the list action.
A list of general actions.
It's used for specifying the necessary action at pressing the "Publish" button:
Read more
Layout Editor, Publish Editor buttons are used to switch to other working editor in Divine Elemente v0.9 and vice versa
"Publish" button. It carries out the specified in the list action.
A list of general actions.
It's used for specifying the necessary action at pressing the "Publish" button:
- 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 )
Read more
Side panel
The side panel in the Publish Editor consists of three parts:
Command panel, Elements panel and Properties panel
Command panel
It’s used for selection of parameters and publishing of a ready document.
"Elements/Layers" panel
It's used for display of a page elements' structure, and it shows the work with elements.
"Properties" panel
It's used for display of a page elements' structure, and it shows the work with elements.
Read more
Command panel, Elements panel and Properties panel
Command panel
It’s used for selection of parameters and publishing of a ready document.
"Elements/Layers" panel
It's used for display of a page elements' structure, and it shows the work with elements.
"Properties" panel
It's used for display of a page elements' structure, and it shows the work with elements.
Read more
Layers / Elements panel
This panel is used for display of a page elements' structure, and it shows the work with elements.
It contains 2 tabs:
Elements - it displays a list of all elements and their types or variations also. Highlighting any element, you can set appropriate parameters 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.
Read more
It contains 2 tabs:
Elements - it displays a list of all elements and their types or variations also. Highlighting any element, you can set appropriate parameters 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.
Read more
Properties panel
This panel allows to set parameters for an entire theme ("Theme" element) or adjust parameters for each theme element separately.
Depending on the element chosen, the following parameters may be set:
- Link - It’s used for links creation. If this property is not empty, the element selected will be displayed as a link.
- CSS name - It’s used to specify a CSS class name of an element.
- Image - It set quality, image type, and text extraction format for publishing of element’s graphic component and autonaming of these files by default too.
- Margin - It's used to define the space around elements (from top, from top and bottom)
Read more
Depending on the element chosen, the following parameters may be set:
- Link - It’s used for links creation. If this property is not empty, the element selected will be displayed as a link.
- CSS name - It’s used to specify a CSS class name of an element.
- Image - It set quality, image type, and text extraction format for publishing of element’s graphic component and autonaming of these files by default too.
- Margin - It's used to define the space around elements (from top, from top and bottom)
Read more
The Canvas
The main part of plugin's working area.
Command panel
A part of the Side panel
This panel is used to fulfill the following basic activities with a PSD template:
Creation of a new PSD template and Switch to the Publish Editor
To create a new PSD template, you are to set the parameters required at "Layout and grid blocks sizes" panel and press the "Create layout" button.
A part of the Side panel
This panel is used to fulfill the following basic activities with a PSD template:
Creation of a new PSD template and Switch to the Publish Editor
To create a new PSD template, you are to set the parameters required at "Layout and grid blocks sizes" panel and press the "Create layout" button.
Properties panel
A part of the Side panel
This panel is used to specify a layout grid and set parameters for each grid block.
To do that, you are to select an appropriate layout grid from the dropdown list and then specify the parameters required opposite each grid block in the list.
A part of the Side panel
This panel is used to specify a layout grid and set parameters for each grid block.
To do that, you are to select an appropriate layout grid from the dropdown list and then specify the parameters required opposite each grid block in the list.
Elements / widgets panel
A part of the Side panel
This panel is used to display elements and their statuses.
To add or remove elements, use the “Add” (+) or “Remove” (x) menu respectively. Or check each element manually checking / unchecking the checkboxes.
A part of the Side panel
This panel is used to display elements and their statuses.
To add or remove elements, use the “Add” (+) or “Remove” (x) menu respectively. Or check each element manually checking / unchecking the checkboxes.
Layout Editor
Layout Editor is a part of Divine Elemente that helps to specify a layout grid‘s type and its parameters for an open PSD template and also to create a new PSD template on the basis of the data indicated.
Thus, with the help of Layout Editor you can:
- Create a website layout and edit sizes of the website's (theme's) grid blocks
- Add elements for blank PSD creation and fasten theme / website development
- Update (add / remove) elements from a theme / website
So, Layout Editor simplifies layout development and automates further work in Publish Editor.
Read more
Thus, with the help of Layout Editor you can:
- Create a website layout and edit sizes of the website's (theme's) grid blocks
- Add elements for blank PSD creation and fasten theme / website development
- Update (add / remove) elements from a theme / website
So, Layout Editor simplifies layout development and automates further work in Publish Editor.
Read more
Menu
"File" menu:
Allows to save a PSD document (its copy) with the current page settings, undo the last step and quit the plugin.
"Settings" menu:
Allows to change interface language, adjust main parameters of plugin's work.
"View" menu:
Allows to display a layout grid and elements assigned.
"Help" menu:
Allows to look through documentation/video, product's license, and also learn about a new version release of the current edition.
Read more
Allows to save a PSD document (its copy) with the current page settings, undo the last step and quit the plugin.
"Settings" menu:
Allows to change interface language, adjust main parameters of plugin's work.
"View" menu:
Allows to display a layout grid and elements assigned.
"Help" menu:
Allows to look through documentation/video, product's license, and also learn about a new version release of the current edition.
Read more
Command panel
This panel is used to fulfill the following basic operations with a PSD template:
All changes, made in Layout Editor (layout size, grid blocks sizes, available elements, etc.), are applied to a PSD template at once and will be used in the Publish Editor.
Read more
Creation of a new PSD template
It's used for preparation and creation of a new PSD template in accordance with data in Layout Editor. At that, layers for each element appear in a separate group named as this element.Switch to the Publish Editor
To convert a PSD template into a ready web page (theme for CMS), you are to switch to the Publish Editor. There is a "Publish" tab on the side panel for this purpose.All changes, made in Layout Editor (layout size, grid blocks sizes, available elements, etc.), are applied to a PSD template at once and will be used in the Publish Editor.
Read more
Layout and grid blocks sizes
This panel is used to specify a layout grid and set parameters for each grid block.
To do that, select an appropriate layout grid from the dropdown list and then specify parameters opposite each grid block in the list.
The following parameters can be adjusted in this panel:
Max size - It sets a size of a whole PSD template.
Content size - It sets a page body’s size (without sides).
Grid block size - It sets sizes of an appropriate grid block (e.g. Header, Footer, Post, Sidebar etc.).
Read more
To do that, select an appropriate layout grid from the dropdown list and then specify parameters opposite each grid block in the list.
The following parameters can be adjusted in this panel:
Max size - It sets a size of a whole PSD template.
Content size - It sets a page body’s size (without sides).
Grid block size - It sets sizes of an appropriate grid block (e.g. Header, Footer, Post, Sidebar etc.).
Read more
Elements panel
This panel is used for display of elements and their statuses.
The panel consists of two parts:
- Mass 'Add (+)', 'Remove (x)' and 'Show' elements filter
- Elements list.
It is used to display all elements list in accordance with the 'Show' filter and gives you an opportunity to add / remove elements that you are going to work with in Adobe Photoshop.
Read more
The panel consists of two parts:
- Mass 'Add (+)', 'Remove (x)' and 'Show' elements filter
- Elements list.
It is used to display all elements list in accordance with the 'Show' filter and gives you an opportunity to add / remove elements that you are going to work with in Adobe Photoshop.
Read more
The Canvas