Вы находитесь на странице: 1из 241

Divine Elemente Documentation

The Divine Elemente documentation is divided into Getting started, Tutorials and Features guide
section for simple and convenient search of required information and useful advice about the plugin
and its work.

Anyone new to Divine Elemente should start with the Getting started guides. The basic workflow of
the plugin and its explanations can be easily found in this section. Additionally, its desirable that you
watch our short but very informative video tutorial about Divine Elemente work named Quick start
guide.

In case you already know the basic workflow of our plugin functioning, you can skip to the Tutorials
section and try your skills following our step-by-step instructions.

And the third section Features Guide is for more experienced users of Divine Elemente plugin. All
features and opportunities of our software are described there in details.
Contents

Introduction
Getting Started Guides
a. Divine Elemente Installation Process
b. Quick Start Guide
c. Best Practices
d. Trial Mode and Purchase
e. What is WordPress theme
Tutorials
a. How to Change WordPress Theme
b. How to Convert PSD to WordPress With Divine Elemente
c. How to Submit a Website to Showcase
d. How to Upload Theme to Internet
e. New PSD Template Creation
f. Update of a Current PSD Template for Divine Elemente
g. XAMPP Virtual Host and WordPress Installation
h. Deposit Funds
Features Guides
a. Interface of Divine Elemente
b. Layout Editor
c. Publish Editor
d. Elements
e. Properties
f. Detailed Elements Properties
g. Elements Types: Date, Author and Comments
h. PSD Hints - Speeding up of Publishing Time
i. Creative Background Design with Stretch
j. 960 Grid
k. Billboard (JS Slider)
l. Editable Content
m. Custom Fonts
n. Advanced Text Effects And Publishing
o. Multi-page website creation with the predefined or custom content
p. Sell Buy WordPress Themes
q. SEO Optimized and W3C Valid Code
r. Custom Code Addition to a WordPress Theme
Troubleshoting
Requirements
Useful Tips
Installing and Activating

The first "must know" information about Divine Elemente: installation, activation, trial, and
uninstallation is considered in this tutorial.

Related: Trial Mode and Purchase


System requirements
OS support:
Windows XP, Windows Vista, Windows 7

Adobe Photoshop support:
CS, CS2, CS3, CS4(x86), CS5(x86)

Installation
If youd like to install the product on your computer, please follow these easy steps:

Step 1. Download the setup file. Launch "Setup.exe"

Step 2. Plugin setup wizard will appear as a Welcome page. Press the Next button.

Plugin setup wizard. Welcome page
Step 3. Please read the License Agreement carefully, and if you agree with all its terms, select "I
accept the agreement" and press the "Next" button.
Plugin setup wizard. License agreement


Step 4. Select the Elemente setup path in the next window and choose required Adobe Photoshop
versions for plugins installation.
Plugin setup wizard. Select Destination Location


After youve pressed the Next button, files copying and plugin installation start.

Step 5. To complete the setup process, press the Finish button.

Plugin setup wizard. Completion.

The setup process proceeds smoothly and easily. In case something goes wrong, the setup program
will tell you what to do in a certain situation.

Please contact support@divine-project.com, if you experience any problem with the installer.

Activation

If Divine Elemente is launched for the first time, its necessary to enter an activation code for your
purchased plugins copy.

Activated version allows using Divine Elemente with no limitations, getting regular plugin's updates
and also installing its new modules called extensions.

Divine Elemente activation. Window of Divine Elemente plugins activation.

After the product is purchased, an activation code is sent to the e-mail, you mentioned at registration.
Also this key will be available on the user's personal page.

To activate the software, copy the code received and paste it in the activation code field and press
the "Activate" button on the right.

Note: You can activate the purchased product on one computer only.

But each user can firstly try the software in its trial mode during 30 days. To take this chance, click on
the "Continue Trial" button in the activation window.

Read more about Trial mode and Purchasing




Uninstallation

If youd like to remove the plugin from your system, please follow these easy steps:

Step 1. Choose Uninstall from the Divine Elemente program group (Start > Divine > Uninstall Divine
Elemente).

Or perform the following actions:
- Open the Control Panel (Start > Settings > Control Panel).
- Double-click on the "Add / Remove programs" icon.
- Search in the list for the "Divine Elemente" item and double-click on it.

Step 2. Answer Yes the question: Are you sure you want to completely remove
Divine Elemente Uninstall. The confirmation of uninstallation.

Step 3. Then select Adobe Photoshops versions you want to remove Divine Elemente plugin from.
And after you finish, press the Ok button.
Divine Elemente Uninstall. Selection of Adobe Photoshop versions to remove the plugin from.

Note: In case you select all the versions, the Divine Elemente plugin will be removed completely from
your system.

Step 4. After you finish the plugins unistallation, please answer the several questions.
Divine Elemente Uninstall. Feedback form

The data input will be used only for statistics and further improvement of the softwares quality. To
complete the process, press the Finish button.

Conclusion

As this tutorial shows, the installation process of Divine Elemente , its activation and trial mode, and
plugins removal from your system proceed very smoothly and simple.


Quick Start Guide

This guide helps get the basic skills on how to work with Elemente. For more details on the
whole plugins functionality and quick start guide, you are to look through its each Feature
separately.


Divine Elemente is a plugin for Adobe Photoshop that creates a non-existent bridge between Adobe
Photoshop and a ready website that works on the content management system WordPress. Simply
speaking, PSD 2 HTML or PSD 2 CMS.

Its main task is to convert a design from Adobe Photoshop to HTML / CSS / PHP code, ready for
usage in WordPress CMS or in the form of usual HTML page. With its help, you can create a plenty of
unique themes for your blog for several minutes.

Prerequisites for this guide:

- Adobe Photoshop CSx and Divine Elemente installed.
- PSD template from the Themes Portal.
- 5-10 minutes of your free time.


Main steps in work with Divine Elemente

There is a list of main steps in work with Divine Elemente plugin below. More details on each step can
be found by clicking on appropriate links:


1. PSD opening and
Divine Elemente launch

- Open a PSD template.
- Launch the Layout Editor.

More details on this step

2. Work with the
Layout Editor

- Select a required layout
grid.
- Set grid parameters.

More details on this step

3. Elements assignment

- Switch to the Publish Editor.
- Assign all theme elements.

More details on this step

4. Publish

- Set publishing parameters.
- Publish a theme.

More details on this step

Additional materials:
Very fast website creation from a template
Level: Beginner
Who it is for: a blogger
Estimated completion time: 10-30 min


New website from scratch with no coding
Level: Advanced
Who it is for: a designer, a web developer
Estimated completion time: 10-30 min


Step 1. PSD opening and Divine Elemente launch

The first step is to upload a PSD template in Divine Elemente. To do this, open a PSD template
chosen, in our case it is Sweet.psd.

.
PSD template's opening in Adobe Photoshop.


After the template is uploaded, launch the Layout Editor from the Elemente menu.
Layout Editor launch: Divine Elemente plugin's menu in Adobe Photoshop CS-CS5

In order Divine Elemente can convert your template correctly, you are to set a layout grid of the
template. Just for that, let's launch the Layout Editor.

If you want to learn all details before taking the next step, we recommend you to read
the Layout Editor guide. Otherwise skip to step 2.

Back to top



Step 2. Work with the Layout Editor

The next step is to adjust a correct layout grid of your PSD template.

Firstly, select a type of a layout grid in the side panel (with sides or without sides). We use 2 columns
with sides in this template.
Select a layout grid: You can change a layout grid of your template in the side panel.

Then, set the grid's boundaries of your template. To do that, point out exact sizes of grid blocks by
indicating numerical values for each one (A), or drag their boundaries on the canvas by mouse cursor
(B).
Change of layout grid's parameters in the Layout Editor
To set each block's sizes exactly, select the View > Show elements menu or press Ctrl + H. After
that, your page is displayed on the background, and you'll be able to specify grid's boundaries in
accordance with the template.
Page display on the grid's background in the Layout Editor.

After the layout grid is set, the main work with the Layout Editor is completed. The next step is
elements assignment in the Publish Editor.

If you want to learn all details before taking the next step, we recommend you to read the
Elements: Elements assignment guide. Otherwise skip to step 3.




Step 3. Elements assignment

The next step is to define behavior of template's elements.
To do that, switch to the Publish Editor (Click on the Publish tab in the side panel).
Switch to the Publish Editor. Click on the Publish tab in the side panel.

For elements assignment, choose the templates layers needed and call for the menu by
the right mouse button. Then, select the All from selection item and the required page
element.
Elements assignment. Selection of template's layers required.


