How to Create a Website PSD Template

How to Create a Website PSD Template by Dmitriy, Divine Elemente Team | |

There is a new functionality, called “Create new PSD web template”, available in the Layout Editor workflow of Divine Elemente v0.9. It gives the designer an opportunity to arrange elements very quickly as layers and groups.

At new PSD web template creation, all theme / web page’s elements are created as separate groups and named in a special way (we name such kind groups - PSD hints - examples: ‘Link’, ‘Logo’, ‘Text’, ‘Sidebar’, etc.) for their further auto assignment in the Publish Editor.

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

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

Read more about the Layout Editor, the Publish Editor and PSD hints - Speeding up of publishing time.


Step-by-step process of a new PSD web template creation

Step 1. Layout Editor launch (methods of its launching).

The Layout Editor can be launched in two working modes: creation or updating of a template.

Methods of launching Layout Editor

You can launch the Layout Editor in the mode of a new template creation by the following methods:

If Adobe Photoshop has not been launched yet on your computer, you can launch the Layout Editor from the “Start > Divine > Launch Divine Elemente” menu. At that, Photoshop is launched and the quick start window opens at once. Click on the "Create a blog layout" button.

If Adobe Photoshop has already been launched on your computer, you can launch the Layout Editor from the “Elemente > Quick Launch > Create a blog layout” menu.

Step 2. Setting of a layout grid and page’s common parameters

To set layout grid, you can use the layout and grid blocks size panel. Select an appropriate layout grid from the dropdown list and then set parameters opposite each grid block in the list.

Layout grid and its blocks sizes. Layout grid setting

Layout grid and its blocks sizes. Layout grid setting

To set parameters for each grid block on canvas, point out exact sizes of layout by indicating numerical values for each grid block (A), or drag their boundaries on canvas by mouse cursor (B).

Change of layout grid's parameters in the Layout Editor

Change of layout grid's parameters in the Layout Editor

Step 3. Addition of elements list and their display on canvas

In order groups and layers of each element to be prepared in a new PSD web template, they are to be indicated in the Layout Editor.

Elements panel. Elements addition

Elements panel: Elements addition

You can do that right in the Elements panel by checking required elements in the list. At that, each marked element will be displayed on the canvas immediately.

The Layout Editor. Ways to display elements on canvas

The Layout Editor: Ways to display elements on canvas

Elements can be displayed in two ways on canvas (Ctrl + G):

  • as a list of elements
  • as a schematic display of elements

Step 4. New PSD web template creation

After all parameters have been set and all required elements have been marked, the next step to take is a new PSD web template creation.

The Layout Editor. Creation of a new PSD web template

The Layout Editor: Creation of a new PSD web template

To do that, click on the “Create layout” button in the Command panel. As a result, a new blank PSD web template is created, and you will be offered to move to Adobe Photoshop for the further work with your PSD web template.

Step 5. PSD web template design.

The final step of a new PSD web template creation is its design. Here everything depends on your design skills and inspiration.

The Layout Editor. Best practices

The Layout Editor: Best practices

However, to make your PSD web template’s work smoother in Divine Elemente, we strongly recommend you to get acquainted with the “Best practices” guide.


Conclusion

You have just learned about a new functionality of the Layout Editor introduced in Divine Elemente v0.9. We ahve taken you through a step-by-step process on how to create PSD web template, introducing you to an  absolutely simple and exciting approach to web design with the help of Divine Elemente.


PSD Hints, Elements And Best Practices

PSD hints, elements and best practices PSD hints, elements and best practices


Related Guides and Tutorials

Read More »

Layout Editor

Layout Editor by Dmitriy, Divine Elemente Team | |
What the Layout Editor is and how it can be used in Divine Elemente for the website layout creation. LE interface: canvas and panels with detailed description, and basic workflow with elements are considered in this guide.

Also recomended to read: Interface of Divine Elemente, PSD hints - Speeding up of publishing time, Create website in Photoshop, Update of a current PSD template for Divine Elemente

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

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:


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

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

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

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

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

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

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

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.

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

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

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

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.

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.

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
Read More »

Elements

Elements by Dmitriy, Divine Elemente Team | |
Website elements in Divine Elemente: how and where they can be used, added and assigned; elements definition, types and statuses, and essential information on plugin’s extensions are considered in this guide.

