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 (grid blocks’ arrangement, their sizes and theme’s elements list) and also to create a new PSD template on the basis of the data indicated.

Layout Editor basic workflow

Thus, with the help of the Layout Editor you can:
– create a website layout and edit sizes of the grid blocks
– add elements for blank PSD creation and fasten theme / website development
– update (add / remove) elements from a theme / website

The principles of operation at the website, the Layout Editor and its interface description are considered below in this guide. But if you’d like to make something interesting in the LE, please look through the following tutorials:

• Create websites with Photoshop. (New PSD template creation)
• Update of a current PSD template for Divine Elemente

---

Layout Editor workflow

There are two working modes in the Layout Editor, which allow to:

– Create a new PSD template
– Update a current PSD template

Create websites with Photoshop.

Layout Editor gives a designer, who is going to create a website layout, an opportunity to arrange elements very quickly as layers and groups, which are identified automatically in the Divine Elemente’s Publish Editor, if they are named correctly (we name such kind groups – PSD hints – ex: ‘Link’, ‘Logo’, ‘Text’, etc.).

Creation of a basic PSD template with prepared layout grid and elements

There is a “Create new PSD template” button in the Command panel in this LE working mode. And after you press this button, a new blank PSD template is created, and you are offered to go to Adobe Photoshop for further work with the template.

More details on this mode can be found in Creation of a theme from a blank PSD and PSD hints guides.

Update of a current PSD template

In order Divine Elemente can convert your template correctly, you are to specify an accurate layout grid of the current PSD template and a list of elements, which are in use on this page. All of these can be done in the Layout Editor.

Update of a current PSD template

We recommend to study how to create WordPress themes easily and update current PSD template for Divine Elemente.

The following actions can be performed in this working mode in the Command panel:

– “Publish” tab (Switch to the Publish Editor) can help to update a template with the previous changes made and switch to the Publish Editor for further work with elements, setting their properties and theme’s publishing.

– Update PSD what allows to update a PSD template but the work is to be continued in the Layout Editor.

Limitations

There are several limitations in the website Layout Editor’s current functionality of 0.9 version. Here is a list of the most considerable ones:

1. Possibility to use 2-column layout grid only (with or without sides). Multi-column (1 and 3 column) mode is in the development stage yet.

2. A list of possible theme’s elements is prepared for WordPress CMS profile only. However, it will be enlarged greatly as additional CMSs are available or on our customers’ requests.

---

Layout Editor interface: canvas

Canvas is a main part of Divine Elemente interface. It also plays a significant role in the Layout Editor work. It’s used to display a layout grid and a list of elements, which are in use.

Page view in the Layout Editor. Layout grid and a list of theme elements

You can see below what a grid block is composed of in the Layout Editor.

Parts of a grid block in the Layout Editor

A. Grid block name. It opens a window with a list of elements.	B. Grid block parameters. It sets height and width of this grid block (px).
C. Elements count. It displays a number of elements in the grid block.	D. A list of elements. It displays elements, which were assigned in this grid block.

Set parameters for each grid block

To do that, point out exact sizes of layout’s each grid block by indicating numerical values for each one, or drag their boundaries on the canvas by mouse cursor.

Change of layout grid’s parameters in the Layout Editor

Swap nearby grid blocks (if applicable)

It may be necessary if you have suddenly decided to make a few changes in your layout design using website Layout Editor.

To do that, open Swap menu in the dropdown list and select a necessary item (as you can see on the picture below):

Swap menu. An example of grid blocks’ replacement

Add required elements / widgets’ list to each grid block.

To do that, you are to choose required elements in the appropriate list on the canvas or in the Elements panel (as you can see on the picture below):

Add required elements to each grid block

More details on what theme elements are, what types they have and what are they used for can be found in the Elements guide.

---

Layout Editor interface: side panel

A side panel is divided into three parts: a command panel, layout sizes, and elements panel.

Command panel

This panel is used to fulfill basic operations with a template, which are the following:

Creation of a new PSD template

A “Create layout” button (or ‘Update PSD’ if you launched LE with PSD)

It’s used for preparation and creation of a new PSD template in accordance with data indicated in the Layout Editor.

At that, layers for each element will be in a separate group named as this element (PSD hints), which is used for automatic elements assignment in Divine Elemente.

This eliminates the necessity to assign elements one-by-one at each Divine Elemente launch.

To create a template, you are to press a “Create PSD” button.

Command panel. Creation of a new PSD template.

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.

Defining of page elements’ list and elements assignment

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.

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.

Layout properties panel. Specify a layout grid, set parameters for each grid block

A. Max size of a PSD template It sets a size of a whole PSD template.	B. Layout grid selection It allows to switch between different layout types (with / without sides, 1-3 columns {in the future} ).
C. Content size It sets a page body’s size (without sides).	D. Grid block size It sets sizes of an appropriate grid block.

Elements panel

This panel is used for display of elements and their statuses.
You can add or remove elements for layout’s each grid block from here.

Side panel. Elements panel

The panel consists of two parts:

A. Mass ‘Add’, ‘Remove’ elements and ‘Show’ elements filter

Addition / removal / show of elements in accordance with their types.

Add (+) – is used for quick addition of a predefined elements list.

• Add elements to CMS theme (‘Post Text’, ‘Post Author’, ‘Date’, ‘Comments’, etc.)
• Add static elements (‘Image’, ‘Link’, ‘Text’)
• Add style elements (<h1>, <p>, <a>, etc.)
• Add all elements – it adds all available page elements

Remove (x) – is used for quick removal of a predefined elements list.

• Remove CMS theme elements (‘Post Text’, ‘Post Author’, ‘Date’, ‘Comments’, etc.)
• Remove static elements (‘Image’, ‘Link’, ‘Text’)
• Remove style elements (<h1>, <p>, <a>, etc.)
• Remove all elements – it removes all elements added to the page

Show – is used to display all elements in accordance with a chosen type (or status).

You have an opportunity to experiment with settings in order to understand what option from the settings’ list mentioned above can switch on or switch off.

B. Elements list

This part of the panel is used to display all elements list in accordance with the ‘Show’ filter and gives you an opportunity to add (or remove) elements that you are going to work with in Adobe Photoshop.

Elements list. Addition/ removal of elements in the Elements panel.

After you create a website layout as a blank PSD template, the ticked off elements (if added – they are blue-colored (A) ) are combined in elements’ groups in Adobe Photoshop with names, which correspond a PSD hint.

Using ticks (B) near elements, you can:

– add an element (pressing a tick near the element with grey icon)
– remove an element (pressing a tick near the element with blue icon)

More details on what theme elements are, what types they have and what are they used for can be find in the Elements guide.

---

Conclusion

Thus, you have just learned about the website Layout Editor work in Divine Elemente and its abilities and potential, which can be used for creating a unique design for your theme / website.

---

Related Guides and Tutorials

1. New PSD template creation
2. Update of a current PSD template for Divine Elemente
3. Creation of a theme from a blank PSD
4. PSD Hints – Speeding up of Publishing Time
5. Quick start guide
6. Elements