How to Upload a Template to Website

How to publish your HTML or Wordpress website template on Themeforest?

A short guide for beginners on how to prepare and publish an HTML or Wordpress website template on Themeforest. Themeforest has no built-in tools to edit your description with markdown. Template files are based on Bootstrap 3 with 1170px grid. The layout was designed in Adobe Photoshop CC 2015 with a highly professional person process to make it easy to use for redesign. Use of smart and vector objects allows to hands modify the design according to your requirements. The guide is divided into sections and is provided with examples for your convenience.

A short guide for beginners on how to set up and publish an HTML or Wordpress website template on Themeforest.

Themeforest is a bang-up way to get passive income for a web developer and web designer. For the past 2 years, we take been gaining experience in a procedure of publishing and promoting templates which nosotros are ready to share with you in this commodity.

The whole guide is divided into sections and is provided with examples for your convenience.

1. Publication process

1.1. Adding new template

First of all, yous demand to be logged in your business relationship. So, yous should go to the «Author Dashboard» page.

Next, you should find «Upload an item» section and choose the template category in an appropriate dropdown menu (e.g. «PSD Templates», «Site Templates» or «WordPress»). Later that but hit the «Next» button.

ane.two. Calculation template proper name & description

You should detect «Proper noun & Description» section on the template editing page to make full «Name» and «Description» text fields.

1.2.i. Title

The title of your template should exist unique and comprise proper name and short description. For instance, «SUPER — Creative Agency PSD Template».

Note that each word in the name is written with a capital letter (except prepositions and conjunctions) and a dash is used every bit a divider between name and short description. Maximum proper noun length is 100 symbols.

ane.2.2. Fundamental features

There are only 3 text fields available. The text placed here will be displayed on template bill of fare next to the «Preview Prototype» in the search results listing.

You should identify here key features of your template. For example, what type of filigree is used, total amount of pages you designed, does your template has detailed docs and so on.

1.2.iii. Description

To create description for your template we recommend using this amazing tool which allows yous to run across your text with markdown applied. The thing is that Themeforest has no built-in tools to edit your description with markdown.

Typical template clarification on Themeforest consist of viii blocks: «About Template», «Small Preview», «Files Included» (or «Pages Included»), «Fonts Used», «Icons Used», «Images Used», «Changelog» and «Notes».

A little fleck more about each of them:

The «About Template» department describes key features and the scope of the template.
The «Pocket-sized Preview» section consists of a long promotion image, which main purpose is to motivate customer for a purchase.
The «Files Included» (or «Pages Included») section represents a listing of master files, which customer will become subsequently purchase.
Sections «Fonts Used», «Icons Used» и «Images Used» are but lists of used fonts, icons and images.
The «Changelog» section displays all template versions and changes.
The «Notes» section is just a reminder for a customer. Information technology says that all images in template are used for preview only and not included in the concluding purchasable pack.

Typical template description tin can look like this ane:

<h3>About Template:</h3>
<p>Name — cool and fresh PSD template for lorem ipsum. The layout designed in Adobe Photoshop CC 2015 with a highly professional person process to go far easy to utilize for redesign. Use of smart and vector objects allows to easily modify the pattern according to your requirements. Placeholders will let you easily identify the paradigm container and alter an epitome version. Template files are based on Bootstrap iii with 1170px grid.
</p>
<h3>Pocket-size Preview:</h3>
<img src="https://d13yacurqjgara.cloudfront.net/users/259982/screenshots/3036300/attachments/636816/dashboard.png">
<h3>Files included:</h3>
<ul>
                <li>00_SUPER_Styleguide.psd</li>
                <li>01_SUPER_Homepage.psd</li>
                <li>02_SUPER_Blog.psd</li>
                <li>03_SUPER_Post.psd</li>
                <li>04_SUPER_Services.psd</li>
                <li>05_SUPER_Item.psd</li>
                <li>06_SUPER_Gallery.psd</li>
                <li>07_SUPER_Contacts.psd</li>
                <li>Documentation.pdf</li>
</ul>
<h3>Fonts used:</h3>
<ul>
                <li><a href-"https://fonts.google.com/specimen/Montserrat">Montserrat</a></li>
</ul>
<h3>Images used:</h3>
<ul>
                <li><a href-"http://ru.depositphotos.com/domicile.html">DepositPhotos</a></li>
</ul>
<h3>Icons used:</h3>
<ul>
                <li><a href-"http://materialdesignicons.com/">Textile Blueprint Icons</a></li>
</ul>
<h3>Changelog:</h3>
<pre>
                Version i.1 | 12-October-2017
                Added:  Pocket-sized Styleguide
                Updated:  Preview Images and Texts                
                Version ane.0 | 21-September-2017
                Initial Release
</pre>
<h3>Notes:</h3>
<p><b>Note</b>: All images and icons are used for preview only and non included in the final buy pack.</p>
<p>If you take any questions virtually customization, please contact me via electronic mail or through my profile folio. I'll aid you as before long as possible.</p>

Note that all texts should be written correctly without any mistakes. For that nosotros recommend you lot to ask copywriter or marketer for assist.

1.ii.4. Graphic description

Template graphic clarification should be middle-catching to motivate client for a purchase.

Such an paradigm may include the most beautiful pages in a cool mockups, GIFs with animations of UI elements and so on. In short, here yous can illustrate your template features.

Example of template graphical description (writer: @swiftdesign)

It is important to carve up your graphic description into pieces, because sometimes Themeforest loads such long images incorrectly.

The width of one slice of graphic image is commonly 590 px or 616 px and the length is less than 2000 px.

👉 Yous can download our free PSD-template of graphic clarification here.

1.3. Adding template files

You should discover «Files» section on the template editing page to fill «Thumbnail», «Theme Preview», «Main Files» и (optional) «WordPress Theme» fields.

