Quick Start Guide

Quick Start Guide by Dmitriy, Divine Elemente Team | |

Let’s practicing. Have you downloaded the Divine Elemente?

DOWNLOAD NOW »

At this tutorial we will review the both methods of publishing with Elemente:

How To: Start From a Predefined Template

Step 1. Open a PSD Template

Photoshop is running?

  • Photoshop’s top menu > Click on 'Elemente'
  • 'Quick launch' > 'Create a blog layout'

Photoshop isn't opened?

  • Click on Windows 'Start' button
  • Find 'Divine Elemente' > 'Launch Divine Elemente (CS-CC)'
  • 'Quick launch' > 'Open sample template'

HINT: If you don't see an 'Elemente' item - just click on 'Help' menu item in Photoshop's top menu. This weird behaviour can happen sometimes and can't be managed because of restrictions of Photoshop's API.

Divine quick launch

Then press on the "Open sample template" button.

Sample psd template

Step 2. Set / Edit a Layout Grid and Assign Elements

  • Photoshop’s top menu > Click on 'Elemente'
  • 'Quick launch' > 'Publish and Upload current PSD'

To see all assigned elements:
display all the elements ('View' > 'Show Elements')

Publish editor psd hints

More information about the elements and methods of their use.

Step 3. Edit FTP Settings For Theme Uploading

With the help of Divine Elemente you can publish your theme directly to your hosting server. To do this, you should create an account and specify the connection parameters. Select Settings> Accounts.

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

In the Accounts window press on "Add a new account". Fill in the necessary fields to connect and specify the root directory of your WordPress blog. Click on "Ok".

More details can be found in the "Publish Editor" guide.

Step 4. Preview / Publish the WordPress Theme

After your account has been created, you can select it in the right panel. Select it and press on "Publish" or "Live Preview".

Elemente publishing account

Select "Upload to " (A)(B) and click the ‘Upload to ’ button (C).

In the case of any errors exist, you will receive corresponding messages in the publising window. You can always get back to the layout and fix them.

Step 5. Install and Activate the WordPress Theme

After your ready-made theme is uploaded to a server, it must be activated for you to 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.

 Activate new WordPress CMS theme

After the theme is activated, move to the website and enjoy your new blog design.


How To: Create a wireframe PSD with the Layout editor

Step 1. Layout Editor > Create a Wireframe PSD Template

Photoshop is running?

  • Photoshop’s top menu > Click on 'Elemente'
  • 'Quick launch' > 'Create a blog layout'

Photoshop isn't opened?

  • Click on Windows 'Start' button
  • Find 'Divine Elemente' > 'Launch Divine Elemente (CS-CC)'
  • 'Quick launch' > 'Create a blog layout'

HINT: If you don't see an 'Elemente' item - just click on 'Help' menu item in Photoshop's top menu. This weird behaviour can happen sometimes and can't be managed because of restrictions of Photoshop's API.

Divine quick launch

Step 2. Check or Uncheck Necessary Elements

To do this in the right panel choose the layout type. Set parameters for each grid block. Uncheck the elements to be located in the layout.

Layout editor overview

More detailed on Layout Editor

Step 3. Create a PSD Wireframe Template

Press on "Create PSD" button. After a short process of creating a PSD layout, a window will pop up inviting to enter the PS and design a new PSD layout. Click "Yes".

Layout editor overview

That is all, a draft PSD layout is ready. You just have to design your page and elements and move on to the next "Quick start guide" section - How to convert PSD template to WordPress CMS theme.


PSD Hints, Elements And Best Practices

PSD hints, elements and best practices

PSD hints, elements and best practices

Read More »

How to Create a Website PSD Template

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

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

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

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

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

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


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

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

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

Methods of launching Layout Editor

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

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

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

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

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

Layout grid and its blocks sizes. Layout grid setting

Layout grid and its blocks sizes. Layout grid setting

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

Change of layout grid's parameters in the Layout Editor

Change of layout grid's parameters in the Layout Editor

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

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

Elements panel. Elements addition

Elements panel: Elements addition

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

The Layout Editor. Ways to display elements on canvas

The Layout Editor: Ways to display elements on canvas

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

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

Step 4. New PSD web template creation

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

The Layout Editor. Creation of a new PSD web template

The Layout Editor: Creation of a new PSD web template

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

Step 5. PSD web template design.

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

The Layout Editor. Best practices

The Layout Editor: Best practices

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


Conclusion

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


PSD Hints, Elements And Best Practices

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


Related Guides and Tutorials

Read More »

Update of a Current PSD Template for Divine Elemente

Update of a Current PSD Template for Divine Elemente by Dmitriy, Divine Elemente Team | |
Want to save time building your website by preparing your PSD template with Divine Elemente? Find answers to all possible questions learning basic principles of a PSD re-engineering in this guide.

