Elements
Related: Layout Editor, PSD hints – Speeding up of publishing time, Publish Editor, Properties
- Elements addition
- Elements assignment
- Elements status
- Types of elements
- Elements properties: common and unique
- Best Practices
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).
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.
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.
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
In this method each list adds elements according to the element’s type.
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
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.
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.
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
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
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.
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.
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.
Simple advices on how to reach astonishing results with Divine Elemente can be found in the Best Practices.
Extensions: additional widgets, elements, etc.
In future updates, the elements / widgets list and Divine Elemente functionality will be extended greatly for the other CMS support, animation, galleries, slides, media, etc. in the format of downloadable Extensions (free or paid).
Extensions – Bookmark that page (on the left) and check it for updates or
Suggest ideas for Extensions – Shape the future by yourself.
Related Guides and Tutorials:
- Layout Editor
- Elements types: Date, Author and Comments
- Quick start guide
- Detailed Elements Properties
- Best practices
- Marketplace
External Links:
Trackbacks
DEPOSIT NOW CANCEL
[...] what theme elements are, what types they have and what they are used for can be found in the ‘Elements‘ [...]
[...] More details on PSD hints – Speeding up publishing time or Elements. [...]
[...] Set elements and their properties in Publish Editor [...]
[...] information about the elements and methods of their [...]