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 »

Elements Types: Date, Author and Comments

Elements Types: Date, Author and Comments by Dmitriy, Divine Elemente Team | |
Want to change appearance of the ‘Date’, ‘Author’, ‘Comments’ elements at your website? Learn about elements formatting attributes and their use in Divine Elemente following this guide.

Also recomended to read: How to create a template for WordPress, Layout Editor, Publish Editor
[divineAds]

The 'Date', 'Comments', 'Author' elements have optional parameters - custom formatting attributes:

The 'Date', 'Comments', 'Author' elements examples

The 'Date', 'Comments', 'Author' elements examples.

These parameters are used for the text formatting of the 'Date', 'Comments', 'Author' elements in the way you’d like to see it, and for their dynamic formatting in each post, comments, etc. too (e.g. "12 Oct 10", "12.10.10", "John Doe", "Author: John Doe", "172 Comments", "Comments: 172", etc.)

More details on each element’s formatting attributes can be found below.


Formatting attributes for 'Date'

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 your own custom date format and display a date 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’s 'Content'.

'Date' element’s custom formatting attributes

'Date' element’s custom formatting attributes.

The following attributes are taken into account while choosing a date format in WordPress CMS for the 'Date' element:

- Day - it is clear here: a day of the month - a number from 1 to 31.
- Month - it can be displayed both by a word and by a number, and in the following formats:
- - Full - full name for the month, e.g. "September", "October", etc.
- - Short - short month’s name, e.g. "Sep", "Oct", etc.
- - Num - numerical value of a month, e.g. "08", "09", etc.

- Year - it can be displayed as well as a month and in the following ways of custom date format:
- - Full - the year in four digits, e.g. "2009", "2010", etc.
- - Short - the year’s last two digits, e.g. "09", "10", etc.

- "Date" is a word that can be placed near digits in order to make it clear that they concern ‘Date’.

And there are also:

- symbols, which are used to separate items, - "[Space]", " \ ", " / ", " . ", " : ", " - ", "[Enter]". They are applied for date format in WordPress to show digits and letters in the most convenient and beautiful way.

Examples of 'Date' format

Examples of 'Date' format.


Formatting attributes - 'Author'

The following attributes are taken into account while dynamic formatting of the 'Author' element:
'Author' element’s custom formatting attributes

'Author' element’s custom formatting attributes.

- 'Name' and 'Last name' are absolutely obvious fields, and they are required to display all information about the author.

- 'Author' is, as well as in date format in WordPress CMS, a word that can be placed near name or last name fields in order to make it clear that this, for example, 'Duke Nukem' is the author.

Symbols, which are used to separate items, are also here "[Space]", " - ", " : ", "[Enter]".

Examples of 'Author' format

Examples of 'Author' format.


Formatting attributes - 'Comments'

The following attributes are taken into account while dynamic formatting of the 'Comments' element:
'Comments' element’s custom formatting attributes

'Comments' element’s custom formatting attributes.

- 'Number' ("17" in our example above) - shows quantity of comments. - "Comment(s)" - is a word placed near 'Number' in order to make it clear that "17" (in our case) concern 'Comment(s)'.

Symbols, which are applied to separate items, are here: "[Space]", " - ", " : ", "[Enter]".

Examples of 'Comment' format

Examples of 'Comment' format.


Custom formatting attributes use in Divine Elemente

In order to get a required text’s format of the 'Dates', 'Authors', 'Comments' elements, you are to follow just three simple steps:
Use of elements custom formatting attributes

Use of elements custom formatting attributes.

Step 1. Assign an element ('Date' or 'Comments' or 'Author').
Step 2. Select a required element on the canvas or Elements panel (in the side panel) and set custom formatting attributes in the 'Properties' panel.
Step 3. Publish a theme and activate it at a website.


Conclusion

So, you have just learned what optional parameters the ‘Date’, ‘Author’, ‘Comments’ elements have, and how custom formatting attributes can be used in Divine Elemente to give your website a required design.

PSD Hints, Elements And Best Practices

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

Read More »