Como publicar seu template de site HTML ou WordPress no Themeforest?

Um breve guia para iniciantes sobre como preparar e publicar um modelo de site em HTML ou WordPress no Themeforest.

Aspirity 24 de julho

Themeforest é uma ótima maneira de obter renda passiva para um desenvolvedor web e web designer. Nos últimos dois anos, temos ganhado experiência em um processo de publicação e promoção de modelos que estamos dispostos a compartilhar com você neste artigo.

Todo o guia é dividido em seções e é fornecido com exemplos para sua conveniência.

1. Processo de publicação

1.1. Adicionando novo modelo

Primeiro de tudo, você precisa estar logado em sua conta. Então, você deve ir para a página « Author Dashboard ».

Em seguida, você deve encontrar a seção "Fazer upload de um item " e escolher a categoria do modelo em um menu suspenso apropriado (por exemplo, " PSD Templates ", " Site Templates " ou " WordPress "). Depois disso, aperte o botão « Next ».

1.2. Adicionando nome e descrição do modelo

Você deve encontrar a seção « Nome e Descrição » na página de edição de modelos para preencher os campos de texto « Nome » e « Descrição ».

1.2.1. Título

O título do seu modelo deve ser exclusivo e conter nome e breve descrição. Por exemplo, « SUPER – Template PSD da Agência Criativa ».

Observe que cada palavra no nome é escrita com uma letra maiúscula (exceto preposições e conjunções) e um traço é usado como um divisor entre o nome e a descrição curta. Comprimento máximo do nome é de 100 símbolos.

1.2.2. Características principais

Existem apenas 3 campos de texto disponíveis. O texto colocado aqui será exibido no cartão modelo ao lado de « Imagem de pré-visualização » na lista de resultados da pesquisa.

Você deve colocar aqui os principais recursos do seu modelo. Por exemplo, que tipo de grade é usada, quantidade total de páginas que você criou, se seu modelo detalhou documentos e assim por diante.

1.2.3. Descrição

Para criar uma descrição para o seu modelo, recomendamos a utilização desta ferramenta incrível, que lhe permite ver o seu texto com a marcação aplicada. O problema é que o Themeforest não possui ferramentas embutidas para editar sua descrição com a marcação.

A descrição típica do template no Themeforest consiste em oito blocos: " Sobre o modelo ", " Pré-visualização pequena ", " Arquivos incluídos " (ou " Páginas incluídas "), " Fontes usadas ", " Ícones usados ", " Imagens usadas ", " Changelog » e « Notas ».

Um pouco mais sobre cada um deles:

  • A seção « Sobre o modelo » descreve os principais recursos e o escopo do modelo.
  • A seção « Pequena visualização » consiste em uma imagem promocional longa, cujo objetivo principal é motivar o cliente para uma compra.
  • A seção « Arquivos Incluídos » (ou « Páginas Incluídas ») representa uma lista dos principais arquivos, que o cliente obterá após a compra.
  • As seções « Fontes usadas », « Ícones usados » e « Imagens usadas » são apenas listas de fontes, ícones e imagens usadas.
  • A seção « Changelog » exibe todas as versões e alterações do modelo.
  • A seção « Notas » é apenas um lembrete para um cliente. Ele diz que todas as imagens no modelo são usadas apenas para visualização e não estão incluídas no pacote final que pode ser comprado.

A descrição típica do modelo pode ser semelhante a esta:

 <h3> Sobre o modelo: </ h3> 
<p> Nome - modelo PSD fresco e fresco para lorem ipsum. O layout projetado no Adobe Photoshop CC 2015 com um processo altamente profissional para facilitar seu uso para redesenhar. O uso de objetos inteligentes e vetoriais permite alterar facilmente o design de acordo com suas necessidades. Os espaços reservados permitirão identificar facilmente o contêiner de imagens e alterar uma versão da imagem. Os arquivos de modelo são baseados no Bootstrap 3 com grade de 1170px.
</ p>
<h3> Pré-visualização pequena: </ h3>
<img src = "https://d13yacurqjgara.cloudfront.net/users/259982/screenshots/3036300/attachments/636816/dashboard.png">
<h3> Arquivos incluídos: </ 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> Documentação.pdf </ li>
</ ul>
<h3> Fontes usadas: </ h3>
<ul>
<li> <a href-"https://fonts.google.com/specimen/Montserrat"> Montserrat </a> </ li>
</ ul>
<h3> Imagens usadas: </ h3>
<ul>
<li> <a href-"http://ru.depositphotos.com/home.html"> DepositPhotos </a> </ li>
</ ul>
<h3> Ícones usados: </ h3>
<ul>
<li> <a href-"http://materialdesignicons.com/"> Ícones de material design </a> </ li>
</ ul>
<h3> Changelog: </ h3>
<pre>
Versão 1.1 | 12 de outubro de 2017
Adicionado: Small Styleguide
Atualizado: imagens de visualização e textos
Versão 1.0 | 21 de setembro de 2017
Lançamento inicial
</ pre>
<h3> Notas: </ h3>
<p> <b> Observação </ b>: todas as imagens e ícones são usados apenas para visualização e não estão incluídos no pacote de compras final. </ p>
<p> Se você tiver alguma dúvida sobre personalização, entre em contato comigo por e-mail ou pela minha página de perfil. Eu te ajudo o quanto antes. </ P>