Also recomended to read: PSD hints - Speeding up of publishing time, PSD to WordPress tutorial
[divineAds]

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

However, to use this tool you must prepare your PSD template in a special way. There are two ways to do this:

  1. Convert your PSD template (that was previously prepared without using the Divine Elemente plugin).
  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

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 structure. Elements can always be assigned with Divine Elemente 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

First, to update a PSD template for Divine Elemente 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 layout grid in the PSD template indicating names for each grid block as you can see below:

Layout grid by slices

Layout grid by slices

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

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

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

“Grid block > [widget (elements’ group)] > element”

In other words, a group with grid block’s name, a subgroup with widget’s name in it (it may be absent), and a subgroup with element’s 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.

Elements structure in a PSD template.

Note: In order for Divine Elemente to define the element exactly, you must 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). An Element can be described best as a container which carries all necessary properties, position of an element, styles, functionality for a web page / theme’s objects like texts, links, buttons, images, etc. Read more about Elements.
PSD hints. Elements assigment

PSD hints. Elements assigment

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

  1. Create a group with element’s name in an appropriate grid block (Header, Post, etc.).
  2. Carry all element’s 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, style's name, graphic parameters, margins) are to be indicated manually in Publish Editor. Read more about Properties.

Using 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 element’s group

Layers arrangement inside element’s group

  1. If an element contains text, you are to select the uppermost text layer in the group of all layers and convert it into the text that is seen in the browser.
  2. All layers in the group, except the upper text layer, are merged into one image - element’s 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 don’t charge your server by multiple requests with hundreds of images.

In order to enable Divine Elemente to publish your website faster and more qualitative, it's important to update your PSD template to make it valid. So let’s look through real experts’ advice:

The best practices

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

Examples of right and wrong work with elements

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

Read more about Best practices


PSD Hints, Elements And Best Practices

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


Conclusion

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

Related Guides and Tutorials


External

Read More »

960 Grid Tool

960 Grid Tool by Dmitriy, Divine Elemente Team | |
960 Grid tool designed to streamline web development workflow in Divine Elemente: definition, rules of usage and 960 Grid examples are considered in this tutorial.

Related: Best practices
[divineAds]

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 PSD template is used more and more often in the web development as a standard.

Use: 960 Grid examples

Use: 960 Grid examples

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


How to use 960 Grid tool 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 tool 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

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 or gutter's width if required, and press "Apply".

Selection of layout grid parameters

Selection of layout grid parameters

Step 3. Arrange all elements in the layout grid.

Elements arrangement

Elements arrangement

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 use of 960 Grid tool 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.

External links

  1. 960 Grid
Read More »

Billboard (Slideshow Plugin)

Billboard (Slideshow Plugin) by Dmitriy, Divine Elemente Team | |

What is 'Billboard' widget? Billboard (also known as slideshow WordPress widget) 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.

Billboard (JS slideshow) video tutorial

Besides, the ‘Billboard’ slideshow widget allows not only to create jQuery slider but make do it in a beautiful JS animated way.

‘Billboard’ widget

‘Billboard’ widget

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

‘Billboard’ structure

‘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 block’s 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, let’s 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

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 arrangement

‘Billboard’ elements arrangement

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

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 element’s properties.

Select elements of the ‘Billboard’ widget in the Elements panel and then set their necessary properties in the Properties panel.

‘Billboard’ elements properties

‘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 effect’s 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

Activate a theme

Troubleshooting: elements are out of grid boundaries.

‘Billboard’ elements should not be out of the ‘Header’, the ‘Footer’ boundaries!

Troubleshooting. Elements assignment

Troubleshooting. 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 Billboard’s 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

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.

‘Billboard’s editable parameters in the backend of WordPress CMS You may set the required parameters and ‘Billboard’ element’s data on the page opened.

‘Billboard’ element’s parameters in WordPress CMS

‘Billboard’ element’s 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) Animation effect - it displays a list of supported animation effects at slides changing.
  • (B) Transition duration - it allows to choose effect’s 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. Editor’s window

‘Billboard’ editing. Editor’s window

  • (А) Change the order of slides display - place the appropriate slides up or down.
  • (B) Edit a slide - click on the ‘Edit’ button and make the required changes in the open editor’s window.
  • (C) Delete a slide - click on the ‘Delete’ button opposite the unnecessary slide.
  • (D) Insert a new slide - click on the ‘Insert new slide’ button. A new slide will be added after the current one.

Editor’s 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 doesn’t take much time and is quite simple in Divine Elemente. At the same time, the result of Javascript image slider’s use in your design can make your work really unique and attractive.

PSD Hints, Elements And Best Practices

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


Related Guides and Turorials:

  1. Editable Content
Read More »