Comece aqui

Como Começar

Obrigado por adquirir o modelo Coin X. Neste breve guia, abordamos todas as bases sobre como editar elementos básicos (isto é, cores, fontes, conteúdo CMS, etc.) do modelo Coin X Webflow.

Se você não estiver muito familiarizado com o Webflow, recomendamos que faça o Curso Webflow 101 Crash da Universidade Webflow, pois ele lhe ensinará todas as bases para se colocar em funcionamento.

Styling

Vamos começar com o estilo do modelo.

Cores

O modelo Coin X é construído usando Color Swatches, o que significa que você pode editar facilmente um swatch de cores para ser atualizado em todo o site.

Para fazer isso, basta ir até a guia Estilo na barra lateral direita, depois rolar até Cores na seção Tipografia, e se clicar na cor, você poderá ver todas as amostras de cores e editá-las para serem atualizadas em todo o site para qualquer cor necessária.

Fontes

O modelo Coin X usa uma única fonte lateral, e é configurado no seletor Body (All Pages), então isto significa que você pode atualizar facilmente a fonte em todo o site em um clique.

Em qualquer página, basta clicar na opção do seletor laranja na parte superior direita da aba Estilo, e então selecionar Corpo (Todas as Páginas). Uma vez com isto, você pode ir à seção de Tipografia abaixo e mudar a fonte para qualquer fonte de sua marca comercial.

Caso você precise de uma fonte personalizada ou premium que não esteja disponível no Webflow, você pode sempre ir a Project Settings > Fonts e poderá fazer o upload de fontes personalizadas, ou conectar sua conta Adobe Fonts.

Gráficos e Ícones

Alguns ícones ou gráficos no modelo são imagens/gráficas normais, então você notará que ao atualizar todas as cores, estas ainda terão a cor do modelo.

Isto acontece porque estes gráficos são imagens (PNG, JPG, SVG, etc.), portanto a atualização do Webflow CSS (estilo) não os afetará. Se você quiser reutilizar estes gráficos, sempre poderá baixá-los e editá-los usando qualquer software de desenho (por exemplo, Photoshop, Illustrator, Sketch, Figma, etc.), ou carregar diretamente suas próprias imagens/gráficas que correspondam à sua marca.

Páginas de edição

Agora é hora de continuar com os próximos passos para editar as páginas de seu site. Normalmente há 2 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 um Blog Post, por exemplo).

Você pode identificar facilmente todo este conteúdo porque é mostrado como cinza na barra lateral esquerda Navigator, e mostra uma borda azul quando você clica ou paira sobre ele.

Se você quiser editar este tipo de conteúdo, basta clicar duas vezes, e você poderá digitar diretamente 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 seção CMS na barra lateral esquerda (logo abaixo do ícone Páginas).

Você pode facilmente identificar tudo isso porque é mostrado como roxo na barra lateral esquerda do Navigator, e mostra uma borda roxa quando você clica ou passa o mouse sobre ela.

Este conteúdo deve ser atualizado diretamente na seção CMS. Isto é para facilitar muito a sua atualização, pois é muito provável que precise ser constantemente atualizado (por exemplo, adicionando um novo post no blog).

Além disso, se você quiser editar uma página CMS completa gerada automaticamente (por exemplo, um Blog Post), você encontrará esta página disponível para edição na parte inferior de todas as páginas na seção Páginas, na barra lateral esquerda.

Produtos (eCommerce)

Os produtos ou conteúdo de eCommerce funcionam de forma semelhante ao conteúdo dinâmico do CMS, no entanto, este é focado exclusivamente para produtos de eCommerce.

Você pode identificar o conteúdo do eCommerce de maneira semelhante ao conteúdo do CMS, porque também é mostrado como roxo na barra lateral esquerda Navigator, bem como com uma borda roxa quando você clica ou passa o mouse sobre ele.

Este conteúdo deve ser atualizado diretamente na guia eCommerce, na barra lateral esquerda. Isto é para facilitar muito a sua atualização, pois é muito provável que precise ser constantemente atualizado (por exemplo, alterar o preço de um produto, ou adicionar mais estoque).

Além disso, se você quiser editar a página de comércio eletrônico de produtos autogerados, você encontrará esta 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 principal explicação básica que compartilhamos acima, aqui compartilhamos algumas dicas e como fazê-lo, que são das perguntas mais comuns que recebemos.

Interações

Se você gostaria de editar qualquer modelo de Interação (ou seja, remover um efeito de aparência), você pode facilmente identificar elementos que tenham interações, pois estes têm um pequeno ícone de Interação (um pequeno trovão) na barra lateral esquerda do Navegador.

Se você clicar neste pequeno ícone de interações, você abrirá a aba direita de interações laterais para este elemento, onde você poderá editar a interação.

Vista móvel ou de mesa

Toda vez que você faz uma mudança (por exemplo, você cria um novo design de seção), é uma boa prática ir até seu Viewport top de navegação e ver como ele fica em Tablet e Mobile.

Se você editar apenas uma seção Template com texto ou imagens atualizadas e não apagar nenhuma classe Template, isto não deve ser necessário, entretanto, se você personalizar o template mais profundamente, editar classes, ou criar novas seções, é sempre bom editar constantemente suas visualizações de celular e tablet para garantir que tudo esteja perfeito.

Edição do Meta Title, Desc e Imagem em Destaque

Se você gostaria de personalizar o Título, Descrição e Imagem que é mostrado quando você compartilha seu website em qualquer lugar (ou seja, Facebook, Twitter, etc), você pode facilmente ir para a seção Páginas na barra lateral esquerda, clique no pequeno ícone Configurações da página que você gostaria de personalizar, e todas estas configurações aparecerão.

Por favor, note que é importante mudar isto com base na página.

Cópias de segurança

Se algo der errado, por exemplo, se você não estiver gostando para onde o site vai, se você excluiu algumas classes críticas que eram necessárias para fazer o Template parecer bonito, ou se você só quer ir para uma versão anterior por qualquer motivo, você sempre pode ir para a seção de Backups.

Você pode encontrá-lo na seção Configurações na barra lateral esquerda, e então você pode ver todos os backups automáticos ou manuais. A restauração para o backup antigo está a apenas um clique de distância.

Suporte de modelo de fluxo web Moeda X

Como você pode ver acima, a Coin X foi construída sobre Webflow usando as melhores práticas 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 dizer oi, fique à vontade para nos enviar um e-mail para [email protected] - Teremos o maior prazer em ajudá-lo.

Projeto e desenvolvimento sob medida

Por outro lado, se você está procurando ajuda para construir uma versão única e personalizada da Coin X, ou apenas um incrível website projetado e desenvolvido do zero na Webflow, sinta-se à vontade para entrar em contato com nossa Agência de Design e Desenvolvimento Webflow. A incrível equipe por trás do Template Coin X Webflow pode ajudá-lo.