Note que todos os textos devem ser escritos corretamente, sem erros. Para isso, recomendamos que você peça um copywriter ou um profissional de marketing para obter ajuda.

1.2.4. Descrição gráfica

A descrição gráfica do modelo deve ser atraente para motivar o cliente para uma compra.

Essa imagem pode incluir as páginas mais bonitas em modelos legais, GIFs com animações de elementos de interface do usuário e assim por diante. Em suma, aqui você pode ilustrar os recursos do seu modelo.

Exemplo de descrição gráfica do modelo (autor: @swiftdesign)

É importante dividir sua descrição gráfica em partes, porque às vezes o Themeforest carrega essas imagens longas incorretamente.

A largura de uma imagem gráfica é geralmente de 590 px ou 616 px e a duração é inferior a 2000 px.

? Você pode baixar o nosso modelo PSD grátis de descrição gráfica aqui .

1.3. Adicionando arquivos de modelo

Você deve encontrar a seção « Arquivos » na página de edição de templates para preencher os campos « Thumbnail », « Theme Preview », « Arquivos principais » e (opcional) « Tema WordPress ».

1.3.1. Imagem em miniatura

A " Miniatura " é usada para atrair a atenção do cliente para o seu modelo em uma lista recomendada. É por isso que você deve ser atraente.

Exemplo de Miniatura (autor: @swiftdesign)

Pode consistir em duas partes: um logotipo de modelo e uma categoria (por exemplo, Workshop).

Final « Thumbnail » deve ser salvo como PNG em um tamanho de 80×80 px e nomeado como « Thumbnail.PNG ».

?Você pode baixar o nosso modelo PSD grátis de " Thumbnail " aqui .

1.3.2. Visualizar imagem

A imagem da pré-visualização principal (« Pré-visualização ») deve ser colocada num arquivo ZIP « Prévisualização do tema ».

A imagem de pré-visualização principal é utilizada para atrair a atenção do cliente para o seu modelo na lista de resultados da pesquisa. O cliente decide, com base nessa imagem, se deseja examinar o modelo com mais detalhes ou não. É por isso que você deve torná-lo mais atraente.

Recomendamos vivamente que preste a devida atenção a uma " Pré-visualização ", porque pode potencialmente aumentar as vendas do seu modelo.

Exemplo de pré-visualização (autor: @swiftdesign)

A imagem típica de visualização consiste em quatro partes: um logotipo de modelo, uma categoria (por exemplo, Workshop), uma lista curta de características principais (por exemplo, que tipo de grade você usou, quantidade total de páginas projetadas, detalhes de documentos e assim por diante ) e uma promo (por exemplo, algumas páginas em mockup legal).

Final «Preview» deve ser salvo como JPEG em um tamanho de 590×300 px e nomeado como « 01_preview.JPEG ». A imagem de pré-visualização deve ser colocada em um arquivo ZIP « Theme Preview ».

?Você pode baixar o nosso modelo PSD grátis de " Preview " aqui .

1.3.3. Pré-visualização do tema ZIP-archive

« Prévisualização do tema » O arquivo ZIP é apenas um arquivo, que contém imagens de pré-visualização do modelo (capturas de tela) e a imagem de pré-visualização principal (« Pré-visualização »).

Todas as imagens de visualização devem ser salvas como PNG e nomeadas conforme mostrado abaixo.

Um tamanho máximo de imagens de visualização é de 900 x 900 px. Além disso, você deve observar que essas imagens podem ser cortadas para serem exibidas na lista de resultados da pesquisa.

A estrutura de arquivo ZIP de prévisualização temática deve ter esta aparência:

1.3.4. Documentação

« Documentação » é uma parte muito importante do seu template porque o Themeforest não aprova nenhum modelo para venda sem ele.

Em geral, a documentação pode ser apresentada em qualquer formato conveniente para você. Pode ser PDF, DOCX, TXT ou até mesmo arquivos HTML.

?Você pode baixar nosso modelo DOCX grátis de « Documentação » aqui .

1.3.5. Arquivo-ZIP dos Arquivos Principais

Os arquivos de modelo (« Arquivos principais ») são a parte mais importante do seu modelo, porque seu cliente obterá esses arquivos após a compra do modelo.