Related: Layout Editor, PSD hints - Speeding up of publishing time, Publish Editor, Properties
[divineAds]

We’d like to offer you the easiest way of elements definition (to our mind, of course):
Elements are the basis of the website creation (they are like bricks).

Element can be described best as a container which carries all necessary properties, position of an element, styles, functionality for a web page / theme objects like texts, links, buttons, images, etc.

Example: Blue button with rounded corners in the Header block converted to HTML, CSS code is clear for browser.

The main task of elements is to collect as many data from a PSD as it's possible or user input (in the Properties panel) and convert them to understandable and valid format for a browser and CMS (Content Management System).

The main task of elements is to collect as many data from a PSD as it's possible or user input (in the Properties panel) and convert them to understandable and valid format for a browser and CMS (Content Management System).

So, the elements definition is already known now, but before you can start the work with elements, firstly you should add them to Divine Elemente. What it is all for and what methods of elements' addition exist can be read below.

List of Elements

On the image below you will find the all necessary elements for the WordPress template.

PSD hints, elements and best practices

List of elements and base instructions (Click on image to enlarge)

The PSD template with all these instructions is included with the latest build of Divine Elemente plugin.

Elements addition

In order Divine Elemente can define what elements should be created in a new template (by the ‘Create new PSD’ button pressing), firstly, you are to add them all in the Layout Editor.

Elements addition by predefined sets
(Recommended for beginners)

Using this method, you are just to click "+" (Add) menu in the elements panel and then specify exactly in the dropdown menu what you need to add:

  • Add dynamic (CMS) elements - 'Post Titles', 'Post Contents', 'Post Dates', etc.
  • Add static (HTML) elements - you can add 'Image', 'Link', 'Text' elements many times.
  • Add style (H1, text...) elements - addition of styles for <h1>, <p>, <a> tags, etc.
  • Add all elements - add all page elements that are available.
Elements addition. Addition by predefined sets of elements

Elements addition. Addition by predefined sets of elements

In this method each list adds elements according to the element's type.

One-by-one elements addition
(Recommended for Advanced users)

Each element can also be added separately. This method is required for more exact defining of the website elements required.

Add elements by choosing one of the following ways:

One-by-one elements addition

One-by-one elements addition

After elements are added, they are displayed in a new PSD template (by the ‘Create new PSD’ button pressing in the Layout Editor) and can be assigned in the Publish Editor, so you are ready to continue the work with elements.

Elements assignment

Assigning website elements in Divine Elemente, you give a set of properties to the element, formed from the chosen layers or a group of layers of a PSD template. Properties of the assigned elements can also be changed any time.
The element assigned is a container with input from a PSD / user, which converts its properties to understandable for the browser format.

The element assigned is a container with input from a PSD / user, which converts its properties to understandable for the browser format.

Main workflows of elements assignment

We’d like to offer users more flexibility in choosing of the methods for elements assignment, so please find the main ways to work with elements below:

Choose the required method for yourself: Comparison of main workflows for elements assignment

Choose the required method for yourself: Comparison of main workflows for elements assignment.

As you have just found out, each method has its advantages and disadvantages:

The "Manual (One-by-One)" method is the easiest and the most understandable method and can be useful for those who are not familiar well with Divine Elemente, but have good knowledge of Adobe Photoshop. All you have to do is to point a group of PSD layer(s) on the canvas and assign an element by right clicking on it. After that, select behavior for it: 'Link', 'Image', 'Logo', etc.

Get more details on this method and learn how to create a template for WordPress with Divine Elemente.

MUST KNOW: Divine Elemente doesn’t rearrange your PSD with new elements assigned (done one-by-one on the canvas) after you publish your theme in the Publish Editor!!! It only saves grid block sizes (as slices in the PSD, removing the old ones) and all properties (resetting the old properties states)! If you want to use the already assigned elements, use the PSD hints method instead!

The "PSD hints" method can be useful for themes and templates' designers and developers who want to have a template with the already assigned elements or / and submit their templates to our Marketplace and not only there. Entering groups’ names in a PSD, there is no necessity to assign elements one-by-one in this template at each launch of Divine Elemente.

More details on this method can be found in the PSD hints.

