Как опубликовать свой шаблон сайта на ThemeForest?
Краткий алгоритм для новичков о процессе подготовки и загрузки HTML и WordPress шаблонов веб-сайтов на Themeforest.
Маркет Themeforest — отличный способ получения пассивного дохода для веб-разработчика и веб-дизайнера. На протяжении 2-х лет наша команда из Aspirity копила ценный опыт публикации и продвижения шаблонов, которым я готов поделиться с вами в этой статье.
Для удобства весь алгоритм разбит на разделы и снабжен примерами.
Алгоритм также переведен на английский язык и опубликован в блоге для разработчиков Hackernoon.
1. Процесс публикации
1.1. Добавить новый шаблон
Чтобы добавить шаблон, вам необходимо перейти на страницу Author Dashboard, авторизовавшись под своим аккаунтом на маркете.
Далее, необходимо найти блок Upload an item и, выбрав в выпадающем списке блока соответствующую шаблону категорию (например, PSD Templates, Site Templates или WordPress), нажать на кнопку Next.
1.2. Добавить название и описание шаблона
Необходимо найти блок Name & Description на странице редактирования нового шаблона и заполнить поля Name и Description в соответствии с правилами ниже.
1.2.1. Название шаблона
Название шаблона должно быть максимально уникальным и состоять из двух частей: название и краткое описание. Например: «SUPER — Creative Agency PSD Template».
Обратите внимание, что каждое слово в названии пишется с заглавной буквы (кроме предлогов и союзов), а разделителем названия и краткого описания служит тире ( — ), а не дефис (-). Максимальное возможная длина названия — 100 символов.
1.2.2. Ключевые фичи шаблона
Всего доступно 3 поля. Текст, размещенный в них будет отображаться в общем списке шаблонов во время поиска рядом с изображением-предпросмотром.
Здесь можно разместить, например, тип использованной сетки, общее число страниц, адаптивная верстка или нет, наличие детальной документации, наличие бесплатных макетов в комплекте с шаблоном и так далее. Всё, что на ваше усмотрение выгодно выделит вас на фоне конкурентов.
1.2.3. Описание шаблона
Для создания описания к шаблону необходимо использовать специальный веб-инструмент, который позволяет увидеть описание со всей разметкой до публикации. Использование этого «костыля» обусловлено отсутствием встроенного инструмента для редактирования описания на маркете Themeforest.
Типичное описание шаблона на Themeforst состоит из 8-и основных блоков: About Template, Small Preview, Files Included (или Pages Included), Fonts Used, Icons Used, Images Used, Changelog и Notes.
О каждом немного подробнее:
- Блок About Template кратко описывает основные преимущества и сферу применения шаблона. Желательно указать как можно больше областей применения.
- Блок Small Preview состоит из длинного «продающего» изображения, которое нацелено на мотивацию покупателя к покупке шаблона. На изображении могут быть показаны наиболее крутые и интересные экраны во «вкусных» мокапах. Может быть встроена GIF-анимация, отражающая какой-то необычный CSS-эффект (например, parallax scroll или hover-effect). Словом, здесь можно эффектно проиллюстрировать фичи шаблона. Подробнее читайте в пункте 1.2.4. о графическом описании ниже.
- Блок Files Included (или Pages Included) представляет собой список с основными файлами или страницами, которые получает покупатель.
- Блоки Fonts Used, Icons Used и Images Used представляют собой списки с ссылками на использованные в шаблоне шрифты, иконки и изображения соответственно.
- Блок Changelog отображает все основные версии шаблона и что именно было изменено в каждой из них.
- Блок Notes указывает, что все изображения использованы только для предпросмотра и не входят в покупаемый пакет файлов. Этот блок необходим, чтобы покупатель был уведомлен об этом.
Такое описание может быть оформлено по следующему шаблону:
<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 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-2017
Added: Small Styleguide
Updated: Preview Images and Texts
Version 1.0 | 21-September-2017
Initial 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>Текст внутри такого шаблона должен быть хорошо продуман и грамотно написан. Для этого рекомендую обратиться за помощью к переводчику, копирайтеру и маркетологу.
1.2.4. Графическое описание
Графическое описание шаблона (или Small Preview) должно быть привлекательным и продающим, чтобы завлекать покупателя перейти к покупке.
Желательно отразить в нем то, что у вас имеется хорошая документация, процитировать отзывы о шаблоне (если они уже есть), показать ключевые особенности шаблона. Словом, здесь можно эффектно проиллюстрировать фичи шаблона.
Кроме того важно делить графическое описание на несколько картинок, а не делать одну длинную, потому что из-за особенностей Themeforest длинные картинки часто не прогружаются целиком.
Ширина такого изображения обычно берется 590 px или 616 px, а длина не более 2000 px.
👉Бесплатный шаблонный PSD-макет графического описания вы можете скачать по вот этой ссылке.
1.3. Добавить файлы шаблона
Необходимо найти блок Files на странице редактирования нового шаблона и заполнить поля Thumbnail, Theme Preview, Main Files и (опционально) WordPress Theme в соответствии с правилами ниже.
1.3.1. Изображение-иконка
Изображение-иконка (или Thumbnail) призвана привлечь внимание покупателя к шаблону во время поиска в списке среди рекомендуемых и других ваших шаблонов. Именно поэтому такую иконку необходимо делать необычной и привлекательной для взгляда.
Иконка может состоять из двух частей: логотип шаблона и его категория (например, Workshop).
Также необходимо, чтобы финальное изображение-иконка было сохранено в формате PNG в размере 80x80 px и было названо Thumbnail.PNG.
👉Бесплатный шаблонный PSD-макет иконки вы можете скачать по вот этой ссылке.
1.3.2. Главное изображение-предпросмотр (или большое изображение-иконка)
Главное изображение-предпросмотр (или Preview) должно идти в составе ZIP-архива для поля Theme Preview (об этом см. пункт ниже).
Изображение-предпросмотр предназначено для привлечения внимания покупателя к шаблону в общем списке шаблонов. Именно поэтому визуальная привлекательность такого изображения играет большую роль, так как именно в этот момент покупатель принимает решение — стоит ли заходить и смотреть шаблон детальнее или нет. Таким образом, необходимо уделить должное внимание этому элементу при публикации шаблона.
Изображение-предпросмотр может состоять из трех частей: логотип шаблона и его категория (например, Workshop), краткий перечень особенностей (например, тип использованной сетки, общее число страниц, используются бесплатные шрифты и иконки или нет, адаптивная верстка или нет и прочее) и область презентации шаблона (например, мокап в виде парящих экранов).
Финальное изображение-предпросмотр должно быть сохранено в формате JPEG в размере 590x300 px , названо 01_preview.JPEG и размещено в составе ZIP-архива для поля Theme Preview.
👉Бесплатный шаблонный PSD-макет изображения-предпросмотра вы можете скачать по вот этой ссылке.
1.3.3. Архив с изображениями-предпросмотрами шаблона
Архив с изображениями-предпросмотрами шаблона (или Theme Preview) является ZIP-архивом, внутри которого находятся изображения-скриншоты (экраны) и главное изображение-предпросмотр (или Preview) шаблона (см. пункт выше).
Все изображения-скриншоты должны быть представлены в формате PNG в высоком качестве и названы определенным образом.
Максимальное разрешение изображений-предпросмотров всего лишь 900x900 px. Кроме того, нужно учитывать, что они могут быть «кропнуты» до соотношения сторон Preview-изображения для отображения в поисковой выдаче.
Структура ZIP-архива Theme Preview.ZIP имеет следующий вид:
1.3.4. Документация
Документация (или Documentation) является необходимой частью шаблона, так как маркет не допускает к продаже шаблоны без документации (такой шаблон просто не пройдет модерацию). В общем случае документация имеет вольное изложение и может быть представлена в любом удобном формате.
👉Бесплатный шаблон документации в формате DOCX вы можете скачать по вот этой ссылке.
1.3.5. Файлы шаблона
Файлы шаблона (или Main Files) являются самой важной частью шаблона, так как именно тут хранится всё то, что получит покупатель после приобретения шаблона.
Main Files является ZIP-архивом, состоящим из двух частей: файлы шаблона (папка Template) и документация (папка Documentation).
Таким образом, структура ZIP-архива Main Files.ZIP для PSD-шаблона имеет следующий вид:
В случае HTML-шаблонов в папке Template должны быть размещены файлы проекта.
В случае WordPress-шаблонов архив Main Files.ZIP должен быть назван WordPress Theme.ZIP.
В случае, если документация представлена в ином виде (например, в виде HTML-документации), то в папке Documentation должны быть размещены все файлы для корректного отображения такой документации.
Также необходимо помнить, что весь контент (изображения, иллюстрации и прочее), использованный только для предпросмотра шаблона и не созданный вами, должен быть удален из шаблона.
1.4. Выбрать категорию и атрибуты
Необходимо найти блок Category & Attributes на странице редактирования нового шаблона и заполнить все поля.
Самым важным является поле Category, которому стоит уделить больше внимания, поскольку он позволяет покупателю найти шаблон.
Кроме этого, важно не забыть вставить ссылку на демо шаблона в поле Demo URL. Маркет не допускает к продаже HTML- и Wordpress-шаблоны без демо (такой шаблон просто не пройдет модерацию)
Остальные поля касательно совместимости шаблона с браузерами, фреймворками и т.п. стоит заполнять на своё усмотрение.
1.5. Добавить ключевые слова
Необходимо найти блок Tags на странице редактирования нового шаблона и заполнить поле Tags.
Правильно заполненное поле способствует увеличению продаж, потому что именно по ключевым словами покупатель ищет ваш шаблон. Хорошей практикой считается копирование ключевых слов из поля Tags у шаблонов-конкурентов с высоким количеством продаж.
1.6. Отметить пункт о поддержке
Необходимо найти блок Supporting your item на странице редактирования нового шаблона и ответить на вопрос Item will be supported? положительно, если вы планируете оказывать поддержку.
1.7. Установить цену
Необходимо найти блок Set Your Price на странице редактирования нового шаблона и установить цены на свое усмотрение. Рекомендую не завышать\занижать стоимость ваших шаблонов относительно цен конкурентов.
1.8. Написать сообщение модератору и отметить галку
Необходимо найти блок Message to the Reviewer на странице редактирования нового шаблона и написать что-то вроде «Hello again!» в поле Comments для сообщения модератору, а также отметить галочку, подтверждающую, что шаблон уникален и у нас имеется право продавать его на маркете.
1.9. Отправить на модерацию
После всех манипуляций необходимо найти и нажать кнопку Upload в самом конце страницы добавления нового шаблона.
2. Процесс обновления
Обновление шаблона можно условно поделить на два вида: обновление описания и цены и обновление файлов и тегов. При этом виды обновления никак не связаны между собой.
Вы можете обновить только описание и цену, а файлы шаблона оставить прежние. В этом случае изменения вступят в силу моментально.
Также вы можете обновить только файлы и теги шаблона. В этом случае потребуется проверка (модерация) новых файлов в течении некоторого времени.
Если вы обновили описание, цену, файлы и теги шаблона единовременно, то новые описание и цена появятся моментально, в то время как проверка новых файлов займет некоторое время.
2.1. Зайти в режим обновления шаблона
Необходимо перейти на страницу шаблона, авторизовавшись под своим аккаунтом на маркете. Далее, во вкладках над главным изображением-предпросмотром необходимо найти вкладку Edit и нажать на нее.
2.2. Обновление описания и цены
Необходимо найти блок Update Description & Price на странице обновления шаблона и, раскрыв его, изменить (заполнить) все поля в соответствии с правилами в пунктах 1.2, 1.4, 1.6 и 1.7.
Далее, необходимо найти и нажать на кнопку Save Changes в конце блока.
2.3. Обновление файлов и тегов шаблона
Необходимо найти блок Update Item & Tags на странице обновления шаблона и, раскрыв его, изменить (заполнить) все поля в соответствии с правилами в пунктах 1.3, 1.5 и 1.8.
Далее, необходимо найти и отметить пункт об обновлении Notify Buyers и отправить файлы шаблона на проверку, нажав на кнопку Upload в конце блока.
3. Процесс удаления
Внимание! Удаление шаблона с маркета окончательно и вернуть его будет невозможно.
3.1. Зайти в режим обновления шаблона
Необходимо перейти на страницу шаблона, авторизовавшись под своим аккаунтом на маркете. Далее, во вкладках над главным изображением-предпросмотром необходимо найти вкладку Edit и нажать на нее.
3.2. Удалить шаблон
Необходимо найти блок Delete the Item на странице обновления шаблона и, раскрыв его, указать причину удаления. Далее нажать на кнопку Delete this item в конце блока.
А что дальше?
Если вам интересна история публикации первого шаблона, а также вы хотите прочитать про подводные камни, с которыми вы можете столкнуться в процессе проверки вашего шаблона модератором, то рекомендую прочитать статью в блоге компании Aspirity.
А если вам интересно, как выглядит типичный аккаунт автора на Themeforest, то можете заглянуть в наш профиль.
Задать вопросы и оперативно получить ответы от 150+ авторов с маркета Envato вы можете в специальном чате в Telegram.
Буду рад вашим комментариям 💬 и аплодисментам 👏.
- Я на Behance: behance.net/AlexMomotov
- Я в ВК: vk.com/momotov_sasha
- Я в Telegram: t.me/AlexMomotov