« Arquivos principais » O arquivo ZIP é apenas um arquivo, que contém arquivos de modelo (pasta « Template ») e documentação (pasta « Documentation »).

Por exemplo, «Principal Arquivos» estrutura ZIP-archive para PSD-modelo deve ficar assim:

No caso de um template HTML, você deve colocar os arquivos do projeto na pasta « Template ».

No caso do WordPress-template, você deve renomear o arquivo ZIP como " WordPress Theme ".

No caso de documentação em HTML, você deve colocar todos os arquivos necessários na pasta « Documentation ».

Note que todo o conteúdo (fotos, ilustrações, etc.) é usado apenas para visualização e não deve ser incluído no pacote final que pode ser comprado.

1.4. Escolhendo categoria e atributos

Você deve encontrar a seção « Category & Attributes » na página de edição de templates para preencher os campos.

O campo mais importante aqui é « categoria ». Observe que, se você escolher a categoria errada, seu modelo não passará pelo processo de revisão.

Além disso, não se esqueça de colar um link para uma página de demonstração no campo " URL de demonstração ". A Themeforest não aprova modelos HTML e WordPress para venda sem ele.

O resto dos campos (« Navegadores Compatíveis », « Arquivos Incluídos », « Colunas », etc) você pode preencher a seu critério.

1.5. Adicionando tags

Você deve encontrar a seção « Tags » na página de edição de modelos para preencher o campo « Tag ».

Você deve prestar atenção a esse campo porque um cliente pode encontrar seu modelo com base nessas palavras-chave. Tags corretamente selecionadas podem ajudar a aumentar suas vendas.

Se você não souber como selecionar tags adequadamente, recomendamos que copie algumas delas de modelos de concorrentes.

1.6. Suporte a itens

Você deve encontrar a seção « Suportando seu item » na página de edição de modelos e responder à pergunta «O item será suportado? »

Observe que uma resposta positiva significa que você responderá às perguntas e ajudará seus clientes a personalizar seu modelo.

1.7. Selecionando um preço

Você deve encontrar a seção " Defina seu preço " na página de edição de modelos e defina o preço a seu próprio critério.

Ao escolher um preço, recomendamos que você comece a partir dos preços médios dos modelos de concorrentes.

1.8. Mensagem para o revisor

Você deve encontrar a seção « Mensagem para o Revisor » na página de edição de modelos e escrever algo como « Olá novamente! »No campo« Comentários ».

Além disso, não se esqueça de marcar a caixa de seleção sob o campo « Comentários ».

1.9. Carregar modelo

Basta encontrar e clicar no botão « Upload » no final da página de edição de modelos.

2. Processo de atualização

Existem dois tipos de atualizações de modelos: atualização de descrição e preço e atualização de arquivos e tags.

Você pode atualizar apenas a descrição e o preço e não atualizar arquivos de modelo. Nesse caso, todas as alterações serão aplicadas imediatamente.

Além disso, você pode atualizar apenas arquivos e tags e não atualizar a descrição ou o preço do modelo. Nesse caso, todas as alterações serão aplicadas após o processo de revisão.

Se você atualizar a descrição do modelo, o preço, os arquivos e as tags, as alterações de descrição e preço serão aplicadas imediatamente, enquanto as alterações de arquivos e tags serão aplicadas após o processo de revisão.

2.1. Modo de edição

Você deve encontrar e clicar na guia « Editar » abaixo da imagem « Visualizar » na página de modelo.

2.2. Descrição e atualização de preço

Você deve encontrar a seção " Atualizar descrição e preço " na página de atualização do modelo e alterar a descrição e o preço.

Depois disso, basta apertar o botão « Salvar alterações ».

2.3. Atualização de arquivos e tags

Você deve encontrar a seção " Atualizar descrição e preço " na página de atualização de modelos e alterar os arquivos de modelos e ou tags.

Depois disso, basta apertar o botão « Salvar alterações ». E não se esqueça de marcar a caixa de seleção " Notificar compradores ".

3. Excluindo processo

Atenção! Você não poderá restaurar o modelo após a exclusão.

3.1. Modo de edição

Você deve encontrar e clicar na guia « Editar » abaixo da imagem « Visualizar » na página de modelo.

3.2. Excluir modelo

Você deve encontrar a seção " Excluir o item " na página de atualização do modelo e escrever um breve comentário sobre a exclusão da razão.

Depois disso, aperte o botão « Excluir este item ».

Qual é o próximo?

Se você estiver interessado em como uma conta de autor típica se parece no Themeforest, você pode encontrá-la aqui ?.

Perfil da aspiração no ThemeForest
Somos a equipe sediada na Sibéria de profissionais dedicados que sonham em criar designs brilhantes e levar a web para o mais novo… themeforest.net
Modelos de aspiração
Modelos HTML modernos da Aspirity Team themes.aspirity.com

Texto original en inglés.