The "From Template" method is available in Divine Elemente only. It allows a beginner who may have no deep knowledge of Adobe Photoshop, HTML, CMS, and even Divine Elemente workflows to make several changes in a template in Adobe Photoshop and get a ready website or a blog for several minutes!

Get more details on this method and learn how to create WordPress themes.

Elements status

In order to make the work of elements assignment even easier for a user, few statuses of elements have been created:
Elements status description

Elements status description

Assigned element is an element with graphics assigned from a PSD. It is displayed in browser in the same way as in a PSD. In general, all WP elements must be assigned in order website’s theme displays correctly, but it's not compulsory.

Element with error - is an element that should be edited in a PSD to eliminate its error state. And it'll not be published. There is a reason for the error, and what should be corrected is shown in the `Properties` panel.

Element not added / not assigned - is a hidden or removed element. And it'll not be published.

You can also notice these icons in the Publish Editor / Layout Editor - their icons are self-explanatory, but here are their descriptions:

Icons used in the Publish Editor and their description

Icons used in the Publish Editor and their description

Types of elements

As Divine Elemente plugin was created not only for HTML web pages publishing but for the publishing on various CMS, there are types of elements, which appear in Divine Elemente:
Types of elements: static element - for HTML, dynamic element - for a blog, etc. and style element - for the content's design in the blog, etc.

Types of elements: static element - for HTML, dynamic element - for a blog, etc. and style element - for the content's design in the blog, etc.

Static (HTML) elements can be usually added any time you want (for example, you can make even 100 links on the page). In the first place, they are necessary to fill a page with design and graphics as static elements will not be dynamically changed by CMS - e.g. 'Logo', 'Link', 'Text', 'Images', 'Social icons', etc.

Dynamic elements usually can be added just one time. Such website elements are used for interaction with a website visitor; good examples are a 'Blog post', 'Date', 'Author', etc. These elements often have optional unique properties.

Style elements can be added just one time. They are used to design HTML tags, such as H1-H6, which styles are used at page content’s editing or presenting in dynamic elements - e.g. in blog post or comments.

Elements properties: common and unique

Almost all elements have common properties and several of them elements ('Date', 'Author', 'Comments', 'Frontend Label', 'Favicon', 'Billboard slides', 'Avatar') have also unique properties.
Unique elements properties.

Unique elements properties.

More details on element’s unique and common properties can be found in the Detailed elements properties.

Best Practices

Divine Elemente gives great possibilities of publishing on image formats, functionalities, etc., and following the simple standards of design in Adobe Photoshop, understanding browsers features, etc., you may achieve perfect results.
In order your theme looks qualitative, you are to take care of your PSD template’s quality.

In order your theme looks qualitative, you are to take care of your PSD template’s quality.

Simple advices on how to reach astonishing results with Divine Elemente can be found in the Best Practices.

Related Guides and Tutorials:

External Links:

Read More »

Element’s Properties

Element’s Properties by Dmitriy, Divine Elemente Team | |

Web elements’ settings required for designers and developers working with Divine Elemente. Theme and web elements properties that make the whole publishing process more accurate and attractive are considered in this guide. Related: Elements, Detailed Elements Properties, Publish Editor

[divineAds]

Each element has its own set of properties and styles, such as a background image, a link to another page, a font family, a font size, fx styles, etc.

Properties overview

Properties overview

Majority of elements properties (styles, bg image, fonts, etc.) are read off from a PSD template automatically at element’s assignment by Divine Elemente.

