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.
List of Elements
On the image below you will find the all necessary elements for the WordPress template.
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.
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
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
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.
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.
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.
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.
Related Guides and Tutorials: