A short guide for beginners on how to prepare and publish an HTML or Wordpress website template on Themeforest. Themeforest is a great way to get passive income for a web developer and web designer. For the past 2 years, we have been gaining experience in a process of publishing and promoting templates which we are ready to share with you in this article. 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, you need to be logged in your account. Then, you should go to the « » page. Author Dashboard Next, you should find « » section and choose the template category in an appropriate dropdown menu (e.g. « », « » or « »). After that just hit the « » button. Upload an item PSD Templates Site Templates WordPress Next 1.2. Adding template name & description You should find « » section on the template editing page to fill « » and « » text fields. Name & Description Name Description 1.2.1. Title The title of your template should be unique and contain name and short description. For example, « ». 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 as a divider between name and short description. Maximum name length is 100 symbols. 1.2.2. Key features There are only 3 text fields available. The text placed here will be displayed on template card next to the « » in the search results list. Preview Image You should place here key features of your template. For example, what type of grid is used, total amount of pages you designed, does your template has detailed docs and so on. 1.2.3. Description To create description for your template we recommend which allows you to see your text with markdown applied. The thing is that Themeforest has no built-in tools to edit your description with markdown. using this amazing tool Typical template description on Themeforest consist of eight blocks: « », « », « » (or « »), « », « », « », « » and « ». About Template Small Preview Files Included Pages Included Fonts Used Icons Used Images Used Changelog Notes A little bit more about each of them: The « » section describes key features and the scope of the template. About Template The « » section consists of a long promotion image, which main purpose is to motivate customer for a purchase. Small Preview The « » (or « ») section represents a list of main files, which customer will get after purchase. Files Included Pages Included Sections « », « » и « » are just lists of used fonts, icons and images. Fonts Used Icons Used Images Used The « » section displays all template versions and changes. Changelog The « » section is just a reminder for a customer. It says that all images in template are used for preview only and not included in the final purchasable pack. Notes Typical template description can look like this one: <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 process to make it easy to use for redesign. Use of smart and vector objects allows to easily change the design according to your requirements. Placeholders will let you easily identify the image container and change an image version. Template files are based on Bootstrap 3 with 1170px grid.</p><h3>Small 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/home.html">DepositPhotos</a></li></ul><h3>Icons used:</h3><ul><li><a href-"http://materialdesignicons.com/">Material Design Icons</a></li></ul><h3>Changelog:</h3><pre>Version 1.1 | 12-October-2017Added: Small StyleguideUpdated: Preview Images and TextsVersion 1.0 | 21-September-2017Initial Release</pre><h3>Notes:</h3><p><b>Note</b>: All images and icons are used for preview only and not included in the final purchase pack.</p><p>If you have any questions about customization, please contact me via e-mail or through my profile page. I’ll help you as soon as possible.</p> Note that all texts should be written correctly without any mistakes. For that we recommend you to ask copywriter or marketer for help. 1.2.4. Graphic description Template graphic description should be eye-catching to motivate customer for a purchase. Such an image may include the most beautiful pages in a cool mockups, GIFs with animations of UI elements and so on. In short, here you can illustrate your template features. Example of template graphical description (author: @swiftdesign) It is important to divide your graphic description into pieces, because sometimes Themeforest loads such long images incorrectly. The width of one piece of graphic image is usually 590 px or 616 px and the length is less than 2000 px. 👉 You can . download our free PSD-template of graphic description here 1.3. Adding template files You should find « » section on the template editing page to fill « », « », « » и (optional) « » fields. Files Thumbnail Theme Preview Main Files WordPress Theme 1.3.1. Thumbnail image « » is used to attract customer’s attention to your template in a recommended list. That’s why you should make it eye-catching. Thumbnail Example of Thumbnail (author: @swiftdesign) It can consist of two parts: a template logo and a category (e.g. Workshop). Final « » should be saved as PNG in a size of 80x80 px and named as « ». Thumbnail Thumbnail.PNG 👉You can . download our free PSD-template of « » here Thumbnail 1.3.2. Preview image Main preview image (« ») should be placed in a « » ZIP-archive. Preview Theme Preview Main preview image is used to attract customer’s attention to your template in the search results list. The customer decides based on this image whether to look at the template in more detail or not. That’s why you should make it more eye-catching. We strongly recommend that you pay due attention to a « », because it potentially can increase your template sales. Preview Example of Preview (author: @swiftdesign) Typical preview image consists of four parts: a template logo, a category (e.g. Workshop), short list of key features (e.g. what type of grid did you use, total amount of pages you designed, does your template has detailed docs and so on) and a promo (e.g. some pages in cool mockup). Final «Preview» should be saved as JPEG in a size of 590x300 px and named as « ». Preview image should be placed in a « » ZIP-archive. 01_preview.JPEG Theme Preview 👉You can . download our free PSD-template of « » here Preview 1.3.3. Theme Preview ZIP-archive « » ZIP-archive is just an archive, which contains template preview images (screenshots) and main preview image (« »). Theme Preview 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 note that these images could be cropped to be displayed in search results list. « » ZIP-archive structure should look like this: Theme Preview 1.3.4. Documentation « » is a very important part of your template because Themeforest doesn’t approve any templates for sale without it. Documentation In general, the documentation could be presented in any convenient format for you. It could be PDF, DOCX, TXT or even HTML files. 👉You can . download our free DOCX-template of « » here Documentation 1.3.5. Main Files ZIP-archive Template files (« ») are the most important part of your template, because your customer will get these files after template purchase. Main Files « » ZIP-archive is just an archive, which contains template files (« » folder) and documentation (« » folder). Main Files Template Documentation For example, « » ZIP-archive structure for PSD-template should look like this: Main Files In case of HTML-template, you should place project files in « » folder. Template In case of Wordpress-template, you should rename ZIP-archive as « ». WordPress Theme In case of HTML-documentation, you should place all necessary files in « » folder. Documentation Note, that all content (photos, illustrations, etc) are used for preview only and shouldn’t be included in the final purchasable pack. 1.4. Choosing category & attributes You should find « » section on the template editing page to fill the fields. Category & Attributes The most important field here is « ». Note that if you choose the wrong category, your template will not pass the review process. Category In addition, do not forget to paste a link to a demo page in the « » field. Themeforest doesn’t approve HTML and Wordpress templates for sale without it. Demo URL The rest of the fields (« », « », « », etc) you can fill at your own discretion. Compatible Browsers Files Included Columns 1.5. Adding tags You should find « » section on the template editing page to fill « » field. Tags Tag You should pay your attention to this field because a customer can find your template based on this keywords. Properly selected tags can help increase your sales. If you don’t know how to select tags properly, we recommend you to copy some of them from competitor-templates. 1.6. Item support You should find « » section on the template editing page and answer the question « ». Supporting your item Item will be supported? Note that a positive answer means that you will answer the questions and help your customers to customize your template. 1.7. Selecting a price You should find « » section on the template editing page and set the price at your own discretion. Set Your Price When choosing a price, we recommend you to start from average competitor-templates prices. 1.8. Message to the reviewer You should find « » section on the template editing page and write something like « » in « » field. Message to the Reviewer Hello again! Comments Also, don’t forget to tick the checkbox under the « » field. Comments 1.9. Upload template Just find and hit the « » button at the end of template editing page. Upload 2. Updating process There are two types of template updates: description & price update and files & tags update. You can update only description & price and do not update template files. In this case, all changes will be applied immediately. Also, you can update only files & tags and do not update template description or price. In this case, all changes will be applied after the review process. If you update template description, price, files, and tags, then the description & price changes will be applied immediately whereas the files & tags changes will be applied after the review process. 2.1. Edit mode You should find and hit the « » tab under the « » image on the template page. Edit Preview 2.2. Description & price update You should find « » section on the template updating page and change description and\or price. Update Description & Price After that just hit the « » button. Save Changes 2.3. Files & tags update You should find « » section on the template updating page and change template files and\or tags. Update Description & Price After that just hit the « » button. And don’t forget to tick the checkbox « ». Save Changes Notify Buyers 3. Deleting process Attention! You will not be able to restore the template after deleting. 3.1. Edit mode You should find and hit the « » tab under the « » image on the template page. Edit Preview 3.2. Delete template You should find « » section on the template updating page and write a short comment about deleting reason. Delete the Item After that just hit the « » button. Delete this item What’s next? If you are interested in what a typical author account looks like on Themeforest, you can find it here 👇. _We're Siberia based team of devoted professionals who dream of creating brilliant designs and taking web to the newest…_themeforest.net Aspirity's profile on ThemeForest _Modern HTML templates from Aspirity Team_themes.aspirity.com Aspirity Templates We will be glad to hear your comments 💬 and get an applause 👏. Website: aspirity.com/brief Website for themes and templates: themes.aspirity.com Facebook: facebook.com/aspiritytemplates Telegram-chat about Themeforest: t.me/joinchat/envato
