Comece aqui
Se acabou de adquirir o Web3 X Webflow Ecommerce Template e está à procura do básico sobre como começar a editá-lo, comece aqui.
Começar
Obrigado por comprar o modelo Web3 X. Neste breve guia cobrimos todas as bases sobre como editar elementos básicos (isto é, cores, fontes, conteúdo CMS, etc.) a partir do modelo Web3 X Webflow.
Se não estiver muito familiarizado com Webflow, recomendamos-lhe vivamente que faça o Curso Webflow 101 Crash da Universidade Webflow, pois ensinar-lhe-á todas as noções básicas para se pôr a funcionar.
Styling
Vamos começar com o estilo do modelo.
Cores
O modelo Web3 X é construído utilizando Color Swatches, o que significa que pode facilmente editar um swatch de cores para ser actualizado em todo o site.
Para o fazer, basta ir ao separador Estilo na barra lateral direita, depois rolar para Cores na secção Tipografia, e se clicar na cor, poderá ver todas as amostras de cor e editá-las para serem actualizadas em todo o site para qualquer cor necessária.
Fontes
O modelo Web3 X utiliza uma única fonte lateral, e é configurado no selector Body (All Pages), o que significa que pode facilmente actualizar a fonte em todo o site com um clique.
Em qualquer página, basta clicar na opção do selector laranja no canto superior direito do separador Estilo, e depois seleccionar Corpo (Todas as Páginas). Uma vez com isto, pode ir à secção Tipografia abaixo e mudar a fonte para qualquer fonte da sua marca comercial.
Caso necessite de uma fonte personalizada ou premium que não esteja disponível no Webflow, pode sempre ir a Project Settings > Fonts e poderá carregar fontes personalizadas, ou ligar a sua conta Adobe Fonts.
Gráficos e Ícones
Alguns ícones ou gráficos no modelo são imagens/gráficos normais, pelo que notará que ao actualizar todas as cores, estas ainda terão a cor do modelo.
Isto acontece porque estes gráficos são imagens (PNG, JPG, SVG, etc.), pelo que a actualização do CSS (styling) do fluxo Web não os afectará. Se quiser reutilizar estes gráficos, pode sempre descarregá-los e editá-los utilizando qualquer software de desenho (ou seja, Photoshop, Illustrator, Sketch, Figma, etc), ou carregar directamente as suas próprias imagens/gráficas que correspondam à sua marca.
Páginas de edição
Agora é tempo de continuar com os próximos passos para editar as páginas do seu sítio web. Normalmente há 2 tipos de conteúdos que serão editados, que são os seguintes.
Páginas estáticas
Conteúdo estático é todo o conteúdo que não é baseado em CMS, o que significa que não é dinâmico (como um Blog Post, por exemplo).
Pode identificar facilmente todo este conteúdo porque é mostrado como cinza na barra lateral esquerda Navigator, e mostra uma borda azul quando se clica ou pausa sobre ele.
Se quiser editar este tipo de conteúdo, basta fazer duplo clique, e poderá escrever directamente ali mesmo.
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 secção CMS na barra lateral esquerda (logo abaixo do ícone Páginas).
Pode facilmente identificar tudo isto porque é mostrado como roxo na barra lateral esquerda do Navigator, e mostra uma margem roxa quando se clica ou se flutua sobre ela.
Este conteúdo deve ser actualizado directamente na secção do CMS. Isto destina-se a facilitar muito a sua actualização, pois é muito provável que precise de ser constantemente actualizado (por exemplo, adicionar um novo post no blogue)
Além disso, se quiser editar uma página CMS completa gerada automaticamente (por exemplo, um Blog Post), encontrará esta página disponível para edição na parte inferior de todas as páginas na secção Páginas, na barra lateral esquerda.
Produtos (eCommerce)
Os produtos ou conteúdos de eCommerce funcionam de forma semelhante ao conteúdo dinâmico do CMS, no entanto, este é focalizado exclusivamente para produtos de eCommerce.
É possível identificar o conteúdo do eCommerce de forma semelhante ao conteúdo do CMS, porque também é mostrado como roxo na barra lateral esquerda Navigator, bem como com uma margem roxa quando se clica ou se flutua sobre ele.
Este conteúdo deve ser actualizado directamente no separador do comércio electrónico na barra lateral esquerda. Isto destina-se a facilitar muito a sua actualização, pois é muito provável que tenha de ser constantemente actualizado (por exemplo, alterar o preço de um produto, ou adicionar mais stock).
Além disso, se quiser editar a página de comércio electrónico de produtos auto-gerados, encontrará esta página disponível para edição quase na parte inferior de todas as páginas logo acima das páginas de colecção do CMS.
Notas úteis
Para além da principal explicação básica que partilhámos acima, aqui partilhamos algumas dicas e como fazê-lo, que são das perguntas mais comuns que recebemos.
Interacções
Se desejar editar qualquer modelo de Interacção (isto é, remover um efeito de aparência), pode facilmente identificar elementos que tenham interacções uma vez que estes têm um pequeno ícone de Interacções (um pequeno trovão) na barra lateral esquerda do Navegador.
Se clicar neste pequeno ícone de Interacções, abrirá o separador Interacções da barra lateral direita para este elemento, onde poderá editar a interacção.
Vista móvel ou de mesa
Sempre que faz uma mudança (por exemplo, cria um novo design de secção), é uma boa prática ir ao topo do seu Viewport e ver como fica no Tablet e Mobile.
Se editar apenas uma secção Template com texto ou imagens actualizadas e não apagar nenhuma classe Template, isto não deve ser necessário, no entanto, se personalizar mais profundamente o template, editar classes, ou criar novas secções, é sempre bom editar constantemente as suas vistas de telemóvel e tablet para assegurar que tudo está com um aspecto perfeito.
Edição de Meta Title, Desc e Imagem em Destaque
Se quiser personalizar o Título, Descrição e Imagem que é mostrado quando partilha o seu website em qualquer lugar (ou seja, Facebook, Twitter, etc.), pode facilmente ir à secção Páginas na barra lateral esquerda, clicar no pequeno ícone Definições da página que gostaria de personalizar, e todas estas definições aparecerão.
É importante alterar isto com base na página.
Cópias de segurança
Se algo correr mal, por exemplo, se não estiver a gostar para onde vai o website, se apagou algumas classes críticas que eram necessárias para fazer o Template parecer agradável, ou se apenas quiser ir a uma versão anterior por qualquer razão, pode sempre ir à secção de Backups.
Pode encontrá-lo na secção Definições na barra lateral esquerda, e depois pode simplesmente ver todas as cópias de segurança automáticas ou manuais. Restaurar para a antiga cópia de segurança está apenas a um clique de distância.
Web3 X Suporte de Modelo de Fluxo Web
Como pôde ver acima, a Web3 X foi construída sobre Webflow utilizando as melhores práticas para lhe facilitar muito a edição do modelo e personalizá-lo de acordo com as suas necessidades.
No entanto, se encontrar algum problema, precisar de ajuda ou apenas quiser dizer olá, não hesite em enviar-nos um e-mail para [email protected] - Teremos todo o gosto em ajudá-lo.
Desenho e desenvolvimento à medida
Por outro lado, se estiver à procura de ajuda para construir uma versão única e personalizada do Web3 X, ou apenas de um incrível website concebido & desenvolvido de raiz na Webflow, sinta-se à vontade para entrar em contacto com a nossa Agência de Design & Desenvolvimento Webflow. A espantosa equipa por detrás do Web3 X Webflow Template pode ajudá-lo.
Perguntas Mais Frequentes
Como posso obter mais ícones para o modelo?
Procura uma família de ícones mais ampla para usar neste modelo de fluxo Web? Dê uma vista de olhos às nossas Fontes de Ícones de Modelos BRIX e obtenha uma colecção de mais de 100 ícones para o seu modelo.
Vai libertar um modelo para X?
Tem uma ideia para outro modelo de fluxo Web que gostaria de ver ganhar vida? Envie-nos a sua ideia de modelo de fluxo Web e ganhe um preço especial se a seleccionarmos.