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 »