However, since not the whole set of properties can be read off from Adobe Photoshop, several ones (links, style's name, graphic parameters, margins) are to be indicated manually in the Publish Editor.

When you save a PSD template at Divine Elemente v0.9 (the ‘File > Save to current PSD template’ menu), all the elements’ properties are saved in a PSD file and will be recovered the next downloading of this template.

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

Theme properties

‘Theme / Website’ element defines a set of properties for all elements on theme or website and has additional properties and panels, such as:

Try to select the ‘Theme’ element in the Elements panel, and you’ll be able to set elements properties in the following way in the Properties one:

Theme properties

Theme properties

A. Elements’ name.
It shows an element’s name, which properties are displayed in the Properties panel.
E. Background design properties.
They allow to determine the method of background's gaps filling in case the content breaks boundaries in height, set in the template.
B. SEO / META properties.
They are used to improve the volume or quality of the traffic to a website or a web page (such as a blog) from search engines.
F. ALTs autonaming properties.
They are used to specify an alternative text (alt text) that is to be rendered when the element, to which it is applied, cannot be rendered.
C. Image properties.
They set image’s quality, type, and text extraction format for publishing of element’s graphic component and autonaming of these files by default too.
J. CSS autonaming properties.
They are used to specify a CSS class name of an element.
D. Margins properties.
They are used to define the space around elements (from top, from top and bottom)

Note: Properties set for ‘Theme’ element’s autonaming are applied for the same properties of all elements.

SEO / META panel

SEO ( Search Engine Optimization ) properties are used to improve the volume or quality of traffic to a website or a web page (such as a blog) from search engines.

SEO / Meta properties. Use of meta information on a page

SEO / Meta properties. Use of meta information on a page

A. Header HTML (for advanced users):
is an insertion of the additional page code (e.g. JS scripts) in the <Header> section.
D. Title (only for HTML pages):
It determines a page’s title (Tag <Title>). And it’s used at HTML page’s creation only.
B. Footer HTML (for advanced users):
is an insertion of the additional page code (e.g. JS scripts) in the <Footer> section.
E. Meta tag 'Keywords'
This tag describes the keywords linked to your web page. This is one of the most important meta tags that you should use.
C. Google Analytics ID:
is unique ID for Google Analytics account.
F. Meta tag 'Description'
It allows to add a short page description. In order you can use the tag effectively, write this kind description using words and keywords of your page.

Set elements properties mentioned above and you’ll be able to improve your website's place in search engines' ratings greatly.

Hint: Don't forget the fact that during website's optimization you create a website for users, not only for search engines!

More details on Custom code addition to a WordPress theme.

Page background design properties

Page background is merged layers in Photoshop, which were not included in elements’ graphics. In other words, if you remove all elements from the template, everything that remains on the page will be... a page background. Simple enough?

These elements properties are responsible for various types of the page background:

Parameters of stretch and background filling

Parameters of stretch and background filling

A. Stretching of grid blocks.
It allows to set parameters of stretch for grid blocks (Header, Content, Footer).
E. BG (Background) Type.
Optional parameter for filling of the page background that determines background's behaviour at vertical page's stretching.
B. Full Page BG (Background) Color.
Page background's color or Body color. By default this parameter adjusts more appropriate color for your page.
F. Stretch: Distance from top.
It sets a top point of the background area, which will be used for the background's gaps filling.
C. Stretch: Height of tile.
It allows to set the background area’s height that will be used for background's gaps filling.
J. BG (Background): Fade vertically.
It’s used for vertical smooth image's transition to the background's color. It can be applied to the Header or Footer grid blocks.
D. BG (Background): Fade from sides.
It’s used for smooth image's transition to the background's color from sides. It can be applied to any of grid blocks.

These parameters allow to determine the method of background's gaps filling in case the content breaks boundaries in height, set in the template.

More details can be found in the Creative Background Design with Stretch guide.

Common Properties

Common properties are properties available for almost all elements. They are ‘Link’, ‘ALT’, ‘CSS’, ‘Image’, ‘Margin’.
Common elements properties

Common elements properties

A. Element’s behaviour
It’s used to display an element’s name and offers a chance to change the current value from the dropdown list.
E. Link
It’s used for links creation. If this property is not empty, the element selected will be displayed as a link.
B. ALT text
It is used to specify an alternative text (alt text) that is to be rendered when the element, to which it is applied, cannot be rendered.
F. Image Properties
They set image’s quality, type, and text extraction format for publishing of element’s graphic component and autonaming of these files by default too.
C. Content
This property notifies that this element’s content can be edited in CMS. More details can be found in the Editable content guide.
J. CSS text
It’s used to specify a CSS class name of an element.
D. Margin property
They are used to define the space around elements (from top, from top and bottom).

ALT, CSS, Image, Margin Autonaming properties

Autonaming is an automatic defining of names for CSS classes, ALT text, image file's name, etc. It consists of its data (element’s name, layer’s name, ID number) and a separator between these data too.

Autonaming settings

Autonaming settings

A. Stretching of grid blocks.
It allows to set parameters of vertical stretch for grid blocks (Header, Content, Footer).
E. BG (Background) Type.
Optional parameter for filling of the page background that determines background's behaviour at vertical page's stretching.
B. Header BG (Background) Color.
Background color for the Header grid block. By default this parameter sets more appropriate color for your page.
F. Stretch: Distance (Space) from top.
It sets a top point of the background area, which will be used for the background's gaps filling.
C. Stretch: Height of tile.
It allows to set the background area’s height that will be used for background's gaps filling.
J. BG (Background): Fade vertically.
It’s used for vertical smooth image's transition to the background's color. It can be applied to the Header or Footer grid blocks.
D. BG (Background): Fade from sides.
It’s used for smooth image's transition to the background's color from sides. It can be applied to any of grid blocks.

Autonaming rules

Autonaming is carried out in the following way:
'Elements name' + Separator + 'Layer name' + Separator + 'ID number'

That order is used for display of name’s parts (CSS, ALT, or Image).
Separator will be displayed only between two chosen parts.

Example: If you indicate ‘Element name’ and ‘ID number’ with ‘Underscore’ separator in the autoname CSS properties of the ‘Text’ element, you’ll get CSS name - ‘Text_n150’.

Margin property

Margin property allows to calculate an indent for the selected element’s sides automatically.

Common properties. Margin properties

Common properties. Margin properties

There are 2 options of the margin property at the moment:

  • From left, top
  • From left, top and bottom

Info: Indent is a space from the current element’s boundary to the inner boundary of its paternal element.

Image quality and compression

You can specify image's quality and compression by default for all elements (by indicating properties for the ‘Theme’ element) or for each element separately, clicking on ‘Image Properties’ button in the Properties panel and selecting required settings in the ‘Image type and quality’ section panel.

Image properties. Here: Image quality, format and compression.

Image properties. Here: Image quality, format and compression.

A. Export (publish) text as ...
option that allows choosing the way of the element text’s display on the page (Text, Image or Text + Image).
C. Image’s quality
option that allows setting the quality of the element’s image displayed on the page.
B. Additional properties of the image’s format
option that allows setting such properties as image quality for JPG, transparency for GIF and PNG images.

Image's quality:

  • JPG - is a format with quality loss that is ideal for "square" photos.
  • PNG8 or PNG24 - is a format with 256 or millions of colors, with true transparency or not. That is ideal for complex modern templates.
  • GIF - is a format with 256 colors, with or without transparency. That is recommended for plain graphics, for example: one-color background.

Additional properties of the image’s format:

  • for JPG - Image quality - property that allows to set JPEG image quality from 0 (Low) to 100% (Very High).
  • for GIF - Simple transparency - property that allows to publish a GIF image with 1bit transparency support.
  • for PNG - True transparency - property that allows to publish a PNG24 image with true 8bit transparency support.

Newbie?: Which Graphic File Format Is Best To Use When?

Hint: Each element can be displayed as a text, image or text + image on the page. Text + image is a way of the element’s display that is found most often, in other words, an element consists of a background image and a text over it. This way of the element’s display is convenient for creation of text blocks with an icon to the left or for decorative underline to a text, gouache stains, etc.

Hint: If an element has a text layer and its outline and effects are not supported by a browser (e.g. advertising text written to circle - it’s called a warped text), than must be published as an image.

Remember: Using any given format (GIF, PNG24 and JPG), please remember that browsers don’t support rendering modes (overlay, multiply etc.) like in Photoshop. So, all element’s layers merge in one GIF / PNG / JPG file taking into account images of lower layers and page background.

Image properties description. Image autonaming, quality and compression

Image properties description. Image autonaming, quality and compression

Remember: Transparency of a layer (or a group of layers merged to an image) will be the same as in Photoshop, if all layers, FX and styles of an elements will be ‘Normal’ in the rendering mode! Otherwise, a background image of an element will be published with slight distortion:

  • element’s layers will be merged in one PNG24 image taking into account images of lower layers and page background.
  • transparency of all merged layers will differ from the original one.

Unique elements properties

Majority of elements have a similar set of properties (ALT, CSS, Link, Image, etc.). However, several elements (‘Label’, ‘Favicon’, ‘Billboard’, ‘Post separator’, ‘Avatar’, ‘Date’, ‘Author’, ‘Counters’) have unique properties too that can be seen in the example below:
Unique elements properties description

Unique elements properties description

More details on arrangement, properties and behaviour of each element can be found in the Detailed elements properties guide.

Conclusion

Thus, you have just learned about theme properties in details, paying attention to SEO, background design, common and autonaming properties, and elements properties in general, and can set elements properties having in mind all their features.

PSD Hints, Elements And Best Practices

PSD hints, elements and best practices PSD hints, elements and best practices


Related Guides and Tutorials:

  1. Elements
  2. Custom code addition to a WordPress theme
  3. Creative Background Design with Stretch
  4. Editable Content
  5. Detailed Elements Properties

External links

  1. Wikipedia: SEO
  2. Wikipedia: Keywords
  3. Wikipedia: Description
  4. Google Analytics
  5. Which Graphic File Format Is Best To Use When?
Read More »

Detailed Elements Properties

Detailed Elements Properties by Dmitriy, Divine Elemente Team | |
What common, autonaming and unique website elements properties can be used in Divine Elemente plugin. Elements list, arrangement and description of elements properties in details depending on the element type are considered in this guide.

Related: Quick start guide, Layout Editor, Publish Editor
[divineAds]

Each element in Divine Elemente usually has its own settings.
Common properties (Link, Alt, CSS, Image, Margins) are used for the majority of elements. At the same time, several elements have their optional unique properties.

Element properties

Element properties

More details on elements properties can be found in the Properties guide.

Each type and description of elements properties are considered in details below.


Elements types and their properties

Elements are the basis of website creation (they are like bricks). They can be described best as a container, which carries all necessary properties, a position of an element, styles, functionality for a web page / theme objects like texts, links, buttons, images, etc. Read more about elements.

Types of elements

The following three types of elements available for use in Divine Elemente plugin at the moment are:

  • Static elements - for HTML (‘Logo’, ‘Link’, ‘Text’, ‘Images’, ‘Social Icons’, etc.),
  • Dynamic elements - for a blog (‘Blog Post’, ‘Date’, ‘Author’, etc.),
  • Style elements - for content's design in the blog (‘H1’-‘H6’, ‘Texts’, ‘Links’).

Static elements

Static (HTML) elements can be usually added any time you want (for example, you can make even 100 links on the page when it’s required). In the first place, they are necessary for the page filling with design and graphics as static elements will not be dynamically changed by CMS - e.g. ‘Logo’, ‘Link’, ‘Text’, ‘Images’, ‘Social Icons’, etc.

The following Static elements available for use in Divine Elemente now are: ‘Logo’, ‘Text’, ‘Link’, ‘Image’, ‘RSS’, ‘Twitter’, ‘Facebook’ and ‘Buzz’.

Element properties. Static elements

Element properties. Static elements

Static elements can be arranged in the Header and the Footer, and they have сommon properties only. These elements properties descriptions are offered below:

  • (A) Link - is used for the links creation. If this property is not empty, the element selected will be displayed as a link.
  • (B) Image - sets the image’s quality, type, and text extraction format for the publishing of element’s graphic component and autonaming of these files by default too.
  • (C) CSS name - is used to specify a CSS class name of an element.
  • (D) Alt text - is used to specify an alternative text (alt text) that is to be rendered when the element, to which it is applied, cannot be rendered.
  • (E) Content - notifies that this element’s content can be edited in CMS.

Each static element may be published not only as a text but as an image too, or a text + image on the element’s background (for example: an icon near the link, button, decorative underlining of a text, etc.).

Dynamic elements

Dynamic elements usually can be added just one time, but their instances are duplicated many times if required by CMS (good examples are ‘Post Title’, ‘Date’, ‘Author’, etc.). These elements often have optional unique properties too.

Here is a list of all dynamic elements divided into groups (widgets) according to their functional intended purpose, which are in use in Divine Elemente plugin at the moment:

Search Sidebar Post Comments
‘Input’
‘Button’
‘Titles’
‘Links’
‘Content’
‘Titles’
‘Dates’
‘Authors’
‘Content’
‘Comments’ ‘Counters’
‘Details
‘Separators’
‘Titles’
‘Content’
‘Authors’
‘Dates’
‘Avatars’
Pagination Billboard Another
‘Previous’
‘Next’
‘Next’
‘Previous’
‘Slides’
‘Frontend Label’
‘Favicon’

Possible elements arrangement

  • Elements of the Search group can be arranged in the Header, the Footer and the Sidebar grid blocks.
  • Elements of the Sidebar group can be arranged in the Sidebar grid block only.
  • Elements of the Post, the Comments, the Reply, the Pagination groups can be arranged in one grid block only - Post (‘Content’).
  • Elements of the Billboard can be arranged in the Header and the Footer grid blocks.

Elements properties description

Almost all elements have common properties we already mentioned above. And one more property called Margin is added to this list for dynamic elements.

However, several elements (‘Date’, ’Author’, ‘Comments’, ‘ Frontend Label’, ‘Favicon’, ‘Billboard slides’, ‘Avatar’) have also unique properties. Each of these elements and description of elements properties are considered below.

‘Date’, ‘Author’, ‘Comments’ elements

A possible way of text formatting for each of the ‘Date’, ‘Author’, ‘Comments’ elements may be selected in their special dropdown lists.

For example: you can choose how to display a date at the website: shortly like “12 Sep”, or formally like “09/12/10”, or “12” (on the upper line) and “Sep” (on the lower line) near the post.

Dynamic elements. The ‘Author’ element’s guide.

Dynamic elements. The ‘Author’ element’s guide.

More details on these elements properties description can be found in the “Elements Types: Date, Author and Comments” guide.

‘Frontend Label’ element

This element is used for display of the Editable content panel.

Note: This element cannot be assigned from the canvas!

The ’Frontend Label’ element’s properties. Animate options

The ’Frontend Label’ element’s properties. Animate options

Besides common properties, the ‘Frontend Label’ element has two more unique properties:

  • Align is a property that shows the arrangement of this element on the page
    • Top left corner
    • Top right corner
  • Animate is a property that sets an effect of concealment and display of the element on the page.

More details on the Editable content feature can be found in the ‘Editable content’ guide

‘Favicon’ element

‘Favicon’ is a special icon that is displayed near your website URL in the browser’s address line, favorites, search results, or in specific resources (folders, social projects).

‘Favicon’ element

‘Favicon’ element

Note: This element can be assigned from the Footer grid block only!

Just the Image property is available for this element from common properties.

At publishing, a graphic element is not taken into account in the page background and will be reduced to 16x16 size automatically.

‘Slides’ element

‘Slides’ is one of the Billboard widget’s elements. This element helps to assign slides, which can be switched by next / previous elements. Using several layers in Adobe Photoshop and assigning them in the special way, you can make a beautiful JS slider of your portfolio, photos, etc.

Beside common properties, there is one more property added for the ‘Slides’ element - Animate.

Dynamic elements. The ‘Slides’ element’s properties.

Dynamic elements. The ‘Slides’ element’s properties.

With the help of this property you can set parameters for slides changing:

  • select the Animate effect,
  • set a duration for the slides changing,
  • set a frame rate in the slides changing.

More details on ‘Slides’ can be found in the “Billboard” guide.

‘Avatar’ element

‘Avatar’ is one of the Comments widget’s elements. It is a decorative base for an avatar (human face who posted a comment in a blog) in Divine Elemente.

Note: You can change a base for an avatar only. You cannot change the avatar itself because it is formed in the CMS dynamically.

Besides common properties, this element has its unique option - Avatar.

Dynamic elements. The ‘Avatar’ element’s properties.

Dynamic elements. The ‘Avatar’ element’s properties.

You can set common properties with this option:

  • left and upper indents in the element,
  • customer image’s size,
  • or choose values by default.

Style elements

Style elements can be added just one time. They are used to design HTML tags, such as ‘H1’-’H6’, styles of which will be used at page content’s editing or presenting in dynamic elements - e.g. in Blog Post or Comments.

Elements can be arranged in the Sidebar and the Post grid blocks.

All style elements have such common properties, as Alt text, CSS name and Margin.

More details on elements’ description and their work in Divine Elemente can be found in the ‘Elements’ guide.


Conclusion

Thus, you have just learnt that each element that is in use in Divine Elemente plugin may have common, autonaming, and unique properties according to its type, and you’ve also found the description of elements properties in this guide. So, you know exactly when each element can be added, how it should be arranged, and what element properties you can set for it.

PSD Hints, Elements And Best Practices

PSD hints, elements and best practices PSD hints, elements and best practices


Related Guides and Tutorials:

Read More »