1.3.1. Thumbnail prototype

«Thumbnail» is used to attract customer'southward attention to your template in a recommended list. That'southward why you should arrive eye-catching.

Example of Thumbnail (author: @swiftdesign)

It tin can consist of 2 parts: a template logo and a category (due east.grand. Workshop).

Final «Thumbnail» should exist saved equally PNG in a size of 80x80 px and named as «Thumbnail.PNG».

👉You can download our costless PSD-template of «Thumbnail» here.

1.iii.2. Preview paradigm

Main preview image («Preview») should be placed in a «Theme Preview» Cipher-archive.

Main preview image is used to attract customer's attending to your template in the search results list. The customer decides based on this image whether to look at the template in more than detail or not. That'south why yous should make it more eye-catching.

We strongly recommend that you pay due attention to a «Preview», because it potentially tin increase your template sales.

Typical preview image consists of iv parts: a template logo, a category (eastward.g. Workshop), short list of key features (e.thousand. what type of filigree did you utilize, total amount of pages yous designed, does your template has detailed docs and and so on) and a promo (e.1000. some pages in cool mockup).

Final «Preview» should be saved as JPEG in a size of 590x300 px and named every bit «01_preview.JPEG». Preview prototype should be placed in a «Theme Preview» Zippo-archive.

👉You can download our free PSD-template of «Preview» here.

ane.three.three. Theme Preview ZIP-annal

«Theme Preview» Null-archive is just an archive, which contains template preview images (screenshots) and main preview prototype («Preview»).

All preview images should be saved as PNG and named as shown below.

A maximum size of preview images is 900x900 px. Also, you should annotation that these images could be cropped to be displayed in search results list.

«Theme Preview» ZIP-archive structure should look like this:

1.3.iv. Documentation

«Documentation» is a very important function of your template because Themeforest doesn't corroborate any templates for sale without it.

In full general, the documentation could be presented in any convenient format for yous. It could be PDF, DOCX, TXT or even HTML files.

👉Yous can download our free DOCX-template of «Documentation» here.

ane.3.5. Main Files ZIP-archive

Template files («Main Files») are the most important office of your template, because your client will go these files later template purchase.

«Main Files» Cipher-archive is simply an archive, which contains template files («Template» folder) and documentation («Documentation» folder).

For case, «Main Files» ZIP-archive structure for PSD-template should look like this:

In case of HTML-template, you should place project files in «Template» binder.

In example of Wordpress-template, yous should rename ZIP-archive every bit «WordPress Theme».

In case of HTML-documentation, you should place all necessary files in «Documentation» binder.

Note, that all content (photos, illustrations, etc) are used for preview only and shouldn't be included in the concluding purchasable pack.

1.4. Choosing category & attributes

You should find «Category & Attributes» section on the template editing page to make full the fields.

The near important field hither is «Category». Note that if you cull the incorrect category, your template will not laissez passer the review process.

In addition, do non forget to paste a link to a demo page in the «Demo URL» field. Themeforest doesn't approve HTML and Wordpress templates for sale without information technology.

The rest of the fields («Compatible Browsers», «Files Included», «Columns», etc) you tin fill up at your own discretion.

i.v. Adding tags

You should find «Tags» section on the template editing page to fill up «Tag» field.

You should pay your attention to this field because a customer can find your template based on this keywords. Properly selected tags tin can help increase your sales.

If you don't know how to select tags properly, we recommend yous to copy some of them from competitor-templates.

1.half-dozen. Particular support

You should find «Supporting your item» section on the template editing folio and reply the question «Item will exist supported?».

Note that a positive answer means that yous will reply the questions and help your customers to customize your template.

1.seven. Selecting a price

You should notice «Prepare Your Toll» section on the template editing page and set the price at your ain discretion.

When choosing a price, we recommend y'all to start from average competitor-templates prices.

1.8. Message to the reviewer

You should find «Message to the Reviewer» section on the template editing page and write something like «Hello over again!» in «Comments» field.

Also, don't forget to tick the checkbox under the «Comments» field.

1.9. Upload template

Only find and hit the «Upload» button at the end of template editing page.

2. Updating procedure

At that place are two types of template updates: description & price update and files & tags update.

You tin update simply description & cost and do not update template files. In this case, all changes will exist practical immediately.

Also, you lot can update only files & tags and do not update template description or price. In this case, all changes volition be practical later on the review process.

If you update template clarification, toll, files, and tags, then the clarification & price changes will be applied immediately whereas the files & tags changes will be applied after the review procedure.

2.i. Edit fashion

You should notice and hit the «Edit» tab under the «Preview» image on the template page.

ii.2. Clarification & toll update

Yous should discover «Update Description & Price» section on the template updating page and change clarification and\or price.

After that just hit the «Save Changes» push button.

two.3. Files & tags update

You lot should notice «Update Clarification & Price» section on the template updating folio and modify template files and\or tags.

Afterwards that only hit the «Save Changes» push button. And don't forget to tick the checkbox «Notify Buyers».

three. Deleting process

Attention! Yous will not be able to restore the template after deleting.

3.1. Edit mode

Yous should find and hitting the «Edit» tab under the «Preview» image on the template page.

3.ii. Delete template

You should find «Delete the Item» section on the template updating page and write a brusk comment well-nigh deleting reason.

After that just hitting the «Delete this item» push.

What's adjacent?

If you are interested in what a typical writer account looks like on Themeforest, you can find it hither 👇.

We will be glad to hear your comments 💬 and get an adulation 👏.

Website: aspirity.com/cursory
Website for themes and templates: themes.aspirity.com
Facebook: facebook.com/aspiritytemplates
Telegram-chat nigh Themeforest: t.me/joinchat/envato