Comece aqui!
Se você acabou de adquirir o Academy Webflow Template e está procurando os princípios básicos para começar a criar o site do seu curso on-line, comece por aqui.
Primeiros passos
Obrigado por adquirir o modelo Academy Webflow. Neste breve guia, abordamos todos os fundamentos de como editar elementos básicos (ou seja, cores, fontes, conteúdo CMS etc.) do modelo de fluxo de web da Academy, além de explicar como começar a vender seus cursos on-line com a Academy.
Se você não estiver muito familiarizado com o Webflow, recomendamos que faça o curso intensivo Webflow 101 da Webflow University, pois ele ensinará todos os conceitos básicos para você começar a trabalhar.
Funcionalidade do modelo
Nesta seção, mostraremos duas opções para vender seus cursos on-line facilmente usando o modelo Academy Webflow. Nosso modelo é muito poderoso e versátil, portanto, você pode personalizá-lo para que funcione da maneira que desejar. No entanto, a seguir, compartilharemos com você duas maneiras simples de fazer isso, para que você não tenha nenhum problema.
1. somente Webflow (opção simples)
Se você não quiser complicar demais, nós o ajudamos. Usando o Webflow eCommerce, você pode vender seus cursos diretamente como downloads de arquivos ou usando nossa página da plataforma de cursos.
Opção A: Download de arquivos
Se quiser oferecer seu curso como um arquivo para download, você pode fazer isso facilmente ativando a opção de download no curso selecionado (no CMS de comércio eletrônico) e adicionando um link para download, como você pode ver na imagem abaixo.
Opção B: Plataforma do curso
Se, em vez de apenas fazer o download de um arquivo, você preferir oferecer aos seus alunos uma experiência de aprendizado on-line, poderá usar nossa página Plataforma de cursos.
Clone e personalize a página da plataforma do curso com seu conteúdo, vídeos, recursos e links da comunidade. Depois de concluída, publique a página selecionando a opção"Password Protection" (Proteção por senha). Depois de ativada, adicione qualquer código de senha que desejar.
Quando estiver pronto, basta criar um arquivo PDF simples que inclua o link de acesso à plataforma do curso e a senha (você pode ver esse arquivo no modelo da Academia, como exemplo). Depois de criado, basta adicioná-lo como um arquivo para download na opção Download do curso selecionado (no CMS de comércio eletrônico, conforme explicado acima).
Após a compra, os usuários receberão o arquivo com o link de acesso à página e a senha, e poderão acessar facilmente e assistir ao curso on-line de seu computador, tablet ou celular.
2. Webflow + Memberstack (opção avançada)
Se você deseja criar uma plataforma de cursos mais robusta, provavelmente incluindo assinaturas mensais ou anuais, ou qualquer outra funcionalidade complexa, o Memberstack é a opção que você procura.
O Memberstack oferece funcionalidades avançadas para criar assinaturas com facilidade (perfeito se você quiser oferecer muitos cursos em uma assinatura mensal) e também fornece um sistema de registro e login para levar facilmente a plataforma de cursos para o próximo nível.
Por padrão, não incluímos suporte para o Memberstack, pois os modelos de Webflow no Marketplace não podem incluir código personalizado ou integrações; no entanto, com conhecimento básico/intermediário do Webflow, seria muito fácil integrar o Memberstack para criar uma plataforma de curso on-line mais robusta (como os clientes anteriores do modelo de Webflow da Academy já fizeram).
Por outro lado, se você preferir contratar uma equipe incrível de designers e desenvolvedores especializados em Webflow para ajudá-lo a personalizar o Academy Webflow Template de acordo com suas necessidades comerciais, sinta-se à vontade para entrar em contato conosco. A grande equipe por trás do Academy Webflow Template estará pronta para ajudá-lo.
Design e conteúdo do modelo
Nesta outra seção, abordaremos todos os conceitos básicos sobre como editar o estilo visual do modelo, atualizar o conteúdo e muito mais.
Estilo
Vamos começar com o estilo do modelo.
Cores
O modelo da Academia foi criado usando amostras de cores, o que significa que você pode editar facilmente uma amostra de cor para ser atualizada em todo o site.
Para fazer isso, basta acessar a guia Style (Estilo) na barra lateral direita e, em seguida, rolar até Colors (Cores) na seção Typography (Tipografia) e, se você clicar na cor, poderá ver todas as amostras de cores e editá-las para que sejam atualizadas em todo o site para qualquer cor necessária.
Fontes
O modelo Academy usa uma única fonte em toda a extensão e ela é configurada no seletor Body (All Pages), o que significa que você pode atualizar facilmente a fonte em todo o site com um clique.
Em qualquer página, basta clicar na opção de seleção laranja no canto superior direito da guia Style (Estilo) e selecionar Body (All Pages) (Corpo (Todas as páginas)). Depois disso, vá para a seção Typography (Tipografia ) abaixo e altere a fonte para qualquer fonte da marca da sua empresa.
Caso precise de uma fonte personalizada ou premium que não esteja disponível no Webflow, você sempre poderá ir para Configurações do projeto > Fontes e poderá fazer upload de fontes personalizadas ou conectar sua conta do Adobe Fonts.
Gráficos e ícones
Alguns ícones ou gráficos no modelo são imagens/gráficos normais, portanto, você perceberá que, ao atualizar todas as cores, eles ainda terão a cor do modelo.
Isso acontece porque esses gráficos são imagens (PNG, JPG, SVG, etc.), portanto, a atualização do CSS (estilo) do Webflow não os afetará. Se quiser reutilizar esses gráficos, você sempre poderá baixá-los e editá-los usando qualquer software de design (ou seja, Photoshop, Illustrator, Sketch, Figma etc.) ou carregar diretamente suas próprias imagens/gráficos que correspondam à sua marca.
Edição de páginas
Agora é hora de continuar com as próximas etapas para editar as páginas do seu site. Normalmente, há dois tipos de conteúdo que serão editados, que são os seguintes.
Conteúdo estático
Conteúdo estático é todo o conteúdo que não é baseado em CMS, o que significa que não é dinâmico (como uma postagem de blog, por exemplo).
Você pode identificar facilmente todo esse conteúdo porque ele é mostrado em cinza no Navegador da barra lateral esquerda e apresenta uma borda azul quando você clica ou passa o mouse sobre ele.
Se quiser editar esse tipo de conteúdo, basta clicar duas vezes nele e você poderá digitar diretamente ali.
Sistema de gerenciamento de conteúdo dinâmico (CMS)
Conteúdo dinâmico é todo o conteúdo que é dinâmico e será gerado automaticamente com base no conteúdo adicionado na seção CMS na barra lateral esquerda (logo abaixo do ícone Páginas).
Você pode identificar facilmente tudo isso porque ele é mostrado em roxo no Navigator da barra lateral esquerda e apresenta uma borda roxa quando você clica ou passa o mouse sobre ele.
Esse conteúdo deve ser atualizado diretamente na seção CMS. O objetivo é facilitar muito a atualização, pois é muito provável que ele precise ser atualizado constantemente (por exemplo, adicionar uma nova postagem no blog).
Além disso, se quiser editar uma página completa do CMS gerada automaticamente (por exemplo, uma postagem de blog), você encontrará essa página disponível para edição na parte inferior de todas as páginas na seção Pages (Páginas) na barra lateral esquerda.
Produtos (comércio eletrônico)
Os produtos ou o conteúdo de comércio eletrônico funcionam de forma semelhante ao conteúdo dinâmico do CMS, mas são voltados exclusivamente para produtos de comércio eletrônico.
Você pode identificar o conteúdo de comércio eletrônico de forma semelhante ao conteúdo do CMS, pois ele também é mostrado em roxo no Navegador da barra lateral esquerda, bem como com uma borda roxa quando você clica ou passa o mouse sobre ele.
Esse conteúdo deve ser atualizado diretamente na guia eCommerce na barra lateral esquerda. O objetivo é facilitar a atualização, pois é muito provável que ele precise ser atualizado constantemente (por exemplo, alterar o preço de um produto ou adicionar mais estoque).
Além disso, se quiser editar a página de comércio eletrônico do produto gerado automaticamente, você encontrará essa página disponível para edição quase na parte inferior de todas as páginas, logo acima das páginas de coleção do CMS.
Notas úteis
Além da explicação básica principal que compartilhamos acima, aqui compartilhamos algumas dicas e instruções que são as perguntas mais comuns que recebemos.
Interações
Se quiser editar qualquer Interação de modelo (ou seja, remover um efeito de aparência), você poderá identificar facilmente os elementos que têm interações, pois eles têm um pequeno ícone de Interações (um pequeno trovão) no Navegador da barra lateral esquerda.
Se você clicar nesse pequeno ícone de Interações, abrirá a guia Interações da barra lateral direita para esse elemento, onde poderá editar a interação.
Visualização em celular ou tablet
Sempre que fizer uma alteração (por exemplo, criar um novo design de seção), é uma boa prática acessar a navegação superior da Viewport e ver como ela fica no Tablet e no Celular.
Se você apenas editar uma seção do modelo com texto ou imagens atualizados e não apagar nenhuma classe do modelo, isso não será necessário. No entanto, se você personalizar o modelo mais profundamente, editar classes ou criar novas seções, é sempre bom editar constantemente as visualizações em celulares e tablets para garantir que tudo esteja perfeito.
Edição de meta-título, descrição e imagem em destaque
Se quiser personalizar o título, a descrição e a imagem que são exibidos quando você compartilha seu site em qualquer lugar (ou seja, Facebook, Twitter etc.), você pode facilmente ir para a seção Páginas na barra lateral esquerda, clicar no pequeno ícone Configurações da página que deseja personalizar e todas essas configurações serão exibidas.
Observe que é importante alterar isso em uma base de página.
Backups
Se algo der errado, por exemplo, se você não estiver gostando do rumo que o site está tomando, se tiver excluído algumas classes essenciais que eram necessárias para que o modelo ficasse bonito ou se quiser simplesmente voltar a uma versão anterior por qualquer motivo, sempre poderá acessar a seção Backups.
Você pode encontrá-lo na seção Configurações, na barra lateral esquerda, e então poderá ver todos os backups automáticos ou manuais. A restauração do backup antigo está a apenas um clique de distância.
Suporte ao modelo do Webflow da Academia
Como você pode ver acima, o Academy foi criado no Webflow usando as práticas recomendadas para facilitar a edição do modelo e personalizá-lo de acordo com suas necessidades.
No entanto, se você encontrar algum problema, precisar de ajuda ou apenas quiser dar um oi, fique à vontade para nos enviar um e-mail para academy@brixtemplates.com. Teremos prazer em ajudá-lo.
Design e desenvolvimento personalizados
Por outro lado, se estiver procurando ajuda para projetar e desenvolver uma versão personalizada do modelo de Webflow da Academy, fique à vontade para entrar em contato com a nossa Agência de Webflow.