Then, to look through the page, in order to be sure that all elements are assigned, select the View >
Show elements` menu or press Ctrl + H.
Elements assignment. Checking of the elements assigned on the canvas.

After that, all the elements assigned will be outlined. And at cursor pointing, a name of the element
assigned will be shown.

Automatic elements assignment

There is also a possibility for automatic elements assignment in Divine Elemente.

It works in the following way:

1. Divine Elemente checks existence of a group with the name that contains a PSD hint of this
element in a PSD template.
2. And if such a PSD hint is found, layers from this group will be assigned as an appropriate
element.

The list of PSD hints with elements description can be found in the Element's hints list table.
Elements' auto setting

A PSD template, created with help of the Layout Editor, initially contains the structure of groups and
layers that is required for auto setting of elements in Divine Elemente.

More details on automatic elements assignment can be found in the PSD hints - speeding up of
publishing time guide.

After all necessary page elements have been assigned, you can continue - Publish.



Step 4. Publish

The next step after elements assignment and parameters setting starts - theme publishing to the
server.

To do that, you are to follow the actions below.
Publish: a process of publishing to the web server from Divine Elemente

Firstly, create an account for publishing to the server (the Settings > Accounts menu).

Secondly, select the Upload to: FTP: <Account> item in the Publish menu and use the name of the
account you've just created instead of <Account>.

And thirdly, click on the Upload to <Account> button.

Theme Activation

After your ready theme is uploaded to the server, it should be just activated, and you can start using
it.

In the WordPress CMS backend, move to the Appearance > Themes section, select a new theme
uploaded and activate it as a current theme.
Activation of a theme in the WordPress CMS backend

After the theme is activated, let's move to the website and enjoy a new design of your blog.


Conclusion

You have just looked through the whole process of conversion of a PSD template into a theme
for WordPress CMS or web pages or complete website above. But even for new users of Divine
Elemente, this process will not take more than 10-20 minutes.

In this guide we used Sweet.psd template, but you can also download many other themes from the
from the Marketplace for further experiments.




...


Best Practices

What the elements restrictions are and how they can be got round are considered in this guide.
Web designing tips and clear web design examples will help you achieve good results in your
work.

Elements and widgets in Divine Elemente give great possibilities for work with CMS, publishing formats,
functionality, etc. However, at template's designing, it's desirable to take basic standards of web design,
peculiarities of browsers and CMS into account.
Best practices and standards. Differences between good and bad PSD sources

In order Divine Elemente can publish your website faster and more qualitative, it's important to get a
valid PSD template.

We'll consider useful advices and describe several working features of Divine Elemente algorithm below.



Visual Disorder

Elements in Divine Elemente give great possibilities of publishing on various CMS, image formats,
various functionality, etc.; and following the standard technologies of Photoshop, different CMS,
browsers, etc., you may achieve perfect results.
In order your theme looks qualitative, you are to take care of your PSD templates quality.

Following few simple advices you can achieve astonishing results in Divine Elemente.


Work with graphic layers

At elements' creation, you can use as many layers as it's necessary to create a required element's
design. At conversion, all layers in an element's group will be merged in one image for fast publishing.

Divine Elemente algorithm. Work with graphic layers.

That's why, at element's creation, place the necessary text layer on top of all others in the group.



Layout grid and elements arrangement

First of all, at template's designing, watch over an element's arrangement. No element's layer should
overlap the boundary of a grid block.
An example of correct and incorrect elements' arrangement concerning a layout grid.

In case element's layers overlap a grid block's boundary yet, this element cannot be assigned in the
Publish Editor. More details on elements' arrangement can be found in the Elements guide.

Secondly, it's not desirable that elements overlap each over.
An example of correct and incorrect elements' arrangement in a template

As you can see, at correct elements' arrangement and following basic standards of web design,
your template will look not only accurate, but it'll allow you to work with Divine Elemente much more
convenient.
Elements on complex background

At template's creation, it's necessary to take into account the fact that elements can be moved down
with their background on the website's page, and such elements will not look good on the complex
background.

That's why, it's very important to select a correct format of an element's image.
Elements on complex background. Selection of image's format

In Divine Elemente you can set quality and format for each element.
More details on elements properties can be found in the Properties guide.



Use of text layers in Divine Elemente
Point and Paragraph text's use

Point text is recommended for such web elements as Logo, Navigation menu, Texts that will not be
changed in the CMS.

Paragraph text is recommended for elements, which contain more than one line of a text, and for
elements, which boundaries should be set accurately (Posts > Titles; Posts > Contents; Posts
> Comments, etc.)

Read more about Advanced text effects and publishing.


Extensions and updates

In the future this guide will be expanded greatly. Check back often.

Free and paid extensions will be available at our official website soon.
Check details at Extensions section, and submit your suggestions for upcoming extensions.



Trial Mode and Purchase

Divine Elemente trial mode and its activation, a purchase history, Elemente license key, a
balance and other details of your personal page at our official website are considered in this
guide.


The software's activation

You can download the latest version of Divine Elemente plugin visiting the Download section at our
official website and install it any time you want.

After you launch Divine Elemente plugin for the first time, you'll be offered to enter a license key or
activate a trial mode.

Divine Elemente activation. Window of Divine Elemente plugins activation.

Note: At the first launch of Divine Elemente, you should have an access to the Internet.

Trial mode

To try Divine Elemente in the trial mode, just click on the "Continue Trial" button.

The trial mode is offered to our customers for get-to-know use of Divine Elemente plugin, therefore it
has several restrictions:

Trial mode duration is limited to 60 days. After its expiration, youll have to enter a license key
of the product to continue using Divine Elemente plugin.
All illustrations will be published in GIF format.

If you want to use the software with no restrictions at all, get updates and also install optional modules
(extensions). But firstly, you are to purchase a copy of Divine Elemente license.

Product purchase

You can purchase a copy of Divine Elemente license at our official website only. To do that, visit the
Divine Elemente page and press the "BUY NOW" button that will bring you to the purchase page.

Divine Elemente license purchase. Products page.

You can pay for an item at our website by any of these two ways:

using your balance at our official website;

If you use money you already have on your personal balance, you not only save your time but
get a $2 discount on purchase of any items that cost $20 and more. Further details on Deposit
funds.

by a payment system.

If you use a payment system purchasing any item at our official website, you are to indicate
your payment data and confirm the software's purchase.
Divine Elemente license purchase. Order page.

After the product is purchased, an activation key is sent to the e-mail, you indicated at your
registration. Also this key will be available on the user's personal page.



Users personal page

After you purchase the software, you'll be able to find a list of the license keys already purchased on
your personal page. To do that, you are to log in at our official website.
User's personal page. Log-in page.

Note: If you are not a registered member yet at our website, youll be registered automatically after
you purchase any item at our official website. The data, which are to be used for your personal page
enter, will be sent to your e-mail, indicated at the items purchase.
User's personal page. Purchase History and Balance.


At the Purchase History and Balance section you can look through your whole purchase history and
balance, and glance at the purchase details (Divine Elemente plugins activation code, license status,
date and time of the purchase, a link to the purchased themes downloading, etc.).


Conclusion

Thus, you have just learned about the possibilities offered by Divine Elemente team to use Divine
Elemente plugin. You know terms of the trial mode now and purchase details of our software that can
be a great helper at your work.
What is WordPress theme

This guide covers essential information on what a basic WordPress theme is, what it consists
of, and the files included in it.



To understand what Divine Elemente is and how it works, we'll consider what a general WordPress
CMS theme consists of exactly (and what Divine Elemente converts your amazing PSD template in)

WordPress theme files

Let's take a simple WordPress theme as an example that consists of a Header, Sidebar, Content area
and Footer. You can find the following files in this theme's folder:

index.php - its the main file of a theme. It contains a code of the Main Area and specifies,
what other files are included in;
header.php - it contains a code of the Header section of the theme;
sidebar.php - it contains information about the Sidebar;
footer.php - it handles your Footer;
style.css - it handles the styling of your new theme;

Now, lets consider each file in details.

The "Index.php" file
You can find the following code in the index.php:

Index.php code
The code in this file begins with <?php get_header(); ?>, which includes the header.php file and the
code on the main page. Internal WordPress function is used to do that. Well come back to this in
details later.

The following few lines consist of a PHP code and standard WordPress functionality. This code
checks, if a blog is filled up with posts via WordPress administrative area and displays them.

Then you'll find the following line is <?php get_sidebar(); ?>, which includes the sidebar.php file. Post
categories, archives, etc. can be displayed in this file.

And the last line is <?php get_footer(); ?>, which includes the footer.php file.
The "Header.php" file
There is the following code in the header.php:

Header.php code

This is a simple HTML code with a single line, containing a php code and a standard WordPress
function. In this file, meta tags can be specified, such as the title of a website, meta description and
keywords for the web page.

The next code's line (after <title>) is:

It tells WordPress to load a style.css file. It handles the styling of a website.

The <?php bloginfo(stylesheet_url); ?> part of the line is a WordPress function that actually loads the
stylesheet file.

A simple label HEADER, wrapped in a div with class header, specified in the stylesheet file is
considered below.
The "Sidebar.php" file
There is the following code in the sidebar.php:

Sidebar.php code

In this file, internal WordPress functions are used to display the categories and archives of posts. The
WordPress function brings them back as items of the list, therefore they have been placed with the
actual functions in unsorted lists (the <ul > tags).
The "Footer.php" file
There is the following code in the footer.php:

Sidebar.php code

As you can see, a simple FOOTER label was added to the Footer grid block. In other cases here can
be added links, additional text, the copyright information for the theme, etc.

The "Style.css" file
There is the following code in the style.css:

Style.css code

This simple CSS file sets the basic look of your theme.

As it has been previously mentioned, internal WordPress functions are often used in the theme code.
To get extra information about each function, which you havent found in our WordPress guide, visit
the official website of WordPress.

So now, you know what parts WordPress CMS theme consists of. The process of theme's creation is
not difficult but it takes even specialists no little time to create a theme of high quality.

That's why, Divine Elemente was developed for. Firstly, it performs these tasks for a few minutes.
Secondly, it can be used by users who are not acquainted with a layout.

More details on Divine Elemente plugin's work can be found in the Quick start guide.
How to Change WordPress Theme

How to change WordPress theme with Divine Elemente easily and to do it as often as you
want? Prepare a theme, upload it to the Internet and activate your new WordPress theme at the
website with our tutorial.


There are just three simple steps, following which you can change your WordPress theme design at
the website with no problems and any time you want. They are:

1. Theme preparation
2. Theme uploading to the Internet
3. Activation of a new WordPress theme


Step 1. Theme preparation

You can download any suitable theme from our Marketplace and adjust the PSD template in the way
you need. So, create your own unique WordPress theme design just changing logo, styles, images,
etc.
Themes Portal

After that, you are to convert your ready PSD template to WP theme with the help of Divine Elemente
and get your new WordPress theme for the website.

More details on the publishing process can be found in the Publish Editor guide.


Step 2. Theme uploading to the Internet

There are two available ways for theme publishing, if you use Divine Elemente:

From Divine Elemente
Divine Elemente allows not only converting a PSD template to a ready WP theme very quickly, but
publishing a theme at your website immediately too.
WordPress theme uploading with Divine Elemente

To do that, you are to:
(A) Create a new FTP account and adjust settings (the Settings > Accounts menu).
(B) (C) Select the Upload to <account name> in the command panel.
(D) And click on the Publish button


From the third party FTP client
Also you can use any of your FTP clients to publish a theme.
WordPress theme uploading with Divine Elemente

To do that, you are to:
onvert a PSD template to WP theme, selecting the Save to folder mode.
Adjust settings of your FTP client (server address, a port if required, a path to the server for
the theme uploading, and authorization data on the server).

Select the prepared theme on your local computer and upload it to your server.



Step 3. Activate a new WordPress theme

And the last step is the most exciting one that shows you how to change WordPress theme.
Activation of a WordPress theme

To do that, you are to:

Access admin panels
Go to your browser.
Enter your new domain name followed by / wp-admin.
Enter your User name and Password.
Click on Login.

Change a theme on the website
Navigate to the Appearance > Themes section.
Select a new theme uploaded.
And click on the Activate.

By the way, you can upload any number of themes, so that, dont miss a chance to change them as
often as you wish.


Conclusion

Thus, you have just learnt that you finally shouldn't surf the Internet looking for new ready themes.
Because with Divine Elemente you can create, and upload, and change any number of themes
you need at the moment. And its absolutely a simple and quick process that results in a unique
WordPress theme design only for your website.
How to convert PSD to WordPress with Divine Elemente

This simple PSD to WordPress tutorial explains how easy it is to create a ready theme for
WordPress CMS with Divine Elemente having your favorite PSD. Convert PSD to WordPress
with no coding.


Conversion of a PSD template to WordPress CMS with Divine Elemente is an easy, quick process
of high quality, and, its also not the least of the factors, that you can perform this task on your own.
Check up yourself:

Final Product

What you'll be creating being aware of how to convert PSD to WordPress CMS.
Final Product. Functioning theme for WordPress CMS


Prerequisites for this guide:

- Adobe Photoshop CSx and Divine Elemente installed
- PSD template "Template's name" from the Themes Portal
- 5-10 minutes of your free time


Step 1. Open a PSD template in the Layout Editor.

Firstly, you are to open a PSD template "Template's name" in Adobe Photoshop and launch the
Layout Editor (the Elemente > Layout Editor menu).
Layout Editor workflow

More details on the Layout Editor.



Step 2. Layout grid setting.

The next step is to show the Divine Elemente plugin how your page looks.
To do that, select a necessary type of the layout grid on the side panel.
The Layout Editor. Selection of the layout grid's type.

Then you are to adjust grid blocks' boundaries according to your template.


To do that, display a template (the View > Show grid menu or by Ctrl + H pressing), and
drag grid blocks' boundaries on the canvas, and adjust them according to the template's
grid.
The Layout Editor. Layout grid's adjustment.

After the layout grid is set in accordance with the template, you are to move to the next step of the
PSD to WordPress tutorial.



Step 3. Switch to the Publish Editor and elements assignment.

The next step is to switch to the Publish Editor (click on the Publish button in the side panel).
Switch to the Publish Editor. Press the Publish button in the side panel.

Then, check the assigned theme elements ( the View > Show Elements menu or Ctrl + H ), which
were defined by Divine Elemente plugin.
The Publish Editor. Check up of the theme elements assigned


If youve found out that not all elements were assigned, please assign the rest ones. To do that, carry
out these simple tasks:
The Publish Editor. Elements assignment.

highlight an element on the canvas,
call for the menu by right mouse button,
select the required element in the dropdown list.

More details on PSD hints - Speeding up of publishing time or Elements.

After all elements have been assigned, you can move to the next step - Publishing.



Step 4. Publishing.

The last step of work with Divine Elemente is publishing of a ready theme. Instead of publishing of the
theme to the web server, lets create it on the local computer. To do that, you are to:

select the Save to folder item in the command panel,
and just click on the big Save to folder button.
Publishing. Selection of the publishing mode


And that's all. After a short conversion process of PSD to WordPress, we've got a ready working
theme for WordPress CMS.

More details on each working stage with Divine Elemente can be found in the Quick Start Guide.



Let's talk a little

In this PSD to WordPress tutorial we presented you the process of quick PSD templates conversion
prepared into a working theme for WordPress CMS. And after you have done it on your own, it'd be
interesting for us to know:

- How much faster for you is it to create a WP theme now?
- Is it difficult to work with the plugin as for beginner?
- What would you like to add to the functionality?


How to Submit a Website to Showcase

How to submit a website to Divine Elemente Showcase of websites and share your talents with
a huge community of Divine Elemente are considered in this easy tutorial.

Divine Elemente 0.9 offers its users an opportunity not only to create unique designs for their
websites for WordPress CMS, downloading works of authorship from the Marketplace, but to share
website with many thousands of the Divine Elemente communitys users at the Showcase section.

So, dont miss a good chance to show your website and brag of your working skills in Adobe
Photoshop and Divine Elemente 0.9.

Before you submit your work to the Showcase of websites, you are to know the Divine Elementes
submission rules at www.divine-project.com.

You are also to remember that all submitted works to our website should pass a compulsory
moderation beforehand (checking of all the data on compliance with the submission rules).

Step-by-step website submission process to Showcase

If your work meets all our submission rules, and youd like to share your website with participants of
the Divine Elemente community, you are to follow just several simple steps:

Step 1. Move to the page of the websites submission.
Showcase section. Submission page

To do that you are to press the Submit a site button on the Showcase page.

Step 2. Fill in all required fields of the form.
Showcase section. Website submission forms filling in

Enter your websites name.
Indicate URL of the website.
Attach a screenshot of the website.
Describe a subject matter of your work in brief, and why you wish to share your website with
others at the Showcase section.
Indicate the required tags for your work, which can be used for its searching at the Showcase
of websites.

Step 3. Check again all the data and upload your work.

After all fields are filled in, Captain Obvious requires pressing the Submit button :-).


Step 4. Website moderation
Showcase section. Moderation

After you upload the website, it is placed in the queue for moderation (checking of the website
on compliance with the submission rules). Then, your work will be published at the Showcase of
websites section of Divine Elemente 0.9 or declined by a moderator (if it will not pass moderation).


Conclusion

Thus, you have just learned how to submit a website to the Showcase section of Divine Elemente
official website, paying attention to all required steps you are to pass before your work can be
published. So now, you can easily share your cool website created on your own with the people really
concerned.




How to Upload WordPress Theme to Internet

How to upload a new theme to make your website more professional and eliminate
monotony of your website? Answer is here. Follow our tutorial and attract your
visitors by new website publishing.


Step 1. Prepare a theme

To upload a theme to the Internet, firstly, you need to find one that suits your style and idea
of the website. So, select an appropriate PSD template in our Themes Portal and download
it.
Themes Portal

Then, Divine Elemente plugin will help you to create your own unique theme. To do that:

change a logo, styles, images, etc.,
save your new PSD template,
and convert it into a ready theme.

More details on work with Divine Elemente can be found in the Quick Start Guide guide.

After you created the theme you want to apply for your website, publishing parameters are to
be set.


Step 2. Set publishing parameters

The next step is publishing parameters adjustment.

Adjust account settings in Divine Elemente. Enter the following FTP settings in the settings
menu (Settings > Accounts):

Divine Elemente 0.9 settings. Accounts tab.

(A) server address and a port if required,
(B) path on server for the theme uploading,
(C) and authorization data on server.

More details can be found in the Publish Editor guide.

Correctly set publishing parameters will help you to upload a theme to server with no
problems.


Step 3. Upload a WordPress theme to server

Now you can start uploading. Click on the Publish button to upload your new WordPress
theme.
Theme publishing

To Publish via FTP account:
select the Upload to <Account> (A)(B);
and click on the Publish button.

More details can be found in the Publish Editor guide.


Thats it, your own theme is ready for the next actions.
Activation of the theme in WordPress CMS

So, you can activate it right now and see how it looks.


Conclusion

Following our tutorial, you should have no problem uploading any number of new WordPress
themes, especially with Divine Elemente plugin. Create your own unique designs easy and
fast with Divine Elemente and dont spend much time, finding a theme in the Internet.




How to Create Basic PSD template

Want to learn how to create new PSD template arranging elements quickly and in their right
places for your theme / web page in Divine Elemente? Follow this tutorial, and the Layout
Editor, its new functionality will help you greatly.


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

At new PSD template creation, all theme / web pages 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.

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 template creation

Step 1. Layout Editor launch. Ways of its launch
The Layout Editor can be launched in two working modes: creation or updating of a template.
Ways of the Layout Editor launch

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 Layout Editor menu. At that, Photoshop is launched
and Divine Elemente v0.9 opens at once in the mode of a new PSD template creation.
If Adobe Photoshop has already been launched on your computer, you can launch the Layout
Editor from the Elemente > Create new layout menu.


Step 2.Setting of a layout grid and pages common parameters

To set a layout grid, you can use the layout and grid blocks sizes 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

To set parameters for each grid block from canvas, point out exact sizes of a grid 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


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

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


You can do that right in the Elements panel just checking required elements in the list. At that, each
marked element will be displayed on canvas immediately.
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 template creation
After all parameters have been set, and all required elements have been marked, the next step to
take is a new PSD template creation.
The Layout Editor. Creation of a new PSD template

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


Step 5. PSD template design.
The final step of a new PSD template creation is its design. Here everything depends on your
designers skills and inspiration.
The Layout Editor. Best practices

However, to make your PSD templates work smoother in Divine Elemente, we insistently recommend
you to get acquainted with the Best practices guide.


Conclusion

You have just learned about a new functionality of the Layout Editor starting from Divine Elemente
v0.9 and looked through the step-by-step process on how to create PSD template, and received
evidence, that its an absolutely simple and exciting process with the help of Divine Elemente.
Update of a current PSD template for Divine Elemente.

You want to prepare your PSD template for Divine Elemente in order to save more time for
further creation of your theme / website? Find answers to all possible questions learning basic
principles of a PSD re-engineering in this guide.


PSD hints support was added to Divine Elemente for automatic themes elements assignment (named
special hint group in PSD). It allows to increase publishing speed in several times.

However, to use this possibility, you are to have a PSD template that is prepared in a special way.
There are two ways to do it:

1. Convert your PSD template (that youve had earlier, before Divine Elemente plugin use).
2. Create a new template with the help of the Layout Editor. More details on this entire process
can be found in the New PSD template creation guide.
PSD template modification: before and after

Note: Use of PSD hints in a PSD template is an optional possibility. You should not bring the structure of a PSD
template to the set kind. Elements can always be assigned in Divine Elemente plugin one-by-one.

Read more about PSD hints - Speeding up of publishing time

The basic principles of PSD template modification for Divine Elemente are considered in this guide.


Work with template structure

To update PSD template for Divine Elemente, firstly, you are to set grid blocks of a template.

If you create a structure in Adobe Photoshop (without help of the Layout Editor), you are to set grid
blocks: Header, Footer, Sidebar, and Post. And it turned out that the simplest and clearest method
for grid blocks setting is performed by means of slices.

You are to set your layout grid in the PSD template indicating names for each grid block as you can
see below:
Layout grid by slices

In order to set a layout grid right in Adobe Photoshop, you are to:

1.
Select a Slice tool
2. Draw a layout grid in the form of separate squares with the help of the Slice tool.
Warning: You are to be sure that grid blocks dont overlap each other, or else a layout grid will be
set incorrectly.
3. Enter grid blocks name (Side, Footer, Header, Post, Sidebar) just clicking on required one. Do
the same for each block.

Besides, you are to organize structure of layers and their groups. For elements auto assignment,
Divine Elemente goes by groups names (as basic hints) and use the following structure:

Grid block > [widget (elements group)] > element

In other words, a group with grid blocks name, a subgroup with widgets name in it (it may be absent),
and a subgroup with elements name in that group.

Example: Header > Logo (Logo element in the Header grid block), Footer > Search > Input (Input element
in the Search group, in the Footer grid block).
Elements structure in a PSD template.

Note: In order Divine Elemente can define element exactly, you are to indicate its name and place correctly
(what grid block it is placed in).

A list of elements and their correct arrangement can be found in the PSD hints table.



How to assign elements from Photoshop layers

Elements are the basis of 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 / themes objects like texts, links, buttons, images, etc. Read more about Elements.
Elements group

To assign element you are to follow just two simple steps:

1. Create a group with elements name in an appropriate grid block (Header, Post, etc.).
2. Carry all elements layers to this group.

Thus, at its launch Divine Elemente will know what the element is exactly.

Note: At auto assignment, Divine Elemente reads off only several properties of elements (styles, bg
image, fonts, etc), the rest properties (links, styles name, graphic parameters, margins) are to be
indicated manually in Publish Editor. Read more about Properties.


Using the one-by-one method for PSD template modification, you are to know the working principles
of Divine Elemente on data collection of the element selected.
Layers arrangement inside elements group

1. If an element contains text, you are to select the upperest text layer in the group of all layers
and convert it into the text that is seen in browser.
2. All layers in the group, except the upper text layer, are merged in one image - elements
background (for profy - in background image on tag).
3. All layers outside elements groups are merged in one image - page background - in order
to speed up website downloading and save money and dont charge your server by multiple
requests with hundreds of images.

In order Divine Elemente can publish your website faster and more qualitative, it's important to update
PSD template making it valid. So, lets look through real experts advices:


The best practices

To assign elements correctly in Divine Elemente plugin, each elements layers (including their effects
too) are not to overlap their grid blocks boundaries.
Examples of right and wrong work with elements

Otherwise, the element will not be assigned automatically in the Publish Editor and will be displayed
with an error.

Read more about Best practices



Conclusion

You have just learned why and how to update PSD template for Divine Elemente working in the
Layout Editor, and have seen the entire work with template structure and elements assignment from
Photoshop layers.
XAMPP Virtual Host and WordPress Installation

In this tutorial you will learn how to install XAMPP virtual host, and get essential information
on WordPress installation, and connect Divine Elemente plugin to all of that.



XAMPP installation

You are to start working with a blog in WordPress at the local server, as you can test and adjust
everything you'll need in future during the blog's transfer to the hoster's server. If you'd like to use
it on your home PC, we offer you to use a XAMPP virtual host, as it is very high-end server with all
functions required and easy installation.

Step 1. Visit the XAMPP official website and download the last version for Windows from this page -
http://www.apachefriends.org/en/xampp-windows.html

Step 2. Start the installer. Select English language.
XAMPP installation. Language selection.


Step 3. It's better to install server in a folder by default, in other words, in "C:\xampp", but you are able
to choose any other one you want for the XAMPP installation.
XAMPP installation. Selection of a path for installation.


Step 4. Remove all check marks at the choice display of installation options. There is no point in
installation of Apache and MySQL as services, if you are not going to keep your website open in the
local net all the time.
XAMPP installation. Options installation.


Step 5. Wait for the completion of the installation process.
XAMPP installation. Complete installation.


Step 6. After the XAMPP installation is completed, click on the Finish tab.
XAMPP installation. Completion.

Step 7. As you click on the Finish, you'll get the following window asking you about the possibility to
start the XAMPP Control Panel. Select No.

Step 8. Before you start the server, you are to adjust one thing that will be required for the future work
with WordPress CMS and creating a theme for WordPress. Move to the "C:\server\apache\conf\"
folder, open the "httpd.conf" file (configuration file of Apache server) for editing, and find the following
line:


Step 9. Then, open the Internet Explorer and move to the "C:\server" folder, and you'll find the files for
starting, stopping and re-starting the server there.
XAMPP virtual server. XAMPP control files.

Note: For future easy start of the XAMPP virtual host, you may transfer shortcuts of its start and stop
to the desktop.

Step 10. Launch xampp_start.exe and wait for the server starting.
XAMPP virtual server. XAMPP server starting.

Note: You may close the window, and the XAMPP server is kept launched any way. To stop the
server, launch xampp_stop.exe.


Step 11. Open a browser and fill in the URL field with an address of the local website opening, in
other words, "http://localhost".

A website's welcome page will open, just like that:
XAMPP virtual server. XAMPP website's welcome page.

Step 12. Select English and come to the page below. Then, move to the Security menu to set
safety for our XAMPP virtual host.
XAMPP virtual server. XAMPP settings.


Step 13. You'll find a list of unsafe XAMPP server settings and an offer to move to the password
setting. Let's do it.
XAMPP virtual server. Password setting link.

Step 14. You should set a password in MySQL for a root user. Then, press the Password changing
button.
XAMPP virtual server. Password setting.


WordPress installation

The XAMPP installation is entirely completed. Let's set to the WordPress installation, that will be
very useful at your themes creation for WordPress. So, how to install WordPress CMS can be found
below.

Step 1. Return to the beginning "http://localhost" and in the Tools menu move to "phpMyAdmin" link.
Select English in languages, use "root" as your login and the password you have installed earlier at
adjustment of server's safety as your password.
XAMPP settings. Selection of interface language.

Step 2. In phpMyAdmin create a new data base under the "wordpress" name
in utf8_general_ci coding.
XAMPP settings. Creation of data base.


That's all, the whole data base is created.

Step 3. Move to the WordPress official website and download the last version from the following page
- http://wordpress.org/download/

Step 4. Enter the "C:\server\htdocs" folder and create a folder with blog name there, by which a blog
on your PC will open. Copy WordPress distributive files to the blog.

Step 5. Open the "wp-config-sample.php" file from the WordPress folder in any text editor and edit it
in this way:
The "wp-config-sample.php" file editing.

We show a data base's name here (in our case, it is wordpress), a user's name in MySQL (in our
case, it is root), and a password (that one you've installed, in our case, it is 123456789, however, we
hope youll use not so easy set of figures).

Save this file under the wp-config.php name.


Step 6. To continue the WordPress installation, open the http://localhost/blog/ address in the browser.

The page of the WordPress installation opens, and you are to write your blog's title and e-mail here.
Click on the Install WordPress button.
WordPress CMS. Installation process.

That's all, WordPress CMS is installed, so, write down your password. Now you can enter the blog's
admin, pressing the Enter tab and using the admin login and generated password.


Theme's uploading from Divine Elemente

The XAMPP server is installed, WordPress CMS is installed too, now you can set to adjustment and
design of your blog.

More details on Divine Elemente plugin installation.

Step 1. Open a theme's design prepared in Adobe Photoshop.
Divine Elemente usage. PSD template upload.

Step 2. Prepare your WordPress theme for publishing (set a page layout, add common / optional
theme's elements).
Divine Elemente usage. Theme elements addition.

More details on Elements' addition.


Step 3. Move to the Publish Editor and assign the theme's elements added.
Divine Elemente usage. Theme elements assignment.

More details on Elements assignment.


Step 4. Point out the publishing path (A) (in this case, it is C:\server\htdocs\blog\wp-
content\themes\newtheme) and choose the Save to folder (B) (C) in the command panel and, and
click on the Save to folder button (D).
Divine Elemente usage. Path adjustment for theme publishing.


Step 5. At the WordPress CMS backend, move to the Appearance > Themes section and activate a
new theme uploaded.
Themes activation in WordPress CMS.

That's all. Now you have the XAMPP virtual host installed and one of the most popular website
management systems called WordPress. And you already know how you can make a unique
WordPress theme's design and check it quickly at the local PC, before it is sent to your web server.





Deposit Funds

This simple tutorial considers the essential information on how to purchase any items
at Divine Elemente website and learn step-by-step instructions for funds deposit to and
withdrawal from your personal pay account.


Divine Elemente website visitor can register at www.divine-project.com and get a personal pay
account for any item purchase (copy of Divine Elemente license, PSD / WP Themes, Ads, etc.).

To take advantage of the personal pay account, firstly you are to add money to it.

A plus of personal account use at the www.divine-project.com website:

Easy and fast purchase of any item. If you use a personal pay account, there is no
necessity to enter all the pay data. You are just to click on the use money from personal
account link.
A permanent discount on all items. If you use a personal pay account, you save $2 at each
purchase of an item that is more than $20.
Action price. During the actions holding all discounts are taken into consideration at item
purchase, if you use your personal pay account only.


Note: All our subscribers are informed about the action campaigns in advance by e-mail.

Warning: Before you can use your personal pay account, we insistently recommend you to get acquainted with
the basic rules and conditions of the account use.



Funds deposit and withdrawal from the personal pay account

The process of funds deposit and withdrawal from your account is simple as never. More details on
how to deposit funds to an account, purchase an item, withdraw money from the personal account
can be found below.
Before you perform any action from the indicated ones above, you are to be registered and logged in
to the www.divine-project.com.
Deposit funds. User authorization



Step-by-step instruction for funds deposit to your account

Step 1. Open the Purchase History and Balance (the Show link) section on your personal page.
Deposit funds. Purchase History and Balance.


You can see the balance of your account and also the history of all items purchases and sales in this
block.

Step 2. Click on the Deposit funds button in the Purchase History and Balance section and enter
the deposit amount in the floating window.
Deposit funds form

Then, click on the Deposit now button.

Step 3. Enter your pay data and confirm the order.
Deposit funds. Information on payment


After that, the amount indicated will be added to your personal pay account.


Step-by-step instruction for item purchase

Step 1. Select a required item and add it to the Shopping Cart.
Deposit funds. Addition to the Shopping cart


Click on the Use a personal account link on the payment page.


Step 2. Download the purchased item.
Customers personal page. Theme's details


After that, the selected item will be available on your personal page at the Purchase History and
Balance section, and the money of purchase with regard for discount will be withdrawn from your
personal pay account.

Note: The link will be available only after there is enough money for selected items purchase in the Shopping
Cart.


Step-by-step instruction for funds withdrawal from your account

Step 1. Open the Purchase History and Balance section (the Show link) on the personal page.
Deposit funds. User authorization.


Step 2. Click on the Withdraw funds button in the Purchase History and Balance section.
Deposit funds. Funds withdrawal

Please indicate the following information in the floating window:

Payment system (PayPro, PayPal, MoneyBookers, etc.)
Amount (an amount for funds withdrawal from your personal pay account)
E-mail (an e-mail address indicated at your account registration in the payment system)


Warning: Please be attentive entering your e-mail address for funds withdrawal. The e-mail address indicated
at your registration at www.divine-project.com can differ from the e-mail indicated at registration in the payment
system.

Step 3. Click on the "Request a Pay-out" button

Clicking on that button, you start the pay-out process that ensures the payment once a month only.

Remember: Your earnings are to be more than $50 at our website, and you should be our registered member
for no less than two months.



Conclusion

So then, you have found out how to transfer money to and from your personal pay account at Divine
Elemente website making your purchases of any items and sellings of your themes even more
pleasant.



Interface of Divine Elemente

Elemente user interface description: each tab meaning and the way of its use. Learn the
working area of Divine Elemente: top menu, canvas and the right panel in details, reading this
guide.


Divine Elemente working area consists of the following main parts: (A) Canvas, (B) Top Menu and (C)
Side panel.
Interface of Divine Elemente

Wed like to offer you Divine Elementes interface description in details in the current guide.



Top menu

The top menu of Divine Elemente v0.9 consists of the following items:
Interface of Divine Elemente. Top menu
(A) File
Item Shortcut Description
Save to Ctrl + S It saves a current open document.
It's inaccessible at new layout's creation
Save
as
Ctrl + Shift +
S
It saves a PSD document, allows to choose a files
name and path
Quit Alt + F4 It closes Divine Elemente and opens
Adobe Photoshop


(B) Settings
Item Shortcut Description
General --- Backup and language settings
Publish Editor --- Publishing settings and Theme author properties
Accounts --- Accounts' parameters for publishing on web server
Language --- It allows to select an interface language from the list given
(The restart of Divine Elemente is required)


(C) View
Item Shortcut Description
Layout
Editor
--- Switch to the editor responsible for the page layout setting
Publish
Editor
--- Switch to the editor responsible for the elements assignment
and theme publishing
Show
Elements
G, Ctrl +
H
Publish Editor:
- Layout grid display

Layout Editor:
- Display of a current template on the background
- Display of a new templates structure
Show side
panel
Tab It shows / hides a side panel



(D) Help
Item Shortcut Description
Getting started --- Links to the most required tutorials and guides for
getting started to work with Divine Elemente
(Quick Start Guide, Interface, Elements)
Docs & Tutorials --- Link to the documentation section for Divine
Elemente
About Divine
Elemente...
--- Information on the current version of Divine
Elemente v0.9
Submit feedback --- Link to the online service for your ideas about
Divine
Elemente, or your voting for other users ideas.
Send a Bug Report --- In case you found any bug, you can send us a bug
report.





Canvas

Canvas is a main part of the interface of Divine Elemente v0.9.
All basic activities with a template can be made just on the canvas.

The Publish Editor is used for:

display of a page and template's layout grid,
selection and assignment of the theme elements required.

The Layout Editor is used for:

display / editing of a pages layout grid,
schematic display of elements of a new PSD template,
display of a list of elements that are in use for editable PSD template
Canvas. Main part of Divine Element's interface


More details on work with Divine Elemente v0.9 can be found in the Quick start guide.



Side panel

The next item of the interface description is a Side panel. This panel consists of several functional
parts. And composing parts of the Side panel in the Layout Editor differ from the being used ones in
the Publish Editor at that.

More details on differences in Layout Editor' interface can be found in the Layout Editor guide.

The side panel in the Publish Editor consists of three parts (Command panel, Elements panel and
Properties), and they are considered in the current guide.

Command panel

Command panel consists of three parts:
Side panel. Command panel

(A) The Publish button. It carries out the specified in the list action (thats why, you can see an
example of HTML review in the above image).
(B) The Layout, Publish buttons are used to switch to other working editor (the Layout Editor or the
Publish Editor) in Divine Elemente v0.9 and vice versa.
(C) A list of general actions. It's used for specifying the necessary action at pressing the Publish
button:
HTML preview ( Creation of HTML / CSS );
Save to folder ( creation of a CMS theme for the local server );
Upload to <website> ( creation of CMS and upload on FTP server according to the account
indicated ).
Elements panel

This panel consists of 2 tabs (A):

1. Elements - it displays a list of all elements (B) and their types or variations too. Highlighting any
element, you can set appropriate properties of this element in the Properties panel.

2. Layers - All layers and groups of layers, created previously in Adobe Photoshop, are displayed
in this tab. Elements, while being chosen in this panel, get highlighted on the canvas at once, what
simplifies work with Divine Elemente greatly.
Side panel. Elements panel usage

More details on elements can be found in the Elements guide.


Properties panel

This panel allows to set properties for an entire theme (Theme element) or adjust them for each
theme element separately.
Side panel. Properties panel description

More details on theme elements' properties and this part of the interface description can be found in
the Properties guide.



Settings

Divine Elemente allows to set the most necessary parameters of the application for more convenient
work. You can call in the window with parameters from the Settings top menu.

All options are divided into the following tabs: General, Publish Editor, Accounts.

Let's consider parameters of each tab in details.


General tab

General tab includes the following settings:

Divine Elemente 0.9 settings. General tab.

Language - languages selection for the interface of Divine Elemente v0.9. English language
is used by default. A user may select and download an additional language package - click on
the More language button.
Backup folder - selection of the way for saving of PSD templates backup copies.
Autosave backup each 'N' minutes - selection of time span that will be used for saving of
backup copy of your work
Restart Photoshop after crash of Divine Elemente - If you check this checkbox, than, in
case of Divine Elemente's crash, the work will be restored completely from the moment of the
last autosaving.



Publish Editor tab

Publish Editor tab includes the following settings:

Divine Elemente 0.9 settings. Publish Editor tab.

Theme author properties - you may indicate all data of the theme author in this section.
These data will be displayed at selection and theme's activation in WordPress CMS and in the
source code (HTML).
Path for HTML Preview - selection of the way for saving of prepared files of HTML page
preview.
Publish Theme style fonts with EM instead of PX - if you check this checkbox, than
Divine Elemente v0.9 will show a font size in EM at publishing.
Use PNG24 fix - if you check this checkbox, you fix PNG 24 alpha transparency support in IE
browsers.
Use custom (unsafe) web fonts - if you check this checkbox, Divine Elemente v0.9 will
download the additional fonts to the website and enable them in your theme. If you dont check
this option, all unsafe fonts will be replaced by the fonts from the Safe fonts list.


Accounts tab

Divine Elemente 0.9 settings. Accounts tab.

Add new account - Creation of a new account for theme's publishing using FTP client.

Selecting any account from the list, you may set parameters required for publishing on the right side
of the window:

FTP Host (website URL) - you may enter a server address in this field. You may also indicate
a port number in this field, if required (for example, www.mywebsite.com:2121)
Remote theme folder - you may show the path on the server of your CMS directory.
Login / Password - authorization* data on the server are filled out in these fields.


Change proxy settings - at this option selection, additional fields, which proxy server's data are
inserted in, appear. In case you use a proxy server, these fields are to be filled in.

Proxy server - you are to insert proxy server's address in this field. You may point a port
number, if required (for example, SomeProxy:2121)
Login / Password - authorization** data on the server are filled out in these fields.

* ** These data are used for authorization on the server only and are not transferred to anywhere.


Conclusion

So, you have just learned details of Divine Elemente interface and its tabs and panels, thus knowing
well the whole working area of our software.

Layout Editor

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.

Layout Editor is a part of Divine Elemente that helps to specify a layout grids type and its parameters
for an open PSD template (grid blocks arrangement, their sizes and themes elements list) and also
to create a new PSD template on the basis of the data indicated.

Layout Editor basic workflow

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

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

New PSD template creation
Update of a current PSD template for Divine Elemente

Layout Editor workflow

There are two working modes in the Layout Editor, which allow to:
- Create a new PSD template
- Update a current PSD template

New PSD template creation
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
Elementes Publish Editor, if they are named correctly (we name such kind groups - PSD hints -
ex: Link, Logo, Text, etc.).

Creation of a blank 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.

More details on work with a template can be found in the Quick start guide and the Update of a
current PSD template for Divine Elemente tutorial.

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
themes 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 Editors 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 themes 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 available for assignment


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

Parts of a grid block in the Layout Editor

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


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

Change of layout grid's parameters in the Layout Editor

Swap nearby grid blocks (if applicable)
It may be necessary if you have suddenly decided to make a few changes in your layout design using
website Layout Editor.
To do that, open Swap menu in the dropdown list and select a required item (as you can see on the
picture below):

Swap menu. An example of grid blocks replacement.


Add required elements / widgets list to each grid block.
To do that, you are to choose required elements in the appropriate list on the canvas or in the
Elements panel (as you can see on the picture below):

Add required elements to each grid block

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



Layout Editor interface: side panel

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

Command panel

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

Creation of a new PSD template

A Create new PSD button (or Update PSD if you launched LE with PSD)

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

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

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

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

Command panel. Creation of a new PSD template.


Switch to the Publish Editor
To convert a PSD template into a ready web page (theme for CMS), you are to switch to the Publish
Editor. There is a "Publish" tab on the side panel for this purpose.

Defining of page elements' list and elements assignment

All changes, made in Layout Editor (layout size, grid blocks sizes, available elements, etc.), are
applied to a PSD template at once and will be used in the Publish Editor.

Layout and grid blocks sizes

This panel is used to specify a layout grid and set parameters for each grid block.

To do that, select an appropriate layout grid from the dropdown list and then specify parameters
opposite each grid block in the list.

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


A. Max size of a PSD template
It sets a size of a whole PSD template.
B. Layout grid selection
It allows to switch between different layout types
(with / without sides, 1-3 columns {in the future}
).
C. Content size
It sets a page bodys 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 layouts each grid block from here.

Side panel. Elements panel


The panel consists of two parts:
A. Mass Add, Remove elements and Show elements filter

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

Add (+) - is used for quick addition of a predefined elements list.
Add elements to CMS theme ('Post Text', 'Post Author', 'Date', 'Comments', etc.)
Add static elements ('Image', 'Link', 'Text')
Add style elements (<h1>, <p>, <a>, etc.)
Add all elements - it adds all available page elements


Remove (x) - is used for quick removal of a predefined elements list.
Remove CMS theme elements ('Post Text', 'Post Author', 'Date', 'Comments', etc.)
Remove static elements ('Image', 'Link', 'Text')
Remove style elements (<h1>, <p>, <a>, etc.)
Remove all elements - it removes all elements added to the page


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


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


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

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

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

Using ticks 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.





Publish Editor

What Publish Editor is and how it can be used in Divine Elemente for simple website
publishing. Publish Editors basic workflows and their detailed descriptions are considered in
this guide.

Publish Editor is a part of Divine Elemente that you can use to assign elements, adjust element
properties and publish a web page or working CMS theme.

Publish Editor

Possible ways to launch the Publish Editor and publishing workflow are shown in the guide below.




Publish Editor launch

A PSD template can be opened either in the Layout Editor or the Publish Editor. Select the
appropriate editor from the Divine menu.To make it easy to work with Divine Elemente in Adobe
Photoshop, the Divine menu was placed in Photoshop upper menu, and divided into several
submenus.

Publish Editor. Launch the Publish Editor from Adobe Photoshop

After its launch, Divine Elemente preprocesses your PSD template, looking for PSD hints and
invisible data such as layout grid, elements properties, themes properties, etc.

If a PSD template was previously saved in Divine Elemente, or a special PSD hint group or layers of
a template were prepared in Photoshop in advance, they would be applied to the PSD template in the
Publish Editor.

Publish Editor. Autoassignment


If the properties or PSD hints are not found by Divine Elemente, the plugin will use its default settings
for a PSD template. These can be adjusted in the Layout and Publish Editors.

Publish Editor. Manual assignment

The Layout and Publish Editors work jointly with each other. All of the PSD template data are
synchronized between the editors.

Publish Editor. Switch between editors

Thus, there is no necessity to quit from one editor and launch the other one. To move from one editor
to another simply click the Layout or Publish editor tab in the Command panel (on the right).

Read more about the Layout Editor or PSD hints.

After the Publish Editor is launched, the elements assignment, adjustment, etc. can be used for
performing further publishing workflow edits.


Work with Publish Editor

The basic workflows of the Publish Editor are elements assignment, properties adjustment and setting
the publish format to a web page or a theme. All of these workflows are described in details below.

Elements assignment
Elements assignment in the Publish Editor is carried out in the Layers panel or canvas. During this
process each element can be assigned with properties such as, styles and functionality required for a
web page / theme objects. This can be Text, Link, Image, etc.

Publish Editor. Elements assignment

Element properties adjustment:
After an element is assigned, it can also have additional properties added. Each element has its own
number of available properties.


For example, you can include a link http://www.mywebsite.com or /home.php; adjust autonaming
properties, and quality and type of an image (JPG 60% or PNG24); set margins, etc. These
adjustments can be carried out in the Properties panel.

Publish Editor. Properties panel

More details on elements properties and their setting can be found in the Elements and Properties
guides.


In the Publish Editor you can also check actions performed during element assignment and
adjustment. The View > Show elements menu item (A) in the upper menu will show the name of the
elements highlighted by your mouse.

Publish Editor. The View > Show elements menu

After you have assigned elements and made your adjustments you are ready to publish your work.
Information on various publishing modes is considered below.




Publishing

Publishing is the process of converting the PSD template into a web page or a CMS theme.

Publish Editor. Publishing

There are 3 publishing modes in Divine Elemente: HTML preview, Save to folder and Publish via
FTP account.

Each mode offers various options dependent on your requirements.


HTML preview is a publishing mode that can be used to create a separate web page in HTML / CSS
format.
Publish Editor. HTML preview

To publish HTML preview:
select a HTML preview (B),
and then click on the Publish button (A).

If you want to preview a CMS theme you can use HTML preview and all dynamic themes
elements (Post title, Author, Date, Comments, etc.) will be converted into HTML static elements
(Image, Link, Text), and displayed on the page.


Save to folder can save all the themes files in a local folder on your hard drive.
Publish Editor. Save to folder

To Save to folder:
set the path to the folder (the Settings > Publish menu) (A);
select Save to folder (B)(C);
and then click the Save to folder button (D).

And youll get a ready theme for installation with all plugins and properties required for its work.

Warning: At the theme uploading to the server, you should install all the plugins downloaded before
your themes activation. This installation is required just once for the first theme only. The rest themes
will be activated with no problem.

So, please follow these steps carefully:
Create a theme (Save to local folder).
Copy all the themes folders to your server.
Install all new WordPress plugins (in the WordPress (wp-admin) backend)
After that, activate your theme.

Note: This mode can be used for checking / editing your theme on your local machine before
uploading to the Internet. More details on these actions can be found in the XAMPP virtual host and
WordPress installation guide.
Publish via FTP account is used to publish the files and upload them to your web server /web host
via FTP.
Publish Editor. Publish via FTP account

To Publish via FTP account:
set your FTP account details (the Settings > Accounts menu) (A);
select Upload to <Account> (C);
and click the Publish button (B).

Hint: Using one account, several themes can be uploaded to the web server right from Divine
Elemente. You can then change your website / blogs design as often as you want (e.g. according to
changing of seasons, day time, holidays, etc.)



Conclusion

This concludes the guide on the Publish Editor and publishing workflow. Now you can start
experimenting with Divine Elemente and further enhance your skills.



Elements

Website elements in Divine Elemente: how and where they can be used, added and assigned;
theme elements definition, types and statuses, and essential information on plugins
extensions are considered in this guide.

Elements addition
Elements addition by predefined sets
One-by-one elements addition
Elements assignment
Main workflows of elements assignment
Elements status
Types of elements
Elements properties: common and unique
Best Practices


Wed 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.

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.
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

Wed 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.

More details on this method can be found in the Quick start guide.

MUST KNOW: Divine Elemente doesnt 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
Themes Portal 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 - Speeding up of publishing time.

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!

More details on this method can be found in the Quick start guide.


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 websites 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 contents 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.

Elements properties
More details on elements 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 templates 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.



Properties

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.

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

Majority of elements properties (styles, bg image, fonts, etc.) are read off from a PSD template
automatically at elements 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:

SEO / META panel
Page background design properties
Common Properties
ALT, CSS, Image, Margin Autonaming properties

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

Theme properties.

A. Elements name.
It shows an elements 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 images quality, type, and text
extraction format for publishing of elements
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 elements 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.


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 pages title (Tag <Title>). And
its used at HTML pages 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 youll 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

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 areas height that
will be used for background's gaps filling.
J. BG (Background): Fade vertically.
Its 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.
Its 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

A. Elements behaviour
Its used to display an elements name and
offers a chance to change the current value
from the dropdown list.
E. Link
Its 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 images quality, type, and text
extraction format for publishing of elements
graphic component and autonaming of these
files by default too.
C. Content
This property notifies that this elements content
can be edited in CMS. More details can be
found in the Editable content guide.
J. CSS text
Its used to specify a CSS class name of an
element.
D. Margin properties
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 (elements name, layers name, ID number) and a separator between these data
too.

Common properties. Autonaming options for CSS classes, ALT text, and images.

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 areas height that
will be used for background's gaps filling.
J. BG (Background): Fade vertically.
Its 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.
Its 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 names 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, youll get CSS name - Text_n150.

Margin property

Margin property allows to calculate an indent for the selected elements sides automatically.

Common properties. Margins values.

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 elements boundary to the inner boundary of its paternal element.


Image properties: 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.

A. Export (publish) text as ...
option that allows choosing the way of the
element texts display on the page
(Text, Image or Text + Image).
C. Images quality
option that allows setting the quality of the
elements image displayed on the page.
B. Additional properties of the images
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 images 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 elements 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 elements 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 - its called a warped text), than must be published as an image.


Remember: Using any given format (GIF, PNG24 and JPG), please remember that browsers dont
support rendering modes (overlay, multiply etc.) like in Photoshop. So, all elements 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

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:
elements 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:

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.



Detailed Elements Properties

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.

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

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 its 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

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 images quality, type, and text extraction format for the publishing of
elements 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 elements 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 elements 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 elements 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 elements 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 browsers address line,
favorites, search results, or in specific resources (folders, social projects).
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 widgets 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 elements 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 widgets 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 elements properties.

You can set common properties with this option:

left and upper indents in the element,
customer images 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 contents 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 youve 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.





Elements types: Date, Author and Comments

Want to change appearance of the Date, Author, Comments elements at your website?
Learn about custom format of elements and their use in Divine Elemente following this guide.

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

These parameters are used for the text formatting of the Date, Comments, Author elements in the
way youd 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 elements 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 Posts Content.
Date elements 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 months 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 years 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



Formatting attributes - Author

The following attributes are taken into account while dynamic formatting of the Author element:
Author elements 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
Formatting attributes - Comments

The following attributes are taken into account while dynamic formatting of the Comments element:
Comments elements 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 Author format
Custom formatting attributes use in Divine Elemente

In order to get a required texts format of the Dates, Authors, Comments elements, you are to
follow just three simple steps:
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 - Speeding Up of Publishing Time

In this guide, we are going to explain how you can fasten your work greatly at template's
creation, and what the PSD hints are in fact. PSD hints use and layer naming with Divine
Elemente.

We added a PSD hints support starting from Divine Elemente. It will help to simplify and fasten the
process of template's creation and CMS theme's preparation greatly.
PSD hints, the named special hint group or layers in PSD, are used for automatic defining of elements what
speeds the publish process in some cases in 30 times!

Use of PSD hints in a PSD template is an optional possibility. You should not bring the structure of a
PSD template to the set kind.
Elements can always be assigned in the Publish Editor one-by-one:
Choose the right method for you: Comparison of two approaches for elements assignment
Publishing speed: Comparison of automatic and manual approaches for elements assignment

A hints list for all elements can be found in the Elements hints list.

PSD Hints limitations:

- Elements assignment shouldn't break the frame boundaries of a grid block in order to publish them!
- Limitations on Adobe Photoshop folders' nesting (for CS - CS4 - no more than 5; for CS5 - more
than 5).
- Auto setting of groups is working starting from Adobe Photoshop CS and higher.
- There are no groups in Photoshop Elements, PSD hints are limited by layers.
- Boundaries of a paragraph text shouldn't break frames of a grid block.

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


Rules of PSD hints use

1. Use groups' names for PSD hints.
In other words, each element gets a Photoshop group with an appropriate PSD hint name, detailed in
the Element's hints list.

2. Nested groups for an appropriate element state are taken into account.
It will help to define the element states like normal, hover, visited,
click.
Rules of PSD hints use. Work with groups.
3. Layers are not taken into account for auto setting (so you may name them as you wish).
Only group's name is used for auto setting.

4. Only the top text layer is to be chosen as an element's text.
In case an element consists of several different text layers, only the top text layer
is to be selected as an element's text. The rest layers in the group merge into one
image.
Rules of PSD hints use. Work with text layers.

5. An element will not be defined in the Publish Editor, if any of its layers breaks boundaries of an
appropriate grid block.
Rules of PSD hints use. Crossing of a grid block's boundary.

Hint: If you create a new PSD template from the Layout Editor, the order of layers and their groups
will be created automatically in accordance with the structure and added elements in the Layout
Editor.

More details on the list of PSD hints with elements description can be found in the Element's hints
list



PSD hints use: where and how

It's just an optional possibility as it was said before. This functionality was developed for those who
like or need to change theme's design very often. Mainly, such people are designers, web developers
or fastidious bloggers.

In case you use a template for theme creation only, without applying any changes later, you'd better
assign elements in the Publish Editor. It'll be much easier and faster.




Large Web Page Backgrounds with Stretch

A new easy way to create a great large background of your websites with Divine Elemente
is described in this guide. Web page backgrounds and possibilities of their creation, using
seamless stretch background.

Seamless background stretch is a unique technology provided by Divine Elemente only, that for
the first time in web industry allows to display textures or background of a website block at vertical
stretching or compression with no visible seams!

Background image is graphics that fills spaces to the left and to the right from the websites content
boundaries (on monitors with high screen resolution).

An example of a template with use of Seamless stretch and Background image

In this guide, we'll consider main aspects of work with this unique technology and large background
image.

Use of Sides grid blocks

If you use a template with a graphics that fills spaces to the left and to the right from the websites
content boundaries, a special layout grid with Sides blocks can be applied.

An example of a template with use of Sides grid blocks

Interesting: An author of this theme spent near a week to handcraft beautiful design in Photoshop, providing
full detalisation from scratch... However to publish a complete working theme for WordPress without a line of
code, you'll need less than 5 minutes.

First of all, to create a template with sides, specify an appropriate layout grid with additional Sides
blocks in the Layout Editor.


Selection of an appropriate layout grid

If you decided to create a template with sides, you are to select a required layout grid in the right
panel and set parameters in accordance with the page's template.

More details on this process can be found in the Layout Editor guide.

Selection of a grid and setting of page's parameters in the Layout Editor

Everything in the Sides grid blocks will be defined as an image outside the websites content
boundaries.

The next step for this theme's creation is "Addition and assignment of theme elements". But this
information can be found in the Quick start guide.

Then, let's consider theme's stretch parameters responsible for large background image filling at
content's height enlargement.

Use of stretch parameters

There are just four types of filling background's gaps in case the content breaks page boundaries
vertically: No Stretch, One Big Background, Simple Stretch, Seamless Stretch.

Types of background design


BG Type: One Big Background - At page's enlargement, layers that lie on the background are
merged and published as one huge image, including the Footer. Its recommended to use this type
for one-color website or websites with one large photo ***.

Types of background design. One Big Background.

BG Type: No Stretch - At page's enlargement, background's gaps are not filled with repeated images
of this background. Its recommended to use this type for the Header and the Footer grid blocks, as
these images are not to stretch vertically in 90% cases.

Types of background design. No Stretch.

BG Type: Simple Stretch - At page's enlargement, background's gaps are filled with repeated
images of this background. It works well for flat backgrounds, but not for complex textures.

Types of background design. Simple Stretch.

BG Type: Seamless Stretch - At page's enlargement, background's gaps are filled with repeated
images of this background with unique smart algorithm. This method is extremely useful for really
complex backgrounds (textures like leather, grass, wood, paper, etc.).

Types of background design. Seamless stretch.

Please Note: Possibility to set a background is available only for elements and the entire page in
Divine Elemente 0.9. But possibility to set background for widgets and grid blocks will be available in
the next version of Divine Elemente plugin.

Have ideas about how to improve this functionality? Create a post at our forum or become a beta
tester.

Optional parameters

For more detailed page settings, you can specify your own stretch parameters for each background
part.

For example: Leave No Stretch for Header, set Seamless Stretch for Content and use Simple Stretch for
the Footer.

You can also set a position and width of stretch area for each grid block. To do that, drag stretch
area's boundaries on the canvas or set its exact position and size in the Properties panel.

Stretch parameters. Stretch area's specifying

It's necessary to set the following parameters for exact specifying of the stretch area:

- Stretch: Distance from top (px). It sets a top point of the background area, which will be used for the
background's gaps filling.
- Stretch: Height of tile (px). It allows to set the background areas height that will be used for the
background's gaps filling.

Almost each option includes a Fade parameter.

Fade effect

The Fade effect is a parameter that allows to create an effect of image's smooth transition into a
background color.

Fade parameter. Setting of the parameters values.

The above parameter's values are indicated in percentage ratio from the entire block across and
down accordingly.

Using the fading background images considered above, you can improve your theme's look and
quality and create really unique design of your website.

In the future, this guide will be expanded greatly. Check back often.


Conclusion

You have just found that its really possible to create a seamless background image performing no
manual work, but several clicks only. And you have a choice of stretch parameter for your personal
needs during website design creation with possibility to use the Fade effect.


960 Grid

The 960 Grid System as an effort to streamline web development workflow in Divine Elemente:
definition, rules of its use in Divine Elemente and 960 Grid template examples are considered
in this tutorial.

960 Grid tool represents universal dimensions to arrange web page elements in the most consistent
way, and it gives your web pages a professional look & feel. The 960 Grid template is used more and
more often in the web development as a standard.

Use: 960 Grid examples
960 px width is universal solution for setting a web page width that all modern daycomputer devices
and browsers available on the market can display correctly.


How to use 960 Grid System in Divine Elemente

As mentioned above the 960 Grid is a template tool to aid aligning and arranging elements in Divine
Elemente. Since it is a tool, it was decided to place it as a separate item in PS menu (Elemente >
960 Grid tool). The basic steps of working with the 960 Grid System are shown below.

Step 1. Launch 960 Grid tool.
Open a PSD template and select the "960 Grid Tool" item in Divine Elemente menu.

Launch of 960 Grid tool


Step 2. Set layout grid parameters.
In most cases, enter 12 or 16 or 24 columns to suit your design tasks, or in few cases, change
column's or gutter's width if required, and press "Apply".

Selection of layout grid parameters


Step 3. Arrange all elements in the layout grid.

Selection of layout grid parameters

Note: Additional layers created are not taken into account when the theme is being published
because Divine Elemente switches them off when analyzing the document.


Conclusion

As this tutorial shows, the 960 Grid System is easy to use in Divine Elemente and hopefully will be
useful for creating a design and making 960 Grid PSD as it helps a lot with headaches regarding
layouts and their structure.

Billboard

How to become an extra creative person who can design a website with jQuery slider and draw
visitor's attention to it? Try a new feature of Divine Elemente called Billboard. This guide
defines a Billboard widget and ways of creation of Javascript slide show in Divine Elemente.

Billboard (also known as JS image slider or JS slideshow) is a group of elements in Divine Elemente
that forms a block with changing slides.

At present it is really trendy to use beautifully changing slides, for example, in the Header grid block
in order to show 3 - 5 best works in portfolio or cute photos in a personal blog.

Besides, the Billboard widget allows not only to create changing slides but make these transitions
beautiful and with nice JS animation.
Billboard widget


So, Billboard consists of such elements as Next, Previous buttons, and also any number of layers
with Slides.
Billboard structure

You can find the structure of the Billboard widget on an image placed above. All the sizes of layers
with Billboard elements are calculated during Billboard creation, and the whole blocks size is
determined.

More details on how to create a Billboard (or Javascript image slider) in Divine Elemente without any
line of code can be found below.

Creation of Billboard in Divine Elemente

First of all, lets start from the preparation of all required elements of the Billboard widget.

Step 1. Prepare elements in a PSD template.
Because of all elements are provided with special names of groups (PSD - hints), Divine Elemente
can define them at once and assign the appropriate behavior to them automatically.
Elements assignment

Note: Slides are taken in any number only from the Billboard > Slides group and can be set only as
one layer for a slide.

Billboard elements (Previous, Next, Slides) can be arranged together and be assigned in one
copy in the Header grid block and in one copy in the Footer grid block, as it is shown in the image
placed above.
Billboard elements arrangement

Note: No less than one Slides element is to be assigned for smooth work of the widget, because
the Next / Previous buttons cannot work correctly without this element. Otherwise, they will be
published as static HTML elements (Image, Text, or Link).


Step 2. Launch Divine Elemente and set elements properties.
Select elements of the Billboard widget in the Elements panel and then set their necessary
properties in the Properties panel.
Billboard elements properties

A. Animate parameter
It allows to switch on / off an animation
effect at slides changing.
B. Transition duration
It allows to choose effects duration at slides
changing.
C. Slide duration
It allows to set time for slide display.
D. On Event parameter
It allows to select an event, after which
animation effect starts working.
E. Animation effect
It displays a list of supported animation
effects at slides changing.




Step 3. Publish a theme and activate it.

To publish a theme on the server, you are to select your FTP account in the Command panel and
click on the Publish button. More details on how to create and set a FTP account can be found in the
Publish Editor guide.

Then you are to activate the theme at the website. To do that you are to move to the backend of
WordPress CMS (add \wp-admin in the address line), enter login and password,
and move to the Appearance>Themes section. Then please select the theme installed and
press Activate.

Activate a theme

Troubleshooting: elements are out of grid boundaries.


Billboard elements should not be out of the Header, the Footer boundaries!
Elements assignment

If one of the Billboard elements is out of the grid bocks boundaries, the element will not be assigned!


Billboard editing

Together with the theme, the Billboard plugin is installed in the backend of WordPress CMS, where
you can edit all the required Billboards parameters right at the website (in other words, there is no
necessity to edit a template in Adobe Photoshop and convert / upload a theme to the website all over
again).
The installed plugin in WP backend

To set parameters, you are to move to the backend of WordPress CMS (add \wp-admin in the
address line) and move to the Divine > Billboards section.


Billboards editable parameters in the backend of WordPress CMS
You may set the required parameters and Billboard elements data on the page opened.
Billboard elements parameters in WordPress CMS

Animation parameters are fully similar to parameters being used at the assignment of the Billboard
element - Billboard > Slides in Divine Elemente:

(A) Animate parameter - it allows to switch on / off an animation effect at slides changing.
(B) Transition duration - it allows to choose effects duration at slides changing.
(C) Slide duration - it allows to set time for slide display.
Besides, you can look through and set all slides of the Billboard element, namely:
Billboard editing. Editors window

() Change the order of slides display - to do that, you are to place the appropriate slides up
or down.
(B) Edit a slide to do that, you are to click on the Edit button and make the required
changes in the open editors window.
(C) Delete a slide - to do that, you are to click on the Delete button opposite the unnecessary
slide.
(D) Insert a new slide - to do that, you are to click on the Insert new slide button. A new slide
will be added after the current one.


Editors functionality is similar to the Editable Content editor.



Conclusion

As you have just found out in this tutorial, creation of Billboard or JS image slider doesnt take much
time and is quite simple in Divine Elemente. At the same time, the result of Javascript image sliders
use in your design can make your work really unique and attractive.


Editable content

Definition and use of Divine Elemente new special feature: Editable content. Following this
tutorial, youll find that your websites content in place editing couldnt be easier.


Such elements as Link, Image, Text have a unique property - Editable content in Divine Elemente
v0.9. It is a new feature that informs your CMS after themes publishing that the content of such kind
elements block can be editable in WordPress CMS, right at the website frontend!
Working process with the Editable content property

A small Edit label gives you a possibility to edit texts, images or insert adsense code directly at the
website frontend after the publishing it from Adobe Photoshop.


You can also add your favorite YouTube reels, mp3 players, etc. with the help of the Editable content
feature in Divine Elemente v0.9.
The Editable content window

And in case you are an advanced user, you can insert any HTML code or WordPress CMS plugin and
extend your websites functionality infinitely!

Below you can find more details on how to edit website content with no difficulties.

How to use Editable content?

Step 1. Create a required element / layer in Adobe Photoshop.
First of all, you are to prepare layers / group of layers for the element in your PSD template, and then,
you are to assign such elements as Image, Text, or Link to the layer.
Elements assignment in Adobe Photoshop using a PSD hint or in the Publish Editor of Elemente

Step 2. Launch Divine Elemente and change the Editable ontent property.
And then Content: Editable in CMS is to be set in the Properties panel.

The Properties window

Not editable in CMS (by default) - means that the field for editing in CMS is not displayed. The
element is published as a static one, and its content cannot be edited in the WordPress CMS
backend.
Editable (Rewrite in CMS) - means that the field for editing in CMS is displayed, and at each themes
activation, this elements data are rewritten by the data indicated in Adobe Photoshop (in case this
element has been found in the previous theme in CMS).

Editable (Leave as is in CMS) - means that the field for the selected elements editing in CMS is
displayed, and at each themes activation, this elements data remain the same as they were in CMS
(in case this element has been found in the previous theme in CMS).

Step 3. Publish a theme and log in to the backend of WordPress CMS.
Themes activation


Step 4. Switch on the content editing.
Find a hidden floating menu with Divine Elemente label. It is located in the top right corner of the
browser window or in the top left corner (it depends on the Frontend label element properties - you
can find it in the Publish Editor). After that, you are to click on the checkbox Edit content to enable (or
disable) the editing mode.
Editable content: a hidden floating menu

After you switch on the content editing mode, youll find the e> icon near editable elements. So, you
can click on this icon and start editing an appropriate element.

Note: The hidden floating menu is active only if a user is logged in to the CMS as an administrator.


Step 5. Edit the elements content.
You are to click on the icon that is near the editable element and make necessary changes of the
elements content in the appeared edit window. After that, click on the OK button.
Insertion of the elements new content and output

And congratulations! After you confirm the changes made, all new entered data will be updated
immediately. So, you can check your work at once with a new property of Divine Elemente - Editable
content.



Conclusion

Thus, for a couple of minutes you have learned about a new feature of Divine Elemente v0.9, and
now can edit the website content directly at its frontend with the help of the Editable content property.



Custom fonts

Want to create a modern unique design for a website applying not only safe web fonts? You
will do it with no problems, using custom fonts with Divine Elemente. Plus, addition of custom
fonts on website in several simple steps.


Custom fonts are new attractive fonts, which are not included in the list of safe web fonts at
the moment. However, they were added to a page layout by Divine Elemente using the latest
achievements in CSS.
Use of custom fonts on the website

Nowadays, almost all modern browsers (Firefox 3.5+, Chrome 3.0+, Safari 3.1+, Opera 10+, IE 5+)
work with custom fonts embedded in a website by CSS.
Custom fonts usage is a step towards new possibilities for a web developer. It is a way to speedy,
convenient and various websites. With optional fonts, youll be able to improve your websites design
and make it really unique.

Advantages

Use of CSS only
There is no necessity to use images, Java scripts or flash objects, which slow down websites loading
speed.

Ideal for SEO
A text remains as a text, in other words, it can be highlighted, change color, become bold or
underlined, etc.

Disadvantages

Website loading speed
depends on the size of a loading font (additional 30-75 kB).

Restriction on use
Each font has its own license.

Info: Because of long duration and high cost of one font development process, developers take
tender care of their own custom fonts using in the Internet, as at page browsing a font is loading
locally on the computer and becomes public.
Custom fonts use in Divine Elemente

To add custom fonts on the website with the help of Divine Elemente plugin, its necessary to follow
several simple steps.
The process of new fonts addition to a template

Step 1. Download and install a desired font.
You can use our Fonts portal to purchase or download new custom fonts.

Step 2. Specify a font of a text layer in a PSD template.
You are to open a PSD template in Adobe Photoshop, select a text layer there and apply the installed
custom font to it, as it is not included in the list of safe web fonts.

Step 3. Launch Divine Elemente and publish a theme.
At publishing of custom fonts, Divine Elemente plugin will display an appropriate message in the log.

After the publishing, the font will be copied in a separate file (or files) and applied to a generated
theme / web page.

Note: In case a selected font was not installed in a system for any reason, a font from the Safe web
fonts list would be used by default.



Conclusion

Thus, you have just learned what custom fonts are, advantages and disadvantages of custom fonts
on website use and easy steps of such kind fonts addition. So, now you can decide yourself: use or
not to use.


Advanced Text Effects and Publishing

Type layers from a PSD template and PSD text conversion to a web page and text formatting
with Divine Elemente. Photoshop text effects, safe fonts and custom fonts are considered in
this guide.

Adobe Photoshop has a large list of parameters for a text and font attributes and in order to take
them all into account, a coder has to spend much time. However, a coder is an ordinary man, so he
can make mistakes. Whereas this fact, Divine Elemente reads off absolutely all text parameters and
Photoshop text effects and converts them in HTML / CSS immediately.
Examples of advanced type converted to CSS / HTML text

The basic text parameters and tips for work with them in Divine Elemente are considered in this
guide.

Type layers and their conversion

During the analysing of a template, Divine Elemente reads off all possible data from type layers, even
the most insignificant ones. Thanks to that, all elements are displayed as closer as possible to the
original template.
Character and Paragraph styles in Adobe Photoshop

So, lets consider text parameters and PSD text effects and recommendations for custom and safe
fonts use in your template during PSD text conversion.


Use of Point and Paragraph types and their features

You can convert Point type to Paragraph type in Adobe Photoshop and vice versa.
Their main differences and ways of their use in Divine Elemente are considered below.
Example of Point type and Paragraph type

Primary differences:

Point type Paragraph type
Point type continues in a straight line unless
you press the (Return) [Enter] key to insert a
line break.
Paragraph type automatically wraps to the next line
when the text reaches the boundary of its box.
The space occupied by point type continues to
expand as more characters are added.
Paragraph type is restricted to the designated
rectangle; characters that don't fit in the rectangle are
hidden.
Point type is added from the specific spot in
the image where the Type tool was clicked.
Paragraph type is added from the top of the bounding
box.
To add point type, click with a Type tool. For paragraph type, drag with a Type tool to create a
rectangle to fill with the type.
Resizing the bounding box around point type
scales the type.
Resizing the container rectangle for paragraph type
forces the text to reflow within the container; the type
maintains its original size and proportion.

It is recommended to specify a type of a text layer for themes text attributes design in Divine
Elemente in order to define and set boundaries of the text block at templates conversion.

Hint: Use of Point type is recommended for such web elements as Logo, Navigation menu, texts
that will not be changed in CMS.
Hint: Use of Paragraph type is recommended for elements, which contain more than one line
of text, and for elements, which boundaries should be set accurately (Posts > Titles; Posts
> Contents; Posts > Comments, etc.).
Example of Point type and Paragraph type use


What is a Safe font?

There are many thousands of fonts in the world, but in order the fonts (you use at your website) are
displayed in the same way for all users with various OS, its recommended to apply a list of "Safe
fonts".

The following fonts are considered to be 'safe':
Safe fonts examples

What is a Custom font?

Divine Elemente works not only with safe fonts but with modern custom fonts too, that are usually
offered be such services as @font-face, HTML5 fonts, Google Fonts, Fontspring, Typekit, Fontslive,
etc. Tips for their use can be found in the Custom fonts guide.

Its recommended to use no more than three fonts on a web page.
Learn more about font stacks.


Type formatting

If you want to draw attention to any important part of your website content, you often apply various
methods of text formatting. Some of automatic PSD to HTML solutions offer only a small part of
formatting attributes as underlining, italics, CAPS, bold type, and thats all.

Divine Elemente allows to use the above mentioned methods plus many optional font attributes and
parameters of text formatting that are considered below.
Example of conversion of various text styles


Optional font attributes

Besides character styles (font family, size, color), Divine Elemente plugin also recognizes such font
attributes as Font Leading, Tracking, Kerning, Baseline Shift:
Optional font attributes

Lets consider each attribute in details:

Leading - the space vertically between lines of text (name comes from the physical piece of lead that
used to be used in mechanical printing process to separate lines of text):

Example of the text publishing setting Leading value
Kerning - the amount a character's horizontal space encroaches into its neighbor:
Example of the text publishing setting Kerning value

Tracking - the horizontal space between each character:
Example of the text publishing setting Tracking value


The Baseline Shift is used to shift characters up or down from their baselines.
Example of the text publishing setting Baseline shift value

Type FX and CSS shadow

Users often apply optional Photoshop text effects in type layers (shadows, glow, gradient, pattern,
etc.). At this moment Divine Elemente supports not only advanced text output, but processes
Shadow effect too (modern trend, you know). All other type effects will be switched off during the text
publishing.
Example of shadows

Note: In order to display other Photoshop type effects in your template, there is a possibility in Divine
Elemente to convert type layers as images. More details on this issue can be found in Properties
guide.
Anti-aliased text

You can always choose a required value of the text anti-aliasing in Photoshop but anyway the text in
the browser window will differ from the one created in a PSD template after PSD text conversion.

Hint: As Adobe Photoshop and your browser may use different algorithms for text display,
its impossible to reach 100% fidelity, unless you display a text as an image. However, its not
recommended, as it can influence your website rating in terms of SEO and search engines (Google,
Yahoo, Bing etc.).

Find more about text rendering modes and their differences here:
http://en.wikipedia.org/wiki/Font_rasterization
http://en.wikipedia.org/wiki/ClearType
http://en.wikipedia.org/wiki/Antialiasing



Conclusion

Thus, you have learned about types, their effects, font attributes and other opportunities that can be
applied to a text, and know the tips and output of their use in Divine Elemente plugin during PSD text
conversion into a web page.


Multi-page Website Creation with the Predefined or
Custom Content
Want to create a website with any number of pages connected with each other but dont like to
spend much time playing with each web page creation? Divine Elemente plugin and our guide
will show you the way ;-)

In addition to the main task of Divine Elemente plugin - CMS themes creation, there is a powerful
ability to create multi-page websites. In other words, with Divine Elemente you can get a possibility to
create several pages from just one template.
Multi-page work principle

First of all, it allows to connect items of navigation menu either with current pages or new ones
created by you. And all these pages of various types will have a custom content or predefined one
(such as contacts, portfolio or gallery with separate images).



Workflow and properties
To create a multi-page website and connect a navigation menu with its web pages, you are to follow
these several simple steps:
Workflow for multi-page website creation

1. Create a new page (Create / rewrite page) in this elements Page property for the Menu
widget > Link element .
2. Indicate a page name and change the content if required that will be used as a page filler.
Besides, you can choose a predefined template.
3. Publish a theme.
Page Properties (Menu widget > Link element)

You can find a Page property in the Properties panel of the Publish Editor. Its available only for
each Link element (in the Menu widget).
Multi-page. Page property

A. Create / rewrite page - it helps to create a new page at the website. If this option is enabled, a
new page will be created or a current page with the custom content or predefined one will be rewritten
at publishing.

Warning! Each page with predefined or custom content creates a new or replaces a current page with the same
name at the website!!!

B. Page name and content type - here you can enter a name for a page. Also in the dropdown
menu of this field you can choose a content template of a new page.

C. Page content - here is a custom page content. You can put a page custom HTML code into this
field.

D. Unique or linked page names - it switches on / off uniqueness of the page name.

E. Add comments fields to the page - it switches on / off comments fields on a new page.

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

Templates for content

Divine Elemente plugin can both create new pages and fill them with the predefined content. In the
options of the Menu widget > Link element you are to indicate a page contents type that will be
used.
Multi-page. Predefined content - the Page template
Multi-page. Predefined content - the Portfolio template
Multi-page. Predefined content - the Contact us template

All predefined types of the content are displayed in the Page name and the content types field.
You can also set your custom content for a new page. To do that, you can make changes in the
predefined content code in the Page content field or replace the entire code by your own one.
Multi-page. A custom content.

The page will be filled in accordance with the indicated content type at publishing, what can be
changed later at the WP backend.

Warning: Each page with the predefined or custom content creates a new page or replaces a current
one with the same name at the website!!!

We recommend you to get acquainted with the Best practices guide for more accurate creation of a
multi-page website.

Page names: Unique or linked

In some exceptional cases, you may wish to use a page name more than one time for more than
one Link element of the Menu widget.

Example: an usual link Prices in the Headers top menu, and huge_accented_red (thanks to the marketing
department) Buy now button with the same link prices.html
Page names. Unique or linked

Linked page name

In these cases mentioned above Divine Elemente automatically connects these page names to one
unique name, indicating this state with Linked page name icon on the right Page name and content
type field.

If you select a current page (for the other Menu item element), it will be marked (A) icon.

It means that the Menu item element will refer to the same page as the other Menu item element
will, for which this page is created.

This done for more meaningful page naming behavior, like in CMS (you create a page Prices one
time, then you simply add a link to this page many times, but not create many same pages with the
same name).

Unique page name

If youd like to create a new identical page for this element, you are just to click on the icon by left
mouse button. After that, it will be changed to icon (B) and a numerical index will be added to the
pages name (About us > About us1).

Note: If you accidentally named a page the same way as the other page, you can easily rename it
making it unique or disable Linked page name state by clicking on the button with the Linked page
name icon.



Conclusion

Thus, you have just learned how to create a multi-page website using current web pages or making
new ones with Divine Elemente plugin, and have known about the predefined and custom content that
can be used for this purpose.
Sell / Buy WordPress Themes

You want to earn money creating new amazing WordPress CMS themes or spend money
for items you suddenly liked very much? Buy themes and sell themes for WP with pleasure
following our simple instructions in this guide and using Divine Elemente 0.9 opportunities.



The Themes Portal at our website was developed especially for Divine Elemente 0.9 users.
With its help you can:

< Buy WordPress themes >

Prepared WordPress CMS Themes, editable
in Divine Elemente 0.9.
< Sell WordPress themes>

WordPress CMS themes of authorship,
editable in Divine Elemente 0.9.
Considerable time and cost saving
Your blogs unique design
Wide choice of custom WordPress
themes for purchase or downloading
Your custom WordPress themes
accessibility for thousands of users
Unique possibility to earn money
with no HTML / CSS / PHP notion

Besides, if youd like to share your website created by means of Divine Elemente 0.9 with many
thousands of our website users, you can submit it to the Showcase section.

Buy WordPress themes

If you want to save time and create new look of your web page, visit the Themes Portal and buy
WordPress CMS themes.

The uniqueness of this portal consists in the following:

Only our customers works of authorship are submitted to this Portal. All themes are to pass
compulsory moderation, in other words, you can be sure that all works are checked and
available in full bundle (WP themes and PSD templates files).
You also receive source PSD templates in the bundle with custom WordPress themes that
have a clear ordered structure of groups with special elements name (PSD hints). Owing to
that, you can change templates design or its part in accordance with your blogs style and
prepare your own theme for WordPress CMS for just several minutes.
Theme purchase process itself is very simple. You are just to select any theme you like and
buy it.
Themes Portal

Read more about PSD hints - Speeding up of publishing time

Step-by-step theme purchase process

Step 1. Theme selection.
Themes Portal. Tags

You can choose any theme you like and sort out themes by price / rating.

Step 2. Purchase / addition to the Shopping cart.
Themes Portal. Addition to the Shopping cart

After you select a theme, you are just to click on the Buy button, and youll find "Theme: Themes
name" in your Shopping cart.

Step 3. Fields filling in and payment process.

Elemente themes purchase. Order page.

Move to the Shopping cart and press the Continue button. After that, fill in all the fields required (your
name, credit card, etc.) and click on the Checkout button.


Step 4. Theme downloading.
Customers page. Theme downloading

After you make a payment, youll find yourself on your personal page, where youll be able to see a
link for downloading of the theme youve just purchased.

You can download it from our portal [Download button], and from the 3rd party file hostings - another
two buttons rapidshare.com or depositfiles.com.

Sell WordPress themes

In case you create amazing custom WordPress themes and want to earn money on your works,
create PSD templates with Divine Elemente 0.9 and upload them to the Themes Portal.
Customers page. Selling and wallet

But before your theme becomes available for other users, you are to comply with the following terms:

Author should be logged in at the website.
A theme should meet all submission rules.

Theme uploading process for selling

Step 1. Move to the themes submission page.
Themes Portal. Submission page

To do that you are to click on the Submit a theme button.

Step 2. Fill in all the fields of the submission form and attach a themes file.
Themes Portal. Theme submission forms filling in


So, to follow this step, you are to:

(A) - Enter a themes name.
(B) - Fix the themes price. Scrolling slider you can fix any price for your work from $0 to $999.
Indicating $0 (Free) for your theme, it will be available for downloading for free.
(C) - Attach archive with files of a ready WordPress CMS theme. You can prepare your theme
with the help of Divine Elemente 0.9. Youll need no HTML / CSS / PHP programming skills.
More details on the themes conversion process can be found in the Publish Editor guide.
(D) - Attach a .PSD source file of the theme. You are to prepare it in accordance with a
structure that is clear for Divine Elemente 0.9. More details on such files preparation can be
found in the Update of a current PSD template for Divine Elemente guide.
(E) - Attach a screenshot of your theme.
(F) - Indicate if the theme is prepared with Divine Elemente or not.
(G) - Describe your theme in brief.
(H) - Indicate the required tags, which can be used for searching of your theme at the Themes
Portal.

After you fill in all the fields, press the Submit button (J).

Step 3. Theme moderation.
Themes Portal. Moderation

After you upload the theme, it is placed in the queue for moderation (themes checking for meeting of
submission rules at the website). Then, the theme will be published at the website or declined by a
moderator.

After you sell WordPress themes at our website, money minus commission are transferred to your
account.

How to withdraw money

Details on money deposit, commissions and withdrawal from your account can be found in
the Deposit funds guide.

Themes deletion

You are not allowed deleting already submitted custom WordPress themes. You can only delete your
uploaded theme if it hasnt passed moderation yet and hasnt appeared at Divine Elemente website.


Conclusion

Thus, you have just learned how to buy and sell WordPress themes easily and with no problems just
enjoying the result of your new purchase or selling.




SEO Optimized and W3C Valid Code

Your have requirements to Divine Elemente plugin? This guide covers the most frequent ones
available in our software: SEO properties, W3C valid code, Google Analytics, etc.



The most desirable thing for web developers is W3C valid code, as they spend much - much - much
time for coding, creating websites. Search engines love valid code. Its faster to crawl, easier to index
and improves SERPs (Search Engine Results Page) relevancy.

So, how to automatize this process, save the code quality and take SEO into account?


SEO and Divine Elemente

The answer is simple: SEO and Divine Elemente. Well-written content with specific keyword phrases
combined with our plugin will help you to reach good rankings.

SEO properties in Divine Elemente



You are just to enter meta information (A), and then Divine Elemente will automatically prepare a valid
HTML code for SEO and put also Google Analytics (B) to track rankings for you, if some details in
appropriate properties have been indicated earlier (C-E) .

SEO properties - read more about how to setup them in the Pubish Editor.

W3C valid code with Divine Elemente

One of the first requirements to our software is W3C valid code. Heres the answer:

W3C valid code with Divine Elemente

In Divine Elemente, (top secret) smart algorithms are used for code to make it looking as human-
made.

For example: margins / paddings are formed not just counting from the top but modes relative or absolute
depend on context and a certain case. And if we speak about the entire algorithm, these examples are just
simple things.

Google Analytics

Google Analytics is the web analytics solution that gives you rich insights into your website traffic and
marketing effectiveness. Its powerful, flexible and easy-to-use features let you see and analyse your
traffic data in an entirely new way. And all of that can be realized with Divine Elemente.

How to add typical Google Analytics tracking code (asynchronous)
Simply copy Google Analytics ID from the dashboard (A) or generate a code for your website and
paste the tracking ID in the Google Analytics ID field (C). Youll find it in the Meta panel with
the SEO icon (D) of Theme element in the Publish Editor.

Google Analytics with Divine Elemente


Advanced: Besides, you can paste a custom tracking code in HTML code. To do that, just paste your
tracking code with altered ID (E) in the Footer HTML (for JS scripts) field (B).
Advanced: Google Analytics asynchronous tracking code sample

With Google Analytics and Divine Elemente plugin, you're more prepared to strengthen your
marketing initiatives, create higher converting websites, and hence, make money easily.

Compatibility with popular editors

The other popular request from our users was compatibility with popular editors such as Adobe
Dreamweaver, Microsoft Expression Web, etc.
Edit web page / theme code in the editor

Thanks to innovations in publish algorithm (like semantic, commented, valid code with descriptive
names), you can edit a published website's page or theme that were saved in the local folder on your
computer using any editor.

It expands opportunities of Divine Elemente greatly for professional developers of websites and
themes.



XAMPP support

If you would like to work off-line creating websites, you have this opportunity now with Divine
Elemente and the third party local web servers, such as XAMPP or MAMP. Use Divine Elemente and
XAMPP / MAMP without thinking about the Internet connection.
XAMPP running in Windows environment

Info: MAMP is a set of free software programs commonly used together to run dynamic websites on servers.
XAMPP is a free and open source cross-platform web server package.

Your activity will not depend any more on slow speed of the Internet. And you can create with no risk
of breaking your live blog. Hence, do what it is the most convenient for you now: upload your theme to
the Internet or use it on the local servers.

More details can be found at the XAMPP Virtual Host and WordPress Installation tutorial.



Conclusion

So now, you have found out that Divine Elemente plugin not only helps just to create themes /
websites from PSD but to performs it accurately and on high level.

Custom Code Addition to a WordPress Theme

Want to create a theme for WordPress CMS and then have a chance to add any page object
inserting a prepared website HTML code? Use Divine Elemente and learn how to insert HTML
code in the theme following our step-by-step tutorial.


With the help of Divine Elemente v0.9 to generate a theme for WordPress CMS and then to add a
prepared elements code to the theme is easy as never.
Custom object. Banner

Lets consider the whole step-by-step process on how to insert HTML code in the theme with the
example of the Flash banner addition to a prepared theme for WordPress CMS.

Step 1. Open a PSD template in Adobe Photoshop.
We use a Iphone4.psd template for this tutorial.
But you can also download any other one from the Themes Portal and work with it.


Step 2. Add a new element to the PSD template.
First of all, you are to prepare a place for a new object arrangement in the Footer grid block (in our
case). To do that, in Adobe Photoshop you should:

(A) Select a Rectangle Tool (U)
(B) Draw a rectangle with 125 x 125 px dimensions (our banner dimensions)
Custom object. New element in a PSD template

Step 3. Launch Divine Elemente.
Select the Elemente > Publish and Upload item in the menu.
Custom object. Launch Divine Elemente


Step 4. Set required elements properties.
Select the element created and assign it as an Image.
Custom object. Element assignment

The following properties are to be indicated in the Properties panel:

Content: Editable in CMS
CSS: New_banner
Custom object. Element properties

More details on Elements and their Properties.


Step 5. Publish a theme.
Select a prepared FTP account (A) (B) and click on the Publish button (C).
Custom object. Theme publishing

More details on FTP accounts and the whole publishing process can be found in the Publish Editor
guide.


Step 6. Activate the theme at the website.
Being in the WordPress CMS backend, move to the "Appearance > Themes" section and select a
new theme uploaded.
Custom object. WordPress CMS theme activation

Step 7. Switch on the Editing mode at the website.
Dont log out from your admin account. And move to the website with the theme activated.
Find a hidden floating menu with Divine Elemente label (It is located in the top right corner of the
browser window or in the top left corner) and check the Edit content checkbox to enable the editing
mode.
Custom object. Editable content

Read more about Editable content.


Step 8. Insert a prepared elements code.
Select your prepared element and change the current code by your prepared website HTML code
addition in the editor appeared.
Custom object. Elements editing.

Step 9. Save and switch off the Editing mode.
Click on the Save button in the editor. Then, in the hidden floating menu uncheck the Edit content
checkbox to disable the editing mode. After that, all changes will take effects immediately, and youll
be able to enjoy the result of the website HTML code addition.

Step 10. Admire the result ;)


Conclusion

In such a way, you have just learned the whole process of a WordPress theme creation and how to
insert HTML code in theme any time you need it with Divine Elemente v0.9.




Troubleshooting

Problem: I get this error when I try to use my newly made theme.
Fatal error: Call to undefined function DivineBillboardInstall() in divine.install.php on line 4

Answer: In order everything work well, you are to install the Divine Elemente Billboards widget
plugin.

Please follow these steps carefully:

1. Create a theme (Save to local folder).
2. Upload the theme to the server
3. Install the Divine Elemente Billboards widget plugin (in the WordPress backend).
4. Then, activate your theme.

Note: The Billboard plugin requires installation just once for the first theme only. Rest themes
will be activated with no problem.

Divine Elemente Requirements

OS Requirements
Divine Elemente is compatible with Windows XP and higher, including Windows 7.

Adobe Photoshop Requirements
Divine Elemente requires Adobe Photoshop CS2 or higher, including the latest Photoshop CS5
(32 bit).

Server Requirements
Themes created with Divine Elemente are compatible with WordPress version: 2.8 or higher,
including the latest WordPress version: 3.1
Useful Tips

1. Read the Quick Start Guide before you use Divine Elemente plugin.

The majority of guides were written taking into account your acquaintance with Divine Elemente
basic workflow. Besides, to understand every step in details, you can watch a short video tutorial
about the plugin and its possibilities at our website named Quick Start Guide (www.divine-
project.com/overview).

2. Before you start creating your full-fledged theme, firstly, experiment on test
templates.

Together with the plugin, we offer you several simple test templates for acquaintence with work of
Divine Elemente (you can find them in your Photoshop menu: Elemente > Templates).

By the way, you can also download free PSD templates from our Marketplace Portal, which are
optimized in a special way for work in Divine Elemente plugin.

3. Use PSD hints for elements.

Usage of PSD hints in a template allows to save much time at the theme publishing. All of this is
thanks to the fact that there is no necessity to assign elements one-by-one. More details can be
found in our appropriate guide.

4. Use the Layout Editor functionality for new PSD template creation

With the help of the Layout Editor, you can:

Set sizes / position of grid blocks
Select a required elements set
Create a PSD template on the basis of these data

Templates creation can take even less than a minute. Besides, this approach will allow you to
save time at publishing in future, as all elements use PSD hints that let Divine Elemente define
them in the Publish Editor automatically.

5. Use 960 Grid tool to arrange elements in the layout grid.

With the help of 960 Grid tool, you can make your web pages more professional and attractive
arranging their elements in the most consistent way. Thanks to that, 960 Grid template is used
more and more often in the web development.